Add documentation routing and layout for Roam and Obsidian (#928)

- Introduced a new `docsRouteMap.ts` file to manage documentation sections and redirects for Roam and Obsidian platforms.
- Updated `next.config.ts` to include dynamic redirects based on the new route map.
- Refactored the layout components for documentation pages to utilize a consistent theme layout.
- Removed outdated `page.tsx` files for Roam and Obsidian, replacing them with new landing pages that leverage Nextra for content rendering.
- Added new metadata and content files for various documentation sections, enhancing the overall documentation structure and accessibility.

Author: mdroidian

apps/website/app/(docs)/docs/(landing)/layout.tsx

@@ -0,0 +1,18 @@
+import { getPageMap } from "nextra/page-map";
+import DocsThemeLayout from "../_components/DocsThemeLayout";
+import "../../../(nextra)/nextra-css.css";
+import "nextra-theme-docs/style-prefixed.css";
+
+type DocsLandingLayoutProps = {
+  children: React.ReactNode;
+};
+
+const DocsLandingLayout = async ({
+  children,
+}: DocsLandingLayoutProps): Promise<React.ReactElement> => {
+  const pageMap = await getPageMap("/docs");
+
+  return <DocsThemeLayout pageMap={pageMap}>{children}</DocsThemeLayout>;
+};
+
+export default DocsLandingLayout;

apps/website/app/(docs)/docs/(landing)/page.tsx

@@ -0,0 +1,47 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { importPage } from "nextra/pages";
+import { useMDXComponents } from "../../../../mdx-components";
+
+type ImportedPage = Awaited<ReturnType<typeof importPage>>;
+
+const { wrapper } = useMDXComponents();
+
+const Wrapper = wrapper as React.ComponentType<{
+  children: React.ReactNode;
+  metadata: ImportedPage["metadata"];
+  toc: ImportedPage["toc"];
+}>;
+
+const loadPage = async (): Promise<ImportedPage> => importPage([]);
+
+const Page = async (): Promise<React.ReactElement> => {
+  try {
+    const { default: MDXContent, metadata, toc } = await loadPage();
+
+    return (
+      <Wrapper metadata={metadata} toc={toc}>
+        <MDXContent params={{ mdxPath: [] }} />
+      </Wrapper>
+    );
+  } catch (error) {
+    console.error("Error rendering docs landing page:", error);
+    notFound();
+  }
+};
+
+export const generateMetadata = async (): Promise<Metadata> => {
+  try {
+    const { metadata } = await loadPage();
+
+    return metadata;
+  } catch (error) {
+    console.error("Error generating docs landing metadata:", error);
+
+    return {
+      title: "Docs",
+    };
+  }
+};
+
+export default Page;

apps/website/app/(docs)/docs/_components/DocsThemeLayout.tsx

@@ -0,0 +1,44 @@
+import type { PageMapItem } from "nextra";
+import { Footer, Layout, Navbar } from "nextra-theme-docs";
+import { Logo } from "~/components/Logo";
+
+type DocsThemeLayoutProps = {
+  children: React.ReactNode;
+  pageMap: PageMapItem[];
+};
+
+const DocsThemeLayout = ({
+  children,
+  pageMap,
+}: DocsThemeLayoutProps): React.ReactElement => {
+  return (
+    <div className="nextra-reset">
+      <Layout
+        editLink={null}
+        feedback={{ content: null }}
+        footer={
+          <Footer>
+            Apache 2.0 {new Date().getFullYear()} (c) Discourse Graphs.
+          </Footer>
+        }
+        navbar={
+          <Navbar
+            logo={<Logo linked={false} textClassName="text-inherit" />}
+            projectLink="https://github.com/DiscourseGraphs/discourse-graph"
+          />
+        }
+        pageMap={pageMap}
+        sidebar={{
+          defaultMenuCollapseLevel: 1,
+        }}
+        toc={{
+          backToTop: "Back to top",
+        }}
+      >
+        {children}
+      </Layout>
+    </div>
+  );
+};
+
+export default DocsThemeLayout;

apps/website/app/(docs)/docs/obsidian/[[...mdxPath]]/page.tsx

@@ -0,0 +1,76 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { generateStaticParamsFor, importPage } from "nextra/pages";
+import { useMDXComponents } from "../../../../../mdx-components";
+
+type DocsPageProps = {
+  params: Promise<{
+    mdxPath?: string[];
+  }>;
+};
+
+type ImportedPage = Awaited<ReturnType<typeof importPage>>;
+
+const { wrapper } = useMDXComponents();
+
+const Wrapper = wrapper as React.ComponentType<{
+  children: React.ReactNode;
+  metadata: ImportedPage["metadata"];
+  toc: ImportedPage["toc"];
+}>;
+
+const generateAllStaticParams = generateStaticParamsFor("mdxPath");
+
+const loadPage = async (mdxPath?: string[]): Promise<ImportedPage> =>
+  importPage(["obsidian", ...(mdxPath ?? [])]);
+
+export const generateStaticParams = async (): Promise<
+  Array<{ mdxPath?: string[] }>
+> => {
+  const staticParams = await generateAllStaticParams();
+
+  return staticParams.flatMap(({ mdxPath }) => {
+    if (!Array.isArray(mdxPath) || mdxPath[0] !== "obsidian") {
+      return [];
+    }
+
+    const platformPath = mdxPath.slice(1);
+
+    return platformPath.length ? [{ mdxPath: platformPath }] : [{}];
+  });
+};
+
+const Page = async ({ params }: DocsPageProps): Promise<React.ReactElement> => {
+  try {
+    const { mdxPath } = await params;
+    const { default: MDXContent, metadata, toc } = await loadPage(mdxPath);
+
+    return (
+      <Wrapper metadata={metadata} toc={toc}>
+        <MDXContent params={{ mdxPath: mdxPath ?? [] }} />
+      </Wrapper>
+    );
+  } catch (error) {
+    console.error("Error rendering Obsidian docs page:", error);
+    notFound();
+  }
+};
+
+export const generateMetadata = async ({
+  params,
+}: DocsPageProps): Promise<Metadata> => {
+  try {
+    const { mdxPath } = await params;
+    const { metadata } = await loadPage(mdxPath);
+
+    return metadata;
+  } catch (error) {
+    console.error("Error generating Obsidian docs metadata:", error);
+
+    return {
+      title: "Obsidian docs",
+    };
+  }
+};
+
+export default Page;

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

@@ -1,10 +1,18 @@
-import { navigation } from "./navigation";
-import { Layout } from "~/components/DocsLayout";
+import { getPageMap } from "nextra/page-map";
+import DocsThemeLayout from "../_components/DocsThemeLayout";
+import "../../../(nextra)/nextra-css.css";
+import "nextra-theme-docs/style-prefixed.css";
 
-export default function RootLayout({
-  children,
-}: {
+type ObsidianDocsLayoutProps = {
   children: React.ReactNode;
-}) {
-  return <Layout navigationList={navigation}>{children}</Layout>;
-}
+};
+
+const ObsidianDocsLayout = async ({
+  children,
+}: ObsidianDocsLayoutProps): Promise<React.ReactElement> => {
+  const pageMap = await getPageMap("/docs/obsidian");
+
+  return <DocsThemeLayout pageMap={pageMap}>{children}</DocsThemeLayout>;
+};
+
+export default ObsidianDocsLayout;

apps/website/app/(docs)/docs/obsidian/layout.tsx

@@ -0,0 +1,76 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { generateStaticParamsFor, importPage } from "nextra/pages";
+import { useMDXComponents } from "../../../../../mdx-components";
+
+type DocsPageProps = {
+  params: Promise<{
+    mdxPath?: string[];
+  }>;
+};
+
+type ImportedPage = Awaited<ReturnType<typeof importPage>>;
+
+const { wrapper } = useMDXComponents();
+
+const Wrapper = wrapper as React.ComponentType<{
+  children: React.ReactNode;
+  metadata: ImportedPage["metadata"];
+  toc: ImportedPage["toc"];
+}>;
+
+const generateAllStaticParams = generateStaticParamsFor("mdxPath");
+
+const loadPage = async (mdxPath?: string[]): Promise<ImportedPage> =>
+  importPage(["roam", ...(mdxPath ?? [])]);
+
+export const generateStaticParams = async (): Promise<
+  Array<{ mdxPath?: string[] }>
+> => {
+  const staticParams = await generateAllStaticParams();
+
+  return staticParams.flatMap(({ mdxPath }) => {
+    if (!Array.isArray(mdxPath) || mdxPath[0] !== "roam") {
+      return [];
+    }
+
+    const platformPath = mdxPath.slice(1);
+
+    return platformPath.length ? [{ mdxPath: platformPath }] : [{}];
+  });
+};
+
+const Page = async ({ params }: DocsPageProps): Promise<React.ReactElement> => {
+  try {
+    const { mdxPath } = await params;
+    const { default: MDXContent, metadata, toc } = await loadPage(mdxPath);
+
+    return (
+      <Wrapper metadata={metadata} toc={toc}>
+        <MDXContent params={{ mdxPath: mdxPath ?? [] }} />
+      </Wrapper>
+    );
+  } catch (error) {
+    console.error("Error rendering Roam docs page:", error);
+    notFound();
+  }
+};
+
+export const generateMetadata = async ({
+  params,
+}: DocsPageProps): Promise<Metadata> => {
+  try {
+    const { mdxPath } = await params;
+    const { metadata } = await loadPage(mdxPath);
+
+    return metadata;
+  } catch (error) {
+    console.error("Error generating Roam docs metadata:", error);
+
+    return {
+      title: "Roam docs",
+    };
+  }
+};
+
+export default Page;