doccupine 0.0.59 → 0.0.60

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 #!/usr/bin/env node
 export declare function generateSlug(filePath: string): string;
+export declare function getFullSlug(pageSlug: string, sectionSlug: string): string;
 export declare function escapeTemplateContent(content: string): string;

package/dist/index.js

@@ -27,7 +27,9 @@ import { clickOutsideTemplate } from "./templates/components/ClickOutside.js";
 import { docsTemplate } from "./templates/components/Docs.js";
 import { docsSideBarTemplate } from "./templates/components/DocsSideBar.js";
 import { mdxComponentsTemplate } from "./templates/components/MDXComponents.js";
+import { sectionNavProviderTemplate } from "./templates/components/SectionNavProvider.js";
 import { sideBarTemplate } from "./templates/components/SideBar.js";
+import { sectionBarTemplate } from "./templates/components/layout/SectionBar.js";
 import { accordionTemplate } from "./templates/components/layout/Accordion.js";
 import { actionBarTemplate } from "./templates/components/layout/ActionBar.js";
 import { buttonTemplate } from "./templates/components/layout/Button.js";
@@ -82,11 +84,12 @@ import { headersAndTextMdxTemplate } from "./templates/mdx/headers-and-text.mdx.
 import { iconsMdxTemplate } from "./templates/mdx/icons.mdx.js";
 import { imageAndEmbedsMdxTemplate } from "./templates/mdx/image-and-embeds.mdx.js";
 import { indexMdxTemplate } from "./templates/mdx/index.mdx.js";
-import { linksMdxTemplate } from "./templates/mdx/links.mdx.js";
+import { footerLinksMdxTemplate } from "./templates/mdx/footer-links.mdx.js";
 import { listAndTablesMdxTemplate } from "./templates/mdx/list-and-tables.mdx.js";
 import { mediaAndAssetsMdxTemplate } from "./templates/mdx/media-and-assets.mdx.js";
 import { mcpMdxTemplate } from "./templates/mdx/model-context-protocol.mdx.js";
 import { navigationMdxTemplate } from "./templates/mdx/navigation.mdx.js";
+import { sectionsMdxTemplate } from "./templates/mdx/sections.mdx.js";
 import { stepsMdxTemplate } from "./templates/mdx/steps.mdx.js";
 import { tabsMdxTemplate } from "./templates/mdx/tabs.mdx.js";
 import { themeMdxTemplate } from "./templates/mdx/theme.mdx.js";
