slop

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

@@ -0,0 +1,40 @@
+import { notFound } from "next/navigation";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import { TRPCError } from "@trpc/server";
+import { servTrpc } from "~/app/_trpc/ServerClient";
+
+type Props = {
+  params: Promise<{ slug: string }>;
+};
+
+export default async function BlogPostPage({ params }: Props) {
+  const { slug } = await params;
+
+  let post: Awaited<ReturnType<typeof servTrpc.blog.bySlug>>;
+  try {
+    post = await servTrpc.blog.bySlug(slug);
+  } catch (e) {
+    if (e instanceof TRPCError && e.code === "NOT_FOUND") notFound();
+    throw e;
+  }
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-12">
+      <header className="mb-8">
+        <h1 className="text-3xl font-bold">{post.title}</h1>
+        {post.date && (
+          <time className="text-muted-foreground text-sm">
+            {new Date(post.date).toLocaleDateString("en-US", {
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            })}
+          </time>
+        )}
+      </header>
+      <article className="prose dark:prose-invert max-w-none">
+        <MDXRemote source={post.content} />
+      </article>
+    </main>
+  );
+}

src/app/blog/layout.tsx

@@ -1,10 +1,3 @@
-'use client'
-export default function RootLayout({
-  children,
-}: Readonly<{ children: React.ReactNode}>) {
-  return (
-    <>
-      {children}
-    </>
-  )
+export default function BlogLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
 }

src/app/blog/page.tsx

@@ -1,12 +1,37 @@
-'use client'
+import Link from "next/link";
+import { servTrpc } from "~/app/_trpc/ServerClient";
 
-import { usePathname } from "next/navigation"
+export default async function BlogPage() {
+  const posts = await servTrpc.blog.list();
 
-export default function Page() {
-  const pathName = usePathname()
   return (
-    <div>
-      {pathName}
-    </div>
-  )
+    <main className="mx-auto max-w-2xl px-4 py-12">
+      <h1 className="mb-8 text-3xl font-bold">Blog</h1>
+      {posts.length === 0 ? (
+        <p className="text-muted-foreground">No posts yet.</p>
+      ) : (
+        <ul className="space-y-6">
+          {posts.map((post) => (
+            <li key={post.slug}>
+              <Link href={`/blog/${post.slug}`} className="group block">
+                <h2 className="text-xl font-semibold group-hover:underline">{post.title}</h2>
+                {post.date && (
+                  <time className="text-muted-foreground text-sm">
+                    {new Date(post.date).toLocaleDateString("en-US", {
+                      year: "numeric",
+                      month: "long",
+                      day: "numeric",
+                    })}
+                  </time>
+                )}
+                {post.description && (
+                  <p className="text-muted-foreground mt-1">{post.description}</p>
+                )}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  );
 }