[ENG-526] Restructure roam documentation (#252)

* pages created

* rough structure

* shared page + share components cleanup

* proof read + badge

* cleanup

* cleanup Roam

* sm

* address PR comments

* fix build

Author: trangdoan982

apps/website/app/(docs)/docs/roam/[slug]/page.tsx

@@ -1,110 +1,31 @@
-import fs from "fs/promises";
-import path from "path";
-import { notFound } from "next/navigation";
+import { docMap } from "~/(docs)/docs/roam/docMap";
 import { Metadata } from "next";
-import { DocsHeader } from "~/components/DocsHeader";
-import { Prose } from "~/components/Prose";
-import { TableOfContents } from "~/components/TableOfContents";
-import { getProcessedMarkdownFile } from "~/utils/getProcessedMarkdownFile";
-import { collectSections } from "~/utils/getSections";
-import { PrevNextLinks } from "~/components/PrevNextLinks";
-import { getFileMetadata } from "~/utils/getFileMetadata";
+import {
+  generateDocsStaticParams,
+  generateDocsMetadata,
+  DocsPage,
+} from "~/components/DocsPage";
 
 type Params = {
   params: Promise<{
     slug: string;
   }>;
 };
 
-const PATH = "app/(docs)/docs/roam/pages";
-const DIRECTORY = path.join(process.cwd(), PATH);
-
 const Page = async ({ params }: Params) => {
-  try {
-    const { slug } = await params;
-    const { data, contentHtml } = await getProcessedMarkdownFile({
-      slug,
-      directory: DIRECTORY,
-    });
-    const tableOfContents = await collectSections(contentHtml);
+  const { slug } = await params;
+  const directory = docMap[slug] ?? docMap.default;
 
-    return (
-      <>
-        <div className="min-w-0 max-w-2xl flex-auto px-4 py-8 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
-          <article className="[&::-webkit-scrollbar]:hidden">
-            <DocsHeader title={data.title} />
-            <Prose>
-              <div dangerouslySetInnerHTML={{ __html: contentHtml }} />
-            </Prose>
-          </article>
-          <PrevNextLinks />
-        </div>
-        <TableOfContents tableOfContents={tableOfContents} />
-      </>
-    );
-  } catch (error) {
-    console.error("Error rendering docs page:", error);
-    return notFound();
-  }
+  return <DocsPage params={Promise.resolve({ slug })} directory={directory} />;
 };
 
 export default Page;
 
-export const generateStaticParams = async () => {
-  try {
-    const directoryExists = await fs
-      .stat(DIRECTORY)
-      .then((stats) => stats.isDirectory())
-      .catch(() => false);
-
-    if (!directoryExists) {
-      console.log("No docs directory found");
-      return [];
-    }
-
-    const files = await fs.readdir(DIRECTORY);
-
-    const mdFiles = files.filter((filename) => filename.endsWith(".md"));
-
-    const publishedFiles = await Promise.all(
-      mdFiles.map(async (filename) => {
-        const { published } = await getFileMetadata({
-          filename,
-          directory: DIRECTORY,
-        });
-        return { filename, published };
-      }),
-    );
+export const generateStaticParams = () =>
+  generateDocsStaticParams(docMap.default);
 
-    return publishedFiles
-      .filter(({ published }) => published)
-      .map(({ filename }) => ({
-        slug: filename.replace(/\.md$/, ""),
-      }));
-  } catch (error) {
-    console.error("Error generating static params:", error);
-    return [];
-  }
-};
-
-export const generateMetadata = async ({
-  params,
-}: Params): Promise<Metadata> => {
-  try {
-    const { slug } = await params;
-    const { data } = await getProcessedMarkdownFile({
-      slug,
-      directory: DIRECTORY,
-    });
-
-    return {
-      title: data.title,
-      authors: [{ name: data.author }],
-    };
-  } catch (error) {
-    console.error("Error generating metadata:", error);
-    return {
-      title: "Docs",
-    };
-  }
-};
+export async function generateMetadata({ params }: Params): Promise<Metadata> {
+  const { slug } = await params;
+  const directory = docMap[slug] ?? docMap.default;
+  return generateDocsMetadata({ params: Promise.resolve({ slug }), directory });
+}

apps/website/app/(docs)/docs/roam/docMap.ts

@@ -0,0 +1,12 @@
+import { sharedDocMap } from "~/(docs)/docs/shared/docMap";
+
+const ROAM_DOCS = "app/(docs)/docs/roam/pages";
+type DocMapType = {
+  default: string;
+  [key: string]: string;
+};
+
+export const docMap: DocMapType = {
+  default: ROAM_DOCS,
+  ...sharedDocMap,
+};