MDX Starter (#3)

Reviewed-on: mthomson/michaelthomson#3
Co-authored-by: Michael Thomson <michael@michaelthomson.dev>
Co-committed-by: Michael Thomson <michael@michaelthomson.dev>

app/blog/[slug]/page.tsx

@@ -0,0 +1,17 @@
+import { getAllPosts, getPostBySlug } from "@/lib/posts";
+import { MDXRemote } from 'next-mdx-remote/rsc'
+
+export async function generateStaticParams() {
+  const posts = getAllPosts(["slug"]);
+  return posts.map((post) => ({ slug: post.slug }));
+}
+
+export default async function Page({ params }: { params: { slug: string } }) {
+  const post = getPostBySlug(params.slug, ["title", "content"]);
+  return (
+    <MDXRemote
+      source={post.content}
+    />
+  )
+
+}

app/globals.css

@@ -1,27 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}

app/layout.tsx

@@ -5,8 +5,8 @@ import './globals.css'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Michael Thomson',
+  description: '',
 }
 
 export default function RootLayout({

app/page.tsx

@@ -1,7 +1,17 @@
+import { getAllPosts } from "@/lib/posts"
+import Link from "next/link";
+
 export default function Home() {
+  const pages = getAllPosts(["title", "slug"]);
   return (
-    <main className="">
-      Yo
+    <main>
+      {pages.map(page => (
+        <Link href={`/blog/${page.slug}`} key={page.title}>
+          {page.title}
+        </Link>
+      ))}
     </main>
   )
 }
+
+