doccupine 0.0.102 → 0.0.103

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/index.js +7 -0
  2. package/dist/lib/layout.js +1 -0
  3. package/dist/lib/structures.js +2 -0
  4. package/dist/lib/types.d.ts +2 -0
  5. package/dist/templates/components/Docs.d.ts +1 -1
  6. package/dist/templates/components/Docs.js +10 -14
  7. package/dist/templates/components/MDXComponents.d.ts +1 -1
  8. package/dist/templates/components/MDXComponents.js +16 -15
  9. package/dist/templates/components/SectionNavProvider.d.ts +1 -1
  10. package/dist/templates/components/SectionNavProvider.js +8 -1
  11. package/dist/templates/components/SideBar.d.ts +1 -1
  12. package/dist/templates/components/SideBar.js +136 -19
  13. package/dist/templates/components/layout/DocsComponents.d.ts +1 -1
  14. package/dist/templates/components/layout/DocsComponents.js +102 -6
  15. package/dist/templates/components/layout/DocsNavigation.d.ts +1 -1
  16. package/dist/templates/components/layout/DocsNavigation.js +27 -12
  17. package/dist/templates/components/layout/Slug.d.ts +1 -0
  18. package/dist/templates/components/layout/Slug.js +32 -0
  19. package/dist/templates/components/layout/Tabs.d.ts +1 -1
  20. package/dist/templates/components/layout/Tabs.js +11 -0
  21. package/dist/templates/components/layout/Update.d.ts +1 -1
  22. package/dist/templates/components/layout/Update.js +19 -14
  23. package/dist/templates/mdx/components.mdx.d.ts +1 -1
  24. package/dist/templates/mdx/components.mdx.js +1 -0
  25. package/dist/templates/mdx/globals.mdx.d.ts +1 -1
  26. package/dist/templates/mdx/globals.mdx.js +1 -0
  27. package/dist/templates/mdx/index.mdx.d.ts +1 -1
  28. package/dist/templates/mdx/index.mdx.js +1 -0
  29. package/dist/templates/mdx/navigation.mdx.d.ts +1 -1
  30. package/dist/templates/mdx/navigation.mdx.js +69 -1
  31. package/dist/templates/mdx/platform/build-and-deploy.mdx.d.ts +1 -1
  32. package/dist/templates/mdx/platform/build-and-deploy.mdx.js +1 -0
  33. package/dist/templates/mdx/platform/file-editor.mdx.d.ts +1 -1
  34. package/dist/templates/mdx/platform/file-editor.mdx.js +1 -0
  35. package/dist/templates/mdx/platform/index.mdx.d.ts +1 -1
  36. package/dist/templates/mdx/platform/index.mdx.js +1 -0
  37. package/dist/templates/mdx/platform/project-settings.mdx.d.ts +1 -1
  38. package/dist/templates/mdx/platform/project-settings.mdx.js +1 -0
  39. package/dist/templates/mdx/platform/site-settings.mdx.d.ts +1 -1
  40. package/dist/templates/mdx/platform/site-settings.mdx.js +1 -0
  41. package/dist/templates/mdx/tabs.mdx.d.ts +1 -1
  42. package/dist/templates/mdx/tabs.mdx.js +13 -6
  43. package/dist/templates/utils/orderNavItems.d.ts +1 -1
  44. package/dist/templates/utils/orderNavItems.js +11 -0
  45. package/package.json +1 -1
@@ -4,6 +4,7 @@ description: "Monitor your documentation site's build status and deployment hist
4
4
  date: "2026-02-19"
5
5
  category: "Infrastructure"
6
6
  categoryOrder: 3
7
+ categoryIcon: "server"
7
8
  order: 1
8
9
  section: "Platform"
9
10
  ---
@@ -1 +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.";
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\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.";
@@ -4,6 +4,7 @@ description: "Browse, create, and edit your documentation files directly in the
4
4
  date: "2026-02-19"
5
5
  category: "Editing"
6
6
  categoryOrder: 1
7
+ categoryIcon: "pencil"
7
8
  order: 0
8
9
  section: "Platform"
9
10
  ---
@@ -1 +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>";
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\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>";
@@ -4,6 +4,7 @@ description: "Learn how to use the Doccupine platform to create, customize, and
4
4
  date: "2026-02-19"
5
5
  category: "Getting Started"
6
6
  categoryOrder: 0
7
+ categoryIcon: "rocket"
7
8
  order: 0
8
9
  section: "Platform"
9
10
  ---
@@ -1 +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.";
1
+ 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.";
@@ -4,6 +4,7 @@ description: "Rename or delete your documentation project."
4
4
  date: "2026-02-19"
5
5
  category: "Account"
6
6
  categoryOrder: 4
7
+ categoryIcon: "user"
7
8
  order: 2
