added case-study slug framework

app/case-studies/[slug]/page.tsx

@@ -0,0 +1,32 @@
+// src/app/blog/[slug]/page.tsx
+import { getPostBySlug } from '@/lib/case-study';
+import { notFound } from 'next/navigation';
+import parse from 'html-react-parser';
+
+
+interface StudyPageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export default async function BlogPostPage({ params }: StudyPageProps) {
+  // In Next.js 15+, params is a Promise and must be awaited
+  const { slug } = await params;
+  const caseStudy = await getPostBySlug(slug);
+
+  if (!caseStudy) {
+    notFound(); // Triggers the closest 404 page if the file doesn't exist
+  }
+
+  return (
+    <article className="max-w-2xl mx-auto py-10 px-4">
+      <header className="mb-8">
+        <h1 className="text-4xl font-bold mb-2">{caseStudy.title}</h1>
+      </header>
+      
+      {/* Render the parsed HTML safely */}
+      <div className="prose dark:prose-invert">
+        {parse(caseStudy.contentHtml)}
+      </div>
+    </article>
+  );
+}

content/case-studies/study-one.md

@@ -0,0 +1,5 @@
+---
+title: "Case Study One"
+---
+
+This is the fist case study

content/case-studies/study-two.md

@@ -0,0 +1 @@
+Hello, this is case study two

lib/case-study.ts

@@ -0,0 +1,33 @@
+// src/lib/blog.ts
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { remark } from 'remark';
+import html from 'remark-html';
+
+const postsDirectory = path.join(process.cwd(), 'content/case-studies');
+
+export async function getPostBySlug(slug: string) {
+  const fullPath = path.join(postsDirectory, `${slug}.md`);
+  
+  // Guard against file system traversal attacks or missing files
+  if (!fs.existsSync(fullPath)) {
+    return null;
+  }
+
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
+  
+  // Use gray-matter to parse the study metadata section
+  const { data, content } = matter(fileContents);
+
+  // Use remark to convert markdown into HTML string
+  const processedContent = await remark().use(html).process(content);
+  const contentHtml = processedContent.toString();
+
+  return {
+    slug,
+    contentHtml,
+    title: data.title || 'Untitled Study',
+    ...data,
+  };
+}

package.json

@@ -9,10 +9,14 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "gray-matter": "^4.0.3",
+    "html-react-parser": "^6.1.3",
     "lucide-react": "^1.17.0",
     "next": "16.2.6",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "remark": "^15.0.1",
+    "remark-html": "^16.0.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

pnpm-workspace.yaml

@@ -1,3 +1,7 @@
 allowBuilds:
   sharp@0.34.5: true
-  unrs-resolver@1.11.1: true
+  unrs-resolver@1.11.1: true
+
+onlyBuiltDependencies:
+  - sharp
+  - unrs-resolver