@docubook/create 1.13.0 → 1.13.6

package/src/dist/contents/docs/components/button/index.mdx

@@ -4,14 +4,12 @@ description: A component used to create buttons that can be used to trigger acti
 date: 14-12-2024
 ---
 
-The Button component is a component used to create buttons that can be used to trigger actions or navigate to other pages.
-
 ## Preview
 
 <Button
   text="Learn More"
   href="https://learn.example.com"
-  icon="ArrowUpRight"
+  icon="MoveUpRight"
   size="md"
   target="_blank"
   variation="primary"
@@ -19,18 +17,18 @@ The Button component is a component used to create buttons that can be used to t
 
 ## Props
 
-| Prop        | Type     | Default        | Description                                  |
-| ----------- | -------- | -------------- | -------------------------------------------- |
-| `text`      | `string` | `""`           | The value of text button.                    |
-| `href`      | `string` | `""`           | The value of url button.                     |
-| `icon`      | `string` | `null`         | The value of button icon render from lucide. |
-| `size`      | `string` | `"sm, md, lg"` | The value of size button.                    |
-| `target`    | `string` | `"_blank"`     | By default target `_blank`                   |
-| `variation` | `string` | `"primary"`    | By default variation is **Primary**          |
+| Prop        | Type     | Default     | Description                                  |
+| ----------- | -------- | ----------- | -------------------------------------------- |
+| `text`      | string   | undefined   | The button text                              |
+| `href`      | string   | **required**| The URL to navigate to                       |
+| `icon`      | string   | undefined   | Lucide icon name (e.g. "MoveUpRight")       |
+| `size`      | string   | "md"        | Button size: `"sm"`, `"md"`, or `"lg"`      |
+| `target`    | string   | undefined   | Link target (e.g. "_blank")                 |
+| `variation` | string   | "primary"   | Button style: `"primary"`, `"accent"`, or `"outline"` |
 
-## Code
+## Output Markdown
 
-```bash
+```markdown
 <Button
   text="Learn More"
   href="https://learn.example.com"

package/src/dist/contents/docs/components/card/index.mdx

@@ -4,13 +4,11 @@ description: A component used to create cards that can be used to display conten
 date: 20-02-2025
 ---
 
-The Card component is a component used to create cards that can be used to display content in a compact and organized way.
-
 ## Example
 
 ### Card with Link and icon
 
-<Card title="Click on me" icon="Link" href="/docs/getting-started/components/card-group">
+<Card title="Click on me" icon="Link" href="/docs/components/card-group">
   This is how you use a card with an icon and a link. Clicking on this card
   brings you to the Card Group page.
 </Card>
@@ -32,12 +30,12 @@ The Card component is a component used to create cards that can be used to displ
 
 | Prop          | Type     | Default | Description                                             |
 | ------------- | -------- | ------- | ------------------------------------------------------- |
-| `title`       | `string` | `""`    | The value of card title.                                |
-| `icon`        | `string` | `null`  | The value of card icon render from lucide.              |
-| `href`        | `string` | `null`  | The value of card link url.              |
-| `horizontal`   | `boolean` | `""`    | horizontal layout for card. |
+| `title`       | string   | null    | The value of card title.                                |
+| `icon`        | string   | null  | The value of card icon render from lucide.              |
+| `href`        | string   | null  | The value of card link url.              |
+| `horizontal`   | boolean  | undefined    | horizontal layout for card. |
 
-## Code
+## Output Markdown
 
 <Tabs defaultValue="link" className="pt-5 pb-1">
   <TabsList>

package/src/dist/contents/docs/components/card-group/index.mdx

@@ -4,8 +4,6 @@ description: A component used to create card groups that can be used to display
 date: 20-02-2025
 ---
 
-The CardGroup component is a component used to create card groups that can be used to display multiple cards in a compact and organized way.
-
 ## Preview
 
 <CardGroup cols={2}>
@@ -27,9 +25,9 @@ The CardGroup component is a component used to create card groups that can be us
 
 | Prop          | Type     | Default | Description                                             |
 | ------------- | -------- | ------- | ------------------------------------------------------- |
-| `cols`       | `number` | `{2}`    | By default 2 The number of columns per row                                |
+| `cols`       | number | {2}    | By default 2 The number of columns per row                                |
 
-## Code
+## Output Markdown
 
 ```markdown
 <CardGroup cols={2}>

package/src/dist/contents/docs/components/code-block/index.mdx

@@ -4,8 +4,6 @@ description: A component used to display code snippets with optional line number
 date: 14-12-2024
 ---
 
-The Code Block component is a component used to display code snippets with optional line numbering and line highlighting.
-
 ## Preview
 
 ```javascript:main.js showLineNumbers {3-4}
