@docubook/create 1.15.1 → 1.15.2

package/src/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docubook",
-  "version": "1.15.1",
+  "version": "1.15.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

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

@@ -1,86 +0,0 @@
----
-title: Accordion
-description: A component used to create collapsible content that can be hidden and shown again.
-date: 22-12-2024
----
-
-## Preview
-
-### Basic Usage
-
-<Accordion title="Click to expand" defaultOpen={true}>
-    This is a simple accordion component that can be toggled by clicking the header. The content can include any valid React nodes, including text, components, and markdown.
-</Accordion>
-
-### With Code Block
-
-<Accordion title="Code Example" className="mt-4">
-    ```javascript:utils.js showLineNumbers
-    // Example of using the Accordion component
-    import Accordion from '@/components/markdown/AccordionMdx';
-
-    function Example() {
-        return (
-            <Accordion title="Click to see code">
-                <pre>
-                    {`function greet() {\n    console.log('Hello, world!');\n}`}
-                </pre>
-            </Accordion>
-        );
-    }
-    ```
-</Accordion>
-
-### With Markdown Content
-
-<Accordion title="Markdown Example" className="mt-4">
-    ## This is a markdown heading
-
-    - List item 1
-    - List item 2
-    - List item 3
-
-    You can include **bold** and *italic* text, [links](#), and other markdown elements.
-</Accordion>
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | string | - | **Required**. The text displayed in the accordion header. |
-| `children` | ReactNode | null | The content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components. |
-| `defaultOpen` | boolean | false | When true, the accordion will be expanded by default. |
-| `className` | string | undefined | Additional CSS classes to apply to the accordion container. |
-
-## Output Markdown
-
-<Tabs defaultValue="markdown" className="pt-5 pb-1">
-  <TabsList>
-    <TabsTrigger value="markdown">Markdown</TabsTrigger>
-    <TabsTrigger value="codeblock">Code Block</TabsTrigger>
-  </TabsList>
-  <TabsContent value="markdown">
-    ```plaintext
-    <Accordion title="Markdown">
-        this is an example of plain text content from the accordion component and below is markdown ;
-        1. number one
-        2. number two
-        3. number three
-    </Accordion>
-    ```
-  </TabsContent>
-  <TabsContent value="codeblock">
-    ````plaintext
-    <Accordion title="Code Block" defaultOpen={true}>
-        ```javascript:main.js showLineNumbers {3-4}
-        function isRocketAboutToCrash() {
-            // Check if the rocket is stable
-            if (!isStable()) {
-                NoCrash(); // Prevent the crash
-            }
-        }
-        ```
-    </Accordion>
-    ````
-  </TabsContent>
-</Tabs>

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

@@ -1,40 +0,0 @@
----
-title: Button
-description: A component used to create buttons that can be used to trigger actions or navigate to other pages.
-date: 14-12-2024
----
-
-## Preview
-
-<Button
-  text="Learn More"
-  href="https://learn.example.com"
-  icon="MoveUpRight"
-  size="md"
-  target="_blank"
-  variation="primary"
-/>
-
-## Props
-
-| 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"` |
-
-## Output Markdown
-
-```markdown
-<Button
-  text="Learn More"
-  href="https://learn.example.com"
-  icon="MoveUpRight"
-  size="md"
-  target="_blank"
-  variation="primary"
-/>
-```

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

@@ -1,68 +0,0 @@
----
-title: Cards
-description: A component used to create cards that can be used to display content in a compact and organized way.
-date: 20-02-2025
----
-
-## Example
-
-### Card with Link and icon
-
-<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>
-
-### Card Horizontal
-
-<Card title="Horizontal Card" icon="Layout" horizontal>
-  This is a horizontal card layout.
-</Card>
-
-### Card Simple
-
-<Card title="Simple Card">
-  This is a simple card without an icon or link.
-</Card>
-
-
-## Props
-
-| Prop          | Type     | Default | Description                                             |
-| ------------- | -------- | ------- | ------------------------------------------------------- |
-| `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. |
-
-## Output Markdown
-
-<Tabs defaultValue="link" className="pt-5 pb-1">
-  <TabsList>
-    <TabsTrigger value="link">Link & Icon</TabsTrigger>
-    <TabsTrigger value="horizontal">Horizontal</TabsTrigger>
-    <TabsTrigger value="simple">Simple</TabsTrigger>
-  </TabsList>
-  <TabsContent value="link">
-    ```markdown
-    <Card title="Click on me" icon="Link" href="/docs/getting-started/components/button">
-        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>
-    ```
-  </TabsContent>
-  <TabsContent value="horizontal">
-    ```markdown
-    <Card title="Horizontal Card" icon="Layout" horizontal>
-        This is a horizontal card layout.
-    </Card>
-    ```
-  </TabsContent>
-  <TabsContent value="simple">
-    ```markdown
-    <Card title="Simple Card">
-        This is a simple card without an icon or link.
-    </Card>
-    ```
-  </TabsContent>
-</Tabs>

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

@@ -1,47 +0,0 @@
----
-title: Card Group
-description: A component used to create card groups that can be used to display multiple cards in a compact and organized way.
-date: 20-02-2025
----
-
-## Preview
-
-<CardGroup cols={2}>
-<Card title="Heading 1" icon="Heading1">
-  This is an example of card content with columns.
-</Card>
-<Card title="Heading 2" icon="Heading2">
-  This is an example of card content with columns.
-</Card>
-<Card title="Grid Card" icon="Grid" horizontal>
-    This is a horizontal card layout.
-</Card>
-<Card title="Horizontal Card" icon="Layout" horizontal>
-    This is a horizontal card layout.
-</Card>
-</CardGroup>
-
-## Props
-
-| Prop          | Type     | Default | Description                                             |
-| ------------- | -------- | ------- | ------------------------------------------------------- |
-| `cols`       | number | {2}    | By default 2 The number of columns per row                                |
-
-## Output Markdown
-
-```markdown
-<CardGroup cols={2}>
-<Card title="Heading 1" icon="Heading1">
-  This is an example of card content with columns.
-</Card>
-<Card title="Heading 2" icon="Heading2">
-  This is an example of card content with columns.
-</Card>
-<Card title="Grid Card" icon="Grid" horizontal>
-    This is a horizontal card layout.
-</Card>
-<Card title="Horizontal Card" icon="Layout" horizontal>
-    This is a horizontal card layout.
-</Card>
-</CardGroup>
-```

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

@@ -1,39 +0,0 @@
----
-title: Code Block
-description: A component used to display code snippets with optional line numbering and line highlighting.
-date: 14-12-2024
----
-
-## Preview
-
-```javascript:main.js showLineNumbers {3-4}
-function isRocketAboutToCrash() {
-    // Check if the rocket is stable
-    if (!isStable()) {
-        NoCrash(); // Prevent the crash
-    }
-}
-```
-
-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}`.
-
-## Output Markdown
-
-You can directly use the following syntax to create a code block with line numbers and highlight specific lines:
-
-````plaintext
-```javascript:main.js showLineNumbers {3-4}
-function isRocketAboutToCrash() {
-    // Check if the rocket is stable
-    if (!isStable()) {
-        NoCrash(); // Prevent the crash
-    }
-}
-```
-````
-
-## 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}`).
-- **Syntax Highlighting**: Use the appropriate language for syntax highlighting.

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

@@ -1,38 +0,0 @@
----
-title: Custom Components
-description: How to create custom components for Markdown.
-date: 14-12-2024
----
-
-To add custom components in DocuBook, follow these steps:
-
-1. **Create Your Component**: First, create your custom component in the `@components/markdown` folder. For example, you might create a file named `Outlet.tsx`.
-
-2. **Import Your Component**: Next, open the `@lib/markdown.ts` file. This is where you'll register your custom component for use in Markdown.
-
-3. **Add Your Component to the Components Object**: In the `@lib/markdown.ts` file, import your custom component and add it to the `components` object. Here’s how to do it:
-
-```ts
-import Outlet from "@/components/markdown/outlet";
-
-// Add custom components
-const components = {
-  Outlet,
-};
-```
-
-4. **Using Your Custom Component in Markdown**: After registering your component, you can now use it anywhere in your Markdown content. For instance, if your `Outlet` component is designed to display additional information, you can use it as follows:
-
-### Markdown Example
-
-```markdown
-<Outlet>
-  This is some custom content rendered by the Outlet component!
-</Outlet>
-```
-
-### Rendered Output
-
-This will render the content inside the `Outlet` component, allowing you to create reusable and dynamic Markdown content.
-
-By following these steps, you can extend the capabilities of your Markdown documentation and create a more engaging user experience.

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

@@ -1,109 +0,0 @@
----
-title: File Tree Component
-description: A customizable file tree component for displaying hierarchical file structures in your documentation.
-date: 28-05-2025
----
-
-The File Tree component allows you to display hierarchical file structures in your documentation with collapsible folders and files.
-
-## Basic Usage
-
-```
-<Files>
-  <Folder name="src">
-    <File name="App.tsx" />
-    <File name="index.tsx" />
-    <Folder name="components">
-      <File name="Button.tsx" />
-      <File name="Card.tsx" />
-    </Folder>
-    <Folder name="pages">
-      <File name="Home.tsx" />
-      <File name="About.tsx" />
-    </Folder>
-  </Folder>
-</Files>
-```
-
-Render As:
-<Files>
-  <Folder name="src">
-    <File name="App.tsx" />
-    <File name="index.tsx" />
-    <Folder name="components">
-      <File name="Button.tsx" />
-      <File name="Card.tsx" />
-    </Folder>
-    <Folder name="pages">
-      <File name="Home.tsx" />
-      <File name="About.tsx" />
-    </Folder>
-  </Folder>
-</Files>
-
-## Props
-
-### Files
-
-The root component that wraps the entire file tree.
-
-### Folder
-
-| Prop     | Type     | Required | Description                           |
-|----------|----------|----------|---------------------------------------|
-| `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       |
-
-
-## Examples
-
-### Nested Folder Structure
-
-```
-<Files>
-  <Folder name="project-root">
-    <File name="package.json" />
-    <File name="tsconfig.json" />
-    <Folder name="src">
-      <File name="index.ts" />
-      <Folder name="components">
-        <File name="Button.tsx" />
-        <File name="Card.tsx" />
-      </Folder>
-    </Folder>
-  </Folder>
-</Files>
-```
-
-### Minimal Example
-
-```
-<Files>
-  <Folder name="components">
-    <File name="Button.tsx" />
-    <File name="Input.tsx" />
-  </Folder>
-</Files>
-```
-
-## Best Practices
-
-1. Keep the nesting level reasonable (recommended max 3-4 levels deep)
-2. Use clear and descriptive names for files and folders
-3. Consider the user experience when displaying large file structures
-4. Use consistent naming conventions throughout your file tree
-
-## Accessibility
-
-The File Tree component includes built-in accessibility features:
-
-- Keyboard navigation support
-- ARIA attributes for screen readers
-- Focus management for interactive elements
-- High contrast mode support

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

@@ -1,37 +0,0 @@
----
-title: Image
-description: A component used to display images in Markdown.
-date: 14-12-2024
----
-
-In DocuBook, all images written in Markdown are automatically converted to their respective Next.js components. This allows for better optimization and performance in your application.
-
-## Images
-
-Similarly, images in Markdown are transformed into the Next.js `Image` component. This allows for automatic image optimization, such as lazy loading and resizing, which enhances performance and user experience. Here’s an example:
-
-### Markdown
-
-```markdown
-![Alt text for the image](https://via.placeholder.com/150)
-```
-
-### Rendered Output
-
-The above Markdown is converted to:
-
-```jsx
-<Image
-  src="https://via.placeholder.com/150"
-  alt="Alt text for the image"
-  width={800}
-  height={350}
-/>
-```
-
-## Benefits
-
-- **Performance Optimization**: Automatic conversion to Next.js components ensures optimized loading of images.
-- **Responsive Images**: Next.js `Image` component handles responsive images, providing the best quality for various device sizes.
-
-By utilizing these features, you can ensure that your documentation is not only visually appealing but also performs efficiently.

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

@@ -1,9 +0,0 @@
----
-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

@@ -1,117 +0,0 @@
----
-title: Keyboard
-description: Display keyboard keys with platform-specific styling for Windows and macOS.
-date : 19-05-2025
----
-
-The `Keyboard` component automatically renders platform-appropriate key symbols for macOS and Windows. It's perfect for documenting keyboard shortcuts in your application.
-
-## Usage
-
-### Basic Usage
-
-Simply use the `Kbd` component with a `show` prop:
-
-```tsx
-<Kbd show="cmd" type="mac" /> + <Kbd show="c" />
-```
-
-Renders as:
-<Kbd show="cmd" type="mac" /> + <Kbd show="c" />
-
-### Automatic Symbol Rendering
-
-The component automatically renders appropriate symbols based on the platform:
-
-```tsx
-{/* Windows style (default) */}
-<Kbd show="ctrl" /> + <Kbd show="v" />
-
-{/* Mac style */}
-<Kbd show="cmd" type="mac" /> + <Kbd show="v" type="mac" />
-```
-
-Renders as:
-- Windows: <Kbd show="ctrl" type="window" /> + <Kbd show="v" type="window" />
-- Mac: <Kbd show="cmd" type="mac" /> + <Kbd show="v" type="mac" />
-
-### Custom Content
-
-For custom key labels, provide children:
-
-```tsx
-<Kbd show="custom">Custom</Kbd>
-```
-
-Renders as: <Kbd show="custom">Custom</Kbd>
-
-## Props
-
-| 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) |
-
-## Supported Keys
-
-The component includes special handling for common keys:
-
-| Key Name    | Windows | macOS |
-|-------------|---------|-------|
-| command/cmd | `Win`   | `⌘`   |
-| option/alt  | `Alt`   | `⌥`   |
-| shift       | `Shift` | `⇧`   |
-| ctrl/control| `Ctrl`  | `⌃`   |
-| tab         | `Tab`   | `⇥`   |
-| enter/return| `Enter` | `⏎`   |
-| delete      | `Del`   | `⌫`   |
-| escape/esc  | `Esc`   | `⎋`   |
-| up/down/left/right  | `↑` `↓` `←` `→` | `↑` `↓` `←` `→` |
-| space       | `Space` | `␣`   |
-
-## Examples
-
-### Common Shortcuts
-
-```tsx
-{/* Copy shortcut */}
-<Kbd show="ctrl" /> + <Kbd show="c" />
-
-{/* Paste shortcut */}
-<Kbd show="cmd" type="mac" /> + <Kbd show="v" type="mac" />
-
-{/* Save shortcut */}
-<Kbd show="ctrl" /> + <Kbd show="s" />
-```
-
-### Custom Key Combinations
-
-```tsx
-{/* Custom application shortcut */}
-<Kbd show="cmd" type="mac" /> + <Kbd show="option" type="mac" /> + <Kbd show="a" type="mac"/>
-```
-
-Render as: <Kbd show="cmd" type="mac" /> + <Kbd show="option" type="mac" /> + <Kbd show="a" type="mac"/>
-
-### Arrow Key
-
-```tsx
-<Kbd show="up" /> <Kbd show="down" /> <Kbd show="left" /> <Kbd show="right" />
-```
-
-Render as: <Kbd show="up" /> <Kbd show="down" /> <Kbd show="left" /> <Kbd show="right" />
-
-## Best Practices
-
-1. **Be Consistent**: Stick to one platform style within the same context
-2. **Use Type Wisely**:
-   - Use `type="mac"` for Mac-specific documentation
-   - Use `type="window"` (default) for Windows/Linux
-3. **Accessibility**: The component uses semantic `<kbd>` HTML for better accessibility
-
-## Notes
-
-- The component automatically capitalizes single letters (e.g., 'a' becomes 'A')
-- Unrecognized keys are displayed as-is
-- Dark mode is automatically supported through Tailwind's dark mode classes

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

@@ -1,34 +0,0 @@
----
-title: Link
-description: A component used to create links that can be used to navigate to other pages.
-date: 14-12-2024
----
-
-In DocuBook, all links written in Markdown are automatically converted to their respective Next.js components. This allows for better optimization and performance in your application.
-
-## Links
-
-When you create a link in your Markdown, it is converted to the Next.js `Link` component. This enables client-side navigation and improves loading times. Here’s an example of how a Markdown link is transformed:
-
-### Markdown
-
-```markdown
-[Visit OpenAI](https://www.openai.com)
-```
-
-### Rendered Output
-
-The above Markdown is converted to:
-
-```jsx
-<Link href="https://www.openai.com" target="_blank" rel="noopener noreferrer">
-  Visit OpenAI
-</Link>
-```
-
-## Benefits
-
-- **Performance Optimization**: Automatic conversion to Next.js components ensures optimized loading of links.
-- **Improved User Experience**: Client-side navigation with Next.js `Link` improves the browsing experience.
-
-By utilizing these features, you can ensure that your documentation is not only visually appealing but also performs efficiently.

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

@@ -1,44 +0,0 @@
----
-title: Note
-description: A component used to display different types of messages such as general notes, warnings, or success notifications.
-date: 14-12-2024
----
-
-## Preview
-
-<Note type="note" title="Note">
-  This is a general note to convey information to the user.
-</Note>
-<Note type="danger" title="Danger">
-  This is a danger alert to notify the user of a critical issue.
-</Note>
-<Note type="warning" title="Warning">
-  This is a warning alert for issues that require attention.
-</Note>
-<Note type="success" title="Success">
-  This is a success message to inform the user of successful actions.
-</Note>
-
-## Props
-
-| Prop    | Type                                           | Default | Description                              |
-| ------- | ---------------------------------------------- | ------- | ---------------------------------------- |
-| `title` | string                                       | "Note"  | Sets the title of the note.              |
-| `type`  | "note" "danger" "success" "warning" | undefined | Determines the visual style of the note. |
-
-## Output Markdown
-
-```markdown
-<Note type="note" title="Note">
-  This is a general note to convey information to the user.
-</Note>
-<Note type="danger" title="Danger">
-  This is a danger alert to notify the user of a critical issue.
-</Note>
-<Note type="warning" title="Warning">
-  This is a warning alert for issues that require attention.
-</Note>
-<Note type="success" title="Success">
-  This is a success message to inform the user of successful actions.
-</Note>
-```