doccupine 0.0.102 → 0.0.104

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

@@ -4,8 +4,10 @@ import { styledText } from "cherry-styled-components";
 import React, { useState, ReactNode } from "react";
 import styled, { css } from "styled-components";
 import { thinScrollbar } from "@/components/layout/SharedStyled";
+import { Icon } from "@/components/layout/Icon";
 interface TabContentProps {
   title: string;
+  icon?: string;
   children: ReactNode;
 }
 interface TabsProps {
@@ -28,6 +30,10 @@ const TabsList = styled.div<{ theme: Theme }>\`
 \`;
 const TabButton = styled.button<{ theme: Theme; $isActive?: boolean }>\`
   flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
   padding: 12px 20px;
   border: none;
   background: \${({ theme }) => theme.colors.light};
@@ -38,6 +44,10 @@ const TabButton = styled.button<{ theme: Theme; $isActive?: boolean }>\`
   \${({ theme }) => styledText(theme)};
   color: \${({ theme }) => theme.colors.dark};
   font-weight: 600;
+
+  & svg {
+    flex-shrink: 0;
+  }
   \${({ theme, $isActive }) =>
     $isActive &&
     css\`
@@ -105,6 +115,7 @@ const Tabs: React.FC<TabsProps> = ({ children }) => {
             onClick={() => setActiveTab(index)}
             type="button"
           >
+            {tab.props.icon && <Icon name={tab.props.icon} size={18} />}
             {tab.props.title}
           </TabButton>
         ))}

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

@@ -1 +1 @@
-export declare const updateTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { styledSmall } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\n\nconst StyledUpdate = styled.div<{ theme: Theme; $columns?: number }>`\n  position: relative;\n  display: flex;\n  gap: 20px;\n  flex-direction: column;\n\n  ${mq(\"lg\")} {\n    margin: 20px 0;\n    flex-direction: row;\n  }\n`;\n\nconst StyledUpdateLabel = styled.span<{ theme: Theme }>`\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n  color: ${({ theme }) => theme.colors.primary};\n  padding: 2px 4px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  font-weight: 600;\n  ${({ theme }) => styledSmall(theme)};\n`;\n\nconst StyledUpdateDescription = styled.div<{ theme: Theme }>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.gray};\n`;\n\nconst StyledUpdateSidebar = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n  ${mq(\"lg\")} {\n    min-width: 160px;\n  }\n`;\n\nconst StyledUpdateChildren = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n`;\n\ninterface UpdateProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  label: string;\n  description: string;\n}\n\n// Keep in sync with generateId in components/Docs.ts so the index sidebar\n// anchor (#id) resolves to this block.\nfunction generateId(text: string): string {\n  return text\n    .toLowerCase()\n    .replace(/[^\\w\\s-]/g, \"\")\n    .replace(/\\s+/g, \"-\")\n    .trim();\n}\n\nfunction Update({ children, label, description }: UpdateProps) {\n  return (\n    <StyledUpdate id={generateId(label)}>\n      <StyledUpdateSidebar>\n        <div>\n          <StyledUpdateLabel>{label}</StyledUpdateLabel>\n        </div>\n        <StyledUpdateDescription>{description}</StyledUpdateDescription>\n      </StyledUpdateSidebar>\n      <StyledUpdateChildren>{children}</StyledUpdateChildren>\n    </StyledUpdate>\n  );\n}\n\nexport { Update };\n";
+export declare const updateTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { styledSmall } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { slugify } from \"@/components/layout/Slug\";\n\nconst StyledUpdate = styled.div<{ theme: Theme; $columns?: number }>`\n  position: relative;\n  display: flex;\n  gap: 20px;\n  flex-direction: column;\n\n  ${mq(\"lg\")} {\n    margin: 20px 0;\n    flex-direction: row;\n  }\n`;\n\nconst StyledUpdateLabel = styled.a<{ theme: Theme }>`\n  display: inline-block;\n  width: fit-content;\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n  color: ${({ theme }) => theme.colors.primary};\n  padding: 2px 4px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  font-weight: 600;\n  text-decoration: none;\n  ${({ theme }) => styledSmall(theme)};\n\n  &:hover {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 35%, transparent)`};\n  }\n`;\n\nconst StyledUpdateDescription = styled.div<{ theme: Theme }>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.gray};\n`;\n\nconst StyledUpdateSidebar = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n  ${mq(\"lg\")} {\n    min-width: 160px;\n  }\n`;\n\nconst StyledUpdateChildren = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n`;\n\ninterface UpdateProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  label: string;\n  description: string;\n}\n\nfunction Update({ children, label, description, id }: UpdateProps) {\n  // MDXComponents injects a de-duplicated id from the shared slugger so the\n  // index sidebar anchor resolves here; fall back to a plain slug when used\n  // outside the MDX pipeline. The label doubles as an anchor so readers can\n  // right-click to copy the deep link (native #anchor jump is offset by the\n  // global scroll-padding-top).\n  const anchor = id ?? slugify(label);\n  return (\n    <StyledUpdate id={anchor}>\n      <StyledUpdateSidebar>\n        <div>\n          <StyledUpdateLabel href={`#${anchor}`}>{label}</StyledUpdateLabel>\n        </div>\n        <StyledUpdateDescription>{description}</StyledUpdateDescription>\n      </StyledUpdateSidebar>\n      <StyledUpdateChildren>{children}</StyledUpdateChildren>\n    </StyledUpdate>\n  );\n}\n\nexport { Update };\n";

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

@@ -2,6 +2,7 @@ export const updateTemplate = `"use client";
 import styled from "styled-components";
 import { styledSmall } from "cherry-styled-components";
 import { mq, Theme } from "@/app/theme";
+import { slugify } from "@/components/layout/Slug";
 
 const StyledUpdate = styled.div<{ theme: Theme; $columns?: number }>\`
   position: relative;
@@ -15,14 +16,22 @@ const StyledUpdate = styled.div<{ theme: Theme; $columns?: number }>\`
   }
 \`;
 
-const StyledUpdateLabel = styled.span<{ theme: Theme }>\`
+const StyledUpdateLabel = styled.a<{ theme: Theme }>\`
+  display: inline-block;
+  width: fit-content;
   background: \${({ theme }) =>
     \`color-mix(in srgb, \${theme.colors.primaryLight} 20%, transparent)\`};
   color: \${({ theme }) => theme.colors.primary};
   padding: 2px 4px;
   border-radius: \${({ theme }) => theme.spacing.radius.xs};
   font-weight: 600;
+  text-decoration: none;
   \${({ theme }) => styledSmall(theme)};
+
+  &:hover {
+    background: \${({ theme }) =>
+      \`color-mix(in srgb, \${theme.colors.primaryLight} 35%, transparent)\`};
+  }
 \`;
 
 const StyledUpdateDescription = styled.div<{ theme: Theme }>\`
@@ -53,22 +62,18 @@ interface UpdateProps extends React.HTMLAttributes<HTMLDivElement> {
   description: string;
 }
 
-// Keep in sync with generateId in components/Docs.ts so the index sidebar
-// anchor (#id) resolves to this block.
-function generateId(text: string): string {
-  return text
-    .toLowerCase()
-    .replace(/[^\\w\\s-]/g, "")
-    .replace(/\\s+/g, "-")
-    .trim();
-}
-
-function Update({ children, label, description }: UpdateProps) {
+function Update({ children, label, description, id }: UpdateProps) {
+  // MDXComponents injects a de-duplicated id from the shared slugger so the
+  // index sidebar anchor resolves here; fall back to a plain slug when used
+  // outside the MDX pipeline. The label doubles as an anchor so readers can
+  // right-click to copy the deep link (native #anchor jump is offset by the
+  // global scroll-padding-top).
+  const anchor = id ?? slugify(label);
   return (
-    <StyledUpdate id={generateId(label)}>
+    <StyledUpdate id={anchor}>
       <StyledUpdateSidebar>
         <div>
-          <StyledUpdateLabel>{label}</StyledUpdateLabel>
+          <StyledUpdateLabel href={\`#\${anchor}\`}>{label}</StyledUpdateLabel>
         </div>
         <StyledUpdateDescription>{description}</StyledUpdateDescription>
       </StyledUpdateSidebar>

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

@@ -1 +1 @@
-export declare const componentsMdxTemplate = "---\ntitle: \"Components\"\ndescription: \"Explore the full library of built-in components available in your documentation pages.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 0\n---\n\n# Components\n\nDoccupine includes a rich set of built-in components you can use directly in your MDX files - no imports needed. Browse the full library below.\n\n<Columns cols={3}>\n  <Card title=\"Headers and Text\" icon=\"heading\" href=\"/headers-and-text\">\n    Headings, paragraphs, bold, italic, links, and other text formatting.\n  </Card>\n  <Card title=\"Lists and Tables\" icon=\"list\" href=\"/lists-and-tables\">\n    Ordered lists, unordered lists, and data tables.\n  </Card>\n  <Card title=\"Code\" icon=\"code\" href=\"/code\">\n    Inline code, fenced code blocks, and syntax highlighting.\n  </Card>\n  <Card title=\"Accordion\" icon=\"chevrons-down\" href=\"/accordion\">\n    Collapsible sections for organizing lengthy content.\n  </Card>\n  <Card title=\"Tabs\" icon=\"panel-top\" href=\"/tabs\">\n    Tabbed interfaces for grouping related content.\n  </Card>\n  <Card title=\"Cards\" icon=\"square\" href=\"/cards\">\n    Visual containers for content, icons, and links.\n  </Card>\n  <Card title=\"Buttons\" icon=\"mouse-pointer-click\" href=\"/buttons\">\n    Action components with variants, sizes, and icons.\n  </Card>\n  <Card title=\"Callouts\" icon=\"megaphone\" href=\"/callouts\">\n    Highlighted blocks for tips, warnings, and important notes.\n  </Card>\n  <Card title=\"Images and Embeds\" icon=\"image\" href=\"/images-and-embeds\">\n    Images, videos, and embedded content.\n  </Card>\n  <Card title=\"Icons\" icon=\"smile\" href=\"/icons\">\n    Lucide icons you can use anywhere in your docs.\n  </Card>\n  <Card title=\"Fields\" icon=\"text-cursor-input\" href=\"/fields\">\n    Property and parameter documentation blocks.\n  </Card>\n  <Card title=\"Update\" icon=\"bell\" href=\"/update\">\n    Changelog and update announcement blocks.\n  </Card>\n  <Card title=\"Columns\" icon=\"columns-3\" href=\"/columns\">\n    Grid layouts for arranging cards and content side by side.\n  </Card>\n  <Card title=\"Steps\" icon=\"footprints\" href=\"/steps\">\n    Numbered step-by-step guides and walkthroughs.\n  </Card>\n  <Card title=\"Color Swatches\" icon=\"palette\" href=\"/color-swatches\">\n    Visual color palette swatches to document your theme colors.\n  </Card>\n</Columns>";
+export declare const componentsMdxTemplate = "---\ntitle: \"Components\"\ndescription: \"Explore the full library of built-in components available in your documentation pages.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\ncategoryIcon: \"blocks\"\norder: 0\n---\n\n# Components\n\nDoccupine includes a rich set of built-in components you can use directly in your MDX files - no imports needed. Browse the full library below.\n\n<Columns cols={3}>\n  <Card title=\"Headers and Text\" icon=\"heading\" href=\"/headers-and-text\">\n    Headings, paragraphs, bold, italic, links, and other text formatting.\n  </Card>\n  <Card title=\"Lists and Tables\" icon=\"list\" href=\"/lists-and-tables\">\n    Ordered lists, unordered lists, and data tables.\n  </Card>\n  <Card title=\"Code\" icon=\"code\" href=\"/code\">\n    Inline code, fenced code blocks, and syntax highlighting.\n  </Card>\n  <Card title=\"Accordion\" icon=\"chevrons-down\" href=\"/accordion\">\n    Collapsible sections for organizing lengthy content.\n  </Card>\n  <Card title=\"Tabs\" icon=\"panel-top\" href=\"/tabs\">\n    Tabbed interfaces for grouping related content.\n  </Card>\n  <Card title=\"Cards\" icon=\"square\" href=\"/cards\">\n    Visual containers for content, icons, and links.\n  </Card>\n  <Card title=\"Buttons\" icon=\"mouse-pointer-click\" href=\"/buttons\">\n    Action components with variants, sizes, and icons.\n  </Card>\n  <Card title=\"Callouts\" icon=\"megaphone\" href=\"/callouts\">\n    Highlighted blocks for tips, warnings, and important notes.\n  </Card>\n  <Card title=\"Images and Embeds\" icon=\"image\" href=\"/images-and-embeds\">\n    Images, videos, and embedded content.\n  </Card>\n  <Card title=\"Icons\" icon=\"smile\" href=\"/icons\">\n    Lucide icons you can use anywhere in your docs.\n  </Card>\n  <Card title=\"Fields\" icon=\"text-cursor-input\" href=\"/fields\">\n    Property and parameter documentation blocks.\n  </Card>\n  <Card title=\"Update\" icon=\"bell\" href=\"/update\">\n    Changelog and update announcement blocks.\n  </Card>\n  <Card title=\"Columns\" icon=\"columns-3\" href=\"/columns\">\n    Grid layouts for arranging cards and content side by side.\n  </Card>\n  <Card title=\"Steps\" icon=\"footprints\" href=\"/steps\">\n    Numbered step-by-step guides and walkthroughs.\n  </Card>\n  <Card title=\"Color Swatches\" icon=\"palette\" href=\"/color-swatches\">\n    Visual color palette swatches to document your theme colors.\n  </Card>\n</Columns>";

package/dist/templates/mdx/components.mdx.js

@@ -4,6 +4,7 @@ description: "Explore the full library of built-in components available in your
 date: "2026-02-19"
 category: "Components"
 categoryOrder: 1
+categoryIcon: "blocks"
 order: 0
 ---
 

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

@@ -1 +1 @@
-export declare const globalsMdxTemplate = "---\ntitle: \"Globals\"\ndescription: \"Configure global settings for your documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 1\n---\n\n# Global Configuration\n\nUse a `config.json` file to define project\u2011wide metadata for your documentation site. These values are applied to every generated page unless a page overrides them in its own frontmatter.\n\n## config.json\n\nPlace a `config.json` at your project root (the same folder where you execute `npx doccupine`) to define global metadata for your documentation site.\n\n```json\n{\n  \"name\": \"Doccupine\",\n  \"description\": \"Doccupine is a free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.\",\n  \"icon\": \"https://docs.doccupine.com/favicon.ico\",\n  \"image\": \"https://docs.doccupine.com/preview.png\",\n  \"url\": \"https://docs.example.com\"\n}\n```\n\n## Fields\n\nAll fields are optional. Doccupine uses sensible defaults when a field is not set.\n\n- **name**: The primary name of your documentation website. Displayed in the site title and used in various UI elements.\n- **description**: A concise summary of your project, used in site metadata (e.g., HTML meta description) and social previews when not overridden.\n- **icon**: The favicon for your site. You can provide a full URL or a relative path to an asset in your project.\n- **image**: The Open Graph image used when links to your docs are shared on social platforms. Accepts a full URL or a relative path.\n- **url**: The public URL of your deployed site. Used as the base URL for `sitemap.xml` and `robots.txt`. When omitted, no sitemap is generated. Can be overridden at deploy time with the `NEXT_PUBLIC_SITE_URL` environment variable.\n\n## Per-page overrides\n\nAny page can override global values by defining the matching key in its frontmatter. When present, the page's value takes precedence over `config.json` for that page only.\n\n| Frontmatter field | Overrides     | Effect                                                      |\n| ----------------- | ------------- | ----------------------------------------------------------- |\n| **title**         | -             | Page title in metadata and Open Graph                       |\n| **description**   | `description` | Meta description and Open Graph description                 |\n| **name**          | `name`        | Site name shown in the title suffix (e.g. \"Page - My Docs\") |\n| **icon**          | `icon`        | Favicon for this page                                       |\n| **image**         | `image`       | Open Graph preview image                                    |\n| **section**       | -             | Assigns the page to a [section](/sections)                  |\n| **sectionOrder**  | -             | Controls section position in the tab bar                    |\n| **sectionLabel**  | -             | Renames the default \"Docs\" tab (use on `index.mdx`)         |\n\n<Callout type=\"note\">\n  If a key is not specified in a page's frontmatter, Doccupine falls back to the corresponding value in `config.json`.\n</Callout>\n\nExample frontmatter in an `.mdx` file:\n\n```text\n---\ntitle: \"My Feature\"\ndescription: \"A focused description just for this page.\"\nname: \"My Product Docs\"\nicon: \"/custom-favicon.ico\"\nimage: \"/custom-preview.png\"\ndate: \"2026-02-19\"\ncategory: \"Guides\"\n---\n```";
+export declare const globalsMdxTemplate = "---\ntitle: \"Globals\"\ndescription: \"Configure global settings for your documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\ncategoryIcon: \"settings\"\norder: 1\n---\n\n# Global Configuration\n\nUse a `config.json` file to define project\u2011wide metadata for your documentation site. These values are applied to every generated page unless a page overrides them in its own frontmatter.\n\n## config.json\n\nPlace a `config.json` at your project root (the same folder where you execute `npx doccupine`) to define global metadata for your documentation site.\n\n```json\n{\n  \"name\": \"Doccupine\",\n  \"description\": \"Doccupine is a free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.\",\n  \"icon\": \"https://docs.doccupine.com/favicon.ico\",\n  \"image\": \"https://docs.doccupine.com/preview.png\",\n  \"url\": \"https://docs.example.com\"\n}\n```\n\n## Fields\n\nAll fields are optional. Doccupine uses sensible defaults when a field is not set.\n\n- **name**: The primary name of your documentation website. Displayed in the site title and used in various UI elements.\n- **description**: A concise summary of your project, used in site metadata (e.g., HTML meta description) and social previews when not overridden.\n- **icon**: The favicon for your site. You can provide a full URL or a relative path to an asset in your project.\n- **image**: The Open Graph image used when links to your docs are shared on social platforms. Accepts a full URL or a relative path.\n- **url**: The public URL of your deployed site. Used as the base URL for `sitemap.xml` and `robots.txt`. When omitted, no sitemap is generated. Can be overridden at deploy time with the `NEXT_PUBLIC_SITE_URL` environment variable.\n\n## Per-page overrides\n\nAny page can override global values by defining the matching key in its frontmatter. When present, the page's value takes precedence over `config.json` for that page only.\n\n| Frontmatter field | Overrides     | Effect                                                      |\n| ----------------- | ------------- | ----------------------------------------------------------- |\n| **title**         | -             | Page title in metadata and Open Graph                       |\n| **description**   | `description` | Meta description and Open Graph description                 |\n| **name**          | `name`        | Site name shown in the title suffix (e.g. \"Page - My Docs\") |\n| **icon**          | `icon`        | Favicon for this page                                       |\n| **image**         | `image`       | Open Graph preview image                                    |\n| **section**       | -             | Assigns the page to a [section](/sections)                  |\n| **sectionOrder**  | -             | Controls section position in the tab bar                    |\n| **sectionLabel**  | -             | Renames the default \"Docs\" tab (use on `index.mdx`)         |\n\n<Callout type=\"note\">\n  If a key is not specified in a page's frontmatter, Doccupine falls back to the corresponding value in `config.json`.\n</Callout>\n\nExample frontmatter in an `.mdx` file:\n\n```text\n---\ntitle: \"My Feature\"\ndescription: \"A focused description just for this page.\"\nname: \"My Product Docs\"\nicon: \"/custom-favicon.ico\"\nimage: \"/custom-preview.png\"\ndate: \"2026-02-19\"\ncategory: \"Guides\"\n---\n```";

package/dist/templates/mdx/globals.mdx.js

@@ -5,6 +5,7 @@ description: "Configure global settings for your documentation."
 date: "2026-02-19"
 category: "Configuration"
 categoryOrder: 3
+categoryIcon: "settings"
 order: 1
 ---
 

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

@@ -1 +1 @@
-export declare const indexMdxTemplate = "---\ntitle: \"Introduction\"\ndescription: \"Doccupine is a free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.\"\ndate: \"2026-02-19\"\ncategory: \"Getting Started\"\ncategoryOrder: 0\norder: 0\n---\n\n# Welcome to Doccupine\n\nDoccupine turns a folder of MDX files into a beautiful, production-ready documentation website. Write in standard Markdown, use any of the built-in components, and get a fully themed site with AI-powered search and automatic navigation - all from one command.\n\n```bash\nnpx doccupine\n```\n\nThat's it. Doccupine prompts you for a source directory, generates your site, and starts a dev server at `http://localhost:3000`. Every edit rebuilds instantly.\n\n<Callout type=\"info\">\n  Want a managed experience instead? The [Doccupine Platform](/platform) gives you a browser-based editor, one-click publishing, custom domains, and team collaboration - no local setup needed.\n</Callout>\n\n## How it works\n\nYou write `.mdx` files using Markdown and built-in components like this one. Doccupine watches your files, generates pages, builds the sidebar from your frontmatter, and handles theming, AI chat, and deployment config for you.\n\nEverything on this page - the callout above, the cards below, the code block - is a live example of what your docs can look like out of the box.\n\n<Columns cols={2}>\n  <Card title=\"Start writing\" icon=\"pencil\" href=\"/components\">\n    Rich docs from day one. 14+ components work out of the box - no imports needed.\n  </Card>\n  <Card title=\"Ship it\" icon=\"rocket\" href=\"/deployment-and-hosting\">\n    Deploy to the Doccupine Platform or self-host on any platform that supports Next.js.\n  </Card>\n</Columns>\n\n## Configure your site\n\nDoccupine works with no configuration, but when you're ready to customize, everything is controlled through simple JSON files in your project root.\n\n- [Global settings](/globals) - Site name, description, favicon, and preview image via `config.json`\n- [Navigation](/navigation) - Override the auto-generated sidebar with `navigation.json`\n- [Theme](/theme) - Colors, logos, and dark mode palette via `theme.json`\n- [Fonts](/fonts) - Google Fonts or local font files via `fonts.json`\n- [AI Assistant](/ai-assistant) - Enable the built-in chat with your own API key\n- [MCP Server](/model-context-protocol) - Let AI tools search your docs through `/api/mcp`";
+export declare const indexMdxTemplate = "---\ntitle: \"Introduction\"\ndescription: \"Doccupine is a free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.\"\ndate: \"2026-02-19\"\ncategory: \"Getting Started\"\ncategoryOrder: 0\ncategoryIcon: \"rocket\"\norder: 0\n---\n\n# Welcome to Doccupine\n\nDoccupine turns a folder of MDX files into a beautiful, production-ready documentation website. Write in standard Markdown, use any of the built-in components, and get a fully themed site with AI-powered search and automatic navigation - all from one command.\n\n```bash\nnpx doccupine\n```\n\nThat's it. Doccupine prompts you for a source directory, generates your site, and starts a dev server at `http://localhost:3000`. Every edit rebuilds instantly.\n\n<Callout type=\"info\">\n  Want a managed experience instead? The [Doccupine Platform](/platform) gives you a browser-based editor, one-click publishing, custom domains, and team collaboration - no local setup needed.\n</Callout>\n\n## How it works\n\nYou write `.mdx` files using Markdown and built-in components like this one. Doccupine watches your files, generates pages, builds the sidebar from your frontmatter, and handles theming, AI chat, and deployment config for you.\n\nEverything on this page - the callout above, the cards below, the code block - is a live example of what your docs can look like out of the box.\n\n<Columns cols={2}>\n  <Card title=\"Start writing\" icon=\"pencil\" href=\"/components\">\n    Rich docs from day one. 14+ components work out of the box - no imports needed.\n  </Card>\n  <Card title=\"Ship it\" icon=\"rocket\" href=\"/deployment-and-hosting\">\n    Deploy to the Doccupine Platform or self-host on any platform that supports Next.js.\n  </Card>\n</Columns>\n\n## Configure your site\n\nDoccupine works with no configuration, but when you're ready to customize, everything is controlled through simple JSON files in your project root.\n\n- [Global settings](/globals) - Site name, description, favicon, and preview image via `config.json`\n- [Navigation](/navigation) - Override the auto-generated sidebar with `navigation.json`\n- [Theme](/theme) - Colors, logos, and dark mode palette via `theme.json`\n- [Fonts](/fonts) - Google Fonts or local font files via `fonts.json`\n- [AI Assistant](/ai-assistant) - Enable the built-in chat with your own API key\n- [MCP Server](/model-context-protocol) - Let AI tools search your docs through `/api/mcp`";

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

@@ -5,6 +5,7 @@ description: "${DEFAULT_DESCRIPTION}"
 date: "2026-02-19"
 category: "Getting Started"
 categoryOrder: 0
+categoryIcon: "rocket"
 order: 0
 ---
 

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

@@ -1 +1 @@
-export declare const navigationMdxTemplate = "---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n\n# Navigation\n\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)\n\nWhen no custom navigation is provided, Doccupine generates a structure based on each page's frontmatter.\n\n### Frontmatter fields\n\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\n\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### Array format\n\nThe simplest format is an array of categories. When using [sections](/sections), this applies to the root section only.\n\n```json\n[\n  {\n    \"label\": \"Getting Started\",\n    \"links\": [\n      { \"slug\": \"\", \"title\": \"Introduction\" },\n      { \"slug\": \"commands\", \"title\": \"Commands\" }\n    ]\n  },\n  {\n    \"label\": \"Components\",\n    \"links\": [\n      { \"slug\": \"components\", \"title\": \"Components\" },\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\": \"buttons\", \"title\": \"Buttons\" },\n      { \"slug\": \"callouts\", \"title\": \"Callouts\" },\n      { \"slug\": \"image-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      { \"slug\": \"color-swatches\", \"title\": \"Color Swatches\" }\n    ]\n  },\n  {\n    \"label\": \"Configuration\",\n    \"links\": [\n      { \"slug\": \"globals\", \"title\": \"Globals\" },\n      { \"slug\": \"navigation\", \"title\": \"Navigation\" },\n      { \"slug\": \"sections\", \"title\": \"Sections\" },\n      { \"slug\": \"footer-links\", \"title\": \"Footer Links\" },\n      { \"slug\": \"theme\", \"title\": \"Theme\" },\n      { \"slug\": \"media-and-assets\", \"title\": \"Media and assets\" },\n      { \"slug\": \"fonts\", \"title\": \"Fonts\" },\n      { \"slug\": \"ai-assistant\", \"title\": \"AI Assistant\" },\n      { \"slug\": \"model-context-protocol\", \"title\": \"Model Context Protocol\" },\n      { \"slug\": \"analytics\", \"title\": \"Analytics\" },\n      { \"slug\": \"deployment-and-hosting\", \"title\": \"Deployment & Hosting\" }\n    ]\n  }\n]\n```\n\n### Object format (per-section)\n\nWhen using [sections](/sections), you can define navigation for each section by using an object keyed by section slug. Sections without a key fall back to auto-generated navigation from frontmatter.\n\n```json\n{\n  \"\": [\n    {\n      \"label\": \"General\",\n      \"links\": [\n        { \"slug\": \"\", \"title\": \"Getting Started\" },\n        { \"slug\": \"commands\", \"title\": \"Commands\" }\n      ]\n    }\n  ],\n  \"platform\": [\n    {\n      \"label\": \"Overview\",\n      \"links\": [\n        { \"slug\": \"platform/auth\", \"title\": \"Authentication\" },\n        { \"slug\": \"platform/users\", \"title\": \"Users\" }\n      ]\n    }\n  ]\n}\n```\n\nThe key `\"\"` controls the root section. Other keys match section slugs defined in `sections.json` or derived from frontmatter. See [Sections](/sections) for details on configuring sections.\n\n### Fields\n\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's `title` frontmatter.\n\n## Precedence and behavior\n\n<Callout type=\"note\">\n  `navigation.json` takes priority over frontmatter. If present, it fully controls the sidebar structure for the sections it covers.\n</Callout>\n\n- Without `navigation.json`, the sidebar is built from page frontmatter: `category` -> grouped; `categoryOrder` -> category position; `order` -> page position.\n- When using the object format, sections not listed in `navigation.json` fall back to frontmatter-based navigation.\n- Pages without a `category` appear at the top level.\n\n## Tips\n\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` -> `text`).\n- **Control titles**: Use `title` in `navigation.json` to customize sidebar labels without changing page frontmatter.\n- **Per-section navigation**: Use the object format to define different sidebars for each section. Mix and match - define some sections explicitly and let others auto-generate.";
+export declare const navigationMdxTemplate = "---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n\n# Navigation\n\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)\n\nWhen no custom navigation is provided, Doccupine generates a structure based on each page's frontmatter.\n\n### Frontmatter fields\n\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- **navIcon**: Optional [Lucide](https://lucide.dev/icons) icon name shown next to the page's sidebar link.\n- **categoryIcon**: Optional Lucide icon name for the page's category header. The first page in a category that sets it wins.\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\n\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### Array format\n\nThe simplest format is an array of categories. When using [sections](/sections), this applies to the root section only.\n\n```json\n[\n  {\n    \"label\": \"Getting Started\",\n    \"links\": [\n      { \"slug\": \"\", \"title\": \"Introduction\" },\n      { \"slug\": \"commands\", \"title\": \"Commands\" }\n    ]\n  },\n  {\n    \"label\": \"Components\",\n    \"links\": [\n      { \"slug\": \"components\", \"title\": \"Components\" },\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\": \"buttons\", \"title\": \"Buttons\" },\n      { \"slug\": \"callouts\", \"title\": \"Callouts\" },\n      { \"slug\": \"image-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      { \"slug\": \"color-swatches\", \"title\": \"Color Swatches\" }\n    ]\n  },\n  {\n    \"label\": \"Configuration\",\n    \"links\": [\n      { \"slug\": \"globals\", \"title\": \"Globals\" },\n      { \"slug\": \"navigation\", \"title\": \"Navigation\" },\n      { \"slug\": \"sections\", \"title\": \"Sections\" },\n      { \"slug\": \"footer-links\", \"title\": \"Footer Links\" },\n      { \"slug\": \"theme\", \"title\": \"Theme\" },\n      { \"slug\": \"media-and-assets\", \"title\": \"Media and assets\" },\n      { \"slug\": \"fonts\", \"title\": \"Fonts\" },\n      { \"slug\": \"ai-assistant\", \"title\": \"AI Assistant\" },\n      { \"slug\": \"model-context-protocol\", \"title\": \"Model Context Protocol\" },\n      { \"slug\": \"analytics\", \"title\": \"Analytics\" },\n      { \"slug\": \"deployment-and-hosting\", \"title\": \"Deployment & Hosting\" },\n      { \"slug\": \"authentication\", \"title\": \"Authentication\" }\n    ]\n  }\n]\n```\n\n### Object format (per-section)\n\nWhen using [sections](/sections), you can define navigation for each section by using an object keyed by section slug. Sections without a key fall back to auto-generated navigation from frontmatter.\n\n```json\n{\n  \"\": [\n    {\n      \"label\": \"General\",\n      \"links\": [\n        { \"slug\": \"\", \"title\": \"Getting Started\" },\n        { \"slug\": \"commands\", \"title\": \"Commands\" }\n      ]\n    }\n  ],\n  \"platform\": [\n    {\n      \"label\": \"Overview\",\n      \"links\": [\n        { \"slug\": \"platform/auth\", \"title\": \"Authentication\" },\n        { \"slug\": \"platform/users\", \"title\": \"Users\" }\n      ]\n    }\n  ]\n}\n```\n\nThe key `\"\"` controls the root section. Other keys match section slugs defined in `sections.json` or derived from frontmatter. See [Sections](/sections) for details on configuring sections.\n\n### Fields\n\n- **label**: The section header shown in the sidebar.\n- **icon**: Optional [Lucide](https://lucide.dev/icons) icon name shown next to the category header.\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's `title` frontmatter.\n  - **icon**: Optional Lucide icon name shown next to the link.\n  - **links**: Optional array of nested child links. See [Nested navigation](#nested-navigation).\n\n## Icons\n\nAdd icons to categories and links to make the sidebar easier to scan. Icons use [Lucide](https://lucide.dev/icons) names in kebab-case (e.g. `rocket`, `book-open`, `settings`). Unknown names render nothing, so a typo never breaks the build.\n\nWith frontmatter, set `navIcon` on a page for its sidebar link and `categoryIcon` for its category:\n\n```text\n---\ntitle: \"Introduction\"\ncategory: \"Getting Started\"\ncategoryOrder: 1\norder: 1\nnavIcon: \"rocket\"\ncategoryIcon: \"book-open\"\n---\n```\n\nWith `navigation.json`, add an `icon` to any category or link:\n\n```json\n[\n  {\n    \"label\": \"Getting Started\",\n    \"icon\": \"book-open\",\n    \"links\": [\n      { \"slug\": \"\", \"title\": \"Introduction\", \"icon\": \"rocket\" },\n      { \"slug\": \"commands\", \"title\": \"Commands\", \"icon\": \"terminal\" }\n    ]\n  }\n]\n```\n\n## Nested navigation\n\nA link in `navigation.json` can hold its own `links` array to create a collapsible group. Groups expand and collapse on click and open automatically when one of their pages is active. Nesting can go as deep as you need.\n\n```json\n[\n  {\n    \"label\": \"Guides\",\n    \"icon\": \"book-open\",\n    \"links\": [\n      { \"slug\": \"guides\", \"title\": \"Overview\", \"icon\": \"compass\" },\n      {\n        \"title\": \"Advanced\",\n        \"icon\": \"settings\",\n        \"links\": [\n          { \"slug\": \"guides/caching\", \"title\": \"Caching\" },\n          { \"slug\": \"guides/streaming\", \"title\": \"Streaming\" }\n        ]\n      }\n    ]\n  }\n]\n```\n\nA group can be a plain label - omit `slug` and it acts only as a collapsible header - or a real page, by adding a `slug` so the group title is also a link.\n\n<Callout type=\"note\">\n  Nested groups are only available through `navigation.json`. Frontmatter navigation is always two levels: category and pages.\n</Callout>\n\n## Precedence and behavior\n\n<Callout type=\"note\">\n  `navigation.json` takes priority over frontmatter. If present, it fully controls the sidebar structure for the sections it covers.\n</Callout>\n\n- Without `navigation.json`, the sidebar is built from page frontmatter: `category` -> grouped; `categoryOrder` -> category position; `order` -> page position.\n- When using the object format, sections not listed in `navigation.json` fall back to frontmatter-based navigation.\n- Pages without a `category` appear at the top level.\n\n## Tips\n\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` -> `text`).\n- **Control titles**: Use `title` in `navigation.json` to customize sidebar labels without changing page frontmatter.\n- **Per-section navigation**: Use the object format to define different sidebars for each section. Mix and match - define some sections explicitly and let others auto-generate.";

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

@@ -20,6 +20,8 @@ When no custom navigation is provided, Doccupine generates a structure based on
 - **category**: The category name that groups the page in the sidebar.
 - **categoryOrder**: The position of the category within the sidebar. Lower numbers appear first.
 - **order**: The position of the page within its category. Lower numbers appear first.
+- **navIcon**: Optional [Lucide](https://lucide.dev/icons) icon name shown next to the page's sidebar link.
+- **categoryIcon**: Optional Lucide icon name for the page's category header. The first page in a category that sets it wins.
 
 ### Example frontmatter
 
@@ -87,7 +89,8 @@ The simplest format is an array of categories. When using [sections](/sections),
       { "slug": "ai-assistant", "title": "AI Assistant" },
       { "slug": "model-context-protocol", "title": "Model Context Protocol" },
       { "slug": "analytics", "title": "Analytics" },
-      { "slug": "deployment-and-hosting", "title": "Deployment & Hosting" }
+      { "slug": "deployment-and-hosting", "title": "Deployment & Hosting" },
+      { "slug": "authentication", "title": "Authentication" }
     ]
   }
 ]
@@ -125,9 +128,74 @@ The key \`""\` controls the root section. Other keys match section slugs defined
 ### Fields
 
 - **label**: The section header shown in the sidebar.
+- **icon**: Optional [Lucide](https://lucide.dev/icons) icon name shown next to the category header.
 - **links**: An array of page entries for that section.
   - **slug**: The MDX file slug (filename without extension). Use an empty string \`""\` for \`index.mdx\`.
   - **title**: The display title in the navigation. This can differ from the page's \`title\` frontmatter.
+  - **icon**: Optional Lucide icon name shown next to the link.
+  - **links**: Optional array of nested child links. See [Nested navigation](#nested-navigation).
+
+## Icons
+
+Add icons to categories and links to make the sidebar easier to scan. Icons use [Lucide](https://lucide.dev/icons) names in kebab-case (e.g. \`rocket\`, \`book-open\`, \`settings\`). Unknown names render nothing, so a typo never breaks the build.
+
+With frontmatter, set \`navIcon\` on a page for its sidebar link and \`categoryIcon\` for its category:
+
+\`\`\`text
+---
+title: "Introduction"
+category: "Getting Started"
+categoryOrder: 1
+order: 1
+navIcon: "rocket"
+categoryIcon: "book-open"
+---
+\`\`\`
+
+With \`navigation.json\`, add an \`icon\` to any category or link:
+
+\`\`\`json
+[
+  {
+    "label": "Getting Started",
+    "icon": "book-open",
+    "links": [
+      { "slug": "", "title": "Introduction", "icon": "rocket" },
+      { "slug": "commands", "title": "Commands", "icon": "terminal" }
+    ]
+  }
+]
+\`\`\`
+
+## Nested navigation
+
+A link in \`navigation.json\` can hold its own \`links\` array to create a collapsible group. Groups expand and collapse on click and open automatically when one of their pages is active. Nesting can go as deep as you need.
+
+\`\`\`json
+[
+  {
+    "label": "Guides",
+    "icon": "book-open",
+    "links": [
+      { "slug": "guides", "title": "Overview", "icon": "compass" },
+      {
+        "title": "Advanced",
+        "icon": "settings",
+        "links": [
+          { "slug": "guides/caching", "title": "Caching" },
+          { "slug": "guides/streaming", "title": "Streaming" }
+        ]
+      }
+    ]
+  }
+]
+\`\`\`
+
+A group can be a plain label - omit \`slug\` and it acts only as a collapsible header - or a real page, by adding a \`slug\` so the group title is also a link.
+
+<Callout type="note">
+  Nested groups are only available through \`navigation.json\`. Frontmatter navigation is always two levels: category and pages.
+</Callout>
 
 ## Precedence and behavior
 

package/dist/templates/mdx/platform/build-and-deploy.mdx.d.ts

@@ -1 +1 @@
-export declare const platformBuildAndDeployMdxTemplate = "---\ntitle: \"Build & Deploy\"\ndescription: \"Monitor your documentation site's build status and deployment history.\"\ndate: \"2026-02-19\"\ncategory: \"Infrastructure\"\ncategoryOrder: 3\norder: 1\nsection: \"Platform\"\n---\n\n# Build & Deploy\n\nThe Build & Deploy page shows your documentation site's build and deployment history. Every time you publish changes or push to GitHub, a new deployment is created.\n\n## Deployment status\n\nThe project header always shows your current deployment status:\n\n- **Ready** - your site is live and up to date\n- **Building** - a new deployment is in progress\n- **Queued** - a deployment is waiting to start\n- **Error** - the build failed\n\n<Callout type=\"warning\">\n  If a deployment fails, check the build logs for error details. Common issues include MDX syntax errors or missing frontmatter fields.\n</Callout>\n\n## Build logs\n\nClick on any deployment to view its build logs. These show the full output of the build process, making it easy to diagnose issues.\n\n## Deployment triggers\n\nDeployments are triggered in three ways:\n\n1. **Publishing from Doccupine** - clicking Publish in the project header\n2. **Pushing to GitHub** - pushing to the `main` branch of your repository triggers an automatic deploy via webhook\n3. **Configuration changes** - saving AI assistant settings triggers a redeploy since those are stored as environment variables\n\n## Visiting your site\n\nClick the **Visit** button in the project header to open your live documentation site in a new tab.";
+export declare const platformBuildAndDeployMdxTemplate = "---\ntitle: \"Build & Deploy\"\ndescription: \"Monitor your documentation site's build status and deployment history.\"\ndate: \"2026-02-19\"\ncategory: \"Infrastructure\"\ncategoryOrder: 3\ncategoryIcon: \"server\"\norder: 1\nsection: \"Platform\"\n---\n\n# Build & Deploy\n\nThe Build & Deploy page shows your documentation site's build and deployment history. Every time you publish changes or push to GitHub, a new deployment is created.\n\n## Deployment status\n\nThe project header always shows your current deployment status:\n\n- **Ready** - your site is live and up to date\n- **Building** - a new deployment is in progress\n- **Queued** - a deployment is waiting to start\n- **Error** - the build failed\n\n<Callout type=\"warning\">\n  If a deployment fails, check the build logs for error details. Common issues include MDX syntax errors or missing frontmatter fields.\n</Callout>\n\n## Build logs\n\nClick on any deployment to view its build logs. These show the full output of the build process, making it easy to diagnose issues.\n\n## Deployment triggers\n\nDeployments are triggered in three ways:\n\n1. **Publishing from Doccupine** - clicking Publish in the project header\n2. **Pushing to GitHub** - pushing to the `main` branch of your repository triggers an automatic deploy via webhook\n3. **Configuration changes** - saving AI assistant settings triggers a redeploy since those are stored as environment variables\n\n## Visiting your site\n\nClick the **Visit** button in the project header to open your live documentation site in a new tab.";

package/dist/templates/mdx/platform/build-and-deploy.mdx.js

@@ -4,6 +4,7 @@ description: "Monitor your documentation site's build status and deployment hist
 date: "2026-02-19"
 category: "Infrastructure"
 categoryOrder: 3
+categoryIcon: "server"
 order: 1
 section: "Platform"
 ---

package/dist/templates/mdx/platform/file-editor.mdx.d.ts

@@ -1 +1 @@
-export declare const platformFileEditorMdxTemplate = "---\ntitle: \"File Editor\"\ndescription: \"Browse, create, and edit your documentation files directly in the browser.\"\ndate: \"2026-02-19\"\ncategory: \"Editing\"\ncategoryOrder: 1\norder: 0\nsection: \"Platform\"\n---\n\n# File Editor\n\nThe file editor is the main workspace for your documentation project. It provides a browser-based file explorer and editor for working with your MDX files and assets.\n\n## File explorer\n\nThe left panel has three tabs:\n\n- **Files** - browse your repository's file tree, create and manage files and folders\n- **Media** - manage uploaded images and binary assets\n- **Navigation** - open the [Navigation Builder](/platform/navigation-settings) to configure your sidebar structure with drag-and-drop\n\nIn the Files tab, you can:\n\n- **Browse** directories and files\n- **Create** new files and folders\n- **Rename** and **delete** existing files\n- **Upload** binary assets like images, favicons, and font files\n\nClick any file to open it in the editor panel.\n\n## Editing files\n\nThe editor supports MDX files with full syntax highlighting. Changes you make are saved as **pending changes** - they aren't committed to your repository until you publish.\n\n<Callout type=\"note\">\n  Pending changes are stored in Doccupine's database, not in your Git repository. This means you can make edits across multiple sessions before publishing.\n</Callout>\n\n## Version history\n\nFor any file, you can view its commit history to see how it has changed over time. This lets you:\n\n- See when changes were made and what the commit messages were\n- View the file's content at any previous commit\n- Compare past versions to understand what changed\n\n## Binary files\n\nYou can upload images and other binary assets (PNG, JPG, SVG, WOFF2, etc.) directly through the file explorer. These are stored temporarily in Doccupine's storage and committed to your repository when you publish.\n\n## Read-only mode\n\nTeam members with the **Viewer** or **Billing** role can browse files but cannot make edits. The editor will display content in read-only mode for these users.";
+export declare const platformFileEditorMdxTemplate = "---\ntitle: \"File Editor\"\ndescription: \"Browse, create, and edit your documentation files directly in the browser.\"\ndate: \"2026-02-19\"\ncategory: \"Editing\"\ncategoryOrder: 1\ncategoryIcon: \"pencil\"\norder: 0\nsection: \"Platform\"\n---\n\n# File Editor\n\nThe file editor is the main workspace for your documentation project. It provides a browser-based file explorer and editor for working with your MDX files and assets.\n\n## File explorer\n\nThe left panel has three tabs:\n\n- **Files** - browse your repository's file tree, create and manage files and folders\n- **Media** - manage uploaded images and binary assets\n- **Navigation** - open the [Navigation Builder](/platform/navigation-settings) to configure your sidebar structure with drag-and-drop\n\nIn the Files tab, you can:\n\n- **Browse** directories and files\n- **Create** new files and folders\n- **Rename** and **delete** existing files\n- **Upload** binary assets like images, favicons, and font files\n\nClick any file to open it in the editor panel.\n\n## Editing files\n\nThe editor supports MDX files with full syntax highlighting. Changes you make are saved as **pending changes** - they aren't committed to your repository until you publish.\n\n<Callout type=\"note\">\n  Pending changes are stored in Doccupine's database, not in your Git repository. This means you can make edits across multiple sessions before publishing.\n</Callout>\n\n## Version history\n\nFor any file, you can view its commit history to see how it has changed over time. This lets you:\n\n- See when changes were made and what the commit messages were\n- View the file's content at any previous commit\n- Compare past versions to understand what changed\n\n## Binary files\n\nYou can upload images and other binary assets (PNG, JPG, SVG, WOFF2, etc.) directly through the file explorer. These are stored temporarily in Doccupine's storage and committed to your repository when you publish.\n\n## Read-only mode\n\nTeam members with the **Viewer** or **Billing** role can browse files but cannot make edits. The editor will display content in read-only mode for these users.";

package/dist/templates/mdx/platform/file-editor.mdx.js

@@ -4,6 +4,7 @@ description: "Browse, create, and edit your documentation files directly in the
 date: "2026-02-19"
 category: "Editing"
 categoryOrder: 1
+categoryIcon: "pencil"
 order: 0
 section: "Platform"
 ---

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

@@ -1 +1 @@
-export declare const platformIndexMdxTemplate = "---\ntitle: \"Platform Overview\"\ndescription: \"Learn how to use the Doccupine platform to create, customize, and deploy documentation websites.\"\ndate: \"2026-02-19\"\ncategory: \"Getting Started\"\ncategoryOrder: 0\norder: 0\nsection: \"Platform\"\n---\n\n# Platform Overview\n\nThe Doccupine platform gives you everything you need to create, customize, and host beautiful documentation websites - all from your browser. No local setup, no CI pipelines, no infrastructure to manage.\n\n## What you get\n\n- **Browser-based editor** for writing and managing your documentation files\n- **One-click publishing** that commits to GitHub and deploys automatically\n- **Visual configuration** for themes, navigation, fonts, links, and more\n- **Custom domains** with automatic HTTPS\n- **AI assistant** built into every deployed site\n- **Team collaboration** with role-based access control\n\n## How it works\n\nDoccupine connects two core pieces behind the scenes:\n\n1. **GitHub** stores your documentation source files in a Git repository\n2. **Doccupine** builds, hosts, and serves your site globally - plus provides a dashboard for editing, configuring, and managing your project\n\nYou write MDX files, configure your site through visual settings pages, and hit Publish. Doccupine handles the rest.\n\n## Getting started\n\n1. **Sign up** at Doccupine and start your free 30-day trial - no credit card required.\n2. **Create a project** from the dashboard. Choose between a managed repository or connecting your own GitHub account.\n3. **Edit your docs** using the built-in file explorer and editor.\n4. **Configure your site** through the settings pages - theme, navigation, fonts, and more.\n5. **Publish** your changes with a single click.\n\n<Callout type=\"success\">\n  Your documentation site is live the moment you create a project. Doccupine deploys a starter site automatically so you can see results immediately.\n</Callout>\n\n## Dashboard\n\nAfter signing in, the dashboard shows all your projects. You'll see two sections:\n\n- **Your Projects** - documentation sites you own, plus a button to create new ones\n- **Shared Projects** - sites that other users have invited you to collaborate on\n\nClick any project card to open it and start working.\n\n<Columns cols={2}>\n  <Card title=\"Sign Up\" icon=\"user-plus\" href=\"https://doccupine.com/sign-up\">\n    Create your free account and start building documentation in minutes.\n  </Card>\n  <Card title=\"Sign In\" icon=\"log-in\" href=\"https://doccupine.com/sign-in\">\n    Already have an account? Sign in to your dashboard.\n  </Card>\n</Columns>";
+export declare const platformIndexMdxTemplate = "---\ntitle: \"Platform Overview\"\ndescription: \"Learn how to use the Doccupine platform to create, customize, and deploy documentation websites.\"\ndate: \"2026-02-19\"\ncategory: \"Getting Started\"\ncategoryOrder: 0\ncategoryIcon: \"rocket\"\norder: 0\nsection: \"Platform\"\n---\n\n# Platform Overview\n\nThe Doccupine platform gives you everything you need to create, customize, and host beautiful documentation websites - all from your browser. No local setup, no CI pipelines, no infrastructure to manage.\n\n## What you get\n\n- **Browser-based editor** for writing and managing your documentation files\n- **One-click publishing** that commits to GitHub and deploys automatically\n- **Visual configuration** for themes, navigation, fonts, links, and more\n- **Custom domains** with automatic HTTPS\n- **AI assistant** built into every deployed site\n- **Team collaboration** with role-based access control\n\n## How it works\n\nDoccupine connects two core pieces behind the scenes:\n\n1. **GitHub** stores your documentation source files in a Git repository\n2. **Doccupine** builds, hosts, and serves your site globally - plus provides a dashboard for editing, configuring, and managing your project\n\nYou write MDX files, configure your site through visual settings pages, and hit Publish. Doccupine handles the rest.\n\n## Getting started\n\n1. **Sign up** at Doccupine and start your free 30-day trial - no credit card required.\n2. **Create a project** from the dashboard. Choose between a managed repository or connecting your own GitHub account.\n3. **Edit your docs** using the built-in file explorer and editor.\n4. **Configure your site** through the settings pages - theme, navigation, fonts, and more.\n5. **Publish** your changes with a single click.\n\n<Callout type=\"success\">\n  Your documentation site is live the moment you create a project. Doccupine deploys a starter site automatically so you can see results immediately.\n</Callout>\n\n## Dashboard\n\nAfter signing in, the dashboard shows all your projects. You'll see two sections:\n\n- **Your Projects** - documentation sites you own, plus a button to create new ones\n- **Shared Projects** - sites that other users have invited you to collaborate on\n\nClick any project card to open it and start working.\n\n<Columns cols={2}>\n  <Card title=\"Sign Up\" icon=\"user-plus\" href=\"https://doccupine.com/sign-up\">\n    Create your free account and start building documentation in minutes.\n  </Card>\n  <Card title=\"Sign In\" icon=\"log-in\" href=\"https://doccupine.com/sign-in\">\n    Already have an account? Sign in to your dashboard.\n  </Card>\n</Columns>";

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

@@ -4,6 +4,7 @@ description: "Learn how to use the Doccupine platform to create, customize, and
 date: "2026-02-19"
 category: "Getting Started"
 categoryOrder: 0
+categoryIcon: "rocket"
 order: 0
 section: "Platform"
 ---

package/dist/templates/mdx/platform/project-settings.mdx.d.ts

@@ -1 +1 @@
-export declare const platformProjectSettingsMdxTemplate = "---\ntitle: \"Project Settings\"\ndescription: \"Rename or delete your documentation project.\"\ndate: \"2026-02-19\"\ncategory: \"Account\"\ncategoryOrder: 4\norder: 2\nsection: \"Platform\"\n---\n\n# Project Settings\n\nThe Project settings page provides basic project management options including renaming and deletion.\n\n## Renaming a project\n\nEnter a new name for your project and click **Save**. The project name is used in the dashboard and sidebar - it does not affect your site's URL or domain.\n\n## Deleting a project\n\n<Callout type=\"warning\">\n  Deleting a project is permanent and cannot be undone.\n</Callout>\n\nTo delete a project:\n\n1. Navigate to the **Project** settings page.\n2. In the **Danger Zone** section, click **Delete Project**.\n3. Type your project's name to confirm.\n4. Click **Delete**.\n\nDeletion removes:\n\n- The GitHub repository (if managed by Doccupine)\n- The hosted deployment\n- All pending changes\n- All team member associations\n- The project record\n\nIf you're using a user-connected GitHub repository, the repo in your GitHub account is preserved - only the Doccupine project and its deployment are removed.";
+export declare const platformProjectSettingsMdxTemplate = "---\ntitle: \"Project Settings\"\ndescription: \"Rename or delete your documentation project.\"\ndate: \"2026-02-19\"\ncategory: \"Account\"\ncategoryOrder: 4\ncategoryIcon: \"user\"\norder: 2\nsection: \"Platform\"\n---\n\n# Project Settings\n\nThe Project settings page provides basic project management options including renaming and deletion.\n\n## Renaming a project\n\nEnter a new name for your project and click **Save**. The project name is used in the dashboard and sidebar - it does not affect your site's URL or domain.\n\n## Deleting a project\n\n<Callout type=\"warning\">\n  Deleting a project is permanent and cannot be undone.\n</Callout>\n\nTo delete a project:\n\n1. Navigate to the **Project** settings page.\n2. In the **Danger Zone** section, click **Delete Project**.\n3. Type your project's name to confirm.\n4. Click **Delete**.\n\nDeletion removes:\n\n- The GitHub repository (if managed by Doccupine)\n- The hosted deployment\n- All pending changes\n- All team member associations\n- The project record\n\nIf you're using a user-connected GitHub repository, the repo in your GitHub account is preserved - only the Doccupine project and its deployment are removed.";

package/dist/templates/mdx/platform/project-settings.mdx.js

@@ -4,6 +4,7 @@ description: "Rename or delete your documentation project."
 date: "2026-02-19"
 category: "Account"
 categoryOrder: 4
+categoryIcon: "user"
 order: 2
 section: "Platform"
 ---

package/dist/templates/mdx/platform/site-settings.mdx.d.ts

@@ -1 +1 @@
-export declare const platformSiteSettingsMdxTemplate = "---\ntitle: \"Site Settings\"\ndescription: \"Configure your documentation site's name, description, icon, and image.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 2\norder: 0\nsection: \"Platform\"\n---\n\n# Site Settings\n\nThe Site settings page lets you configure the core metadata for your documentation site. These values are stored in `config.json` at the root of your repository.\n\n## Fields\n\n### Name\n\nThe name of your documentation site. This appears in the site header and browser tab title.\n\n### Description\n\nA short description of your documentation. Used in meta tags for search engine optimization and social media previews.\n\n### Favicon\n\nUpload a favicon image that appears in browser tabs. Supported formats include PNG, ICO, and SVG. Use the file upload button to select an image from your computer.\n\n### Preview image\n\nUpload an image used for social media and OpenGraph previews. This is the image that appears when your documentation URL is shared on platforms like Twitter, Slack, or Discord.\n\n### Site URL\n\nThe public URL of your deployed documentation site, such as `https://docs.example.com`. This value is used as the base URL when generating `sitemap.xml` and `robots.txt`, so search engines can discover and index your pages correctly. You can override this at deploy time by setting the `NEXT_PUBLIC_SITE_URL` environment variable.\n\n<Callout type=\"note\">\n  Changes to site settings are staged as pending changes, just like file edits. Click **Publish** to commit them to your repository and trigger a deploy.\n</Callout>\n\n## How it works\n\nBehind the scenes, the Site settings page reads and writes `config.json` in your repository. You can also edit this file directly in the file editor if you prefer. See the [Globals](/globals) page for the full configuration reference.\n\n```json\n{\n  \"name\": \"My Documentation\",\n  \"description\": \"Documentation for my project\",\n  \"icon\": \"/favicon.png\",\n  \"image\": \"/preview.png\",\n  \"url\": \"https://docs.example.com\"\n}\n```";
+export declare const platformSiteSettingsMdxTemplate = "---\ntitle: \"Site Settings\"\ndescription: \"Configure your documentation site's name, description, icon, and image.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 2\ncategoryIcon: \"settings\"\norder: 0\nsection: \"Platform\"\n---\n\n# Site Settings\n\nThe Site settings page lets you configure the core metadata for your documentation site. These values are stored in `config.json` at the root of your repository.\n\n## Fields\n\n### Name\n\nThe name of your documentation site. This appears in the site header and browser tab title.\n\n### Description\n\nA short description of your documentation. Used in meta tags for search engine optimization and social media previews.\n\n### Favicon\n\nUpload a favicon image that appears in browser tabs. Supported formats include PNG, ICO, and SVG. Use the file upload button to select an image from your computer.\n\n### Preview image\n\nUpload an image used for social media and OpenGraph previews. This is the image that appears when your documentation URL is shared on platforms like Twitter, Slack, or Discord.\n\n### Site URL\n\nThe public URL of your deployed documentation site, such as `https://docs.example.com`. This value is used as the base URL when generating `sitemap.xml` and `robots.txt`, so search engines can discover and index your pages correctly. You can override this at deploy time by setting the `NEXT_PUBLIC_SITE_URL` environment variable.\n\n<Callout type=\"note\">\n  Changes to site settings are staged as pending changes, just like file edits. Click **Publish** to commit them to your repository and trigger a deploy.\n</Callout>\n\n## How it works\n\nBehind the scenes, the Site settings page reads and writes `config.json` in your repository. You can also edit this file directly in the file editor if you prefer. See the [Globals](/globals) page for the full configuration reference.\n\n```json\n{\n  \"name\": \"My Documentation\",\n  \"description\": \"Documentation for my project\",\n  \"icon\": \"/favicon.png\",\n  \"image\": \"/preview.png\",\n  \"url\": \"https://docs.example.com\"\n}\n```";

package/dist/templates/mdx/platform/site-settings.mdx.js

@@ -4,6 +4,7 @@ description: "Configure your documentation site's name, description, icon, and i
 date: "2026-02-19"
 category: "Configuration"
 categoryOrder: 2
+categoryIcon: "settings"
 order: 0
 section: "Platform"
 ---

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

@@ -1 +1 @@
-export declare const tabsMdxTemplate = "---\ntitle: \"Tabs\"\ndescription: \"Use the Tabs component to display different content sections in a switchable panel layout.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 5\n---\n\n# Tabs\n\nUse the Tabs component to display different content sections in a switchable panel layout.\n\nTabs are useful for grouping related information while keeping the interface tidy. You can create as many tabs as needed, and each one can hold other components, text, or code snippets.\n\n## Tabs Usage\n\nYou can use the Tabs component directly within your MDX files without any import. The following example shows a basic usage:\n\n````mdx\n<Tabs>\n  <TabContent title=\"First tab\">\n    \u261D\uFE0F This is the content shown only when the first tab is active.\n\n    Tabs can include all kinds of components. For example, a simple Java program:\n    ```java\n      class HelloWorld {\n          public static void main(String[] args) {\n              System.out.println(\"Hello, World!\");\n          }\n      }\n    ```\n\n  </TabContent>\n  <TabContent title=\"Second tab\">\n    \u270C\uFE0F Content inside this second tab is separate from the first.\n  </TabContent>\n  <TabContent title=\"Third tab\">\n    \uD83D\uDCAA This third tab contains its own unique content.\n  </TabContent>\n</Tabs>\n````\n\n<Tabs>\n  <TabContent title=\"First tab\">\n    \u261D\uFE0F This is the content shown only when the first tab is active.\n\n    Tabs can include all kinds of components. For example, a simple Java program:\n    ```java\n    class HelloWorld {\n        public static void main(String[] args) {\n            System.out.println(\"Hello, World!\");\n        }\n    }\n    ```\n\n  </TabContent>\n  <TabContent title=\"Second tab\">\n    \u270C\uFE0F Content inside this second tab is separate from the first.\n  </TabContent>\n  <TabContent title=\"Third tab\">\n    \uD83D\uDCAA This third tab contains its own unique content.\n  </TabContent>\n</Tabs>\n\n## Properties\n\n<Field value=\"title\" type=\"string\">\n  The title of the tab.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the tabs.\n</Field>";
+export declare const tabsMdxTemplate = "---\ntitle: \"Tabs\"\ndescription: \"Use the Tabs component to display different content sections in a switchable panel layout.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 5\n---\n\n# Tabs\n\nUse the Tabs component to display different content sections in a switchable panel layout.\n\nTabs are useful for grouping related information while keeping the interface tidy. You can create as many tabs as needed, and each one can hold other components, text, or code snippets.\n\n## Tabs Usage\n\nYou can use the Tabs component directly within your MDX files without any import. The following example shows a basic usage:\n\n````mdx\n<Tabs>\n  <TabContent title=\"First tab\" icon=\"code\">\n    \u261D\uFE0F This is the content shown only when the first tab is active.\n\n    Tabs can include all kinds of components. For example, a simple Java program:\n    ```java\n      class HelloWorld {\n          public static void main(String[] args) {\n              System.out.println(\"Hello, World!\");\n          }\n      }\n    ```\n\n  </TabContent>\n  <TabContent title=\"Second tab\" icon=\"book-open\">\n    \u270C\uFE0F Content inside this second tab is separate from the first.\n  </TabContent>\n  <TabContent title=\"Third tab\" icon=\"rocket\">\n    \uD83D\uDCAA This third tab contains its own unique content.\n  </TabContent>\n</Tabs>\n````\n\n<Tabs>\n  <TabContent title=\"First tab\" icon=\"code\">\n    \u261D\uFE0F This is the content shown only when the first tab is active.\n\n    Tabs can include all kinds of components. For example, a simple Java program:\n    ```java\n    class HelloWorld {\n        public static void main(String[] args) {\n            System.out.println(\"Hello, World!\");\n        }\n    }\n    ```\n\n  </TabContent>\n  <TabContent title=\"Second tab\" icon=\"book-open\">\n    \u270C\uFE0F Content inside this second tab is separate from the first.\n  </TabContent>\n  <TabContent title=\"Third tab\" icon=\"rocket\">\n    \uD83D\uDCAA This third tab contains its own unique content.\n  </TabContent>\n</Tabs>\n\nEach tab also accepts an optional `icon` - any [Lucide](https://lucide.dev/icons) icon name - rendered before its title, as shown above.\n\n## Properties\n\n<Field value=\"title\" type=\"string\">\n  The title of the tab.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  Optional [Lucide](https://lucide.dev/icons) icon name (kebab-case, e.g.\n  `rocket`) shown next to the tab title.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the tabs.\n</Field>";

package/dist/templates/mdx/tabs.mdx.js

@@ -19,7 +19,7 @@ You can use the Tabs component directly within your MDX files without any import
 
 \`\`\`\`mdx
 <Tabs>
-  <TabContent title="First tab">
+  <TabContent title="First tab" icon="code">
     ☝️ This is the content shown only when the first tab is active.
 
     Tabs can include all kinds of components. For example, a simple Java program:
@@ -32,17 +32,17 @@ You can use the Tabs component directly within your MDX files without any import
     \`\`\`
 
   </TabContent>
-  <TabContent title="Second tab">
+  <TabContent title="Second tab" icon="book-open">
     ✌️ Content inside this second tab is separate from the first.
   </TabContent>
-  <TabContent title="Third tab">
+  <TabContent title="Third tab" icon="rocket">
     💪 This third tab contains its own unique content.
   </TabContent>
 </Tabs>
 \`\`\`\`
 
 <Tabs>
-  <TabContent title="First tab">
+  <TabContent title="First tab" icon="code">
     ☝️ This is the content shown only when the first tab is active.
 
     Tabs can include all kinds of components. For example, a simple Java program:
@@ -55,20 +55,27 @@ You can use the Tabs component directly within your MDX files without any import
     \`\`\`
 
   </TabContent>
-  <TabContent title="Second tab">
+  <TabContent title="Second tab" icon="book-open">
     ✌️ Content inside this second tab is separate from the first.
   </TabContent>
-  <TabContent title="Third tab">
+  <TabContent title="Third tab" icon="rocket">
     💪 This third tab contains its own unique content.
   </TabContent>
 </Tabs>
 
+Each tab also accepts an optional \`icon\` - any [Lucide](https://lucide.dev/icons) icon name - rendered before its title, as shown above.
+
 ## Properties
 
 <Field value="title" type="string">
   The title of the tab.
 </Field>
 
+<Field value="icon" type="string">
+  Optional [Lucide](https://lucide.dev/icons) icon name (kebab-case, e.g.
+  \`rocket\`) shown next to the tab title.
+</Field>
+
 <Field value="children" type="node" required>
   The content of the tabs.
 </Field>`;

package/dist/templates/utils/orderNavItems.d.ts

@@ -1 +1 @@
-export declare const orderNavItemsTemplate = "export interface PagesProps {\n  slug: string;\n  title: string;\n  date: string | null;\n  category: string;\n  description?: string;\n  path?: string;\n  categoryOrder?: number;\n  order?: number;\n  section?: string;\n}\n\ninterface AccProps {\n  [key: string]: {\n    categoryOrder: number;\n    pages: {\n      date: string | null;\n      slug: string;\n      title: string;\n      order: number;\n    }[];\n  };\n}\n\nfunction transformPagesToGroupedStructure(pages: PagesProps[]) {\n  const grouped = pages.reduce((acc: AccProps, page: PagesProps) => {\n    const category = page.category || \"Uncategorized\";\n\n    if (!acc[category]) {\n      acc[category] = {\n        categoryOrder: page.categoryOrder || 0,\n        pages: [],\n      };\n    }\n\n    acc[category].pages.push({\n      date: page.date,\n      slug: page.slug,\n      title: page.title,\n      order: page.order || 0,\n    });\n\n    return acc;\n  }, {});\n\n  return Object.entries(grouped)\n    .sort(([, a], [, b]) => a.categoryOrder - b.categoryOrder)\n    .map(([categoryName, categoryData], index) => ({\n      slug: index === 0 ? \"\" : categoryName.toLowerCase().replace(/s+/g, \"-\"),\n      label: categoryName,\n      links: categoryData.pages.sort((a, b) => a.order - b.order),\n    }));\n}\n\nexport { transformPagesToGroupedStructure };\n";
+export declare const orderNavItemsTemplate = "export interface PagesProps {\n  slug: string;\n  title: string;\n  date: string | null;\n  category: string;\n  description?: string;\n  path?: string;\n  categoryOrder?: number;\n  order?: number;\n  section?: string;\n  navIcon?: string;\n  categoryIcon?: string;\n}\n\ninterface AccProps {\n  [key: string]: {\n    categoryOrder: number;\n    icon?: string;\n    pages: {\n      date: string | null;\n      slug: string;\n      title: string;\n      order: number;\n      icon?: string;\n    }[];\n  };\n}\n\nfunction transformPagesToGroupedStructure(pages: PagesProps[]) {\n  const grouped = pages.reduce((acc: AccProps, page: PagesProps) => {\n    const category = page.category || \"Uncategorized\";\n\n    if (!acc[category]) {\n      acc[category] = {\n        categoryOrder: page.categoryOrder || 0,\n        pages: [],\n      };\n    }\n\n    // The first page in a category to declare a categoryIcon sets it.\n    if (!acc[category].icon && page.categoryIcon) {\n      acc[category].icon = page.categoryIcon;\n    }\n\n    acc[category].pages.push({\n      date: page.date,\n      slug: page.slug,\n      title: page.title,\n      order: page.order || 0,\n      icon: page.navIcon,\n    });\n\n    return acc;\n  }, {});\n\n  return Object.entries(grouped)\n    .sort(([, a], [, b]) => a.categoryOrder - b.categoryOrder)\n    .map(([categoryName, categoryData], index) => ({\n      slug: index === 0 ? \"\" : categoryName.toLowerCase().replace(/s+/g, \"-\"),\n      label: categoryName,\n      icon: categoryData.icon,\n      links: categoryData.pages.sort((a, b) => a.order - b.order),\n    }));\n}\n\nexport { transformPagesToGroupedStructure };\n";

package/dist/templates/utils/orderNavItems.js

@@ -8,16 +8,20 @@ export const orderNavItemsTemplate = `export interface PagesProps {
   categoryOrder?: number;
   order?: number;
   section?: string;
+  navIcon?: string;
+  categoryIcon?: string;
 }
 
 interface AccProps {
   [key: string]: {
     categoryOrder: number;
+    icon?: string;
     pages: {
       date: string | null;
       slug: string;
       title: string;
       order: number;
+      icon?: string;
     }[];
   };
 }
@@ -33,11 +37,17 @@ function transformPagesToGroupedStructure(pages: PagesProps[]) {
       };
     }
 
+    // The first page in a category to declare a categoryIcon sets it.
+    if (!acc[category].icon && page.categoryIcon) {
+      acc[category].icon = page.categoryIcon;
+    }
+
     acc[category].pages.push({
       date: page.date,
       slug: page.slug,
       title: page.title,
       order: page.order || 0,
+      icon: page.navIcon,
     });
 
     return acc;
@@ -48,6 +58,7 @@ function transformPagesToGroupedStructure(pages: PagesProps[]) {
     .map(([categoryName, categoryData], index) => ({
       slug: index === 0 ? "" : categoryName.toLowerCase().replace(/s+/g, "-"),
       label: categoryName,
+      icon: categoryData.icon,
       links: categoryData.pages.sort((a, b) => a.order - b.order),
     }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.102",
+  "version": "0.0.104",
   "description": "Free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.",
   "main": "dist/index.js",
   "bin": {