feat: add metadata form page doc & generate static params

Author: mehdibha

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

@@ -1,18 +1,58 @@
 import React from "react";
+import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { ArrowRightIcon, ChevronRightIcon, SearchIcon } from "lucide-react";
 import { Mdx } from "@/components/mdx/mdx-remote";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/utils/classes";
-import { type Item, getDocFromSlug } from "@/lib/docs";
+import { type Item, getDocFromSlug, getAllDocs } from "@/lib/docs";
 
 interface PageProps {
   params: {
     slug: string[];
   };
 }
 
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const doc = getDocFromSlug(params.slug);
+
+  if (!doc) {
+    return {};
+  }
+
+  return {
+    title: doc.metadata.title,
+    description: doc.metadata.description,
+    // openGraph: {
+    //   title: doc.title,
+    //   description: doc.description,
+    //   type: "article",
+    //   url: absoluteUrl(doc.slug),
+    //   images: [
+    //     {
+    //       url: siteConfig.ogImage,
+    //       width: 1200,
+    //       height: 630,
+    //       alt: siteConfig.name,
+    //     },
+    //   ],
+    // },
+    // twitter: {
+    //   card: "summary_large_image",
+    //   title: doc.title,
+    //   description: doc.description,
+    //   images: [siteConfig.ogImage],
+    //   creator: "@shadcn",
+    // },
+  };
+}
+export async function generateStaticParams(): Promise<PageProps["params"][]> {
+  const allDocs = getAllDocs();
+
+  return allDocs.map((doc) => ({ slug: doc.href.split("/").slice(1) }));
+}
+
 export default async function Page({ params }: PageProps) {
   const doc = getDocFromSlug(params.slug);
 

src/app/old/components/layout.tsx

@@ -147,3 +147,18 @@ export const getDocFromSlug = (slug: string[]): Doc | null => {
 
   return null;
 };
+
+export const getAllDocs = () => {
+  const directoryPath = path.join(process.cwd(), "content");
+  return getAllMdxFiles(directoryPath, directoryPath, [], true).map(
+    ({ fullPath, relativePath }) => {
+      const itemRawContent = fs.readFileSync(fullPath, "utf-8");
+      const { frontmatter: itemFrontmatter } =
+        parseMDXFile<DocFrontmatter>(itemRawContent);
+      return {
+        ...itemFrontmatter,
+        href: `/${relativePath.join("/").replace("/index", "")}`,
+      };
+    }
+  );
+};