Implement Root Toggle for multi-root documentation structure

.gitignore

@@ -1,5 +1,6 @@
 # dependencies
 /node_modules
+/content/node_modules
 /.pnp
 .pnp.js
 

content/docs.site.json

@@ -22,6 +22,20 @@
       "radius": "0.5rem"
     }
   },
+  "products": [
+    {
+      "title": "Documentation",
+      "description": "Core documentation engine",
+      "url": "/docs/core",
+      "icon": "FileText"
+    },
+    {
+      "title": "Platform",
+      "description": "Enterprise platform docs",
+      "url": "/docs/platform",
+      "icon": "Layers"
+    }
+  ],
   "layout": {
     "navbar": {
       "enabled": true,

content/docs/platform/index.mdx

@@ -0,0 +1,12 @@
+---
+title: Platform Documentation
+description: Enterprise low-code platform documentation
+---
+
+# Platform Documentation
+
+Welcome to the Platform documentation. This section covers the enterprise low-code platform features and capabilities.
+
+## Getting Started
+
+Explore the platform features and learn how to build enterprise applications.

content/docs/platform/meta.json

@@ -0,0 +1,6 @@
+{
+  "title": "Platform",
+  "pages": [
+    "index"
+  ]
+}

content/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "content",
+  "private": true,
+  "dependencies": {
+    "lucide-react": "^0.562.0"
+  }
+}

packages/cli/src/commands/build.mjs

@@ -50,7 +50,7 @@ export function registerBuildCommand(cli) {
         DOCS_DIR: docsDir
       };
 
-      const nextCmd = 'npm'; 
+      const nextCmd = 'pnpm'; 
       const args = ['run', 'build'];
 
       const child = spawn(nextCmd, args, {

packages/cli/src/commands/dev.mjs

@@ -35,7 +35,7 @@ export function registerDevCommand(cli) {
         PORT: options.port
       };
 
-      const nextCmd = 'npm'; 
+      const nextCmd = 'pnpm'; 
       const args = ['run', 'dev', '--', '-p', options.port];
 
       let child;

packages/cli/src/commands/start.mjs

@@ -59,7 +59,7 @@ export function registerStartCommand(cli) {
         };
 
 
-        const child = spawn('npm', ['start'], {
+        const child = spawn('pnpm', ['start'], {
           cwd: nextAppDir,
           stdio: 'inherit',
           env: env

packages/site/app/[lang]/docs/[[...slug]]/page.tsx

@@ -1,4 +1,4 @@
-import { source } from '@/lib/source';
+import { coreLoader, platformLoader } from '@/lib/source';
 import type { Metadata } from 'next';
 import { DocsPage, DocsBody } from 'fumadocs-ui/page';
 import { notFound } from 'next/navigation';
@@ -8,6 +8,12 @@ import { Steps, Step } from 'fumadocs-ui/components/steps';
 import { Card, Cards } from 'fumadocs-ui/components/card';
 import { Callout } from 'fumadocs-ui/components/callout';
 
+// Map of root names to their loaders
+const loaderMap: Record<string, typeof coreLoader> = {
+  'core': coreLoader,
+  'platform': platformLoader,
+};
+
 interface PageProps {
   params: Promise<{
     lang: string;
@@ -18,19 +24,29 @@ interface PageProps {
 export default async function Page({ params }: PageProps) {
   const { lang, slug = [] } = await params;
 
-  const page = source.getPage(slug, lang);
+  // Determine the current root from the URL
+  const currentRoot = slug.length > 0 ? slug[0] : 'core';
+
+  // Get the page path (everything after the root)
+  const pagePath = slug.slice(1);
+
+  // Get the appropriate loader
+  const currentLoader = loaderMap[currentRoot] || coreLoader;
+
+  const page = currentLoader.getPage(pagePath, lang);
 
   if (!page) {
     notFound();
   }
 
-  const MDX = page.data.body as any;
+  const pageData = page.data as any;
+  const MDX = pageData.body;
 
   return (
     <DocsPage 
-      toc={page.data.toc as any} 
-      full={page.data.full as any}
-      lastUpdate={siteConfig.page.showLastUpdate ? (page.data as any).lastModified : undefined}
+      toc={pageData.toc} 
+      full={pageData.full}
+      lastUpdate={siteConfig.page.showLastUpdate ? pageData.lastModified : undefined}
       tableOfContent={{
         enabled: siteConfig.layout.toc.enabled,
         style: siteConfig.layout.toc.depth > 2 ? 'clerk' : 'normal',
@@ -51,12 +67,31 @@ export default async function Page({ params }: PageProps) {
 
 
 export async function generateStaticParams() {
-  return source.generateParams();
+  // Generate params for all loaders
+  const coreParams = coreLoader.generateParams().map(param => ({
+    ...param,
+    slug: ['core', ...(param.slug || [])],
+  }));
+
+  const platformParams = platformLoader.generateParams().map(param => ({
+    ...param,
+    slug: ['platform', ...(param.slug || [])],
+  }));
+
+  return [...coreParams, ...platformParams];
 }
 
 export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
   const { lang, slug = [] } = await params;
-  const page = source.getPage(slug, lang);
+
+  // Determine the current root
+  const currentRoot = slug.length > 0 ? slug[0] : 'core';
+  const pagePath = slug.slice(1);
+
+  // Get the appropriate loader
+  const currentLoader = loaderMap[currentRoot] || coreLoader;
+
+  const page = currentLoader.getPage(pagePath, lang);
 
   if (!page) notFound();
 

packages/site/app/[lang]/docs/layout.tsx

@@ -1,27 +1,94 @@
-import { source } from '@/lib/source';
+import { coreLoader, platformLoader } from '@/lib/source';
 import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 import type { ReactNode } from 'react';
 import { baseOptions } from '@/app/layout.config';
 import { siteConfig } from '@/lib/site-config';
+import { 
+  Box, 
+  Layers, 
+  Package, 
+  Blocks, 
+  Component, 
+  Database,
+  Settings,
+  Zap,
+  Code,
+  FileText
+} from 'lucide-react';
+
+// Icon mapping for dynamic icon rendering
+// Supports common icons for documentation products
+const iconMap: Record<string, typeof Box> = {
+  Box,
+  Layers,
+  Package,
+  Blocks,
+  Component,
+  Database,
+  Settings,
+  Zap,
+  Code,
+  FileText,
+};
+
+// Map of root names to their loaders
+const loaderMap: Record<string, typeof coreLoader> = {
+  'core': coreLoader,
+  'platform': platformLoader,
+};
 
 export default async function Layout({
   params,
   children,
 }: {
-  params: Promise<{ lang: string }>;
+  params: Promise<{ lang: string; slug?: string[] }>;
   children: ReactNode;
 }) {
-  const { lang } = await params;
+  const { lang, slug = [] } = await params;
+
+  // Determine the current root from the URL
+  // The first slug segment indicates which root we're viewing (core, platform, etc.)
+  const currentRoot = slug.length > 0 ? slug[0] : 'core';
+
+  // Get the appropriate loader for the current root
+  const currentLoader = loaderMap[currentRoot] || coreLoader;
+
+  // Get the page tree for the current root
+  const tree = currentLoader.pageTree[lang];
+
+  // Build tabs/root toggle options from products config if available
+  const rootToggleTabs = siteConfig.products && siteConfig.products.length > 0 
+    ? siteConfig.products.map(product => {
+        const Icon = iconMap[product.icon] || Box;
+        return {
+          title: product.title,
+          description: product.description,
+          url: `/${lang}${product.url}`,
+          icon: (
+            <div className="bg-gradient-to-br from-primary/80 to-primary p-1 rounded-md text-primary-foreground">
+              <Icon className="size-4" />
+            </div>
+          ),
+        };
+      })
+    : siteConfig.layout.sidebar.tabs && siteConfig.layout.sidebar.tabs.length > 0 
+      ? siteConfig.layout.sidebar.tabs.map(tab => ({
+          title: tab.title,
+          url: `/${lang}${tab.url}`,
+          description: tab.description,
+        }))
+      : undefined;
 
   return (
     <DocsLayout
-      tree={source.getPageTree(lang)}
+      tree={tree}
       {...baseOptions}
       sidebar={{
         enabled: siteConfig.layout.sidebar.enabled,
         prefetch: siteConfig.layout.sidebar.prefetch,
         collapsible: siteConfig.layout.sidebar.collapsible,
         defaultOpenLevel: siteConfig.layout.sidebar.defaultOpenLevel,
+        tabs: rootToggleTabs,
         footer: siteConfig.layout.sidebar.footer ? (
            <div className="p-4 text-xs text-muted-foreground border-t">
              {siteConfig.layout.sidebar.footer.html ? (
@@ -31,12 +98,6 @@ export default async function Layout({
              )}
            </div>
         ) : undefined,
-        tabs: siteConfig.layout.sidebar.tabs && siteConfig.layout.sidebar.tabs.length > 0 ? 
-          siteConfig.layout.sidebar.tabs.map(tab => ({
-            title: tab.title,
-            url: tab.url,
-            description: tab.description,
-          })) : undefined,
         banner: siteConfig.layout.sidebar.banner ? (
           <div className="-mx-2 -mt-2 rounded-lg border bg-card p-4 transition-colors hover:bg-accent/50 text-card-foreground text-sm">
             <a href={siteConfig.layout.sidebar.banner.url} className="block font-medium">

packages/site/app/api/search/route.ts

@@ -1,12 +1,21 @@
-import { source } from '@/lib/source';
+import { coreLoader, platformLoader } from '@/lib/source';
 import { createSearchAPI } from 'fumadocs-core/search/server';
 
 export const { GET } = createSearchAPI('advanced', {
-  indexes: source.getPages().map((page) => ({
-    title: page.data.title,
-    description: page.data.description,
-    url: page.url,
-    id: page.url,
-    structuredData: page.data.structuredData,
-  })),
+  indexes: [
+    ...coreLoader.getPages().map((page) => ({
+      title: page.data.title || '',
+      description: page.data.description || '',
+      url: page.url,
+      id: page.url,
+      structuredData: (page.data as any).structuredData,
+    })),
+    ...platformLoader.getPages().map((page) => ({
+      title: page.data.title || '',
+      description: page.data.description || '',
+      url: page.url,
+      id: page.url,
+      structuredData: (page.data as any).structuredData,
+    })),
+  ],
 });

packages/site/docs.site.json

@@ -22,6 +22,20 @@
       "radius": "0.5rem"
     }
   },
+  "products": [
+    {
+      "title": "Documentation",
+      "description": "Core documentation engine",
+      "url": "/docs/core",
+      "icon": "FileText"
+    },
+    {
+      "title": "Platform",
+      "description": "Enterprise platform docs",
+      "url": "/docs/platform",
+      "icon": "Layers"
+    }
+  ],
   "layout": {
     "navbar": {
       "enabled": true,

packages/site/lib/site-config.ts

@@ -27,6 +27,12 @@ export interface SiteConfig {
       radius: string;
     };
   };
+  products?: Array<{
+    title: string;
+    description: string;
+    url: string;
+    icon: string;
+  }>;
   layout: {
     navbar: {
       enabled: boolean;