doccupine 0.0.24 → 0.0.26

package/dist/index.js

@@ -55,6 +55,7 @@ import { columnsMdxTemplate } from "./templates/mdx/columns.mdx.js";
 import { commandsMdxTemplate } from "./templates/mdx/commands.mdx.js";
 import { deploymentMdxTemplate } from "./templates/mdx/deployment.mdx.js";
 import { fieldsMdxTemplate } from "./templates/mdx/fields.mdx.js";
+import { fontsMdxTemplate } from "./templates/mdx/fonts.mdx.js";
 import { globalsMdxTemplate } from "./templates/mdx/globals.mdx.js";
 import { headersAndTextMdxTemplate } from "./templates/mdx/headers-and-text.mdx.js";
 import { iconsMdxTemplate } from "./templates/mdx/icons.mdx.js";
@@ -139,7 +140,9 @@ class MDXToNextJSGenerator {
     rootDir;
     watcher = null;
     configWatcher = null;
+    fontWatcher = null;
     configFiles = ["theme.json", "navigation.json", "config.json"];
+    fontConfigFile = "fonts.json";
     constructor(watchDir, outputDir) {
         this.watchDir = path.resolve(watchDir);
         this.outputDir = path.resolve(outputDir);
@@ -152,6 +155,7 @@ class MDXToNextJSGenerator {
         await this.createNextJSStructure();
         await this.createStartingDocs();
         await this.copyCustomConfigFiles();
+        await this.copyFontConfig();
         await this.processAllMDXFiles();
         console.log(chalk.green("✅ Initial setup complete!"));
         console.log(chalk.cyan("💡 To start the Next.js dev server:"));
@@ -221,6 +225,7 @@ class MDXToNextJSGenerator {
             "commands.mdx": this.generateCommandsMdx(),
             "deployment.mdx": this.generateDeploymentMdx(),
             "fields.mdx": this.generateFieldsMdx(),
+            "fonts.mdx": this.generateFontsMdx(),
             "globals.mdx": this.generateGlobalsMdx(),
             "headers-and-text.mdx": this.generateHeadersAndTextMdx(),
             "icons.mdx": this.generateIconsMdx(),
@@ -257,6 +262,31 @@ class MDXToNextJSGenerator {
             }
         }
     }
+    async copyFontConfig() {
+        console.log(chalk.blue(`🔍 Checking for font configuration...`));
+        const sourcePath = path.join(this.rootDir, this.fontConfigFile);
+        const destPath = path.join(this.outputDir, this.fontConfigFile);
+        if (await fs.pathExists(sourcePath)) {
+            await fs.copy(sourcePath, destPath);
+            console.log(chalk.green(`  ✓ Copied ${this.fontConfigFile} to Next.js app`));
+        }
+        else {
+            console.log(chalk.gray(`  ✗ ${this.fontConfigFile} not found, skipping`));
+        }
+    }
+    async loadFontConfig() {
+        const fontPath = path.join(this.rootDir, this.fontConfigFile);
+        try {
+            if (await fs.pathExists(fontPath)) {
+                const fontContent = await fs.readFile(fontPath, "utf8");
+                return JSON.parse(fontContent);
+            }
+        }
+        catch (error) {
+            console.warn(chalk.yellow(`⚠️ Error reading ${this.fontConfigFile}`), error);
+        }
+        return null;
+    }
     async handleConfigFileChange(filePath) {
         const fileName = path.basename(filePath);
         if (this.configFiles.includes(fileName)) {
@@ -286,6 +316,37 @@ class MDXToNextJSGenerator {
             }
         }
     }
+    async handleFontConfigChange() {
+        console.log(chalk.cyan(`🔤 Font configuration changed`));
+        const sourcePath = path.join(this.rootDir, this.fontConfigFile);
+        const destPath = path.join(this.outputDir, this.fontConfigFile);
+        try {
+            await fs.copy(sourcePath, destPath);
+            console.log(chalk.green(`📋 Updated ${this.fontConfigFile} in Next.js app`));
+            // Update the layout template with new font config
+            await this.updateRootLayout();
+            console.log(chalk.green(`✅ Layout updated with new font configuration`));
+        }
+        catch (error) {
+            console.error(chalk.red(`❌ Error updating font configuration:`), error);
+        }
+    }
+    async handleFontConfigDelete() {
+        console.log(chalk.red(`🗑️ Font configuration deleted`));
+        const destPath = path.join(this.outputDir, this.fontConfigFile);
+        try {
+            if (await fs.pathExists(destPath)) {
+                await fs.remove(destPath);
+                console.log(chalk.yellow(`🗑️ Removed ${this.fontConfigFile} from Next.js app`));
+                // Update the layout template without font config
+                await this.updateRootLayout();
+                console.log(chalk.green(`✅ Layout updated without font configuration`));
+            }
+        }
+        catch (error) {
+            console.error(chalk.red(`❌ Error removing font configuration:`), error);
+        }
+    }
     async startWatching() {
         console.log(chalk.yellow(`👀 Watching for changes in: ${this.watchDir}`));
         this.watcher = chokidar.watch(this.watchDir, {
@@ -343,6 +404,25 @@ class MDXToNextJSGenerator {
             .on("error", (error) => {
             console.error(chalk.red("❌ Config watcher error:"), error);
         });
+        const fontPath = path.join(this.rootDir, this.fontConfigFile);
+        this.fontWatcher = chokidar.watch(fontPath, {
+            persistent: true,
+            ignoreInitial: true,
+        });
+        this.fontWatcher
+            .on("add", () => {
+            console.log(chalk.cyan(`🔤 Font configuration added`));
+            this.handleFontConfigChange();
+        })
+            .on("change", () => {
+            this.handleFontConfigChange();
+        })
+            .on("unlink", () => {
+            this.handleFontConfigDelete();
+        })
+            .on("error", (error) => {
+            console.error(chalk.red("❌ Font watcher error:"), error);
+        });
     }
     async handleFileChange(action, filePath) {
         console.log(chalk.cyan(`📝 File ${action}: ${filePath}`));
@@ -469,7 +549,8 @@ class MDXToNextJSGenerator {
                 order: frontmatter.order || 0,
             });
         }
-        return layoutTemplate(pages);
+        const fontConfig = await this.loadFontConfig();
+        return layoutTemplate(pages, fontConfig);
     }
     generateNotFoundPage() {
         return notFoundTemplate;
@@ -702,6 +783,9 @@ export default function Home() {
     generateFieldsMdx() {
         return fieldsMdxTemplate;
     }
+    generateFontsMdx() {
+        return fontsMdxTemplate;
+    }
     generateGlobalsMdx() {
         return globalsMdxTemplate;
     }
@@ -744,12 +828,16 @@ export default function Home() {
             await this.configWatcher.close();
             console.log(chalk.yellow("👋 Stopped watching for config changes"));
         }
+        if (this.fontWatcher) {
+            await this.fontWatcher.close();
+            console.log(chalk.yellow("👋 Stopped watching for font config changes"));
+        }
     }
 }
 program
     .name("doccupine")
     .description("Watch MDX files and generate Next.js documentation pages automatically")
-    .version("0.0.24");
+    .version("0.0.26");
 program
     .command("watch", { isDefault: true })
     .description("Watch a directory for MDX changes and generate Next.js app")

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

@@ -1 +1 @@
-export declare const layoutTemplate: (pages: any[]) => string;
+export declare const layoutTemplate: (pages: any[], fontConfig: any) => string;

package/dist/templates/app/layout.js

@@ -1,5 +1,5 @@
-export const layoutTemplate = (pages) => `import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+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";'}
 import { StyledComponentsRegistry } from "cherry-styled-components/src/lib";
 import { theme, themeDark } from "@/app/theme";
 import { CherryThemeProvider } from "@/components/layout/CherryThemeProvider";
@@ -11,7 +11,13 @@ import { DocsNavigation } from "@/components/layout/DocsNavigation";
 import { transformPagesToGroupedStructure } from "@/utils/orderNavItems";
 import navigation from "@/navigation.json";
 
-const inter = Inter({ subsets: ["latin"] });
+${fontConfig?.googleFont?.fontName?.length
+    ? `const font = ${fontConfig.googleFont.fontName}({ subsets: ${fontConfig?.googleFont?.subsets?.length ? JSON.stringify(fontConfig?.googleFont?.subsets, null, 2) : '["latin"]'}, ${fontConfig.googleFont?.weight.length ? `weight: "${fontConfig.googleFont.weight}"` : ""} });`
+    : 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}"`},
+});`
+        : 'const font = Inter({ subsets: ["latin"] });'}
 
 export const metadata: Metadata = {
   title: "Doccupine",
@@ -47,7 +53,7 @@ export default async function RootLayout({
 
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={font.className}>
         <StyledComponentsRegistry>
           <CherryThemeProvider theme={theme} themeDark={themeDark}>
             <Header />

package/dist/templates/components/MDXComponents.d.ts

@@ -1 +1 @@
-export declare const mdxComponentsTemplate = "import React from \"react\";\ntype MDXComponents = Record<string, React.ComponentType<any>>;\nimport { Code as CodeBlock } from \"@/components/layout/Code\";\nimport { Card } from \"@/components/layout/Card\";\nimport { Accordion } from \"@/components/layout/Accordion\";\nimport { Tabs, TabContent } from \"@/components/layout/Tabs\";\nimport { Callout } from \"@/components/layout/Callout\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { Columns } from \"@/components/layout/Columns\";\nimport { Field } from \"@/components/layout/Field\";\nimport { Update } from \"@/components/layout/Update\";\nimport { Steps, Step } from \"@/components/layout/Steps\";\nimport { Button } from \"@/components/layout/Button\";\nimport { DemoTheme } from \"@/components/layout/DemoTheme\";\n\nfunction extractAllTextFromChildren(children: React.ReactNode): string {\n  if (children == null) return \"\";\n  if (typeof children === \"string\") return children;\n  if (typeof children === \"number\") return String(children);\n  if (typeof children === \"boolean\") return \"\";\n  if (Array.isArray(children))\n    return children.map(extractAllTextFromChildren).join(\"\");\n  if (React.isValidElement(children)) {\n    const element = children as React.ReactElement<any>;\n    return extractAllTextFromChildren(element.props.children);\n  }\n  return \"\";\n}\n\nfunction generateId(text: string): string {\n  return text\n    .toLowerCase()\n    .replace(/[^\\w\\s-]/g, \"\")\n    .replace(/\\s+/g, \"-\")\n    .trim();\n}\n\n// Map <pre><code class=\"language-xyz\"> to our <Code /> component\nfunction Pre(props: any) {\n  const child = React.Children.only(\n    props.children,\n  ) as React.ReactElement<any> | null;\n  if (child && child.type === \"code\") {\n    const className = child.props.className || \"\";\n    const match = /language-(\\w+)/.exec(className);\n    const language = match ? match[1] : undefined;\n    const code =\n      typeof child.props.children === \"string\"\n        ? child.props.children.replace(/\\n$/, \"\")\n        : String(child.props.children ?? \"\");\n    if (language) {\n      return (\n        <CodeBlock className={className} code={code} language={language} />\n      );\n    }\n  }\n  return <pre {...props} />;\n}\n\nexport function useMDXComponents(components: MDXComponents): MDXComponents {\n  return {\n    // Headings with auto-generated ids for TOC and deep links\n    h1: ({ children, ...props }: any) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h1 id={id} {...props}>\n          {children}\n        </h1>\n      );\n    },\n    h2: ({ children, ...props }: any) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h2 id={id} {...props}>\n          {children}\n        </h2>\n      );\n    },\n    h3: ({ children, ...props }: any) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h3 id={id} {...props}>\n          {children}\n        </h3>\n      );\n    },\n    h4: ({ children, ...props }: any) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h4 id={id} {...props}>\n          {children}\n        </h4>\n      );\n    },\n    h5: ({ children, ...props }: any) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h5 id={id} {...props}>\n          {children}\n        </h5>\n      );\n    },\n    h6: ({ children, ...props }: any) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h6 id={id} {...props}>\n          {children}\n        </h6>\n      );\n    },\n\n    // Code blocks\n    pre: Pre,\n\n    // Expose your custom components for MDX usage\n    Card,\n    Accordion,\n    Tabs,\n    TabContent,\n    Callout,\n    Icon,\n    Columns,\n    Field,\n    Update,\n    Steps,\n    Step,\n    Button,\n    DemoTheme,\n    ...components,\n  };\n}\n";
+export declare const mdxComponentsTemplate = "import React from \"react\";\ntype MDXComponents = Record<string, React.ComponentType<any>>;\nimport { Space } from \"cherry-styled-components/src/lib\";\nimport { Code as CodeBlock } from \"@/components/layout/Code\";\nimport { Card } from \"@/components/layout/Card\";\nimport { Accordion } from \"@/components/layout/Accordion\";\nimport { Tabs, TabContent } from \"@/components/layout/Tabs\";\nimport { Callout } from \"@/components/layout/Callout\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { Columns } from \"@/components/layout/Columns\";\nimport { Field } from \"@/components/layout/Field\";\nimport { Update } from \"@/components/layout/Update\";\nimport { Steps, Step } from \"@/components/layout/Steps\";\nimport { Button } from \"@/components/layout/Button\";\nimport { DemoTheme } from \"@/components/layout/DemoTheme\";\n\nfunction extractAllTextFromChildren(children: React.ReactNode): string {\n  if (children == null) return \"\";\n  if (typeof children === \"string\") return children;\n  if (typeof children === \"number\") return String(children);\n  if (typeof children === \"boolean\") return \"\";\n  if (Array.isArray(children))\n    return children.map(extractAllTextFromChildren).join(\"\");\n  if (React.isValidElement(children)) {\n    const element = children as React.ReactElement<any>;\n    return extractAllTextFromChildren(element.props.children);\n  }\n  return \"\";\n}\n\nfunction generateId(text: string): string {\n  return text\n    .toLowerCase()\n    .replace(/[^\\w\\s-]/g, \"\")\n    .replace(/\\s+/g, \"-\")\n    .trim();\n}\n\n// Map <pre><code class=\"language-xyz\"> to our <Code /> component\nfunction Pre(props: any) {\n  const child = React.Children.only(\n    props.children,\n  ) as React.ReactElement<any> | null;\n  if (child && child.type === \"code\") {\n    const className = child.props.className || \"\";\n    const match = /language-(\\w+)/.exec(className);\n    const language = match ? match[1] : undefined;\n    const code =\n      typeof child.props.children === \"string\"\n        ? child.props.children.replace(/\\n$/, \"\")\n        : String(child.props.children ?? \"\");\n    if (language) {\n      return (\n        <CodeBlock className={className} code={code} language={language} />\n      );\n    }\n  }\n  return <pre {...props} />;\n}\n\nexport function useMDXComponents(components: MDXComponents): MDXComponents {\n  return {\n    // Headings with auto-generated ids for TOC and deep links\n    h1: ({ children, ...props }: any) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h1 id={id} {...props}>\n          {children}\n        </h1>\n      );\n    },\n    h2: ({ children, ...props }: any) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h2 id={id} {...props}>\n          {children}\n        </h2>\n      );\n    },\n    h3: ({ children, ...props }: any) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h3 id={id} {...props}>\n          {children}\n        </h3>\n      );\n    },\n    h4: ({ children, ...props }: any) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h4 id={id} {...props}>\n          {children}\n        </h4>\n      );\n    },\n    h5: ({ children, ...props }: any) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h5 id={id} {...props}>\n          {children}\n        </h5>\n      );\n    },\n    h6: ({ children, ...props }: any) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h6 id={id} {...props}>\n          {children}\n        </h6>\n      );\n    },\n\n    // Code blocks\n    pre: Pre,\n\n    // Expose your custom components for MDX usage\n    Card,\n    Accordion,\n    Tabs,\n    TabContent,\n    Callout,\n    Icon,\n    Columns,\n    Field,\n    Update,\n    Steps,\n    Step,\n    Button,\n    DemoTheme,\n    Space,\n    ...components,\n  };\n}\n";

package/dist/templates/components/MDXComponents.js

@@ -1,5 +1,6 @@
 export const mdxComponentsTemplate = `import React from "react";
 type MDXComponents = Record<string, React.ComponentType<any>>;
