doccupine 0.0.9 → 0.0.11

package/dist/index.js

@@ -16,18 +16,42 @@ import { themeTemplate } from "./templates/theme.js";
 import { iconTemplate } from "./templates/components/layout/Icon.js";
 import { pictogramsTemplate } from "./templates/components/layout/Pictograms.js";
 import { typographyTemplate } from "./templates/components/layout/Typography.js";
+import { updateTemplate } from "./templates/components/layout/Update.js";
 import { headerTemplate } from "./templates/components/layout/Header.js";
 import { footerTemplate } from "./templates/components/layout/Footer.js";
+import { globalStylesTemplate } from "./templates/components/layout/GlobalStyles.js";
 import { themeToggleTemplate } from "./templates/components/layout/ThemeToggle.js";
 import { sharedStyledTemplate } from "./templates/components/layout/SharedStyles.js";
+import { accordionTemplate } from "./templates/components/layout/Accordion.js";
+import { calloutTemplate } from "./templates/components/layout/Callout.js";
 import { codeTemplate } from "./templates/components/layout/Code.js";
+import { columnsTemplate } from "./templates/components/layout/Columns.js";
+import { cardTemplate } from "./templates/components/layout/Card.js";
+import { fieldTemplate } from "./templates/components/layout/Field.js";
+import { cherryThemeProviderTemplate } from "./templates/components/layout/CherryThemeProvider.js";
+import { tabsTemplate } from "./templates/components/layout/Tabs.js";
 import { docsComponentsTemplate } from "./templates/components/layout/DocsComponents.js";
 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 { orderNavItemsTemplate } from "./templates/utils/orderNavItems.js";
 import { sideBarTemplate } from "./templates/components/SideBar.js";
