swap out @next/mdx for next-mdx-remote

app/(stories)/stories/[storySlug]/page.tsx

@@ -0,0 +1,38 @@
+import { compileMDX } from 'next-mdx-remote/rsc';
+import { promises as fs } from 'fs';
+import path from 'path';
+import { Container } from '@/components/Container';
+import { Heading } from '@/components/Typography';
+
+// Generate static parameters (slugs) for each story
+export async function generateStaticParams() {
+  const filenames = await fs.readdir(path.join(process.cwd(), '/stories'));
+  return filenames.map((filename) => ({
+    storySlug: filename.replace('.mdx', ''),
+  }));
+}
+
+export default async function ProjectPage({ params }: { params: { storySlug: string } }) {
+  const content = await fs.readFile(path.join(process.cwd(), '/stories', `${params.storySlug}.mdx`), 'utf-8');
+
+  interface Frontmatter {
+    title: string;
+  }
+
+  const data = await compileMDX<Frontmatter>({
+    source: content,
+    options: {
+      parseFrontmatter: true,
+    },
+    components: {
+      // Add components here
+      Heading,
+    },
+  });
+
+  return (
+    <Container className="mt-10">
+      {data.content}
+    </Container>
+  );
+}

app/(stories)/stories/page.tsx

@@ -0,0 +1,54 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import Link from 'next/link';
+import { compileMDX } from 'next-mdx-remote/rsc';
+import { Container } from '@/components/Container';
+import { useId } from 'react';
+
+export const metadata = {
+  title: 'Stories',
+  description: 'Lorem ipsum pellentesque ut neque. In consectetuer turpis ut velit. Aenean massa.',
+};
+
+export default async function generateStaticParams() {
+  const filenames = await fs.readdir(path.join(process.cwd(), '/stories'));
+  const id = useId;
+
+  interface Frontmatter {
+    title: string;
+  }
+
+  const stories = await Promise.all(filenames.map(async (filename) => {
+    const content = await fs.readFile(path.join(process.cwd(), '/stories', filename), 'utf-8');
+    const { frontmatter } = await compileMDX<Frontmatter>({
+      source: content,
+      options: {
+        parseFrontmatter: true,
+      },
+    });
+    return {
+      filename,
+      slug: filename.replace('.mdx', ''),
+      ...frontmatter,
+    };
+  }));
+
+  console.log('stories', stories);
+
+  return (
+      <Container>
+        <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-6 sm:mb-10 md:mb-16">
+          Impact Stories
+        </h1>
+          <ul>
+            {stories.map(({ filename, slug }) => {
+              return (
+                <li key={id}>
+                  <Link href={`/stories/${slug}`}>{ filename }</Link>
+                </li>
+              );
+            })}
+          </ul>
+      </Container>
+  );
+}

app/layout.tsx

@@ -2,7 +2,6 @@ import './globals.css';
 import localFont from 'next/font/local';
 import { Source_Sans_3, DM_Sans } from 'next/font/google';
 import { cnb } from 'cnbuilder';
-import CustomMDXProvider from './MDXProvider';
 
 const dm_sans = DM_Sans({
   subsets: ['latin'],
@@ -38,9 +37,7 @@ export default function RootLayout({
           stanford.variable,
         )}
       >
-        <CustomMDXProvider>
-          {children}
-        </CustomMDXProvider>
+        {children}
       </body>
     </html>
   );

next.config.mjs

@@ -1,20 +1,11 @@
-import remarkGfm from 'remark-gfm';
-import createMDX from '@next/mdx';
-
 /** @type {import('next').NextConfig} */
+
 const nextConfig = {
-  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
   basePath: '/soe-centennial-nextjs',
   output: 'export', 
   reactStrictMode: true,
 };
 
-const withMDX = createMDX({
-  options: {
-    remarkPlugins: [remarkGfm],
-    rehypePlugins: [],
-  },
-});
 
-export default withMDX(nextConfig);
+export default nextConfig;