Initial commit

app/posts/[slug]/page.tsx

@@ -0,0 +1,68 @@
+import { getPostBySlug, getAllPosts } from "@/lib/api"
+import { notFound } from "next/navigation"
+import type { Metadata } from "next"
+import Link from "next/link"
+import { ArrowLeft } from "lucide-react"
+import { Suspense } from "react"
+import { MDXContent } from "@/components/mdx-content"
+
+export function generateStaticParams() {
+  const posts = getAllPosts()
+  return posts.map((post) => ({
+    slug: post.slug,
+  }))
+}
+
+export function generateMetadata({ params }: { params: { slug: string } }): Metadata {
+  const post = getPostBySlug(params.slug)
+
+  if (!post) {
+    return {
+      title: "Post Not Found",
+    }
+  }
+
+  return {
+    title: post.metadata.title,
+    description: post.metadata.excerpt,
+  }
+}
+
+export default function Post({ params }: { params: { slug: string } }) {
+  const post = getPostBySlug(params.slug)
+
+  if (!post) {
+    notFound()
+  }
+
+  return (
+    <article className="prose prose-invert max-w-none">
+      <Link
+        href="/"
+        className="inline-flex items-center text-muted-foreground hover:text-primary mb-8 no-underline transition-colors"
+      >
+        <ArrowLeft className="mr-2 h-4 w-4" />
+        Back to all posts
+      </Link>
+
+      <header className="mb-8">
+        <h1 className="text-4xl font-bold tracking-tight mb-2 bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">
+          {post.metadata.title}
+        </h1>
+        <time dateTime={post.metadata.date} className="text-muted-foreground">
+          {new Date(post.metadata.date).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          })}
+        </time>
+      </header>
+
+      <div className="post-content">
+        <Suspense fallback={<div>Loading content...</div>}>
+          <MDXContent content={post.content} />
+        </Suspense>
+      </div>
+    </article>
+  )
+}