initial commit

app/blog/[slug]/page.tsx

@@ -0,0 +1,73 @@
+import { Navigation } from "@/components/navigation";
+import { getBlogPosts, getBlogPost } from "@/lib/content";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+interface BlogPostPageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateStaticParams() {
+  const posts = getBlogPosts();
+  return posts.map((post) => ({
+    slug: post.slug,
+  }));
+}
+
+export async function generateMetadata({
+  params,
+}: BlogPostPageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const post = getBlogPost(slug);
+
+  if (!post) {
+    return {
+      title: "Post Not Found",
+    };
+  }
+
+  return {
+    title: `${post.title}`,
+    description: post.excerpt,
+  };
+}
+
+export default async function BlogPostPage({ params }: BlogPostPageProps) {
+  const { slug } = await params;
+  const post = getBlogPost(slug);
+
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <div className="min-h-screen">
+      <Navigation />
+      <main className="container mx-auto px-6 py-16 max-w-3xl">
+        <article>
+          <header className="mb-10">
+            <time className="text-sm text-muted-foreground">
+              {new Date(post.date).toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              })}
+            </time>
+            <h1 className="text-4xl font-bold text-foreground mt-3 mb-4">
+              {post.title}
+            </h1>
+            <p className="text-lg text-muted-foreground">{post.excerpt}</p>
+          </header>
+
+          <div className="prose prose-invert prose-lg max-w-none">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              {post.content}
+            </ReactMarkdown>
+          </div>
+        </article>
+      </main>
+    </div>
+  );
+}

app/blog/page.tsx

@@ -0,0 +1,33 @@
+import { Navigation } from "@/components/navigation";
+import { BlogCard } from "@/components/blog-card";
+import { getBlogPosts } from "@/lib/content";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Blog",
+  description: "Read my latest blog posts about web development",
+};
+
+export default function BlogPage() {
+  const posts = getBlogPosts();
+
+  return (
+    <div className="min-h-screen">
+      <Navigation />
+      <main className="container mx-auto px-6 py-16 max-w-4xl">
+        <div className="mb-16">
+          <h1 className="text-4xl font-bold text-foreground mb-4">Blog</h1>
+          <p className="text-lg text-muted-foreground">
+            Thoughts, tutorials, and insights about web development
+          </p>
+        </div>
+
+        <div className="grid gap-12">
+          {posts.map((post) => (
+            <BlogCard key={post.slug} post={post} />
+          ))}
+        </div>
+      </main>
+    </div>
+  );
+}