Stage 7: Setup post page

app/blog/[...slug]/page.tsx

@@ -0,0 +1,41 @@
+import { posts } from "#site/content";
+import { MDXContent } from "@/components/mdx-components";
+import { notFound } from "next/navigation";
+
+interface PostPageProps {
+  params: {
+    slug: string[];
+  };
+}
+
+async function getPostFromParams(params: PostPageProps["params"]) {
+  const slug = params?.slug?.join("/");
+  const post = posts.find((post) => post.slugAsParams === slug);
+
+  return post;
+}
+
+export async function generateStaticParams(): Promise<
+  PostPageProps["params"][]
+> {
+  return posts.map((post) => ({ slug: post.slugAsParams.split("/") }));
+}
+
+export default async function PostPage({ params }: PostPageProps) {
+  const post = await getPostFromParams(params);
+
+  if (!post || !post.published) {
+    notFound();
+  }
+
+  return (
+    <article className="container py-6 prose dark:prose-invert max-w-3xl mx-auto">
+      <h1 className="mb 2">{post.title}</h1>
+      {post.description ? (
+        <p className="text-xl mt-0 text-muted-foreground">{post.description}</p>
+      ) : null}
+      <hr className="my-4" />
+      <MDXContent code={post.body} />
+    </article>
+  );
+}

components/mdx-components.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image";
+import * as runtime from "react/jsx-runtime";
+
+const useMDXComponent = (code: string) => {
+  const fn = new Function(code);
+  return fn({ ...runtime }).default;
+};
+
+const components = {
+  Image,
+};
+
+interface MdxProps {
+  code: string;
+}
+
+export function MDXContent({ code }: MdxProps) {
+  const Component = useMDXComponent(code);
+  return <Component components={components} />;
+}

package.json

@@ -23,6 +23,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.13",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

tailwind.config.ts

@@ -78,8 +78,7 @@ const config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 } satisfies Config;
 
 export default config;
-