@@ -19,7 +17,7 @@ function isRocketAboutToCrash() {
 
 In this example, line numbers are displayed for lines 1 to 4. You can specify which lines to highlight using the format `{2,3-5}`.
 
-## Usage
+## Output Markdown
 
 You can directly use the following syntax to create a code block with line numbers and highlight specific lines:
 
@@ -34,7 +32,7 @@ function isRocketAboutToCrash() {
 ```
 ````
 
-### Features
+## Features
 
 - **Line Numbers**: Enable line numbers by adding `showLineNumbers` after the opening backticks.
 - **Highlight Lines**: Specify lines to highlight using curly braces (e.g., `{2,3-5}`).

package/src/dist/contents/docs/components/file-tree/index.mdx

@@ -51,14 +51,14 @@ The root component that wraps the entire file tree.
 
 | Prop     | Type     | Required | Description                           |
 |----------|----------|----------|---------------------------------------|
-| name     | string   | Yes      | The name of the folder                |
-| children | ReactNode | No      | Child elements (File or Folder)       |
+| `name`     | string   | Yes      | The name of the folder                |
+| `children` | ReactNode | No      | Child elements (File or Folder)       |
 
 ### File
 
 | Prop | Type   | Required | Description                |
 |------|--------|----------|----------------------------|
-| name | string | Yes      | The name of the file       |
+| `name` | string | Yes      | The name of the file       |
 
 
 ## Examples

package/src/dist/contents/docs/components/index.mdx

@@ -0,0 +1,9 @@
+---
+title: Components
+description: This section provides an overview of the custom components available in DocuBook.
+date: 29-11-2024
+---
+
+Explore the custom components we've defined for easy integration and development within your projects. Each component is designed to enhance your workflow and streamline your development process.
+
+<Outlet path="components" />

package/src/dist/contents/docs/components/keyboard/index.mdx

@@ -49,9 +49,9 @@ Renders as: <Kbd show="custom">Custom</Kbd>
 
 | Prop      | Type                | Default    | Description |
 |-----------|---------------------|------------|-------------|
-| `show`    | `string`            | (required) | The key identifier (e.g., 'cmd', 'ctrl', 'a') |
-| `type`    | `string` | `window` | for device type `mac` or `window` | Platform style or custom content |
-| `children`| `ReactNode`         | -          | Custom content to display (overrides automatic rendering) |
+| `show`    | string            | (required) | The key identifier (e.g., 'cmd', 'ctrl', 'a') |
+| `type`    | string | `window` | for device type `mac` or `window` | Platform style or custom content |
+| `children`| ReactNode         | -          | Custom content to display (overrides automatic rendering) |
 
 ## Supported Keys
 

package/src/dist/contents/docs/components/note/index.mdx

@@ -4,8 +4,6 @@ description: A component used to display different types of messages such as gen
 date: 14-12-2024
 ---
 
-The `Note` component allows you to display different types of messages such as general notes, warnings, or success notifications. Each type is styled accordingly, providing a clear visual cue to the user.
-
 ## Preview
 
 <Note type="note" title="Note">
@@ -25,12 +23,12 @@ The `Note` component allows you to display different types of messages such as g
 
 | Prop    | Type                                           | Default | Description                              |
 | ------- | ---------------------------------------------- | ------- | ---------------------------------------- |
-| `title` | `string`                                       | "Note"  | Sets the title of the note.              |
-| `type`  | `"note"`, `"danger"`, `"warning"`, `"success"` | "note"  | Determines the visual style of the note. |
+| `title` | string                                       | "Note"  | Sets the title of the note.              |
+| `type`  | "note" "danger" "success" "warning" | undefined | Determines the visual style of the note. |
 
-## Code
+## Output Markdown
 
-```jsx
+```markdown
 <Note type="note" title="Note">
   This is a general note to convey information to the user.
 </Note>

package/src/dist/contents/docs/components/release-note/index.mdx

@@ -10,7 +10,7 @@ The Release Note component makes it easy for you to write and display changelogs
 
 Here is a basic example of using the Release Note component:
 
-```jsx
+```markdown
 <Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
   <Changes type="added">
     - New feature to improve accessibility
@@ -49,7 +49,7 @@ The `Release` component is used to display key information about a release versi
 | `date` | string | ❌ | Release date in a valid format (example: "2025-05-24") |
 | `children` | ReactNode | ✅ | Child content, typically `Changes` components |
 
-```jsx
+```markdown
 <Release
   version="1.10.1"
   date="2025-05-24"

package/src/dist/contents/docs/components/stepper/index.mdx

@@ -8,8 +8,6 @@ In this guide, we utilize a custom `Stepper` component, specifically designed fo
 
 ## Preview
 
-##
-
 <Stepper>
   <StepperItem title="Step 1: Clone the DocuBook Repository">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
@@ -26,9 +24,9 @@ In this guide, we utilize a custom `Stepper` component, specifically designed fo
   </StepperItem>
 </Stepper>
 
-## Code
+## Output Markdown
 
-```jsx
+```markdown
 <Stepper>
   <StepperItem title="Step 1: Clone the DocuBook Repository">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,

package/src/dist/contents/docs/components/tabs/index.mdx

@@ -38,12 +38,12 @@ The `Tabs` component allows you to organize content into multiple sections, enab
 
 | Prop           | Type     | Default | Description                                            |
 | -------------- | -------- | ------- | ------------------------------------------------------ |
-| `defaultValue` | `string` | `null`  | The value of the tab that is selected by default.      |
-| `className`    | `string` | `""`    | Additional CSS classes for styling the Tabs component. |
+| `defaultValue` | string   | null    | The value of the tab that is selected by default.      |
+| `className`    | string   | null    | Additional CSS classes for styling the Tabs component. |
 
-## Code
+## Output Markdown
 
-````jsx
+````plaintext
 <Tabs defaultValue="java" className="pt-5 pb-1">
   <TabsList>
     <TabsTrigger value="java">Java</TabsTrigger>

package/src/dist/contents/docs/components/tooltips/index.mdx

@@ -13,7 +13,7 @@ You can use tooltips in your Markdown content to provide additional information
 
 What do you know about <Tooltip text="DocuBook" tip="npx @docubook/create@latest" /> ? Create interactive nested documentations using MDX.
 
-### Code
+### Output Markdown
 
 The above Markdown is converted to:
 

package/src/dist/contents/docs/components/youtube/index.mdx

@@ -8,14 +8,16 @@ I have implemented a `YouTube` component for your documentation. This component
 
 ## Preview
 
-<Youtube videoId="cpraXaw7dyc" />
+<Youtube videoId="8sM0Di7Ew9Q" />
 
-## Code
+## Output Markdown
 
-```bash
-<Youtube videoId="cpraXaw7dyc" />
+```markdown
+<Youtube videoId="8sM0Di7Ew9Q" />
 ```
 
 ## Usage
 
-for example the youtube URL show this https://www.youtube.com/watch?v=cpraXaw7dyc the ID `cpraXaw7dyc`
+<Note type="note" title="Usage">
+  for example the youtube URL show this https://www.youtube.com/watch?v=8sM0Di7Ew9Q the ID `8sM0Di7Ew9Q`
+</Note>

package/src/dist/contents/docs/getting-started/index.mdx

@@ -0,0 +1,9 @@
+---
+title: Getting Started
+description: Set up Your Documentations with DocuBook
+date: 29-05-2025
+---
+
+Welcome to DocuBook! This guide will help you set up and customize your documentation site quickly. Whether you're creating API references, user guides, or technical documentation, these components will help you build a professional and consistent documentation experience. Follow the steps below to get started with DocuBook and make the most of its powerful features.
+
+<Outlet path="getting-started" />

package/src/dist/contents/docs/getting-started/project-structure/index.mdx

@@ -6,7 +6,7 @@ date: 29-11-2024
 
 ## app
 
-This folder contains the main application code for Next.js, managing layouts, routing, and specific content pages. It is organized to support both the `docs` and `blog` sections, with dedicated pages and layouts for each section.
+This folder contains the main application code for Next.js, managing layouts, routing, and specific content pages. It is organized to support both the `docs` sections, with dedicated pages and layouts for each section.
 
 ```
 app                         // Main Next.js application folder

package/src/dist/contents/docs/getting-started/theme-colors/coffee/index.mdx

@@ -0,0 +1,165 @@
+---
+title: Coffee
+description: A warm, minimalistic design inspired by early computing. This theme is a replica of the "Coffee" theme from the `shiki-twoslash` package.
+date: 2025-05-30
+---
+
+## Styles
+
+<Note type="note" title="note">
+  You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
+</Note>
+
+<Tabs defaultValue="globals" className="pt-5 pb-1">
+  <TabsList>
+    <TabsTrigger value="globals">globals.css</TabsTrigger>
+    <TabsTrigger value="syntax">syntax.css</TabsTrigger>
+  </TabsList>
+  <TabsContent value="globals">
+    ```css:globals.css
+/* Rich Coffee Theme */
+@layer base {
+    :root {
+        --background: 35 40% 96%;
+        --foreground: 25 25% 10%;
+        --card: 0 0% 100%;
+        --card-foreground: 25 25% 10%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 25 25% 10%;
+        --primary: 25 60% 40%;
+        --primary-foreground: 0 0% 100%;
+        --secondary: 35 30% 90%;
+        --secondary-foreground: 25 25% 10%;
+        --muted: 35 20% 94%;
+        --muted-foreground: 25 15% 35%;
+        --accent: 30 50% 38%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 5 85% 45%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 30 15% 85%;
+        --input: 30 15% 88%;
+        --ring: 25 60% 40%;
+        --radius: 0.5rem;
+        --chart-1: 25 60% 45%;
+        --chart-2: 30 55% 45%;
+        --chart-3: 35 50% 42%;
+        --chart-4: 20 45% 38%;
+        --chart-5: 40 45% 40%;
+        --line-number-color: rgba(0, 0, 0, 0.08);
+    }
+
+    .dark {
+        --background: 30 10% 6%;
+        --foreground: 35 20% 94%;
+        --card: 30 10% 8%;
+        --card-foreground: 35 20% 94%;
+        --popover: 30 10% 8%;
+        --popover-foreground: 35 20% 94%;
+        --primary: 30 45% 52%;
+        --primary-foreground: 30 10% 6%;
+        --secondary: 30 12% 14%;
+        --secondary-foreground: 35 20% 94%;
+        --muted: 30 10% 16%;
+        --muted-foreground: 30 15% 60%;
+        --accent: 28 40% 48%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 5 80% 55%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 30 10% 20%;
+        --input: 30 10% 20%;
+        --ring: 30 45% 52%;
+        --chart-1: 30 45% 52%;
+        --chart-2: 28 40% 50%;
+        --chart-3: 32 45% 50%;
+        --chart-4: 25 35% 46%;
+        --chart-5: 35 40% 48%;
+        --line-number-color: rgba(255, 255, 255, 0.12);
+    }
+}
+```
+</TabsContent>
+
+  <TabsContent value="syntax">
+    ```css:syntax.css
+/* Rich Coffee Theme - Syntax Highlighting */
+
+/* Light Mode */
+.keyword {
+  color: hsl(25 60% 35%); /* Rich coffee brown */
+}
+
+.function {
+  color: hsl(30 55% 38%); /* Warm coffee brown */
+}
+
+.punctuation {
+  color: hsl(30 15% 55%); /* Muted brown */
+}
+
+.comment {
+  color: hsl(25 15% 45%); /* Muted brown */
+  font-style: italic;
+  opacity: 0.9;
+}
+
+.string,
+.constant,
+.annotation,
+.boolean,
+.number {
+  color: hsl(32 50% 40%); /* Warm brown with hint of orange */
+}
+
+.tag {
+  color: hsl(25 65% 30%); /* Dark rich coffee */
+}
+
+.attr-name {
+  color: hsl(28 55% 38%); /* Warm brown */
+}
+
+.attr-value {
+  color: hsl(35 55% 35%); /* Slightly orange brown */
+}
+
+/* Dark Mode */
+.dark .keyword {
+  color: hsl(30 50% 65%); /* Light warm brown */
+}
+
+.dark .function {
+  color: hsl(28 55% 68%); /* Light warm brown */
+}
+
+.dark .string,
+.dark .constant,
+.dark .annotation,
+.dark .boolean,
+.dark .number {
+  color: hsl(35 50% 72%); /* Light warm brown with hint of orange */
+}
+
+.dark .tag {
+  color: hsl(30 50% 75%); /* Light warm brown */
+}
+
+.dark .attr-name {
+  color: hsl(28 45% 70%); /* Light warm brown */
+}
+
+.dark .attr-value {
+  color: hsl(35 50% 70%); /* Light warm brown with hint of orange */
+}
+
+.dark .comment {
+  color: hsl(30 15% 65%); /* Light brown-gray */
+  opacity: 0.8;
+}
+
+.dark .punctuation {
+  color: hsl(30 15% 70%); /* Light brown-gray */
+  opacity: 0.9;
+}
+```
+</TabsContent>
+</Tabs>

package/src/dist/contents/docs/getting-started/theme-colors/default/index.mdx

@@ -0,0 +1,160 @@
+---
+title: Default Theme
+description: This page explains the Modern Blue theme colors used in DocuBook, which is a default theme provided by DocuBook.
+date: 2025-05-20
+---
+
+## Styles
+<Note type="note" title="note">
+  You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
+</Note>
+
+<Tabs defaultValue="globals" className="pt-5 pb-1">
+  <TabsList>
+    <TabsTrigger value="globals">globals.css</TabsTrigger>
+    <TabsTrigger value="syntax">syntax.css</TabsTrigger>
+  </TabsList>
+  <TabsContent value="globals">
+    ```css:globals.css
+    /* Modern Blue Theme */
+@layer base {
+    :root {
+        --background: 210 40% 98%;
+        --foreground: 220 30% 15%;
+        --card: 0 0% 100%;
+        --card-foreground: 220 30% 15%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 220 30% 15%;
+        --primary: 210 81% 56%; /* #2281E3 */
+        --primary-foreground: 0 0% 100%;
+        --secondary: 210 30% 90%;
+        --secondary-foreground: 220 30% 15%;
+        --muted: 210 20% 92%;
+        --muted-foreground: 220 15% 50%;
+        --accent: 200 100% 40%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 60%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 210 20% 85%;
+        --input: 210 20% 85%;
+        --ring: 210 81% 56%;
+        --radius: 0.5rem;
+        --chart-1: 210 81% 56%;
+        --chart-2: 200 100% 40%;
+        --chart-3: 220 76% 60%;
+        --chart-4: 190 90% 50%;
+        --chart-5: 230 86% 45%;
+        --line-number-color: rgba(0, 0, 0, 0.05);
+        }
+
+    .dark {
+        --background: 220 25% 10%;
+        --foreground: 210 30% 96%;
+        --card: 220 25% 15%;
+        --card-foreground: 210 30% 96%;
+        --popover: 220 25% 15%;
+        --popover-foreground: 210 30% 96%;
+        --primary: 210 100% 65%;
+        --primary-foreground: 220 25% 10%;
+        --secondary: 215 25% 20%;
+        --secondary-foreground: 210 30% 96%;
+        --muted: 215 20% 25%;
+        --muted-foreground: 215 20% 65%;
+        --accent: 200 100% 60%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 70%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 215 20% 25%;
+        --input: 215 20% 25%;
+        --ring: 210 100% 65%;
+        --chart-1: 210 100% 65%;
+        --chart-2: 200 100% 60%;
+        --chart-3: 220 90% 70%;
+        --chart-4: 190 100% 65%;
+        --chart-5: 230 90% 60%;
+        --line-number-color: rgba(255, 255, 255, 0.1);
+        }
+}
+```
+</TabsContent>
+
+  <TabsContent value="syntax">
+    ```css:syntax.css
+/* Modern Blue Theme */
+/* Light Mode */
+.keyword {
+  color: #1d4ed8; /* Darker blue for better contrast */
+}
+
+.function {
+  color: #0369a1; /* Deep blue */
+}
+
+.punctuation {
+  color: #4b5563; /* Slate gray */
+}
+
+.comment {
+  color: #6b7280; /* Muted gray */
+  font-style: italic;
+}
+
+.string,
+.constant,
+.annotation,
+.boolean,
+.number {
+  color: #0d9488; /* Teal for better distinction */
+}
+
+.tag {
+  color: #1d4ed8; /* Matching keyword color */
+}
+
+.attr-name {
+  color: #0284c7; /* Sky blue */
+}
+
+.attr-value {
+  color: #2563eb; /* Primary blue */
+}
+
+/* Dark Mode */
+.dark .keyword {
+  color: #60a5fa; /* Soft blue */
+}
+
+.dark .function {
+  color: #38bdf8; /* Sky blue */
+}
+
+.dark .string,
+.dark .constant,
+.dark .annotation,
+.dark .boolean,
+.dark .number {
+  color: #2dd4bf; /* Teal */
+}
+
+.dark .tag {
+  color: #60a5fa; /* Matching keyword color */
+}
+
+.dark .attr-name {
+  color: #7dd3fc; /* Lighter blue */
+}
+
+.dark .attr-value {
+  color: #3b82f6; /* Brighter blue */
+}
+
+.dark .comment {
+  color: #9ca3af; /* Lighter gray for dark mode */
+}
+
+.dark .punctuation {
+  color: #9ca3af; /* Lighter gray for dark mode */
+}
+```
+</TabsContent>
+</Tabs>