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 )}