feat: add legal docs section with routing, navigation and content structure

Author: DarkPhoenix2704

app/docs/legal/[[...slug]]/page.tsx

@@ -0,0 +1,72 @@
+import { legalDocsSource } from '@/lib/source';
+import { DocsBody, DocsDescription, DocsTitle, } from 'fumadocs-ui/page';
+import { notFound } from 'next/navigation';
+import { getMDXComponents } from '@/mdx-components';
+import MdxLink from "@/components/mdx/MdxLink";
+import { AnchorProvider } from 'fumadocs-core/toc';
+import { TOCProvider, TOCScrollArea } from 'fumadocs-ui/components/layout/toc';
+import { PageTOC } from 'fumadocs-ui/layouts/docs/page'
+import ClerkTOCItems from 'fumadocs-ui/components/layout/toc-clerk';
+import { getPageTreePeers } from 'fumadocs-core/server';
+import { Cards, Card } from 'fumadocs-ui/components/card';
+import TOCMobile from '@/components/layout/TOCMobile';
+
+export default async function Page(props: {
+    params: Promise<{ slug?: string[] }>;
+}) {
+    const params = await props.params;
+    const page = legalDocsSource.getPage(params.slug);
+    if (!page) notFound();
+
+    const MDXContent = page.data.body;
+
+    return (
+        <TOCProvider toc={page.data.toc}>
+            <AnchorProvider toc={page.data.toc}>
+                <PageTOC className='hidden xl:sticky xl:block !top-[120px] w-68 max-h-[calc(100vh-120px)] order-last shrink-0 overflow-auto'>
+                    <TOCScrollArea className='w-64'>
+                        <ClerkTOCItems />
+                    </TOCScrollArea>
+                </PageTOC>
+                <TOCMobile />
+                <div className='flex flex-col flex-1 gap-4 mx-auto container overflow-y-auto shrink-1 max-w-179 relative p-4'>
+                    <DocsTitle>{page.data.title}</DocsTitle>
+                    <DocsDescription className="mb-0">{page.data.description}</DocsDescription>
+                    <DocsBody>
+                        <MDXContent
+                            components={getMDXComponents({
+                                a: MdxLink
+                            })}
+                        />
+                    </DocsBody>
+                    <Cards>
+                        {getPageTreePeers(legalDocsSource.pageTree, page.url).slice(0, 2).map((peer) => (
+                            <Card key={peer.url} title={peer.name} href={peer.url}>
+                                {peer.description}
+                            </Card>
+                        ))}
+                    </Cards>
+                    <div className="py-8">
+                    </div>
+                </div>
+            </AnchorProvider>
+        </TOCProvider>
+    );
+}
+
+export async function generateStaticParams() {
+    return legalDocsSource.generateParams();
+}
+
+export async function generateMetadata(props: {
+    params: Promise<{ slug?: string[] }>;
+}) {
+    const params = await props.params;
+    const page = legalDocsSource.getPage(params.slug);
+    if (!page) notFound();
+
+    return {
+        title: page.data.title,
+        description: page.data.description,
+    };
+}

app/docs/legal/layout.tsx

@@ -0,0 +1,19 @@
+import Sidebar from "@/components/layout/Sidebar";
+import { legalDocsSource } from "@/lib/source";
+import { TreeContextProvider } from '@/provider/TreeContextProvider';
+import { ReactNode } from "react";
+import MobileSidebar from "@/app/docs/MobileSidebar";
+
+export default function Page({children}: {children: ReactNode}) {
+    return (
+        <div className='relative'>
+            <TreeContextProvider tree={legalDocsSource.pageTree}>
+                <div className="max-w-screen-xl flex flex-col xl:flex-row mt-30 mx-auto">
+                    <Sidebar />
+                    {children}
+                </div>
+                <MobileSidebar/>
+            </TreeContextProvider>
+        </div>
+    )
+}

app/docs/legal/not-found.tsx

@@ -0,0 +1,5 @@
+import NotFoundPage from '@/components/NotFoundPage'
+
+export default async function NotFound() {
+  return <NotFoundPage url="/docs/legal" />
+}

app/docs/legal/static.json/route.ts

@@ -0,0 +1,22 @@
+import {NextResponse} from 'next/server';
+import {legalDocsSource} from '@/lib/source';
+import {DocumentRecord} from "@/utils/search/typesense";
+
+export const revalidate = false;
+
+export function GET() {
+    const results = [] as DocumentRecord[];
+
+
+    for (const page of legalDocsSource.getPages()) {
+        results.push({
+            _id: page.url,
+            structured: page.data.structuredData,
+            url: page.url,
+            title: page.data.title,
+            description: page.data.description,
+        });
+    }
+
+    return NextResponse.json(results);
+}

