From 60564f441230190c89346be6d11e8b7cc6dd84df Mon Sep 17 00:00:00 2001
From: Krishna Ayyalasomayajula <krishna@ayyalasomayajula.net>
Date: Mon, 1 Jun 2026 19:47:35 -0500
Subject: [PATCH] feat: add individual post page with MDXRemote rendering

---
 app/posts/[slug]/page.tsx | 50 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 app/posts/[slug]/page.tsx

diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
new file mode 100644
index 0000000..69eff1d
--- /dev/null
+++ b/app/posts/[slug]/page.tsx
@@ -0,0 +1,50 @@
+import { notFound } from 'next/navigation'
+import { MDXRemote } from 'next-mdx-remote/rsc'
+import { getPosts, getPost, getReadingTime } from '@/lib/posts'
+import { TableOfContents } from '@/components/blog/TableOfContents'
+
+export async function generateStaticParams() {
+  const posts = await getPosts()
+  if (posts.length === 0) {
+    return [{ slug: '__placeholder__' }]
+  }
+  return posts.map((post) => ({ slug: post.slug }))
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
+  const slug = (await params).slug
+  const post = await getPost(slug)
+  if (!post) return { title: 'Not Found' }
+  return { title: `${post.title} | blog` }
+}
+
+export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
+  const slug = (await params).slug
+  const post = await getPost(slug)
+
+  if (!post) notFound()
+
+  return (
+    <div className="max-w-4xl mx-auto px-6 py-16">
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_200px] gap-8">
+        <article>
+          <header className="mb-12">
+            <time className="font-mono text-sm text-ink-soft">{post.date}</time>
+            <h1 className="font-sans text-4xl font-extrabold tracking-tight lg:text-5xl mt-3 mb-2 text-ink">
+              {post.title}
+            </h1>
+            <p className="font-mono text-xs text-ink-soft">
+              {getReadingTime(post.title)} min read
+            </p>
+          </header>
+          <div className="prose prose-lg max-w-none">
+            <MDXRemote source={post.source} />
+          </div>
+        </article>
+        <aside className="hidden lg:block">
+          <TableOfContents />
+        </aside>
+      </div>
+    </div>
+  )
+}