feat: use gray-matter frontmatter to extract page metadata

Agent-Logs-Url: https://github.com/techdiary-dev/techdiary.dev/sessions/bf323903-6c44-4c7a-b51d-fa811009688d

Co-authored-by: kingRayhan <7611746+kingRayhan@users.noreply.github.com>

Author: Copilot

package.json

@@ -51,6 +51,7 @@
     "date-fns": "^4.1.0",
     "dotenv": "^16.4.7",
     "drizzle-orm": "^0.41.0",
+    "gray-matter": "^4.0.3",
     "immer": "^10.1.1",
     "inngest": "^4.1.0",
     "jotai": "^2.12.2",

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

@@ -4,42 +4,50 @@ import { existsSync, readFileSync } from "fs";
 import { join } from "path";
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
+import matter from "gray-matter";
 
 interface Props {
   params: Promise<{ slug: string }>;
 }
 
-function slugToTitle(slug: string): string {
-  return slug
-    .split("-")
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(" ");
+interface PageData {
+  content: string;
+  title: string;
 }
 
-async function getPageContent(slug: string): Promise<string | null> {
+async function getPageData(slug: string): Promise<PageData | null> {
   "use cache";
   const filePath = join(process.cwd(), "src/content", `${slug}.md`);
   if (!existsSync(filePath)) return null;
-  return readFileSync(filePath, "utf-8");
+  const raw = readFileSync(filePath, "utf-8");
+  const { content, data } = matter(raw);
+  const title =
+    typeof data.title === "string" && data.title
+      ? data.title
+      : slug
+          .split("-")
+          .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+          .join(" ");
+  return { content, title };
 }
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { slug } = await params;
-  const title = slugToTitle(slug);
-  return { title };
+  const page = await getPageData(slug);
+  return { title: page?.title ?? slug };
 }
 
 const StaticMarkdownPage = async ({ params }: Props) => {
   const { slug } = await params;
-  const content = await getPageContent(slug);
+  const page = await getPageData(slug);
 
-  if (!content) notFound();
+  if (!page) notFound();
 
   return (
     <BaseLayout>
       <div className="max-w-3xl mx-auto my-10 px-4">
         <div className="content-typography">
-          <Markdown content={content} />
+          <Markdown content={page.content} />
         </div>
       </div>
     </BaseLayout>

src/content/privacy.md

@@ -1,3 +1,7 @@
+---
+title: Privacy Policy
+---
+
 # Privacy Policy
 
 *Last updated: April 2025*

src/content/terms-and-conditions.md

@@ -1,3 +1,7 @@
+---
+title: Terms and Conditions
+---
+
 # Terms and Conditions
 
 *Last updated: April 2025*