components/layout/TopBarNaigation.tsx

@@ -3,6 +3,7 @@
 import {useEffect, useRef, useState} from "react"
 import {clsx} from "clsx";
 import Link from "next/link";
+import {usePathname} from "next/navigation";
 
 const tabs = [{
     title: 'Product Docs',
@@ -18,15 +19,28 @@ const tabs = [{
 {
     title: 'Changelog (EE)',
     href: '/docs/changelog',
+},
+{
+    title: 'Legal',
+    href: '/docs/legal',
 }
 ]
 
 export default function TopBarNaigation() {
+    const pathname = usePathname()
     const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
     const [activeIndex, setActiveIndex] = useState(-1)
     const [hoverStyle, setHoverStyle] = useState({})
     const [activeStyle, setActiveStyle] = useState({left: "0px", width: "0px"})
     const tabRefs = useRef<(HTMLDivElement | null)[]>([])
+    
+    // Filter tabs based on current path - only show Legal if we're on /docs/legal
+    const visibleTabs = tabs.filter(tab => {
+        if (tab.href === '/docs/legal') {
+            return pathname === '/docs/legal' || pathname.startsWith('/docs/legal/')
+        }
+        return true
+    })
 
     useEffect(() => {
         if (hoveredIndex !== null) {
@@ -52,14 +66,11 @@ export default function TopBarNaigation() {
         }
     }, [activeIndex])
 
-    // Determine which tab should be active based on the current path when component mounts
+    // Determine which tab should be active based on the current path
     useEffect(() => {
-        if (typeof window !== 'undefined') {
-            const path = window.location.pathname;
-            const activeTabIndex = tabs.findIndex(tab => path.startsWith(tab.href));
-            setActiveIndex(activeTabIndex !== -1 ? activeTabIndex : 0);
-        }
-    }, []);
+        const activeTabIndex = visibleTabs.findIndex(tab => pathname.startsWith(tab.href));
+        setActiveIndex(activeTabIndex !== -1 ? activeTabIndex : 0);
+    }, [pathname, visibleTabs]);
 
     // Apply active style whenever activeIndex changes or after the component has mounted
     useEffect(() => {
@@ -95,7 +106,7 @@ export default function TopBarNaigation() {
 
                 {/* Tabs */}
                 <div className="relative flex gap-3 items-center">
-                    {tabs.map((tab, index) => (
+                    {visibleTabs.map((tab, index) => (
                         <Link key={index} href={tab.href}>
                             <div
                                 ref={(el) => { tabRefs.current[index] = el; }}

content/legal/meta.json

@@ -1,6 +1,7 @@
 {
   "title": "Legal",
   "pages": [
+    "index",
     "privacy",
     "terms-of-service",
     "aup",

lib/source.ts

@@ -1,4 +1,4 @@
-import {blog, docs, scripts, selfHosting, changelog} from '@/.source';
+import {blog, docs, scripts, selfHosting, changelog, legalDocs} from '@/.source';
 import {loader} from 'fumadocs-core/source';
 import {createMDXSource} from "fumadocs-mdx";
 import {iconMap, IconNameType} from "@/lib/iconMap";
@@ -45,3 +45,9 @@ export const changelogSource = loader({
     baseUrl: '/docs/changelog',
     source: changelog.toFumadocsSource(),
 })
+
+
+export const legalDocsSource = loader({
+    baseUrl: '/docs/legal',
+    source: legalDocs.toFumadocsSource(),
+})

scripts/validateLinks.ts

@@ -26,6 +26,8 @@ async function checkLinks() {
   // Read changelog files
   const changelogFiles = await readFiles('content/changelog/**/*.{md,mdx}');
 
+  const legalDocsFiles = await readFiles('content/legal/**/*.{md,mdx}');
+
   const scanned = await scanURLs({
     populate: {
       // Blog routes
@@ -51,6 +53,17 @@ async function checkLinks() {
           ),
         };
       }),
+
+      'docs/legal/[[...slug]]': legalDocsFiles.map((file) => {
+        const info = parseFilePath(path.relative('content/legal', file.path));
+        
+        return {
+          value: getSlugs(info),
+          hashes: getTableOfContents(file.content).map((item) =>
+            item.url.slice(1),
+          ),
+        };
+      }),
 
       // Self-hosting docs routes
       'docs/self-hosting/[[...slug]]': selfHostingFiles.map((file) => {

source.config.ts

@@ -30,6 +30,10 @@ export const changelog = defineDocs({
     dir: 'content/changelog',
 })
 
+export const legalDocs = defineDocs({
+    dir: 'content/legal',
+})
+
 export default defineConfig({
   mdxOptions: {
       remarkPlugins: [remarkAdmonition],