+import { Space } from "cherry-styled-components/src/lib";
 import { Code as CodeBlock } from "@/components/layout/Code";
 import { Card } from "@/components/layout/Card";
 import { Accordion } from "@/components/layout/Accordion";
@@ -126,6 +127,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     Step,
     Button,
     DemoTheme,
+    Space,
     ...components,
   };
 }

package/dist/templates/components/layout/ActionBar.d.ts

@@ -1 +1 @@
-export declare const actionBarTemplate = "\"use client\";\nimport { useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { rgba } from \"polished\";\nimport { resetButton, Textarea } from \"cherry-styled-components/src/lib\";\n\ninterface ActionBarProps {\n  children: React.ReactNode;\n  content: string;\n}\n\nconst StyledActionBar = styled.div<{ theme: Theme }>`\n  position: absolute;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  left: 0;\n  padding: 70px 20px 20px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n\n  ${mq(\"lg\")} {\n    left: 50%;\n    transform: translateX(-50%);\n    max-width: calc(100vw - 640px);\n    width: 100%;\n    padding: 0 20px 20px 20px;\n    margin: 0;\n  }\n`;\n\nconst StyledActionBarContent = styled.div`\n  margin: auto 0;\n`;\n\nconst StyledCopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  background: transparent;\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.grayLight};\n  color: ${({ theme, $copied }) =>\n    $copied ? theme.colors.success : theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 6px 8px;\n  font-size: 12px;\n  font-family: ${({ theme }) => theme.fonts.text};\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n\n  &:hover {\n    border-color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\nconst StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>`\n  ${resetButton}\n  width: 56px;\n  height: 32px;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 3px;\n    left: 3px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    transition: all 0.3s ease;\n    z-index: 1;\n    ${({ $isActive }) =>\n      !$isActive &&\n      css`\n        transform: translateX(24px);\n      `}\n  }\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    margin: auto;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & .lucide-eye {\n    transform: translateX(1px);\n  }\n\n  & .lucide-code-xml {\n    transform: translateX(-1px);\n  }\n\n  & svg[stroke] {\n    stroke: ${({ theme }) => theme.colors.primary};\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      transform: scale(1.05);\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      Toggle & svg[stroke] {\n        stroke: ${({ theme }) =>\n          theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      }\n    }\n  }\n\n  &:active {\n    transform: scale(0.97);\n  }\n`;\n\nconst StyledContent = styled.div`\n  padding-top: 140px;\n\n  ${mq(\"lg\")} {\n    padding-top: 70px;\n  }\n\n  & textarea {\n    max-width: 640px;\n    margin: auto;\n    width: 100%;\n    height: 100%;\n    min-height: calc(100vh - 180px);\n\n    ${mq(\"lg\")} {\n      min-height: calc(100vh - 110px);\n    }\n  }\n`;\n\nfunction ActionBar({ children, content }: ActionBarProps) {\n  const [isView, setIsView] = useState(true);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopyContent = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy:\", err);\n    }\n  };\n\n  return (\n    <>\n      <StyledActionBar>\n        <StyledCopyButton onClick={handleCopyContent} $copied={copied}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={16} />\n              <span>Copied!</span>\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={16} />\n              <span>Copy Content</span>\n            </>\n          )}\n        </StyledCopyButton>\n        <StyledActionBarContent>\n          {\" \"}\n          <StyledToggle\n            onClick={() => setIsView(!isView)}\n            aria-label=\"Toggle Theme\"\n            $isActive={isView}\n          >\n            <Icon name=\"Eye\" />\n            <Icon name=\"CodeXml\" />\n          </StyledToggle>\n        </StyledActionBarContent>\n      </StyledActionBar>\n      {isView && <StyledContent>{children}</StyledContent>}\n      {!isView && (\n        <StyledContent>\n          <Textarea defaultValue={content} $fullWidth />\n        </StyledContent>\n      )}\n    </>\n  );\n}\n\nexport { ActionBar };";
+export declare const actionBarTemplate = "\"use client\";\nimport { useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { rgba } from \"polished\";\nimport { resetButton, Textarea } from \"cherry-styled-components/src/lib\";\n\ninterface ActionBarProps {\n  children: React.ReactNode;\n  content: string;\n}\n\nconst StyledActionBar = styled.div<{ theme: Theme }>`\n  position: absolute;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  left: 0;\n  padding: 70px 20px 20px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n\n  ${mq(\"lg\")} {\n    left: 50%;\n    transform: translateX(-50%);\n    max-width: calc(100vw - 640px);\n    width: 100%;\n    padding: 0 20px 20px 20px;\n    margin: 0;\n  }\n`;\n\nconst StyledActionBarContent = styled.div`\n  margin: auto 0;\n`;\n\nconst StyledCopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  background: transparent;\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.grayLight};\n  color: ${({ theme, $copied }) =>\n    $copied ? theme.colors.success : theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 6px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n\n  &:hover {\n    border-color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\nconst StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>`\n  ${resetButton}\n  width: 56px;\n  height: 32px;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 3px;\n    left: 3px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    transition: all 0.3s ease;\n    z-index: 1;\n    ${({ $isActive }) =>\n      !$isActive &&\n      css`\n        transform: translateX(24px);\n      `}\n  }\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    margin: auto;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & .lucide-eye {\n    transform: translateX(1px);\n  }\n\n  & .lucide-code-xml {\n    transform: translateX(-1px);\n  }\n\n  & svg[stroke] {\n    stroke: ${({ theme }) => theme.colors.primary};\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      transform: scale(1.05);\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      Toggle & svg[stroke] {\n        stroke: ${({ theme }) =>\n          theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      }\n    }\n  }\n\n  &:active {\n    transform: scale(0.97);\n  }\n`;\n\nconst StyledContent = styled.div`\n  padding-top: 140px;\n\n  ${mq(\"lg\")} {\n    padding-top: 70px;\n  }\n\n  & textarea {\n    max-width: 640px;\n    margin: auto;\n    width: 100%;\n    height: 100%;\n    min-height: calc(100vh - 180px);\n\n    ${mq(\"lg\")} {\n      min-height: calc(100vh - 110px);\n    }\n  }\n`;\n\nfunction ActionBar({ children, content }: ActionBarProps) {\n  const [isView, setIsView] = useState(true);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopyContent = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy:\", err);\n    }\n  };\n\n  return (\n    <>\n      <StyledActionBar>\n        <StyledCopyButton onClick={handleCopyContent} $copied={copied}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={16} />\n              <span>Copied!</span>\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={16} />\n              <span>Copy Content</span>\n            </>\n          )}\n        </StyledCopyButton>\n        <StyledActionBarContent>\n          {\" \"}\n          <StyledToggle\n            onClick={() => setIsView(!isView)}\n            aria-label=\"Toggle Theme\"\n            $isActive={isView}\n          >\n            <Icon name=\"Eye\" />\n            <Icon name=\"CodeXml\" />\n          </StyledToggle>\n        </StyledActionBarContent>\n      </StyledActionBar>\n      {isView && <StyledContent>{children}</StyledContent>}\n      {!isView && (\n        <StyledContent>\n          <Textarea defaultValue={content} $fullWidth />\n        </StyledContent>\n      )}\n    </>\n  );\n}\n\nexport { ActionBar };";

