/ src / components / notes / Backlinks.astro
Backlinks.astro
 1  ---
 2  import type { CollectionEntry } from "astro:content";
 3  import { getCollection } from "astro:content";
 4  
 5  interface Props {
 6  	note: CollectionEntry<"notes">;
 7  }
 8  
 9  const { note } = Astro.props;
10  
11  // Get all notes to resolve backlink titles
12  const allNotes = await getCollection("notes");
13  const noteMap = new Map(allNotes.map((n) => [n.id, n]));
14  
15  const backlinkNotes = note.data.backlinks
16  	.map((id) => noteMap.get(id))
17  	.filter((n): n is CollectionEntry<"notes"> => n !== undefined);
18  ---
19  
20  {backlinkNotes.length > 0 && (
21  	<aside class="mt-12 pt-8 border-t border-dashed border-pink-200">
22  		<h2 class="font-display text-lg font-semibold text-pink-950 mb-4">
23  			Linked from
24  		</h2>
25  		<ul class="space-y-3">
26  			{backlinkNotes.map((backlink) => (
27  				<li>
28  					<a
29  						href={`/notes/${backlink.id}`}
30  						class="group block p-3 rounded-lg border border-dashed border-pink-200 bg-white/40 hover:bg-white/60 transition-colors"
31  					>
32  						<span class="font-medium text-pink-950 group-hover:text-pink-700 transition-colors">
33  							{backlink.data.title}
34  						</span>
35  						{backlink.data.description && (
36  							<p class="text-sm text-pink-950/50 mt-1 line-clamp-2">
37  								{backlink.data.description}
38  							</p>
39  						)}
40  					</a>
41  				</li>
42  			))}
43  		</ul>
44  	</aside>
45  )}