app/posts/[slug]/page.tsx

@@ -2,8 +2,10 @@ import Link from "next/link";
 import { getPostData, getAllPostIds } from "@/lib/posts";
 import type { PostData } from "@/lib/posts";
 import Window from "../../../components/window";
+import TableOfContents from "../../../components/table-of-contents";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import rehypePrettyCode from "rehype-pretty-code";
+import rehypeSlug from "rehype-slug";
 
 interface PageProps {
   params: {
@@ -11,13 +13,11 @@ interface PageProps {
   };
 }
 
-// This function tells Next.js which blog posts exist at build time
 export async function generateStaticParams() {
   const paths = getAllPostIds();
   return paths.map((path) => ({ slug: path.params.slug }));
 }
 
-// Generates metadata (like the title tag) for each blog post page
 export async function generateMetadata({ params }: PageProps) {
   const postData = await getPostData(params.slug);
   return {
@@ -26,12 +26,11 @@ export async function generateMetadata({ params }: PageProps) {
 }
 
 export default async function Post({ params }: PageProps) {
-  // Fetch the specific post's content based on the URL slug
   const postData: PostData = await getPostData(params.slug);
 
   return (
-    <div className="mx-auto max-w-4xl">
-      <Window title={postData.title}>
+    <div className="mx-auto max-w-5xl">
+      <Window title={postData.title} showProgress>
         <article>
           <div className="mb-4 text-gray-500 flex flex-col gap-1">
             <span>
@@ -41,16 +40,31 @@ export default async function Post({ params }: PageProps) {
                 day: "numeric",
               })}
             </span>
-            <span className="text-sm text-gray-400">
-              {postData.readingTime}
-            </span>
+            <span className="text-sm text-gray-400">{postData.readingTime}</span>
           </div>
-          <div className="prose lg:prose-xl max-w-none">
+
+          {postData.wip && (
+            <div className="mb-6 flex items-center gap-3 rounded-lg border border-amber-300 bg-amber-50/70 px-4 py-3 text-sm text-amber-800">
+              <span className="text-lg">🚧</span>
+              <span>This post is a work in progress — content may change.</span>
+            </div>
+          )}
+
+          {/* Mobile TOC — shown above article, hidden on lg+ */}
+          {postData.headings.length > 0 && (
+            <div className="lg:hidden mb-6">
+              <TableOfContents headings={postData.headings} />
+            </div>
+          )}
+
+          <div className="lg:flex lg:gap-8 lg:items-start">
+            <div className="prose lg:prose-lg max-w-none flex-1 min-w-0">
               <MDXRemote
                 source={postData.content}
                 options={{
                   mdxOptions: {
                     rehypePlugins: [
+                      rehypeSlug,
                       [
                         rehypePrettyCode,
                         {
@@ -63,8 +77,17 @@ export default async function Post({ params }: PageProps) {
                 }}
               />
             </div>
+
+            {/* Desktop TOC sidebar — hidden on mobile */}
+            {postData.headings.length > 0 && (
+              <div className="hidden lg:block w-52 flex-shrink-0">
+                <TableOfContents headings={postData.headings} />
+              </div>
+            )}
+          </div>
         </article>
       </Window>
+
       <div className="mt-8 text-center">
         <Link
           href="/"