glob

package.json

@@ -24,6 +24,7 @@
     "caniuse-lite": "^1.0.30001649",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "glob": "^11.0.0",
     "lucide-react": "^0.263.1",
     "next": "^14.2.5",
     "next-themes": "^0.2.1",

public/b/test.md

@@ -0,0 +1,3 @@
+# Test
+
+hi there :)

public/p/tabnam.md

@@ -0,0 +1,7 @@
+# Tabnam
+
+this is the project we moved out to sf with.
+
+it was dynamic product feedback forms and feedback analysis with, get this, **AI**.
+
+tbf we've actually heard a surprising number of high quality founders have this exact idea as their first start up lol.

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

@@ -1,8 +1,17 @@
+import fs from 'fs';
+import path from 'path';
+import glob from 'glob';
+import { remark } from 'remark';
+import html from 'remark-html';
+
 export const dynamicParams = false;
 
 export function generateStaticParams() {
-  const projects = [{ slug: 'test' }, { slug: '8bit' }, { slug: 'reviewr' }, { slug: 'tabnam' }];
-  return projects;
+  const projectFiles = glob.sync('public/p/*.md');
+  return projectFiles.map((file) => {
+    const slug = path.basename(file, '.md');
+    return { slug };
+  });
 }
 
 interface ProjectPageProps {
@@ -11,11 +20,18 @@ interface ProjectPageProps {
   };
 }
 
-const Page = ({ params }: ProjectPageProps) => {
+const Page = async ({ params }: ProjectPageProps) => {
   const { slug } = params;
+  const filePath = path.join(process.cwd(), 'public', 'projects', `${slug}.md`);
+  const fileContent = fs.readFileSync(filePath, 'utf8');
+
+  const processedContent = await remark().use(html).process(fileContent);
+  const contentHtml = processedContent.toString();
+
   return (
     <div>
       <h2>{slug}</h2>
+      {contentHtml}
     </div>
   );
 };