package/dist/templates/components/layout/ActionBar.js

@@ -44,7 +44,7 @@ const StyledCopyButton = styled.button<{ theme: Theme; $copied: boolean }>\`
   border-radius: \${({ theme }) => theme.spacing.radius.xs};
   padding: 6px 8px;
   font-size: 12px;
-  font-family: \${({ theme }) => theme.fonts.text};
+  font-family: inherit;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;

package/dist/templates/components/layout/GlobalStyles.d.ts

@@ -1 +1 @@
-export declare const globalStylesTemplate = "\"use client\";\nimport { createGlobalStyle } from \"styled-components\";\n\nconst GlobalStyles = createGlobalStyle`\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  min-height: 100%;\n  scroll-behavior: smooth;\n  background-color: ${({ theme }) => theme.colors.light};\n  scroll-padding-top: 20px;\n}\n\nbody {\n  font-family: \"Inter\", sans-serif;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  interpolate-size: allow-keywords;\n}\n\n* {\n  box-sizing: border-box;\n  min-width: 0;\n}\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n}\n\npre,\ncode,\nkbd,\nsamp,\nblockquote,\np,\na,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul li,\nol li {\n  margin: 0;\n  padding: 0;\n  color: ${({ theme }) => theme.colors.dark};\n}\n\na {\n  color: ${({ theme }) => (theme.isDark ? theme.colors.dark : theme.colors.primary)};\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\nfigure {\n  margin: 0;\n}\n\nfieldset {\n  appearance: none;\n  border: none;\n}\n\nbutton,\ninput,\na,\nimg,\nsvg,\nsvg * {\n  transition: all 0.3s ease;\n}\n\nstrong,\nb {\n  font-weight: 700;\n}`;\n\nexport { GlobalStyles };";
+export declare const globalStylesTemplate = "\"use client\";\nimport { createGlobalStyle } from \"styled-components\";\n\nconst GlobalStyles = createGlobalStyle`\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  min-height: 100%;\n  scroll-behavior: smooth;\n  background-color: ${({ theme }) => theme.colors.light};\n  scroll-padding-top: 20px;\n}\n\nbody {\n  font-family: \"Inter\", sans-serif;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  interpolate-size: allow-keywords;\n}\n\n* {\n  box-sizing: border-box;\n  min-width: 0;\n}\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n}\n\npre,\ncode,\nkbd,\nsamp,\nblockquote,\np,\na,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul li,\nol li {\n  margin: 0;\n  padding: 0;\n  color: ${({ theme }) => theme.colors.dark};\n}\n\na {\n  color: ${({ theme }) => (theme.isDark ? theme.colors.dark : theme.colors.primary)};\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\nfigure {\n  margin: 0;\n}\n\nfieldset {\n  appearance: none;\n  border: none;\n}\n\nbutton,\ninput,\na,\nimg,\nsvg,\nsvg * {\n  transition: all 0.3s ease;\n}\n\nstrong,\nb {\n  font-weight: 700;\n}\n\n.full-width {\n  width: 100%;\n}`;\n\nexport { GlobalStyles };";

package/dist/templates/components/layout/GlobalStyles.js

@@ -87,6 +87,10 @@ svg * {
 strong,
 b {
   font-weight: 700;
+}
+
+.full-width {
+  width: 100%;
 }\`;
 
 export { GlobalStyles };`;

package/dist/templates/mdx/deployment.mdx.d.ts

@@ -1 +1 @@
-export declare const deploymentMdxTemplate = "---\ntitle: \"Deployment\"\ndescription: \"Deploy your Doccupine Next.js app to Vercel.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 4\n---\n# Deployment\nDeploy your Doccupine site as a Next.js application on Vercel. You can connect a Git repository for automatic deployments or use the Vercel CLI for manual control.\n\n<Callout type=\"warning\">\n  Only deploy the generated website directory produced by Doccupine (the Next.js app). Do not deploy your MDX source folder. If your repo contains multiple folders, set the Vercel project <strong>Root Directory</strong> to the generated site folder.\n</Callout>\n\n## Prerequisites\n- **Vercel account**: https://vercel.com/signup\n- **Git repository**: GitHub, GitLab, or Bitbucket with your Next.js app\n- **Node.js**: Use an LTS version\n\n## Option 1: Deploy via Git (recommended)\n1. **Push the generated site folder** to a Git repository (or ensure the repo\u2019s root is the generated website directory).\n2. **Import to Vercel**: Go to https://vercel.com/new and select your repository.\n3. If your repo is a monorepo, set the project **Root Directory** to the generated website folder (Project \u2192 Settings \u2192 General \u2192 Root Directory).\n4. **Framework preset**: Vercel auto-detects Next.js.\n5. **Build settings** (defaults are fine):\n   - Install Command: `pnpm i`, `yarn`, or `npm i` (Vercel auto-detects)\n   - Build Command: `next build`\n   - Output: handled automatically by Vercel for Next.js\n6. **Environment Variables**: Add any values required by your docs (see below).\n7. **Deploy**: Vercel creates a Preview deployment per branch. Merge to your main branch to promote to Production.\n\n## Option 2: Deploy with Vercel CLI\n1. Install the CLI:\n   ```bash\n   npm i -g vercel\n   ```\n2. From the generated website directory, run:\n   ```bash\n   vercel\n   ```\n   Follow the prompts to link or create a project.\n3. When ready for production:\n   ```bash\n   vercel --prod\n   ```\n\n## Environment variables\nIf your documentation or site behavior depends on environment variables, define them in Vercel:\n- In the Vercel dashboard: Project \u2192 Settings \u2192 Environment Variables.\n- Or via CLI:\n  ```bash\n  vercel env add NAME\n  ```\n\nFor Next.js, make sure variables needed on the client are prefixed with `NEXT_PUBLIC_`.\n\n## Next.js configuration notes\n- Ensure a valid `next.config.js` if you customize images, basePath, or MDX handling.\n- If you use MDX, include the necessary plugins/config in your project.\n- Vercel automatically enables Image Optimization and Edge/CDN features for Next.js.\n\n## Custom domains\n- Add a domain in Vercel: Project \u2192 Settings \u2192 Domains.\n- Point DNS to Vercel as instructed. Changes can take a few minutes to propagate.\n\n## Troubleshooting\n- **Build failed**: Check the Vercel build logs. Confirm Node version and lockfile are present.\n- **Missing content**: Ensure your MDX directory and any assets are included in the repository.\n- **Env not applied**: Add variables for the correct environment (Preview vs Production) and redeploy.\n- **Images not loading**: Configure `images.domains` in `next.config.js` if using remote images.\n\n## Tips\n- **Preview first**: Use Preview deployments to validate docs before merging to Production.\n- **Cache and performance**: Leverage ISR or static generation where applicable for faster loads.\n- **Consistent tooling**: Keep a single package manager and lockfile in the repo (npm, pnpm, or yarn).";
+export declare const deploymentMdxTemplate = "---\ntitle: \"Deployment\"\ndescription: \"Deploy your Doccupine Next.js app to Vercel.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 5\n---\n# Deployment\nDeploy your Doccupine site as a Next.js application on Vercel. You can connect a Git repository for automatic deployments or use the Vercel CLI for manual control.\n\n<Callout type=\"warning\">\n  Only deploy the generated website directory produced by Doccupine (the Next.js app). Do not deploy your MDX source folder. If your repo contains multiple folders, set the Vercel project <strong>Root Directory</strong> to the generated site folder.\n</Callout>\n\n## Prerequisites\n- **Vercel account**: https://vercel.com/signup\n- **Git repository**: GitHub, GitLab, or Bitbucket with your Next.js app\n- **Node.js**: Use an LTS version\n\n## Option 1: Deploy via Git (recommended)\n1. **Push the generated site folder** to a Git repository (or ensure the repo\u2019s root is the generated website directory).\n2. **Import to Vercel**: Go to https://vercel.com/new and select your repository.\n3. If your repo is a monorepo, set the project **Root Directory** to the generated website folder (Project \u2192 Settings \u2192 General \u2192 Root Directory).\n4. **Framework preset**: Vercel auto-detects Next.js.\n5. **Build settings** (defaults are fine):\n   - Install Command: `pnpm i`, `yarn`, or `npm i` (Vercel auto-detects)\n   - Build Command: `next build`\n   - Output: handled automatically by Vercel for Next.js\n6. **Environment Variables**: Add any values required by your docs (see below).\n7. **Deploy**: Vercel creates a Preview deployment per branch. Merge to your main branch to promote to Production.\n\n## Option 2: Deploy with Vercel CLI\n1. Install the CLI:\n   ```bash\n   npm i -g vercel\n   ```\n2. From the generated website directory, run:\n   ```bash\n   vercel\n   ```\n   Follow the prompts to link or create a project.\n3. When ready for production:\n   ```bash\n   vercel --prod\n   ```\n\n## Environment variables\nIf your documentation or site behavior depends on environment variables, define them in Vercel:\n- In the Vercel dashboard: Project \u2192 Settings \u2192 Environment Variables.\n- Or via CLI:\n  ```bash\n  vercel env add NAME\n  ```\n\nFor Next.js, make sure variables needed on the client are prefixed with `NEXT_PUBLIC_`.\n\n## Next.js configuration notes\n- Ensure a valid `next.config.js` if you customize images, basePath, or MDX handling.\n- If you use MDX, include the necessary plugins/config in your project.\n- Vercel automatically enables Image Optimization and Edge/CDN features for Next.js.\n\n## Custom domains\n- Add a domain in Vercel: Project \u2192 Settings \u2192 Domains.\n- Point DNS to Vercel as instructed. Changes can take a few minutes to propagate.\n\n## Troubleshooting\n- **Build failed**: Check the Vercel build logs. Confirm Node version and lockfile are present.\n- **Missing content**: Ensure your MDX directory and any assets are included in the repository.\n- **Env not applied**: Add variables for the correct environment (Preview vs Production) and redeploy.\n- **Images not loading**: Configure `images.domains` in `next.config.js` if using remote images.\n\n## Tips\n- **Preview first**: Use Preview deployments to validate docs before merging to Production.\n- **Cache and performance**: Leverage ISR or static generation where applicable for faster loads.\n- **Consistent tooling**: Keep a single package manager and lockfile in the repo (npm, pnpm, or yarn).";

package/dist/templates/mdx/deployment.mdx.js

@@ -4,7 +4,7 @@ description: "Deploy your Doccupine Next.js app to Vercel."
 date: "2025-01-15"
 category: "Configuration"
 categoryOrder: 3
-order: 4
+order: 5
 ---
 # Deployment
 Deploy your Doccupine site as a Next.js application on Vercel. You can connect a Git repository for automatic deployments or use the Vercel CLI for manual control.

package/dist/templates/mdx/fonts.mdx.d.ts

@@ -0,0 +1 @@
+export declare const fontsMdxTemplate = "---\ntitle: \"Fonts\"\ndescription: \"Customize the documentation typography with a fonts.json file (Google Fonts or local custom fonts).\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 4\n---\n# Fonts\nDefine your site\u2019s typography with a `fonts.json` file. You can load fonts from Google Fonts or from local font files bundled with your project.\n\n## fonts.json\nPlace a `fonts.json` at your project root (the same folder where you execute `npx doccupine`). Choose one of the following configurations depending on the source of your fonts.\n\n## Google Fonts\nUse this when your font is hosted by Google Fonts.\n\n```json\n{\n  \"googleFont\": {\n    \"fontName\": \"Work_Sans\",\n    \"subsets\": [\"latin\"],\n    \"weight\": \"400\"\n  }\n}\n```\n\n### Rules\n- **fontName**: Capitalize each word. If the name contains spaces, replace them with `_`.\n  - Example: \"Work Sans\" \u2192 `Work_Sans`\n- **subsets**: Pick the subsets you need (for example, `latin`).\n- **weight**: The font weight to load (for example, `\"400\"`).\n\n### Tips\n- **One primary family**: Start with a single family and weight, then add more if needed.\n- **Readability**: Choose readable body fonts; reserve display fonts for headings.\n\n## Local custom fonts\nUse this when you want to ship your own font files. Upload your font files to the Next.js `public` directory, then reference them with relative paths.\n\n```json\n{\n  \"localFonts\": {\n    \"src\": [\n      {\n        \"path\": \"../public/font.woff\",\n        \"weight\": \"400\",\n        \"style\": \"normal\"\n      },\n      {\n        \"path\": \"../public/font.woff\",\n        \"weight\": \"400\",\n        \"style\": \"italic\"\n      },\n      {\n        \"path\": \"../public/font.woff\",\n        \"weight\": \"700\",\n        \"style\": \"normal\"\n      },\n      {\n        \"path\": \"../public/font.woff\",\n        \"weight\": \"700\",\n        \"style\": \"italic\"\n      }\n    ]\n  }\n}\n```\n\n### Single file shorthand\nIf you have only one file, you can use:\n\n```json\n{\n  \"localFonts\": \"../public/font.woff\"\n}\n```\n\n### Rules\n- **Upload files**: Place `font.woff` (and any additional weights/styles) in your Next.js `public` directory.\n- **path**: Use a relative path to the file from where it is consumed by your build tooling; the example above uses `../public/font.woff`.\n- **weight**: String value of the font weight (for example, `\"400\"`, `\"700\"`).\n- **style**: `\"normal\"` or `\"italic\"`.\n\n### Tips\n- **Provide only what you need**: Include the minimal set of weights/styles to keep bundle size small.\n- **File formats**: `.woff` is broadly supported and recommended for the web.\n\n## Behavior\n- **Placement**: Put `fonts.json` in the project root alongside `config.json` and (optionally) `theme.json`.\n- **Validation**: Follow the naming rule for `googleFont.fontName` (capitalize, replace spaces with `_`).\n- **Local files**: Ensure the referenced files exist under the Next.js `public` directory.\n\n## Examples\n- **Google Fonts (Work Sans)**\n\n```json\n{\n  \"googleFont\": {\n    \"fontName\": \"Work_Sans\",\n    \"subsets\": [\"latin\"],\n    \"weight\": \"400\"\n  }\n}\n```\n\n- **Local fonts (multiple weights/styles)**\n\n```json\n{\n  \"localFonts\": {\n    \"src\": [\n      { \"path\": \"../public/font.woff\", \"weight\": \"400\", \"style\": \"normal\" },\n      { \"path\": \"../public/font.woff\", \"weight\": \"400\", \"style\": \"italic\" },\n      { \"path\": \"../public/font.woff\", \"weight\": \"700\", \"style\": \"normal\" },\n      { \"path\": \"../public/font.woff\", \"weight\": \"700\", \"style\": \"italic\" }\n    ]\n  }\n}\n```\n";

package/dist/templates/mdx/fonts.mdx.js

@@ -0,0 +1,121 @@
+export const fontsMdxTemplate = `---
+title: "Fonts"
+description: "Customize the documentation typography with a fonts.json file (Google Fonts or local custom fonts)."
+date: "2025-01-15"
+category: "Configuration"
+categoryOrder: 3
+order: 4
+---
+# Fonts
+Define your site’s typography with a \`fonts.json\` file. You can load fonts from Google Fonts or from local font files bundled with your project.
+
+## fonts.json
+Place a \`fonts.json\` at your project root (the same folder where you execute \`npx doccupine\`). Choose one of the following configurations depending on the source of your fonts.
+
+## Google Fonts
+Use this when your font is hosted by Google Fonts.
+
+\`\`\`json
+{
+  "googleFont": {
+    "fontName": "Work_Sans",
+    "subsets": ["latin"],
+    "weight": "400"
+  }
+}
+\`\`\`
+
+### Rules
+- **fontName**: Capitalize each word. If the name contains spaces, replace them with \`_\`.
+  - Example: "Work Sans" → \`Work_Sans\`
+- **subsets**: Pick the subsets you need (for example, \`latin\`).
+- **weight**: The font weight to load (for example, \`"400"\`).
+
+### Tips
+- **One primary family**: Start with a single family and weight, then add more if needed.
+- **Readability**: Choose readable body fonts; reserve display fonts for headings.
+
+## Local custom fonts
+Use this when you want to ship your own font files. Upload your font files to the Next.js \`public\` directory, then reference them with relative paths.
+
+\`\`\`json
+{
+  "localFonts": {
+    "src": [
+      {
+        "path": "../public/font.woff",
+        "weight": "400",
+        "style": "normal"
+      },
+      {
+        "path": "../public/font.woff",
+        "weight": "400",
+        "style": "italic"
+      },
+      {
+        "path": "../public/font.woff",
+        "weight": "700",
+        "style": "normal"
+      },
+      {
+        "path": "../public/font.woff",
+        "weight": "700",
+        "style": "italic"
+      }
+    ]
+  }
+}
+\`\`\`
+
+### Single file shorthand
+If you have only one file, you can use:
+
+\`\`\`json
+{
+  "localFonts": "../public/font.woff"
+}
+\`\`\`
+
+### Rules
+- **Upload files**: Place \`font.woff\` (and any additional weights/styles) in your Next.js \`public\` directory.
+- **path**: Use a relative path to the file from where it is consumed by your build tooling; the example above uses \`../public/font.woff\`.
+- **weight**: String value of the font weight (for example, \`"400"\`, \`"700"\`).
+- **style**: \`"normal"\` or \`"italic"\`.
+
+### Tips
+- **Provide only what you need**: Include the minimal set of weights/styles to keep bundle size small.
+- **File formats**: \`.woff\` is broadly supported and recommended for the web.
+
+## Behavior
+- **Placement**: Put \`fonts.json\` in the project root alongside \`config.json\` and (optionally) \`theme.json\`.
+- **Validation**: Follow the naming rule for \`googleFont.fontName\` (capitalize, replace spaces with \`_\`).
+- **Local files**: Ensure the referenced files exist under the Next.js \`public\` directory.
+
+## Examples
+- **Google Fonts (Work Sans)**
+
+\`\`\`json
+{
+  "googleFont": {
+    "fontName": "Work_Sans",
+    "subsets": ["latin"],
+    "weight": "400"
+  }
+}
+\`\`\`
+
+- **Local fonts (multiple weights/styles)**
+
+\`\`\`json
+{
+  "localFonts": {
+    "src": [
+      { "path": "../public/font.woff", "weight": "400", "style": "normal" },
+      { "path": "../public/font.woff", "weight": "400", "style": "italic" },
+      { "path": "../public/font.woff", "weight": "700", "style": "normal" },
+      { "path": "../public/font.woff", "weight": "700", "style": "italic" }
+    ]
+  }
+}
+\`\`\`
+`;

package/dist/templates/mdx/index.mdx.d.ts

@@ -1 +1 @@
-export declare const indexMdxTemplate = "---\ntitle: \"Getting Started\"\ndescription: \"Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease.\"\ndate: \"2025-01-15\"\ncategory: \"General\"\ncategoryOrder: 0\norder: 0\n---\n# Welcome to Doccupine\nDoccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease. Using Doccupine, you simply create your documentation in MDX files with traditional Markdown syntax, Doccupine monitors your changes automatically generating a beautiful, modern documentation website.\n\n## Open Source and Extensible\nDoccupine is built on open standards, enabling customization and extensibility for different documentation needs. You stay in control of your content, with the option to host docs yourself and tailor the website\u2019s look and features to match your organization\u2019s requirements.\n\n## Features\n- \uD83D\uDCDD Markdown-based content\n- \uD83D\uDCE6 Built-in file structure\n- \u26A1 Live Preview & Auto-Update\n- \uD83D\uDE80 Easy Deployment\n\n## Getting Started\n\nTo get started with Doccupine, make sure you have [Node.js](https://nodejs.org) and npm installed on your machine. Then, follow these steps:\n\n- **Run Doccupine CLI:**\n\nCreate a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:\n\n```bash\nnpx doccupine\n```\n\nOnce you run the command, Doccupine will ask you to select a directory to store your MDX files. Choose the directory where you want to create your documentation files.\nAfter selecting the directory, Doccupine will ask you to enter the name of the directory for the generated website. Enter the name of the directory where you want to create your website.\n\nThis will start the development server on port 3000. Open your browser and navigate to http://localhost:3000 to view your documentation.\n\n## Start documenting\nStart documenting your project by editing the **index.mdx** file in the choosen MDX directory.\n\nIn your MDX directory, you can structure your content using folders and files. Doccupine will automatically generate a navigation menu based on the configured categories and order.\n";
+export declare const indexMdxTemplate = "---\ntitle: \"Getting Started\"\ndescription: \"Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease.\"\ndate: \"2025-01-15\"\ncategory: \"General\"\ncategoryOrder: 0\norder: 0\n---\n# Welcome to Doccupine\nUsing Doccupine, you simply create your documentation in MDX files with traditional Markdown syntax, Doccupine monitors your changes automatically generating a beautiful, modern documentation website.\n\n## Features\n\n<Columns cols={2}>\n  <Card>\n    <img src=\"https://doccupine.com/mdx.svg\" alt=\"Markdown-based content\" className=\"full-width\" />\n    <Space $size={12} />\n    Markdown-based content\n  </Card>\n  <Card>\n    <img src=\"https://doccupine.com/structure.svg\" alt=\"Built-in file structure\" className=\"full-width\" />\n    <Space $size={12} />\n    Built-in file structure\n  </Card>\n  <Card>\n    <img src=\"https://doccupine.com/live-reload.svg\" alt=\"Live Preview & Auto-Update\" className=\"full-width\" />\n    <Space $size={12} />\n    Live Preview & Auto-Update\n  </Card>\n  <Card>\n    <img src=\"https://doccupine.com/deployment.svg\" alt=\"Easy Deployment\" className=\"full-width\" />\n    <Space $size={12} />\n    Easy Deployment\n  </Card>\n</Columns>\n\n## Getting Started\n\nTo get started with Doccupine, make sure you have [Node.js](https://nodejs.org) and npm installed on your machine. Then, follow these steps:\n\n- **Run Doccupine CLI:**\n\nCreate a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:\n\n```bash\nnpx doccupine\n```\n\nOnce you run the command, Doccupine will ask you to select a directory to store your MDX files. Choose the directory where you want to create your documentation files.\nAfter selecting the directory, Doccupine will ask you to enter the name of the directory for the generated website. Enter the name of the directory where you want to create your website.\n\nThis will start the development server on port 3000. Open your browser and navigate to http://localhost:3000 to view your documentation.\n\n## Start documenting\nStart documenting your project by editing the **index.mdx** file in the choosen MDX directory.\n\nIn your MDX directory, you can structure your content using folders and files. Doccupine will automatically generate a navigation menu based on the configured categories and order.\n";

package/dist/templates/mdx/index.mdx.js

@@ -7,16 +7,32 @@ categoryOrder: 0
 order: 0
 ---
 # Welcome to Doccupine
-Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease. Using Doccupine, you simply create your documentation in MDX files with traditional Markdown syntax, Doccupine monitors your changes automatically generating a beautiful, modern documentation website.
-
-## Open Source and Extensible
-Doccupine is built on open standards, enabling customization and extensibility for different documentation needs. You stay in control of your content, with the option to host docs yourself and tailor the website’s look and features to match your organization’s requirements.
+Using Doccupine, you simply create your documentation in MDX files with traditional Markdown syntax, Doccupine monitors your changes automatically generating a beautiful, modern documentation website.
 
 ## Features
-- 📝 Markdown-based content
-- 📦 Built-in file structure
-- ⚡ Live Preview & Auto-Update
-- 🚀 Easy Deployment
+
+<Columns cols={2}>
+  <Card>
+    <img src="https://doccupine.com/mdx.svg" alt="Markdown-based content" className="full-width" />
+    <Space $size={12} />
+    Markdown-based content
+  </Card>
+  <Card>
+    <img src="https://doccupine.com/structure.svg" alt="Built-in file structure" className="full-width" />
+    <Space $size={12} />
+    Built-in file structure
+  </Card>
+  <Card>
+    <img src="https://doccupine.com/live-reload.svg" alt="Live Preview & Auto-Update" className="full-width" />
+    <Space $size={12} />
+    Live Preview & Auto-Update
+  </Card>
+  <Card>
+    <img src="https://doccupine.com/deployment.svg" alt="Easy Deployment" className="full-width" />
+    <Space $size={12} />
+    Easy Deployment
+  </Card>
+</Columns>
 
 ## Getting Started
 

package/dist/templates/mdx/navigation.mdx.d.ts

@@ -1 +1 @@
-export declare const navigationMdxTemplate = "---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n# Navigation\nDoccupine builds your sidebar automatically from your MDX pages. By default, it reads the page frontmatter and groups pages into categories in the order you define. For larger docs, you can take full control with a `navigation.json` file.\n\n## Automatic navigation (default)\nWhen no custom navigation is provided, Doccupine generates a structure based on each page\u2019s frontmatter.\n\n### Frontmatter fields\n- **category**: The category name that groups the page in the sidebar.\n- **categoryOrder**: The position of the category within the sidebar. Lower numbers appear first.\n- **order**: The position of the page within its category. Lower numbers appear first.\n\n### Example frontmatter\n\n```text\n---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n```\n\nThis approach is great for small sets of documents. For larger projects, setting these fields on every page can become repetitive.\n\n## Custom navigation with navigation.json\nTo centrally define the entire sidebar, create a `navigation.json` at your project root (the same folder where you execute `npx doccupine`). When present, it takes priority over page frontmatter and fully controls the navigation structure.\n\n### Example navigation.json\n\n```json\n[\n  {\n    \"label\": \"General\",\n    \"links\": [\n      { \"slug\": \"\", \"title\": \"Getting Started\" },\n      { \"slug\": \"commands\", \"title\": \"Commands\" }\n    ]\n  },\n  {\n    \"label\": \"Components\",\n    \"links\": [\n      { \"slug\": \"headers-and-text\", \"title\": \"Headers and Text\" },\n      { \"slug\": \"lists-and-tables\", \"title\": \"Lists and tables\" },\n      { \"slug\": \"code\", \"title\": \"Code\" },\n      { \"slug\": \"accordion\", \"title\": \"Accordion\" },\n      { \"slug\": \"tabs\", \"title\": \"Tabs\" },\n      { \"slug\": \"cards\", \"title\": \"Cards\" },\n      { \"slug\": \"callouts\", \"title\": \"Callouts\" },\n      { \"slug\": \"images-and-embeds\", \"title\": \"Images and embeds\" },\n      { \"slug\": \"icons\", \"title\": \"Icons\" },\n      { \"slug\": \"fields\", \"title\": \"Fields\" },\n      { \"slug\": \"update\", \"title\": \"Update\" },\n      { \"slug\": \"columns\", \"title\": \"Columns\" },\n      { \"slug\": \"steps\", \"title\": \"Steps\" }\n    ]\n  },\n  {\n    \"label\": \"Configuration\",\n    \"links\": [\n      { \"slug\": \"globals\", \"title\": \"Globals\" },\n      { \"slug\": \"navigation\", \"title\": \"Navigation\" },\n      { \"slug\": \"theme\", \"title\": \"Theme\" },\n      { \"slug\": \"deployment\", \"title\": \"Deployment\" }\n    ]\n  }\n]\n```\n\n### Fields\n- **label**: The section header shown in the sidebar.\n- **links**: An array of page entries for that section.\n  - **slug**: The MDX file slug (filename without extension). Use an empty string `\"\"` for `index.mdx`.\n  - **title**: The display title in the navigation. This can differ from the page\u2019s `title` frontmatter.\n\n## Precedence and behavior\n- **navigation.json takes priority**. If present, it defines the entire sidebar structure.\n- Without `navigation.json`, the sidebar is built from page frontmatter: `category` \u2192 grouped; `categoryOrder` \u2192 category position; `order` \u2192 page position.\n- Pages without a `category` appear at the top level.\n\n## Tips\n- **Start simple**: Use frontmatter for small docs. Switch to `navigation.json` as the structure grows.\n- **Keep slugs consistent**: `slug` must match the MDX filename (e.g., `text.mdx` \u2192 `text`).\n- **Control titles**: Use `title` in `navigation.json` to customize sidebar labels without changing page frontmatter.";
+export declare const navigationMdxTemplate = "---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n# Navigation\nDoccupine builds your sidebar automatically from your MDX pages. By default, it reads the page frontmatter and groups pages into categories in the order you define. For larger docs, you can take full control with a `navigation.json` file.\n\n## Automatic navigation (default)\nWhen no custom navigation is provided, Doccupine generates a structure based on each page\u2019s frontmatter.\n\n### Frontmatter fields\n- **category**: The category name that groups the page in the sidebar.\n- **categoryOrder**: The position of the category within the sidebar. Lower numbers appear first.\n- **order**: The position of the page within its category. Lower numbers appear first.\n\n### Example frontmatter\n\n```text\n---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n```\n\nThis approach is great for small sets of documents. For larger projects, setting these fields on every page can become repetitive.\n\n## Custom navigation with navigation.json\nTo centrally define the entire sidebar, create a `navigation.json` at your project root (the same folder where you execute `npx doccupine`). When present, it takes priority over page frontmatter and fully controls the navigation structure.\n\n### Example navigation.json\n\n```json\n[\n  {\n    \"label\": \"General\",\n    \"links\": [\n      { \"slug\": \"\", \"title\": \"Getting Started\" },\n      { \"slug\": \"commands\", \"title\": \"Commands\" }\n    ]\n  },\n  {\n    \"label\": \"Components\",\n    \"links\": [\n      { \"slug\": \"headers-and-text\", \"title\": \"Headers and Text\" },\n      { \"slug\": \"lists-and-tables\", \"title\": \"Lists and tables\" },\n      { \"slug\": \"code\", \"title\": \"Code\" },\n      { \"slug\": \"accordion\", \"title\": \"Accordion\" },\n      { \"slug\": \"tabs\", \"title\": \"Tabs\" },\n      { \"slug\": \"cards\", \"title\": \"Cards\" },\n      { \"slug\": \"callouts\", \"title\": \"Callouts\" },\n      { \"slug\": \"images-and-embeds\", \"title\": \"Images and embeds\" },\n      { \"slug\": \"icons\", \"title\": \"Icons\" },\n      { \"slug\": \"fields\", \"title\": \"Fields\" },\n      { \"slug\": \"update\", \"title\": \"Update\" },\n      { \"slug\": \"columns\", \"title\": \"Columns\" },\n      { \"slug\": \"steps\", \"title\": \"Steps\" }\n    ]\n  },\n  {\n    \"label\": \"Configuration\",\n    \"links\": [\n      { \"slug\": \"globals\", \"title\": \"Globals\" },\n      { \"slug\": \"navigation\", \"title\": \"Navigation\" },\n      { \"slug\": \"theme\", \"title\": \"Theme\" },\n      { \"slug\": \"fonts\", \"title\": \"Fonts\" },\n      { \"slug\": \"deployment\", \"title\": \"Deployment\" }\n    ]\n  }\n]\n```\n\n### Fields\n- **label**: The section header shown in the sidebar.\n- **links**: An array of page entries for that section.\n  - **slug**: The MDX file slug (filename without extension). Use an empty string `\"\"` for `index.mdx`.\n  - **title**: The display title in the navigation. This can differ from the page\u2019s `title` frontmatter.\n\n## Precedence and behavior\n- **navigation.json takes priority**. If present, it defines the entire sidebar structure.\n- Without `navigation.json`, the sidebar is built from page frontmatter: `category` \u2192 grouped; `categoryOrder` \u2192 category position; `order` \u2192 page position.\n- Pages without a `category` appear at the top level.\n\n## Tips\n- **Start simple**: Use frontmatter for small docs. Switch to `navigation.json` as the structure grows.\n- **Keep slugs consistent**: `slug` must match the MDX filename (e.g., `text.mdx` \u2192 `text`).\n- **Control titles**: Use `title` in `navigation.json` to customize sidebar labels without changing page frontmatter.";

package/dist/templates/mdx/navigation.mdx.js

@@ -70,6 +70,7 @@ To centrally define the entire sidebar, create a \`navigation.json\` at your pro
       { "slug": "globals", "title": "Globals" },
       { "slug": "navigation", "title": "Navigation" },
       { "slug": "theme", "title": "Theme" },
+      { "slug": "fonts", "title": "Fonts" },
       { "slug": "deployment", "title": "Deployment" }
     ]
   }

package/dist/templates/mdx/steps.mdx.d.ts

@@ -1 +1 @@
-export declare const stepsMdxTemplate = "---\ntitle: \"Steps\"\ndescription: \"Guide readers step-by-step using the Steps component.\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 13\n---\n# Steps\nGuide readers step-by-step using the Steps component.\n\nThe Steps component is perfect for organizing procedures or workflows in a clear sequence. Include as many individual steps as necessary to outline your process.\n\n## Steps Usage\nYou can use the `Steps` component to create a step-by-step guide. Each step is represented by a `Step` component, which includes a title and content.\n\n```mdx\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 2\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n```\n\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 2\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the step.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the step.\n</Field>\n";
+export declare const stepsMdxTemplate = "---\ntitle: \"Steps\"\ndescription: \"Guide readers step-by-step using the Steps component.\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 13\n---\n# Steps\nGuide readers step-by-step using the Steps component.\n\nThe Steps component is perfect for organizing procedures or workflows in a clear sequence. Include as many individual steps as necessary to outline your process.\n\n## Steps Usage\nYou can use the `Steps` component to create a step-by-step guide. Each step is represented by a `Step` component, which includes a title and content.\n\n```mdx\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 2\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n```\n\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 2\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the step.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the step.\n</Field>\n";

package/dist/templates/mdx/steps.mdx.js

@@ -44,7 +44,6 @@ You can use the \`Steps\` component to create a step-by-step guide. Each step is
   </Step>
 </Steps>
 
-
 ## Properties
 
 <Field value="title" type="string" required>

package/dist/templates/package.js

@@ -9,22 +9,22 @@ export const packageJsonTemplate = JSON.stringify({
         lint: "next lint",
     },
     dependencies: {
-        next: "16.0.1",
-        react: "19.2.0",
-        "react-dom": "19.2.0",
+        next: "16.0.8",
+        react: "19.2.1",
+        "react-dom": "19.2.1",
     },
     devDependencies: {
         "@mdx-js/react": "^3.1.1",
-        "@types/node": "^24",
+        "@types/node": "^25",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "cherry-styled-components": "^0.1.0-43",
         eslint: "^9",
-        "eslint-config-next": "16.0.1",
-        "lucide-react": "^0.553.0",
+        "eslint-config-next": "16.0.8",
+        "lucide-react": "^0.559.0",
         "next-mdx-remote": "^5.0.0",
         polished: "^4.3.1",
-        prettier: "^3.6.2",
+        prettier: "^3.7.4",
         "rehype-highlight": "^7.0.2",
         "rehype-parse": "^9.0.1",
         "rehype-stringify": "^10.0.1",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "description": "Generate beautiful, ready-to-use documentation with just one CLI command – fast, simple, and open source.",
   "main": "dist/index.js",
   "bin": {
@@ -30,7 +30,7 @@
   "license": "MIT",
   "dependencies": {
     "chalk": "^5.6.2",
-    "chokidar": "^4.0.3",
+    "chokidar": "^5.0.0",
     "commander": "^14.0.2",
     "fs-extra": "^11.3.2",
     "gray-matter": "^4.0.3",
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@types/chokidar": "^2.1.7",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^24.10.0",
+    "@types/node": "^25.0.0",
     "@types/prompts": "^2.4.9",
     "typescript": "^5.9.3"
   },