Initial commit

app/blog/[slug]/page.tsx

@@ -0,0 +1,56 @@
+import { notFound } from 'next/navigation';
+import type { Metadata } from 'next';
+import { allPosts } from 'contentlayer/generated';
+import { getPostBySlug } from '@/lib/posts';
+
+export function generateStaticParams() {
+  return allPosts.map((post) => ({
+    slug: post.slug || post.flattenedPath
+  }));
+}
+
+interface Props {
+  params: { slug: string };
+}
+
+export function generateMetadata({ params }: Props): Metadata {
+  const slug = params.slug;
+  const post = getPostBySlug(slug);
+  if (!post) return {};
+
+  return {
+    title: post.title,
+    description: post.description || post.title
+  };
+}
+
+export default function BlogPostPage({ params }: Props) {
+  const slug = params.slug;
+  const post = getPostBySlug(slug);
+
+  if (!post) return notFound();
+
+  return (
+    <article className="prose dark:prose-invert max-w-none">
+      <h1>{post.title}</h1>
+      {post.published_at && (
+        <p className="text-xs text-gray-500">
+          {new Date(post.published_at).toLocaleDateString('zh-TW')}
+        </p>
+      )}
+      {post.tags && (
+        <p className="mt-1 text-xs">
+          {post.tags.map((t) => (
+            <span
+              key={t}
+              className="mr-1 rounded bg-gray-200 px-1 dark:bg-gray-800"
+            >
+              #{t}
+            </span>
+          ))}
+        </p>
+      )}
+      <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
+    </article>
+  );
+}

app/blog/page.tsx

@@ -0,0 +1,50 @@
+import Link from 'next/link';
+import { getAllPostsSorted } from '@/lib/posts';
+
+export const metadata = {
+  title: 'Blog'
+};
+
+export default function BlogIndexPage() {
+  const posts = getAllPostsSorted();
+
+  return (
+    <section className="space-y-6">
+      <h1 className="text-2xl font-bold">Blog</h1>
+      <ul className="space-y-3">
+        {posts.map((post) => (
+          <li key={post._id}>
+            <Link
+              href={post.url}
+              className="text-lg font-medium hover:underline"
+            >
+              {post.title}
+            </Link>
+            <div className="text-xs text-gray-500">
+              {post.published_at &&
+                new Date(post.published_at).toLocaleDateString('zh-TW')}
+              {post.tags && post.tags.length > 0 && (
+                <span className="ml-2">
+                  {post.tags.map((t) => (
+                    <span
+                      key={t}
+                      className="mr-1 rounded bg-gray-200 px-1 dark:bg-gray-800"
+                    >
+                      #{t}
+                    </span>
+                  ))}
+                </span>
+              )}
+            </div>
+            {post.description && (
+              <p className="mt-1 text-sm text-gray-600 dark:text-gray-300">
+                {post.description}
+              </p>
+            )}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+