@@ -107,11 +110,23 @@ export function generateSlug(filePath) {
     if (filePath === "index.mdx" || filePath === "./index.mdx") {
         return "";
     }
-    return filePath
+    const normalized = filePath
         .replace(/\.mdx$/, "")
         .replace(/\\/g, "/")
         .replace(/[^a-zA-Z0-9\/\-_]/g, "-")
         .toLowerCase();
+    // Strip trailing /index for subdirectory index files
+    if (normalized.endsWith("/index")) {
+        return normalized.slice(0, -"/index".length);
+    }
+    return normalized;
+}
+export function getFullSlug(pageSlug, sectionSlug) {
+    if (!sectionSlug)
+        return pageSlug;
+    if (pageSlug === "")
+        return sectionSlug;
+    return `${sectionSlug}/${pageSlug}`;
 }
 export function escapeTemplateContent(content) {
     return content
@@ -207,8 +222,12 @@ class MDXToNextJSGenerator {
         "navigation.json",
         "config.json",
         "links.json",
+        "sections.json",
     ];
     fontConfigFile = "fonts.json";
+    sectionsConfig = null;
+    /** Guards against recursive reprocessing when maybeUpdateSections() triggers processAllMDXFiles() */
+    isReprocessing = false;
     constructor(watchDir, outputDir) {
         this.watchDir = path.resolve(watchDir);
         this.outputDir = path.resolve(outputDir);
@@ -218,12 +237,17 @@ class MDXToNextJSGenerator {
         console.log(chalk.blue("🚀 Initializing MDX to Next.js generator..."));
         await fs.ensureDir(this.watchDir);
         await fs.ensureDir(this.outputDir);
+        this.sectionsConfig = await this.resolveSections();
+        if (this.sectionsConfig) {
+            console.log(chalk.blue(`📑 Found ${this.sectionsConfig.length} section(s): ${this.sectionsConfig.map((s) => s.label).join(", ")}`));
+        }
         await this.createNextJSStructure();
         await this.createStartingDocs();
         await this.copyCustomConfigFiles();
         await this.copyFontConfig();
         await this.copyPublicFiles();
         await this.processAllMDXFiles();
+        await this.generateSectionIndexPages();
         console.log(chalk.green("✅ Initial setup complete!"));
         console.log(chalk.cyan("💡 To start the Next.js dev server:"));
         console.log(chalk.white(`   cd ${path.relative(process.cwd(), this.outputDir)}`));
@@ -239,6 +263,7 @@ class MDXToNextJSGenerator {
             "eslint.config.mjs": eslintConfigTemplate,
             "links.json": `[]`,
             "navigation.json": `[]`,
+            "sections.json": `[]`,
             "next.config.ts": nextConfigTemplate,
             "package.json": packageJsonTemplate,
             "proxy.ts": proxyTemplate,
@@ -268,6 +293,7 @@ class MDXToNextJSGenerator {
             "components/Docs.tsx": docsTemplate,
             "components/DocsSideBar.tsx": docsSideBarTemplate,
             "components/MDXComponents.tsx": mdxComponentsTemplate,
+            "components/SectionNavProvider.tsx": sectionNavProviderTemplate,
             "components/SideBar.tsx": sideBarTemplate,
             "components/layout/Accordion.tsx": accordionTemplate,
             "components/layout/ActionBar.tsx": actionBarTemplate,
@@ -281,6 +307,7 @@ class MDXToNextJSGenerator {
             "components/layout/DemoTheme.tsx": demoThemeTemplate,
             "components/layout/DocsComponents.tsx": docsComponentsTemplate,
             "components/layout/DocsNavigation.tsx": docsNavigationTemplate,
+            "components/layout/SectionBar.tsx": sectionBarTemplate,
             "components/layout/Field.tsx": fieldTemplate,
             "components/layout/Footer.tsx": footerTemplate,
             "components/layout/GlobalStyles.ts": globalStylesTemplate,
@@ -319,11 +346,12 @@ class MDXToNextJSGenerator {
             "icons.mdx": iconsMdxTemplate,
             "image-and-embeds.mdx": imageAndEmbedsMdxTemplate,
             "index.mdx": indexMdxTemplate,
-            "links.mdx": linksMdxTemplate,
+            "footer-links.mdx": footerLinksMdxTemplate,
             "lists-and-tables.mdx": listAndTablesMdxTemplate,
             "media-and-assets.mdx": mediaAndAssetsMdxTemplate,
             "model-context-protocol.mdx": mcpMdxTemplate,
             "navigation.mdx": navigationMdxTemplate,
+            "sections.mdx": sectionsMdxTemplate,
             "steps.mdx": stepsMdxTemplate,
             "tabs.mdx": tabsMdxTemplate,
             "theme.mdx": themeMdxTemplate,
@@ -378,6 +406,152 @@ class MDXToNextJSGenerator {
         }
         return null;
     }
+    async loadSectionsConfig() {
+        const sectionsPath = path.join(this.rootDir, "sections.json");
+        try {
+            if (await fs.pathExists(sectionsPath)) {
+                const content = await fs.readFile(sectionsPath, "utf8");
+                const parsed = JSON.parse(content);
+                if (Array.isArray(parsed) && parsed.length > 0) {
+                    return parsed;
+                }
+            }
+        }
+        catch (error) {
+            console.warn(chalk.yellow("⚠️ Error reading sections.json"), error);
+        }
+        return null;
+    }
+    async discoverSectionsFromFrontmatter() {
+        const files = await this.getAllMDXFiles();
+        const sectionMap = new Map();
+        let hasUnsectionedPages = false;
+        let defaultSectionLabel = "Docs";
+        for (const file of files) {
+            const fullPath = path.join(this.watchDir, file);
+            const content = await fs.readFile(fullPath, "utf8");
+            const { data: frontmatter } = matter(content);
+            if (frontmatter.section) {
+                const label = frontmatter.section;
+                const order = frontmatter.sectionOrder || 0;
+                const existing = sectionMap.get(label);
+                if (!existing || order < existing.order) {
+                    sectionMap.set(label, { label, order });
+                }
+            }
+            else {
+                hasUnsectionedPages = true;
+            }
+            if ((file === "index.mdx" || file === "./index.mdx") &&
+                frontmatter.sectionLabel) {
+                defaultSectionLabel = frontmatter.sectionLabel;
+            }
+        }
+        if (sectionMap.size === 0)
+            return null;
+        const sorted = [...sectionMap.values()].sort((a, b) => a.order - b.order);
+        const sections = [];
+        // Implicit root entry for pages without a section field
+        if (hasUnsectionedPages) {
+            sections.push({ label: defaultSectionLabel, slug: "" });
+        }
+        for (const s of sorted) {
+            sections.push({
+                label: s.label,
+                slug: s.label.toLowerCase().replace(/\s+/g, "-"),
+            });
+        }
+        return sections;
+    }
+    async resolveSections() {
+        const fromFile = await this.loadSectionsConfig();
+        if (fromFile)
+            return fromFile;
+        return this.discoverSectionsFromFrontmatter();
+    }
+    async reloadSections() {
+        console.log(chalk.cyan("📑 Sections configuration changed"));
+        this.sectionsConfig = await this.resolveSections();
+        await this.processAllMDXFiles();
+        await this.generateSectionIndexPages();
+    }
+    async maybeUpdateSections() {
+        if (this.isReprocessing)
+            return;
+        // Skip if sections.json exists (explicit config takes priority)
+        const fromFile = await this.loadSectionsConfig();
+        if (fromFile)
+            return;
+        const newSections = await this.discoverSectionsFromFrontmatter();
+        const changed = JSON.stringify(newSections) !== JSON.stringify(this.sectionsConfig);
+        if (changed) {
+            console.log(chalk.cyan(newSections
+                ? `📑 Sections updated from frontmatter: ${newSections.map((s) => s.label).join(", ")}`
+                : "📑 Sections cleared (no section frontmatter found)"));
+            this.sectionsConfig = newSections;
+            this.isReprocessing = true;
+            try {
+                await this.processAllMDXFiles();
+                await this.generateSectionIndexPages();
+            }
+            finally {
+                this.isReprocessing = false;
+            }
+        }
+    }
+    determineSectionForFile(filePath, frontmatter) {
+        if (!this.sectionsConfig || this.sectionsConfig.length === 0) {
+            return { sectionSlug: "", pageSlug: generateSlug(filePath) };
+        }
+        const normalizedPath = filePath.replace(/\\/g, "/");
+        const firstDir = normalizedPath.includes("/")
+            ? normalizedPath.split("/")[0]
+            : "";
+        // Explicit directory matching (entries with a directory field)
+        for (const section of this.sectionsConfig) {
+            if (!section.directory)
+                continue;
+            const dirPrefix = section.directory + "/";
+            if (normalizedPath.startsWith(dirPrefix)) {
+                return {
+                    sectionSlug: section.slug,
+                    pageSlug: generateSlug(normalizedPath.slice(dirPrefix.length)),
+                };
+            }
+        }
+        // Directory matches section slug (auto-detect)
+        if (firstDir) {
+            const match = this.sectionsConfig.find((s) => s.slug === firstDir);
+            if (match) {
+                const pathForSlug = normalizedPath.slice(firstDir.length + 1);
+                return {
+                    sectionSlug: match.slug,
+                    pageSlug: generateSlug(pathForSlug),
+                };
+            }
+        }
+        // Frontmatter section field
+        if (frontmatter.section) {
+            const label = frontmatter.section;
+            const match = this.sectionsConfig.find((s) => s.label === label);
+            if (match) {
+                // Strip the directory if it matches the section slug
+                let pathForSlug = filePath;
+                if (firstDir && firstDir === match.slug) {
+                    pathForSlug = normalizedPath.slice(firstDir.length + 1);
+                }
+                return {
+                    sectionSlug: match.slug,
+                    pageSlug: generateSlug(pathForSlug),
+                };
+            }
+        }
+        // No section match - page stays at root
+        return {
+            sectionSlug: "",
+            pageSlug: generateSlug(filePath),
+        };
+    }
     async handleConfigFileChange(filePath) {
         const fileName = path.basename(filePath);
         if (this.configFiles.includes(fileName)) {
@@ -386,6 +560,9 @@ class MDXToNextJSGenerator {
             try {
                 await fs.copy(sourcePath, destPath);
                 console.log(chalk.green(`📋 Updated ${fileName} in Next.js app`));
+                if (fileName === "sections.json") {
+                    await this.reloadSections();
+                }
             }
             catch (error) {
                 console.error(chalk.red(`❌ Error copying ${fileName}:`), error);
@@ -401,6 +578,9 @@ class MDXToNextJSGenerator {
                     await fs.remove(destPath);
                     console.log(chalk.yellow(`🗑️ Removed ${fileName} from Next.js app`));
                 }
+                if (fileName === "sections.json") {
+                    await this.reloadSections();
+                }
             }
             catch (error) {
                 console.error(chalk.red(`❌ Error removing ${fileName}:`), error);
@@ -579,8 +759,10 @@ class MDXToNextJSGenerator {
         const fullPath = path.join(this.watchDir, file);
         const content = await fs.readFile(fullPath, "utf8");
         const { data: frontmatter } = matter(content);
+        const { sectionSlug, pageSlug } = this.determineSectionForFile(file, frontmatter);
+        const fullSlug = getFullSlug(pageSlug, sectionSlug);
         return {
-            slug: this.generateSlug(file),
+            slug: fullSlug,
             title: frontmatter.title || "Untitled",
             description: frontmatter.description || "",
             date: frontmatter.date || null,
@@ -588,6 +770,7 @@ class MDXToNextJSGenerator {
             path: file,
             categoryOrder: frontmatter.categoryOrder || 0,
             order: frontmatter.order || 0,
+            section: sectionSlug,
         };
     }
     async buildAllPagesMeta() {
@@ -600,7 +783,11 @@ class MDXToNextJSGenerator {
         try {
             const content = await fs.readFile(fullPath, "utf8");
             const { data: frontmatter, content: mdxContent } = matter(content);
-            if (filePath === "index.mdx" || filePath === "./index.mdx") {
+            const { sectionSlug, pageSlug } = this.determineSectionForFile(filePath, frontmatter);
+            const fullSlug = getFullSlug(pageSlug, sectionSlug);
+            const isIndex = filePath === "index.mdx" || filePath === "./index.mdx";
+            const isSectionIndex = this.sectionsConfig && pageSlug === "" && sectionSlug !== "";
+            if (isIndex) {
                 console.log(chalk.blue("🏠 Updating homepage with index.mdx content"));
             }
             else {
@@ -608,13 +795,18 @@ class MDXToNextJSGenerator {
                     path: filePath,
                     content: mdxContent,
                     frontmatter,
-                    slug: this.generateSlug(filePath),
+                    slug: fullSlug,
                 };
                 await this.generatePageFromMDX(mdxFile);
             }
+            if (isSectionIndex) {
+                await this.updateSectionIndex(sectionSlug, frontmatter, mdxContent);
+            }
             await this.updatePagesIndex();
             await this.updateRootLayout();
+            await this.generateSectionIndexPages();
             console.log(chalk.green(`✅ Generated page for: ${filePath}`));
+            await this.maybeUpdateSections();
         }
         catch (error) {
             console.error(chalk.red(`❌ Error processing ${filePath}:`), error);
@@ -627,13 +819,16 @@ class MDXToNextJSGenerator {
                 console.log(chalk.blue("🏠 Updating homepage - index.mdx deleted"));
             }
             else {
-                const slug = this.generateSlug(filePath);
-                const pagePath = path.join(this.outputDir, "app", slug);
+                // We don't have frontmatter for deleted files, so use directory-based matching
+                const { sectionSlug, pageSlug } = this.determineSectionForFile(filePath, {});
+                const fullSlug = getFullSlug(pageSlug, sectionSlug);
+                const pagePath = path.join(this.outputDir, "app", fullSlug);
                 await fs.remove(pagePath);
             }
             await this.updatePagesIndex();
             await this.updateRootLayout();
             console.log(chalk.green(`✅ Removed page for: ${filePath}`));
+            await this.maybeUpdateSections();
         }
         catch (error) {
             console.error(chalk.red(`❌ Error removing page for ${filePath}:`), error);
@@ -663,13 +858,44 @@ class MDXToNextJSGenerator {
         await scanDir(this.watchDir);
         return files;
     }
-    generateSlug(filePath) {
-        return generateSlug(filePath);
-    }
     async generateRootLayout() {
         const pages = await this.buildAllPagesMeta();
         const fontConfig = await this.loadFontConfig();
-        return layoutTemplate(pages, fontConfig);
+        return layoutTemplate(pages, fontConfig, this.sectionsConfig);
+    }
+    async generateSectionIndexPages() {
+        if (!this.sectionsConfig || this.sectionsConfig.length === 0)
+            return;
+        const pages = await this.buildAllPagesMeta();
+        for (const section of this.sectionsConfig) {
+            if (section.slug === "")
+                continue;
+            // Check if a page already exists at the section root
+            const hasIndex = pages.some((p) => p.slug === section.slug);
+            if (hasIndex)
+                continue;
+            // Find the first page in this section
+            const sectionPages = pages
+                .filter((p) => p.section === section.slug)
+                .sort((a, b) => {
+                if (a.categoryOrder !== b.categoryOrder)
+                    return a.categoryOrder - b.categoryOrder;
+                return a.order - b.order;
+            });
+            if (sectionPages.length === 0)
+                continue;
+            const firstPage = sectionPages[0];
+            const redirectContent = `import { redirect } from "next/navigation";
+
+export default function SectionIndex() {
+  redirect("/${firstPage.slug}");
+}
+`;
+            const pagePath = path.join(this.outputDir, "app", section.slug, "page.tsx");
+            await fs.ensureDir(path.dirname(pagePath));
+            await fs.writeFile(pagePath, redirectContent, "utf8");
+            console.log(chalk.blue(`🔀 Generated section index redirect: /${section.slug} -> /${firstPage.slug}`));
+        }
     }
     async generatePageFromMDX(mdxFile) {
         const pageContent = `import { Metadata } from "next";
@@ -749,6 +975,32 @@ export default function Home() {
 `;
         await fs.writeFile(path.join(this.outputDir, "app", "page.tsx"), indexContent, "utf8");
     }
+    async updateSectionIndex(sectionSlug, frontmatter, mdxContent) {
+        const indexContent = `import { Metadata } from "next";
+import { Docs } from "@/components/Docs";
+import { config } from "@/utils/config";
+
+const content = \`${escapeTemplateContent(mdxContent)}\`;
+
+export const metadata: Metadata = {
+  title: \`\${config.name ? config.name + " -" : "Doccupine -"} ${frontmatter.title || "Section"}\`,
+  description: \`${frontmatter.description ? frontmatter.description : '${config.description ? config.description : "Generated with Doccupine"}'}\`,
+  icons: \`${frontmatter.icon ? frontmatter.icon : '\${config.icon || "https://doccupine.com/favicon.ico"}'}\`,
+  openGraph: {
+    title: \`\${config.name ? config.name + " -" : "Doccupine -"} ${frontmatter.title || "Section"}\`,
+    description: \`${frontmatter.description ? frontmatter.description : '${config.description ? config.description : "Generated with Doccupine"}'}\`,
+    images: \`${frontmatter.image ? frontmatter.image : '\${config.preview || "https://doccupine.com/preview.png"}'}\`,
+  },
+};
+
+export default function Page() {
+  return <Docs content={content} />;
+}
+`;
+        const pagePath = path.join(this.outputDir, "app", sectionSlug, "page.tsx");
+        await fs.ensureDir(path.dirname(pagePath));
+        await fs.writeFile(pagePath, indexContent, "utf8");
+    }
     async updateRootLayout() {
         const layoutContent = await this.generateRootLayout();
         await fs.writeFile(path.join(this.outputDir, "app", "layout.tsx"), layoutContent, "utf8");

package/dist/templates/app/layout.d.ts

@@ -1 +1,34 @@
-export declare const layoutTemplate: (pages: any[], fontConfig: any) => string;
+interface SectionConfig {
+    label: string;
+    slug: string;
+    directory?: string;
+}
+interface PageData {
+    slug: string;
+    title: string;
+    description: string;
+    date: string | null;
+    category: string;
+    path: string;
+    categoryOrder: number;
+    order: number;
+    section: string;
+}
+interface GoogleFontConfig {
+    fontName?: string;
+    subsets?: string[];
+    weight?: string | string[];
+}
+interface LocalFontSrc {
+    path: string;
+    weight: string;
+    style: string;
+}
+interface FontConfig {
+    googleFont?: GoogleFontConfig;
+    localFonts?: string | {
+        src?: LocalFontSrc[];
+    };
+}
+export declare const layoutTemplate: (pages: PageData[], fontConfig: FontConfig | null, sectionsConfig?: SectionConfig[] | null) => string;
+export {};

package/dist/templates/app/layout.js

@@ -1,8 +1,8 @@
-function formatPagesArray(pages) {
+function formatObjectArray(items) {
     const MAX_WIDTH = 80;
-    const items = pages.map((page) => {
+    const formatted = items.map((item) => {
         const lines = ["  {"];
-        const entries = Object.entries(page);
+        const entries = Object.entries(item);
         for (const [key, value] of entries) {
             const valueStr = JSON.stringify(value);
             const line = `    ${key}: ${valueStr},`;
@@ -17,37 +17,67 @@ function formatPagesArray(pages) {
         lines.push("  },");
         return lines.join("\n");
     });
-    return "[\n" + items.join("\n") + "\n]";
+    return "[\n" + formatted.join("\n") + "\n]";
 }
-export const layoutTemplate = (pages, fontConfig) => `import type { Metadata } from "next";
-${fontConfig?.googleFont?.fontName?.length ? `import { ${fontConfig.googleFont.fontName} } from "next/font/google";` : fontConfig?.localFonts?.length || fontConfig?.localFonts?.src?.length ? 'import localFont from "next/font/local";' : 'import { Inter } from "next/font/google";'}
+function isGoogleFont(fc) {
+    return !!fc?.googleFont?.fontName;
+}
+function isLocalFont(fc) {
+    if (!fc?.localFonts)
+        return false;
+    if (typeof fc.localFonts === "string")
+        return true;
+    return !!fc.localFonts.src?.length;
+}
+function getLocalFontSrc(fc) {
+    if (typeof fc.localFonts === "string")
+        return `"${fc.localFonts}"`;
+    return JSON.stringify(fc.localFonts?.src, null, 2).replace(/"([^"]+)":/g, "$1:");
+}
+export const layoutTemplate = (pages, fontConfig, sectionsConfig = null) => {
+    const hasSections = sectionsConfig !== null && sectionsConfig.length > 0;
+    return `import type { Metadata } from "next";
+${isGoogleFont(fontConfig) ? `import { ${fontConfig.googleFont.fontName} } from "next/font/google";` : isLocalFont(fontConfig) ? 'import localFont from "next/font/local";' : 'import { Inter } from "next/font/google";'}
 import dynamic from "next/dynamic";
 import { StyledComponentsRegistry } from "cherry-styled-components";
 import { theme, themeDark } from "@/app/theme";
 import { CherryThemeProvider } from "@/components/layout/CherryThemeProvider";
 import { ChtProvider } from "@/components/Chat";
-import { Footer } from "@/components/layout/Footer";
-import { Header } from "@/components/layout/Header";
-import { DocsWrapper } from "@/components/layout/DocsComponents";
-import { SideBar } from "@/components/SideBar";
-import { DocsNavigation } from "@/components/layout/DocsNavigation";
+${hasSections
+        ? ""
+        : `import { Footer } from "@/components/layout/Footer";
+`}import { Header } from "@/components/layout/Header";
 import {
+  DocsWrapper,
+  SectionBarProvider,
+} from "@/components/layout/DocsComponents";
+${hasSections
+        ? ""
+        : `import { SideBar } from "@/components/SideBar";
+import { DocsNavigation } from "@/components/layout/DocsNavigation";
+`}import {
   transformPagesToGroupedStructure,
   type PagesProps,
 } from "@/utils/orderNavItems";
-import { StaticLinks } from "@/components/layout/StaticLinks";
-import { config } from "@/utils/config";
+${hasSections
+        ? ""
+        : `import { StaticLinks } from "@/components/layout/StaticLinks";
+`}import { config } from "@/utils/config";
 import { verifyBrandingKey } from "@/utils/branding";
 import navigation from "@/navigation.json";
-const Chat = dynamic(() => import("@/components/Chat").then((mod) => mod.Chat));
+${hasSections
+        ? `import { SectionBar } from "@/components/layout/SectionBar";
+import { SectionNavProvider } from "@/components/SectionNavProvider";
+`
+        : ""}const Chat = dynamic(() => import("@/components/Chat").then((mod) => mod.Chat));
 
-${fontConfig?.googleFont?.fontName?.length
-    ? `const font = ${fontConfig.googleFont.fontName}({ ${[fontConfig?.googleFont?.subsets?.length ? `subsets: ${JSON.stringify(fontConfig.googleFont.subsets)}` : "", fontConfig.googleFont?.weight?.length ? `weight: ${Array.isArray(fontConfig.googleFont.weight) ? JSON.stringify(fontConfig.googleFont.weight) : `"${fontConfig.googleFont.weight}"`}` : ""].filter(Boolean).join(", ")} });`
-    : fontConfig?.localFonts?.length || fontConfig?.localFonts?.src?.length
-        ? `const font = localFont({
-  src: ${fontConfig.localFonts?.src?.length ? JSON.stringify(fontConfig?.localFonts.src, null, 2).replace(/"([^"]+)":/g, "$1:") : `"${fontConfig?.localFonts}"`},
+${isGoogleFont(fontConfig)
+        ? `const font = ${fontConfig.googleFont.fontName}({ ${[fontConfig.googleFont.subsets?.length ? `subsets: ${JSON.stringify(fontConfig.googleFont.subsets)}` : "", fontConfig.googleFont.weight?.length ? `weight: ${Array.isArray(fontConfig.googleFont.weight) ? JSON.stringify(fontConfig.googleFont.weight) : `"${fontConfig.googleFont.weight}"`}` : ""].filter(Boolean).join(", ")} });`
+        : isLocalFont(fontConfig)
+            ? `const font = localFont({
+  src: ${getLocalFontSrc(fontConfig)},
 });`
-        : 'const font = Inter({ subsets: ["latin"] });'}
+            : 'const font = Inter({ subsets: ["latin"] });'}
 
 export const metadata: Metadata = {
   title: config.name || "Doccupine",
@@ -64,7 +94,7 @@ export const metadata: Metadata = {
   },
 };
 
-const doccupinePages = ${formatPagesArray(pages)};
+const doccupinePages = ${formatObjectArray(pages)};${hasSections ? `\nconst doccupineSections = ${formatObjectArray(sectionsConfig)};` : ""}
 
 export default async function RootLayout({
   children,
@@ -72,7 +102,37 @@ export default async function RootLayout({
   children: React.ReactNode;
 }>) {
   const hideBranding = verifyBrandingKey();
+${hasSections
+        ? `
+  const pages: PagesProps[] = doccupinePages;
 
+  return (
+    <html lang="en">
+      <body className={font.className}>
+        <StyledComponentsRegistry>
+          <CherryThemeProvider theme={theme} themeDark={themeDark}>
+            <ChtProvider isChatActive={process.env.LLM_PROVIDER ? true : false}>
+              <Header>
+                <SectionBar sections={doccupineSections} />
+              </Header>
+              {process.env.LLM_PROVIDER && <Chat />}
+              <DocsWrapper>
+                <SectionNavProvider
+                  sections={doccupineSections}
+                  allPages={pages}
+                  hideBranding={hideBranding}
+                >
+                  {children}
+                </SectionNavProvider>
+              </DocsWrapper>
+            </ChtProvider>
+          </CherryThemeProvider>
+        </StyledComponentsRegistry>
+      </body>
+    </html>
+  );
+}`
+        : `
   const defaultPages = [
     {
       slug: "",
@@ -87,9 +147,10 @@ export default async function RootLayout({
   ];
 
   const pages: PagesProps[] = doccupinePages;
-  const result = navigation.length
-    ? navigation
-    : transformPagesToGroupedStructure(pages);
+  const result =
+    Array.isArray(navigation) && navigation.length
+      ? navigation
+      : transformPagesToGroupedStructure(pages);
   const defaultResults = transformPagesToGroupedStructure(defaultPages);
 
   return (
@@ -99,21 +160,24 @@ export default async function RootLayout({
           <CherryThemeProvider theme={theme} themeDark={themeDark}>
             <ChtProvider isChatActive={process.env.LLM_PROVIDER ? true : false}>
               <Header />
-              <StaticLinks />
               {process.env.LLM_PROVIDER && <Chat />}
-              <DocsWrapper>
-                <SideBar result={result.length ? result : defaultResults} />
-                {children}
-                <DocsNavigation
-                  result={result.length ? result : defaultResults}
-                />
-                <Footer hideBranding={hideBranding} />
-              </DocsWrapper>
+              <SectionBarProvider hasSectionBar={false}>
+                <DocsWrapper>
+                  <SideBar result={result.length ? result : defaultResults} />
+                  {children}
+                  <DocsNavigation
+                    result={result.length ? result : defaultResults}
+                  />
+                  <StaticLinks />
+                  <Footer hideBranding={hideBranding} />
+                </DocsWrapper>
+              </SectionBarProvider>
             </ChtProvider>
           </CherryThemeProvider>
         </StyledComponentsRegistry>
       </body>
     </html>
   );
-}
+}`}
 `;
+};