2 files changed, 62 insertions, 0 deletions
diff --git a/src/routes/posts/[slug]/+page.svelte b/src/routes/posts/[slug]/+page.svelte
new file mode 100644
index 0000000..2a57168
--- /dev/null
+++ b/src/routes/posts/[slug]/+page.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+	import Giscus from "$lib/components/Giscus.svelte";
+
+	let { data }: { data: PageData } = $props();
+
+	function formatDate(dateStr: string): string {
+		return new Date(dateStr).toLocaleDateString("en-US", {
+			year: "numeric",
+			month: "long",
+			day: "numeric",
+		});
+	}
+</script>
+
+<svelte:head>
+	<title>{data.metadata.title} | My Blog</title>
+	<meta name="description" content={data.metadata.description} />
+</svelte:head>
+
+<article>
+	<header>
+		<h1>{data.metadata.title}</h1>
+		<p>
+			<time datetime={data.metadata.date}
+				>{formatDate(data.metadata.date)}</time
+			>
+		</p>
+	</header>
+
+	<data.content />
+</article>
+
+<Giscus />
+
+<a href="/">← Back to all posts</a>
diff --git a/src/routes/posts/[slug]/+page.ts b/src/routes/posts/[slug]/+page.ts
new file mode 100644
index 0000000..d0776db
--- /dev/null
+++ b/src/routes/posts/[slug]/+page.ts
@@ -0,0 +1,26 @@
+import { getPost, getPosts } from '$lib/utils/posts';
+import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const prerender = true;
+
+// Generate all post routes at build time
+export function entries() {
+    const posts = getPosts();
+    return posts.map((post) => ({ slug: post.slug }));
+}
+
+export const load: PageLoad = async ({ params }) => {
+    const slug = params.slug;
+    const post = getPost(slug);
+
+    if (!post) {
+        error(404, `Post not found: ${slug}`);
+    }
+
+    return {
+        content: post.default,
+        metadata: post.metadata,
+        slug
+    };
+};