8
9
  section: "Platform"
9
10
  ---
@@ -1 +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```";
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\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```";
@@ -4,6 +4,7 @@ description: "Configure your documentation site's name, description, icon, and i
4
4
  date: "2026-02-19"
5
5
  category: "Configuration"
6
6
  categoryOrder: 2
7
+ categoryIcon: "settings"
7
8
  order: 0
8
9
  section: "Platform"
9
10
  ---
@@ -1 +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>";
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\" 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>";
@@ -19,7 +19,7 @@ You can use the Tabs component directly within your MDX files without any import
19
19
 
20
20
  \`\`\`\`mdx
21
21
  <Tabs>
22
- <TabContent title="First tab">
22
+ <TabContent title="First tab" icon="code">
23
23
  ☝️ This is the content shown only when the first tab is active.
24
24
 
25
25
  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
32
32
  \`\`\`
33
33
 
34
34
  </TabContent>
35
- <TabContent title="Second tab">
35
+ <TabContent title="Second tab" icon="book-open">
36
36
  ✌️ Content inside this second tab is separate from the first.
37
37
  </TabContent>
38
- <TabContent title="Third tab">
38
+ <TabContent title="Third tab" icon="rocket">
39
39
  💪 This third tab contains its own unique content.
40
40
  </TabContent>
41
41
  </Tabs>
42
42
  \`\`\`\`
43
43
 
44
44
  <Tabs>
45
- <TabContent title="First tab">
45
+ <TabContent title="First tab" icon="code">
46
46
  ☝️ This is the content shown only when the first tab is active.
47
47
 
48
48
  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
55
55
  \`\`\`
56
56
 
57
57
  </TabContent>
58
- <TabContent title="Second tab">
58
+ <TabContent title="Second tab" icon="book-open">
59
59
  ✌️ Content inside this second tab is separate from the first.
60
60
  </TabContent>
61
- <TabContent title="Third tab">
61
+ <TabContent title="Third tab" icon="rocket">
62
62
  💪 This third tab contains its own unique content.
63
63
  </TabContent>
64
64
  </Tabs>
65
65
 
66
+ Each tab also accepts an optional \`icon\` - any [Lucide](https://lucide.dev/icons) icon name - rendered before its title, as shown above.
67
+
66
68
  ## Properties
67
69
 
68
70
  <Field value="title" type="string">
69
71
  The title of the tab.
70
72
  </Field>
71
73
 
74
+ <Field value="icon" type="string">
75
+ Optional [Lucide](https://lucide.dev/icons) icon name (kebab-case, e.g.
76
+ \`rocket\`) shown next to the tab title.
77
+ </Field>
78
+
72
79
  <Field value="children" type="node" required>
73
80
  The content of the tabs.
74
81
  </Field>`;
@@ -1 +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";
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 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";
@@ -8,16 +8,20 @@ export const orderNavItemsTemplate = `export interface PagesProps {
8
8
  categoryOrder?: number;
9
9
  order?: number;
10
10
  section?: string;
11
+ navIcon?: string;
12
+ categoryIcon?: string;
11
13
  }
12
14
 
13
15
  interface AccProps {
14
16
  [key: string]: {
15
17
  categoryOrder: number;
18
+ icon?: string;
16
19
  pages: {
17
20
  date: string | null;
18
21
  slug: string;
19
22
  title: string;
20
23
  order: number;
24
+ icon?: string;
21
25
  }[];
22
26
  };
23
27
  }
@@ -33,11 +37,17 @@ function transformPagesToGroupedStructure(pages: PagesProps[]) {
33
37
  };
34
38
  }
35
39
 
40
+ // The first page in a category to declare a categoryIcon sets it.
41
+ if (!acc[category].icon && page.categoryIcon) {
42
+ acc[category].icon = page.categoryIcon;
43
+ }
44
+
36
45
  acc[category].pages.push({
37
46
  date: page.date,
38
47
  slug: page.slug,
39
48
  title: page.title,
40
49
  order: page.order || 0,
50
+ icon: page.navIcon,
41
51
  });
42
52
 
43
53
  return acc;
@@ -48,6 +58,7 @@ function transformPagesToGroupedStructure(pages: PagesProps[]) {
48
58
  .map(([categoryName, categoryData], index) => ({
49
59
  slug: index === 0 ? "" : categoryName.toLowerCase().replace(/s+/g, "-"),
50
60
  label: categoryName,
61
+ icon: categoryData.icon,
51
62
  links: categoryData.pages.sort((a, b) => a.order - b.order),
52
63
  }));
53
64
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "doccupine",
3
- "version": "0.0.102",
3
+ "version": "0.0.103",
4
4
  "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.",
5
5
  "main": "dist/index.js",
6
6
  "bin": {