-import { homeMdxTemplate } from "./templates/home.mdx.js";
-import { commandsMdxTemplate } from "./templates/commands.mdx.js";
+import { accordionMdxTemplate } from "./templates/mdx/accordion.mdx.js";
+import { calloutsMdxTemplate } from "./templates/mdx/callouts.mdx.js";
+import { cardsMdxTemplate } from "./templates/mdx/cards.mdx.js";
+import { codeMdxTemplate } from "./templates/mdx/code.mdx.js";
+import { commandsMdxTemplate } from "./templates/mdx/commands.mdx.js";
+import { configMdxTemplate } from "./templates/mdx/config.mdx.js";
+import { fieldsMdxTemplate } from "./templates/mdx/fields.mdx.js";
+import { iconsMdxTemplate } from "./templates/mdx/icons.mdx.js";
+import { imageEmbedsMdxTemplate } from "./templates/mdx/image-embeds.mdx.js";
+import { indexMdxTemplate } from "./templates/mdx/index.mdx.js";
+import { listTableMdxTemplate } from "./templates/mdx/list-table.mdx.js";
+import { navigationMdxTemplate } from "./templates/mdx/navigation.mdx.js";
+import { tabsMdxTemplate } from "./templates/mdx/tabs.mdx.js";
+import { textMdxTemplate } from "./templates/mdx/text.mdx.js";
+import { updateMdxTemplate } from "./templates/mdx/update.mdx.js";
 class ConfigManager {
     configPath;
     constructor(configPath = "doccupine.json") {
@@ -98,10 +122,14 @@ class ConfigManager {
 class MDXToNextJSGenerator {
     watchDir;
     outputDir;
+    rootDir;
     watcher = null;
+    configWatcher = null;
+    configFiles = ["theme.json", "navigation.json", "config.json"];
     constructor(watchDir, outputDir) {
         this.watchDir = path.resolve(watchDir);
         this.outputDir = path.resolve(outputDir);
+        this.rootDir = process.cwd();
     }
     async init() {
         console.log(chalk.blue("🚀 Initializing MDX to Next.js generator..."));
@@ -109,14 +137,62 @@ class MDXToNextJSGenerator {
         await fs.ensureDir(this.outputDir);
         await this.createNextJSStructure();
         await this.createStartingDocs();
+        await this.copyCustomConfigFiles();
         await this.processAllMDXFiles();
         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)}`));
         console.log(chalk.white("   npm install && npm run dev"));
     }
+    async copyCustomConfigFiles() {
+        console.log(chalk.blue(`🔍 Checking for config files in: ${this.watchDir}`));
+        for (const configFile of this.configFiles) {
+            const sourcePath = path.join(this.rootDir, configFile);
+            const destPath = path.join(this.outputDir, configFile);
+            console.log(chalk.gray(`  Checking ${configFile}...`));
+            if (await fs.pathExists(sourcePath)) {
+                await fs.copy(sourcePath, destPath);
+                console.log(chalk.green(`  ✓ Copied ${configFile} to Next.js app`));
+            }
+            else {
+                console.log(chalk.gray(`  ✗ ${configFile} not found, skipping`));
+            }
+        }
+    }
+    async handleConfigFileChange(filePath) {
+        const fileName = path.basename(filePath);
+        if (this.configFiles.includes(fileName)) {
+            const sourcePath = path.join(this.rootDir, fileName);
+            const destPath = path.join(this.outputDir, fileName);
+            try {
+                await fs.copy(sourcePath, destPath);
+                console.log(chalk.green(`📋 Updated ${fileName} in Next.js app`));
+            }
+            catch (error) {
+                console.error(chalk.red(`❌ Error copying ${fileName}:`), error);
+            }
+        }
+    }
+    async handleConfigFileDelete(filePath) {
+        const fileName = path.basename(filePath);
+        if (this.configFiles.includes(fileName)) {
+            const destPath = path.join(this.outputDir, fileName);
+            try {
+                if (await fs.pathExists(destPath)) {
+                    await fs.remove(destPath);
+                    console.log(chalk.yellow(`🗑️ Removed ${fileName} from Next.js app`));
+                }
+            }
+            catch (error) {
+                console.error(chalk.red(`❌ Error removing ${fileName}:`), error);
+            }
+        }
+    }
     async createNextJSStructure() {
         const structure = {
+            "theme.json": this.generateThemeConfig(),
+            "navigation.json": this.generateNavigationConfig(),
+            "config.json": this.generateConfig(),
             ".gitignore": this.generateGitIgnore(),
             "package.json": this.generatePackageJson(),
             "next.config.ts": this.generateNextConfig(),
@@ -127,14 +203,25 @@ class MDXToNextJSGenerator {
             "components/layout/Icon.tsx": this.generateIcon(),
             "components/layout/Pictograms.tsx": this.generatePictograms(),
             "components/layout/Typography.ts": this.generateTypography(),
+            "components/layout/Update.tsx": this.generateUpdate(),
             "components/layout/Header.tsx": this.generateHeader(),
             "components/layout/Footer.tsx": this.generateFooter(),
+            "components/layout/GlobalStyles.ts": this.generateGlobalStyles(),
             "components/layout/ThemeToggle.tsx": this.generateThemeToggle(),
             "components/layout/SharedStyled.ts": this.generateSharedStyled(),
+            "components/layout/Accordion.tsx": this.generateAccordion(),
+            "components/layout/Callout.tsx": this.generateCallout(),
             "components/layout/Code.tsx": this.generateCode(),
+            "components/layout/Columns.tsx": this.generateColumns(),
+            "components/layout/Card.tsx": this.generateCard(),
+            "components/layout/Field.tsx": this.generateField(),
+            "components/layout/CherryThemeProvider.tsx": this.generateCherryThemeProvider(),
+            "components/layout/Tabs.tsx": this.generateTabs(),
             "components/layout/DocsComponents.tsx": this.generateDocsComponents(),
             "components/ClickOutside.ts": this.generateClickOutside(),
             "components/Docs.tsx": this.generateDocs(),
+            "components/DocsSideBar.tsx": this.generateDocsSideBar(),
+            "components/MDXComponents.tsx": this.generateMDXComponents(),
             "components/SideBar.tsx": this.generateSideBar(),
             "utils/orderNavItems.ts": this.generateOrderNavItems(),
         };
@@ -146,8 +233,21 @@ class MDXToNextJSGenerator {
     }
     async createStartingDocs() {
         const structure = {
-            "index.mdx": this.generateHomeMdx(),
+            "accordion.mdx": this.generateAccordionMdx(),
+            "callouts.mdx": this.generateCalloutsMdx(),
+            "cards.mdx": this.generateCardsMdx(),
+            "code.mdx": this.generateCodeMdx(),
             "commands.mdx": this.generateCommandsMdx(),
+            "config.mdx": this.generateConfigMdx(),
+            "fields.mdx": this.generateFieldsMdx(),
+            "icons.mdx": this.generateIconsMdx(),
+            "image-embeds.mdx": this.generateImageEmbedsMdx(),
+            "index.mdx": this.generateIndexMdx(),
+            "list-table.mdx": this.generateListTableMdx(),
+            "navigation.mdx": this.generateNavigationMdx(),
+            "tabs.mdx": this.generateTabsMdx(),
+            "text.mdx": this.generateTextMdx(),
+            "update.mdx": this.generateUpdateMdx(),
         };
         const indexMdxExists = await fs.pathExists(path.join(this.watchDir, "index.mdx"));
         if (!indexMdxExists) {
@@ -165,6 +265,10 @@ class MDXToNextJSGenerator {
             ignoreInitial: true,
             ignored: (filePath, stats) => {
                 const isFile = stats?.isFile() ?? path.extname(filePath) !== "";
+                const fileName = path.basename(filePath);
+                if (this.configFiles.includes(fileName)) {
+                    return true;
+                }
                 if (isFile && !filePath.endsWith(".mdx")) {
                     return true;
                 }
@@ -190,6 +294,27 @@ class MDXToNextJSGenerator {
             .on("error", (error) => {
             console.error(chalk.red("❌ Watcher error:"), error);
         });
+        const configPaths = this.configFiles.map((f) => path.join(this.rootDir, f));
+        this.configWatcher = chokidar.watch(configPaths, {
+            persistent: true,
+            ignoreInitial: true,
+        });
+        this.configWatcher
+            .on("add", (filePath) => {
+            console.log(chalk.cyan(`📝 Config file added: ${path.basename(filePath)}`));
+            this.handleConfigFileChange(filePath);
+        })
+            .on("change", (filePath) => {
+            console.log(chalk.cyan(`📝 Config file changed: ${path.basename(filePath)}`));
+            this.handleConfigFileChange(filePath);
+        })
+            .on("unlink", (filePath) => {
+            console.log(chalk.red(`🗑️ Config file deleted: ${path.basename(filePath)}`));
+            this.handleConfigFileDelete(filePath);
+        })
+            .on("error", (error) => {
+            console.error(chalk.red("❌ Config watcher error:"), error);
+        });
     }
     async handleFileChange(action, filePath) {
         console.log(chalk.cyan(`📝 File ${action}: ${filePath}`));
@@ -294,25 +419,25 @@ class MDXToNextJSGenerator {
         }
         const pageContent = `import { Metadata } from "next";
 import { Docs } from "@/components/Docs";
+import config from "@/config.json";
 
 const content = \`${mdxFile.content.replace(/`/g, "\\`")}\`;
 
 export const metadata: Metadata = {
-  title: "${mdxFile.frontmatter.title || "Generated with Doccupine"}",
-  description: "${mdxFile.frontmatter.description || "Automatically generated from MDX files using Doccupine"}",
-  icons: "${mdxFile.frontmatter.icon || "https://doccupine.com/favicon.ico"}",
+  title: \`${mdxFile.frontmatter.title || "Generated with Doccupine"} \${config.name ? "- " + config.name : "- Doccupine"}\`,
+  description: \`${mdxFile.frontmatter.description ? mdxFile.frontmatter.description : '${config.description ? config.description : "Generated with Doccupine"}'}\`,
+  icons: \`${mdxFile.frontmatter.icon ? mdxFile.frontmatter.icon : "\${config.icon || 'https://doccupine.com/favicon.ico'}"}\`,
   openGraph: {
-    title: "${mdxFile.frontmatter.title || "Generated with Doccupine"}",
-    description: "${mdxFile.frontmatter.description || "Automatically generated from MDX files using Doccupine"}",
-    images: "${mdxFile.frontmatter.image || "https://doccupine.com/preview.png"}",
-  }
+    title: \`${mdxFile.frontmatter.title || "Generated with Doccupine"} \${config.name ? "- " + config.name : "- Doccupine"}\`,
+    description: \`${mdxFile.frontmatter.description ? mdxFile.frontmatter.description : '${config.description ? config.description : "Generated with Doccupine"}'}\`,
+    images: \`${mdxFile.frontmatter.image ? mdxFile.frontmatter.image : "\${config.preview || 'https://doccupine.com/preview.png'}"}\`,
+  },
 };
 
 export default function Page() {
-  return (
-    <Docs content={content} />
-  );
-}`;
+  return <Docs content={content} />;
+}
+`;
         const pagePath = path.join(this.outputDir, "app", mdxFile.slug, "page.tsx");
         await fs.ensureDir(path.dirname(pagePath));
         await fs.writeFile(pagePath, pageContent, "utf8");
@@ -340,38 +465,47 @@ export default function Page() {
         }
         const indexContent = `import { Metadata } from "next";
 import { Docs } from "@/components/Docs";
+import config from "@/config.json";
 
 ${indexMDX ? `const indexContent = \`${indexMDX.content.replace(/`/g, "\\`")}\`;` : `const indexContent = null;`}
 
 ${indexMDX
             ? `export const metadata: Metadata = {
-  title: "${indexMDX.title}",
-  description: "${indexMDX.description}",
-  icons: "${indexMDX.icon}",
+  title: \`\${config.name ? config.name + " -" : "Doccupine -"} ${indexMDX.title}\`,
+  description: \`${indexMDX.description ? indexMDX.description : '${config.description ? config.description : "Generated with Doccupine"}'}\`,
+  icons: \`${indexMDX.icon ? indexMDX.icon : "\${config.icon || 'https://doccupine.com/favicon.ico'}"}\`,
   openGraph: {
-    title: "${indexMDX.title}",
-    description: "${indexMDX.description}",
-    images: "${indexMDX.image}",
-  }
+    title: \`\${config.name ? config.name + " -" : "Doccupine -"} ${indexMDX.title}\`,
+    description: \`${indexMDX.description ? indexMDX.description : '${config.description ? config.description : "Generated with Doccupine"}'}\`,
+    images: \`${indexMDX.image ? indexMDX.image : "\${config.preview || 'https://doccupine.com/preview.png'}"}\`,
+  },
 };`
             : `export const metadata: Metadata = {
-  title: "Generated with Doccupine",
-  description: "Automatically generated from MDX files using Doccupine",
+  title: "Doccupine",
+  description: "Generated with Doccupine",
   icons: "https://doccupine.com/favicon.ico",
   openGraph: {
-    title: "Generated with Doccupine",
-    description: "Automatically generated from MDX files using Doccupine",
+    title: "Doccupine",
+    description: "Generated with Doccupine",
     images: "https://doccupine.com/preview.png",
-  }
-};`} 
+  },
+};`}
 
 export default function Home() {
-  return (
-    <Docs content={indexContent} />
-  );
-}`;
+  return <Docs content={indexContent} />;
+}
+`;
         await fs.writeFile(path.join(this.outputDir, "app", "page.tsx"), indexContent, "utf8");
     }
+    generateThemeConfig() {
+        return `{}`;
+    }
+    generateNavigationConfig() {
+        return `[]`;
+    }
+    generateConfig() {
+        return `{}`;
+    }
     generateGitIgnore() {
         return gitignoreTemplate;
     }
@@ -408,12 +542,51 @@ export default function Home() {
         const layoutContent = await this.generateRootLayout();
         await fs.writeFile(path.join(this.outputDir, "app", "layout.tsx"), layoutContent, "utf8");
     }
-    generateHomeMdx() {
-        return homeMdxTemplate;
+    generateAccordionMdx() {
+        return accordionMdxTemplate;
+    }
+    generateCalloutsMdx() {
+        return calloutsMdxTemplate;
+    }
+    generateCardsMdx() {
+        return cardsMdxTemplate;
+    }
+    generateCodeMdx() {
+        return codeMdxTemplate;
     }
     generateCommandsMdx() {
         return commandsMdxTemplate;
     }
+    generateConfigMdx() {
+        return configMdxTemplate;
+    }
+    generateFieldsMdx() {
+        return fieldsMdxTemplate;
+    }
+    generateIconsMdx() {
+        return iconsMdxTemplate;
+    }
+    generateImageEmbedsMdx() {
+        return imageEmbedsMdxTemplate;
+    }
+    generateIndexMdx() {
+        return indexMdxTemplate;
+    }
+    generateListTableMdx() {
+        return listTableMdxTemplate;
+    }
+    generateNavigationMdx() {
+        return navigationMdxTemplate;
+    }
+    generateTabsMdx() {
+        return tabsMdxTemplate;
+    }
+    generateTextMdx() {
+        return textMdxTemplate;
+    }
+    generateUpdateMdx() {
+        return updateMdxTemplate;
+    }
     generateNotFoundPage() {
         return notFoundTemplate;
     }
@@ -432,27 +605,60 @@ export default function Home() {
     generateTypography() {
         return typographyTemplate;
     }
+    generateUpdate() {
+        return updateTemplate;
+    }
     generateHeader() {
         return headerTemplate;
     }
     generateFooter() {
         return footerTemplate;
     }
+    generateGlobalStyles() {
+        return globalStylesTemplate;
+    }
     generateThemeToggle() {
         return themeToggleTemplate;
     }
     generateSharedStyled() {
         return sharedStyledTemplate;
     }
+    generateAccordion() {
+        return accordionTemplate;
+    }
+    generateCallout() {
+        return calloutTemplate;
+    }
     generateCode() {
         return codeTemplate;
     }
+    generateColumns() {
+        return columnsTemplate;
+    }
+    generateCard() {
+        return cardTemplate;
+    }
+    generateField() {
+        return fieldTemplate;
+    }
+    generateCherryThemeProvider() {
+        return cherryThemeProviderTemplate;
+    }
+    generateTabs() {
+        return tabsTemplate;
+    }
     generateDocsComponents() {
         return docsComponentsTemplate;
     }
     generateDocs() {
         return docsTemplate;
     }
+    generateDocsSideBar() {
+        return docsSideBarTemplate;
+    }
+    generateMDXComponents() {
+        return mdxComponentsTemplate;
+    }
     generateSideBar() {
         return sideBarTemplate;
     }
@@ -462,14 +668,18 @@ export default function Home() {
     async stop() {
         if (this.watcher) {
             await this.watcher.close();
-            console.log(chalk.yellow("👋 Stopped watching for changes"));
+            console.log(chalk.yellow("👋 Stopped watching for MDX changes"));
+        }
+        if (this.configWatcher) {
+            await this.configWatcher.close();
+            console.log(chalk.yellow("👋 Stopped watching for config changes"));
         }
     }
 }
 program
     .name("doccupine")
     .description("Watch MDX files and generate Next.js documentation pages automatically")
-    .version("0.0.9");
+    .version("0.0.11");
 program
     .command("watch", { isDefault: true })
     .description("Watch a directory for MDX changes and generate Next.js app")

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

@@ -0,0 +1 @@
+export declare const accordionMdxTemplate = "---\ntitle: \"Accordion\"\ndescription: \"Doccupine CLI commands\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 4\n---\n# Accordion\nInteractive panels for toggling visibility of content.\n\nAccordion elements help organize information by letting users show or hide sections as needed. They\u2019re an effective way to manage progressive disclosure and simplify navigation through dense or optional content.\n\n## Accordion Usage\nYou can use the Accordion component directly within your MDX files without any import. The following example shows a basic usage:\n\n~~~mdx\n<Accordion title=\"What is MDX?\">\n    You can put any content in here, including other components, like code:\n\n   ```java HelloWorld.java\n    class HelloWorld {\n        public static void main(String[] args) {\n            System.out.println(\"Hello, World!\");\n        }\n    }\n  ```\n</Accordion>\n~~~\n\n<Accordion title=\"What is MDX?\">\n    You can put any content in here, including other components, like code:\n\n   ```java HelloWorld.java\n    class HelloWorld {\n        public static void main(String[] args) {\n            System.out.println(\"Hello, World!\");\n        }\n    }\n  ```\n</Accordion>";

package/dist/templates/accordion.mdx.js

@@ -0,0 +1,41 @@
+export const accordionMdxTemplate = `---
+title: "Accordion"
+description: "Doccupine CLI commands"
+date: "2025-01-15"
+category: "Components"
+categoryOrder: 1
+order: 4
+---
+# Accordion
+Interactive panels for toggling visibility of content.
+
+Accordion elements help organize information by letting users show or hide sections as needed. They’re an effective way to manage progressive disclosure and simplify navigation through dense or optional content.
+
+## Accordion Usage
+You can use the Accordion component directly within your MDX files without any import. The following example shows a basic usage:
+
+~~~mdx
+<Accordion title="What is MDX?">
+    You can put any content in here, including other components, like code:
+
+   \`\`\`java HelloWorld.java
+    class HelloWorld {
+        public static void main(String[] args) {
+            System.out.println("Hello, World!");
+        }
+    }
+  \`\`\`
+</Accordion>
+~~~
+
+<Accordion title="What is MDX?">
+    You can put any content in here, including other components, like code:
+
+   \`\`\`java HelloWorld.java
+    class HelloWorld {
+        public static void main(String[] args) {
+            System.out.println("Hello, World!");
+        }
+    }
+  \`\`\`
+</Accordion>`;

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

@@ -0,0 +1 @@
+export declare const calloutsMdxTemplate = "---\ntitle: \"Callouts\"\ndescription: \"Doccupine CLI commands\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 7\n---\n# Callouts\nMake your content stand out by using callouts for extra emphasis.\n\nYou can format them as Note, Warning, Info, Danger and Success.\n\n## Callouts Usage\nYou can use the Callouts component directly within your MDX files without any import. The following example shows a basic usage:\n\n~~~mdx\n<Callout type=\"note\">\n  This is a note callout\n</Callout>\n\n<Callout type=\"warning\">\n  This is a warning callout\n</Callout>\n\n<Callout type=\"info\">\n  This is an info callout\n</Callout>\n\n<Callout type=\"danger\">\n  This is a danger callout\n</Callout>\n\n<Callout type=\"success\">\n This is a success callout\n</Callout>\n~~~\n\n<Callout type=\"note\">\n  This is a note callout\n</Callout>\n\n<Callout type=\"warning\">\n  This is a warning callout\n</Callout>\n\n<Callout type=\"info\">\n  This is an info callout\n</Callout>\n\n<Callout type=\"danger\">\n  This is a danger callout\n</Callout>\n\n<Callout type=\"success\">\n This is a success callout\n</Callout>";

package/dist/templates/callouts.mdx.js

@@ -0,0 +1,57 @@
+export const calloutsMdxTemplate = `---
+title: "Callouts"
+description: "Doccupine CLI commands"
+date: "2025-01-15"
+category: "Components"
+categoryOrder: 1
+order: 7
+---
+# Callouts
+Make your content stand out by using callouts for extra emphasis.
+
+You can format them as Note, Warning, Info, Danger and Success.
+
+## Callouts Usage
+You can use the Callouts component directly within your MDX files without any import. The following example shows a basic usage:
+
+~~~mdx
+<Callout type="note">
+  This is a note callout
+</Callout>
+
+<Callout type="warning">
+  This is a warning callout
+</Callout>
+
+<Callout type="info">
+  This is an info callout
+</Callout>
+
+<Callout type="danger">
+  This is a danger callout
+</Callout>
+
+<Callout type="success">
+ This is a success callout
+</Callout>
+~~~
+
+<Callout type="note">
+  This is a note callout
+</Callout>
+
+<Callout type="warning">
+  This is a warning callout
+</Callout>
+
+<Callout type="info">
+  This is an info callout
+</Callout>
+
+<Callout type="danger">
+  This is a danger callout
+</Callout>
+
+<Callout type="success">
+ This is a success callout
+</Callout>`;

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

@@ -0,0 +1 @@
+export declare const cardsMdxTemplate = "---\ntitle: \"Cards\"\ndescription: \"Doccupine CLI commands\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 6\n---\n# Cards\nDuplicate a page or section with ease, then emphasize important information or links using customizable layouts and icons.\n\nCards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.\n\n## Cards Usage\nYou can use the Cards component directly within your MDX files without any import. The following example shows a basic usage:\n\n~~~mdx\n<Card title=\"Note\" icon=\"BadgeInfo\">\n  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.\n</Card>\n~~~\n\n<Card title=\"Note\" icon=\"BadgeInfo\">\n  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.\n</Card>";

package/dist/templates/cards.mdx.js

@@ -0,0 +1,25 @@
+export const cardsMdxTemplate = `---
+title: "Cards"
+description: "Doccupine CLI commands"
+date: "2025-01-15"
+category: "Components"
+categoryOrder: 1
+order: 6
+---
+# Cards
+Duplicate a page or section with ease, then emphasize important information or links using customizable layouts and icons.
+
+Cards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.
+
+## Cards Usage
+You can use the Cards component directly within your MDX files without any import. The following example shows a basic usage:
+
+~~~mdx
+<Card title="Note" icon="BadgeInfo">
+  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.
+</Card>
+~~~
+
+<Card title="Note" icon="BadgeInfo">
+  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.
+</Card>`;

package/dist/templates/code.js

@@ -159,7 +159,17 @@ const Body = styled.div<{ theme: Theme }>\`
   }
 \`;
 
+const escapeHtml = (unsafe: string): string => {
+  return unsafe
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+};
+
 const highlightCode = (code: string, language: string): string => {
+  const escapedCode = escapeHtml(code);
   const result = unified()
     .use(rehypeParse, { fragment: true })
     .use(rehypeHighlight, {
@@ -168,7 +178,7 @@ const highlightCode = (code: string, language: string): string => {
     })
     .use(rehypeStringify)
     .processSync(
-      \`<pre><code class="language-\${language}">\${code}</code></pre>\`,
+      \`<pre><code class="language-\${language}">\${escapedCode}</code></pre>\`,
     );
 
   return String(result);

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

@@ -0,0 +1 @@
+export declare const codeMdxTemplate = "---\ntitle: \"Code\"\ndescription: \"Doccupine CLI commands\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 3\n---\n# Code\nLearn how to display inline code and code blocks in documentation.\n\n## Adding Code Samples\nBoth inline code snippets and full code blocks are supported. Code blocks offer customization for syntax highlighting and more to improve readability and user experience.\n\n### Inline Code\nHighlight code within text by wrapping it with backticks:\n\n```text\nEnclose any `word` or `phrase` in backticks to format it as code.\n```\n\nEnclose any `word` or `phrase` in backticks to format it as code.\n\n## Code Blocks\nTo present larger code samples, use triple backticks for fenced code blocks. Each block can be copied, and\u2014if assistant features are enabled\u2014users can request explanations.\n\nYou may specify the language for highlighting:\n\n~~~text\n```java\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n```\n~~~\n\n\n```java\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n```";

package/dist/templates/code.mdx.js

@@ -0,0 +1,46 @@
+export const codeMdxTemplate = `---
+title: "Code"
+description: "Doccupine CLI commands"
+date: "2025-01-15"
+category: "Components"
+categoryOrder: 1
+order: 3
+---
+# Code
+Learn how to display inline code and code blocks in documentation.
+
+## Adding Code Samples
+Both inline code snippets and full code blocks are supported. Code blocks offer customization for syntax highlighting and more to improve readability and user experience.
+
+### Inline Code
+Highlight code within text by wrapping it with backticks:
+
+\`\`\`text
+Enclose any \`word\` or \`phrase\` in backticks to format it as code.
+\`\`\`
+
+Enclose any \`word\` or \`phrase\` in backticks to format it as code.
+
+## Code Blocks
+To present larger code samples, use triple backticks for fenced code blocks. Each block can be copied, and—if assistant features are enabled—users can request explanations.
+
+You may specify the language for highlighting:
+
+~~~text
+\`\`\`java
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+\`\`\`
+~~~
+
+
+\`\`\`java
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+\`\`\``;