anchor links in log

Author: andnorda

src/routes/(pages)/log/+page.svelte

@@ -5,8 +5,8 @@
 	const { data }: { data: PageData } = $props();
 </script>
 
-{#each data.posts as { metadata, default: Post }}
-	<h2 class="heading">{metadata.title}</h2>
+{#each data.posts as { metadata, slug, default: Post }}
+	<h2 class="heading" id={slug}><a class="anchorLink" href="#{slug}">{metadata.title}</a></h2>
 	<p class="byline">{format(metadata.date, "MMMM d, yyyy")} by {metadata.author}</p>
 	<div class="post">
 		<Post />
@@ -22,4 +22,8 @@
 		font-style: italic;
 		font-size: 1rem;
 	}
+	.anchorLink {
+		color: inherit;
+		text-decoration: none;
+	}
 </style>

src/routes/(pages)/log/+page.ts

@@ -11,8 +11,11 @@ export async function load() {
 	}>("./posts/*.md", { eager: true });
 
 	return {
-		posts: Object.values(markdownFiles).sort(
-			(a, b) => new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime(),
-		),
+		posts: Object.entries(markdownFiles)
+			.map(([path, post]) => ({
+				slug: path.match(/([^\/]+)\.md$/)?.[1],
+				...post,
+			}))
+			.sort((a, b) => new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime()),
 	};
 }