@docubook/create 1.9.1 → 1.11.2

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

@@ -0,0 +1,49 @@
+---
+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
+---
+
+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}>
+<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                                |
+
+## Code
+
+```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/getting-started/components/code-block/index.mdx

@@ -0,0 +1,41 @@
+---
+title: Code Block
+description: A component used to display code snippets with optional line numbering and line highlighting.
+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}
+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}`.
+
+## Usage
+
+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/getting-started/components/custom/index.mdx

@@ -0,0 +1,38 @@
+---
+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/getting-started/components/image/index.mdx

@@ -0,0 +1,37 @@
+---
+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/getting-started/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="getting-started/components" />

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

@@ -0,0 +1,117 @@
+---
+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/getting-started/components/link/index.mdx

@@ -0,0 +1,34 @@
+---
+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/getting-started/components/note/index.mdx

@@ -0,0 +1,46 @@
+---
+title: Note
+description: A component used to display different types of messages such as general notes, warnings, or success notifications.
+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">
+  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"`, `"warning"`, `"success"` | "note"  | Determines the visual style of the note. |
+
+## Code
+
+```jsx
+<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>
+```

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

@@ -0,0 +1,130 @@
+---
+title: Release Note
+description: The Release Note component makes it easy for you to write updates for each version of your application.
+date: 31-12-2024
+---
+
+The Release Note component makes it easy for you to write and display changelogs in a structured and organized way. This component consists of two main parts: `Release` and `Changes` which can be used to display version, date, release title, and a list of changes categorized by type.
+
+## Basic Usage
+
+Here is a basic example of using the Release Note component:
+
+```jsx
+<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
+  <Changes type="added">
+    - New feature to improve accessibility
+    - Keyboard navigation support for dialog components
+  </Changes>
+  <Changes type="fixed">
+    - Bug fix for mobile menu
+    - Fixed loading issues on documentation pages
+  </Changes>
+</Release>
+```
+
+<Accordion title="Render As" defaultOpen={true}>
+<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
+  <Changes type="added">
+    - New feature to improve accessibility
+    - Keyboard navigation support for dialog components
+  </Changes>
+  <Changes type="fixed">
+    - Bug fix for mobile menu
+    - Fixed loading issues on documentation pages
+  </Changes>
+</Release>
+</Accordion>
+
+## Release Component
+
+The `Release` component is used to display key information about a release version, such as version number, release date, and title.
+
+### Release Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `version` | string | ✅ | Version number to display (without "v" prefix) |
+| `title` | string | ✅ | Title or name of the release |
+| `date` | string | ❌ | Release date in a valid format (example: "2025-05-24") |
+| `children` | ReactNode | ✅ | Child content, typically `Changes` components |
+
+```jsx
+<Release
+  version="1.10.1"
+  date="2025-05-24"
+  title="Accessibility Improvements and Bug Fixes"
+>
+  {/* Changes content here */}
+</Release>
+```
+
+## Changes Component
+
+The `Changes` component is used to group changes by category with appropriate icons and colors.
+
+### Changes Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `type` | string | ✅ | Type of change: 'added', 'fixed', 'improved', 'deprecated', or 'removed' |
+| `children` | ReactNode | ✅ | List of changes, can be text with Markdown formatting |
+
+### Changes Note
+
+| Category | Description |
+|----------|-------------|
+| `added` | New features or functionality added |
+| `fixed` | Bugs or issues that have been fixed |
+| `improved` | Enhancements or optimizations to existing features |
+| `deprecated` | Features that are not recommended and may be removed in future |
+| `removed` | Features that have been completely removed |
+
+### Changes Example
+
+```jsx
+<Changes type="added">
+  - New feature to improve accessibility
+  - Keyboard navigation support for dialog components
+</Changes>
+
+<Changes type="fixed">
+  - Bug fix for mobile menu
+  - Fixed loading issues on documentation pages
+</Changes>
+```
+
+## Complete Implementation
+
+Here is a complete example of using the Release Note component in an MDX file:
+
+````plaintext
+<!-- hidden heading for TOC -->
+
+<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
+  <Changes type="added">
+    - Keyboard navigation for all interactive components
+    - Screen reader support for table components
+    - Dark mode feature with system preference detection
+  </Changes>
+
+  <Changes type="fixed">
+    - Fixed mobile menu bug that wouldn't close when navigating to another page
+    - Fixed loading issues on documentation pages
+    - Fixed display issues in Safari browser
+  </Changes>
+
+  <Changes type="improved">
+    - Improved page loading performance
+    - Optimized JavaScript bundle size
+    - Enhanced responsive design across all viewports
+  </Changes>
+</Release>
+````
+
+## Usage Tips
+
+1. **Date Format**: Use a consistent date format for all releases.
+2. **Version Ordering**: Arrange versions in reverse chronological order (newest version at the top).
+3. **List Items**: You can use standard Markdown list format (`-` or `*`) or write text directly, the component will handle the formatting.
+4. **TOC**: Use hidden headings to ensure each version is detected in the Table of Contents. Use `<div className="sr-only">### v 1.10.1</div>`

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

@@ -0,0 +1,47 @@
+---
+title: Stepper
+description: A component used to display step-by-step instructions directly within the markdown render.
+date: 14-12-2024
+---
+
+In this guide, we utilize a custom `Stepper` component, specifically designed for DocuBook, which enables users to display step-by-step instructions directly within the markdown render.
+
+## Preview
+
+##
+
+<Stepper>
+  <StepperItem title="Step 1: Clone the DocuBook Repository">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
+    felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
+    dolor in lorem.
+  </StepperItem>
+  <StepperItem title="Step 2: Access the Project Directory">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
+    eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
+  </StepperItem>
+  <StepperItem title="Step 3: Install Required Dependencies">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
+    ipsum nec nulla ultricies porttitor et non justo.
+  </StepperItem>
+</Stepper>
+
+## Code
+
+```jsx
+<Stepper>
+  <StepperItem title="Step 1: Clone the DocuBook Repository">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
+    felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
+    dolor in lorem.
+  </StepperItem>
+  <StepperItem title="Step 2: Access the Project Directory">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
+    eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
+  </StepperItem>
+  <StepperItem title="Step 3: Install Required Dependencies">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
+    ipsum nec nulla ultricies porttitor et non justo.
+  </StepperItem>
+</Stepper>
+```

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

@@ -0,0 +1,70 @@
+---
+title: Tabs
+description: Organize content into multiple sections with switchable tabs.
+date: 14-12-2024
+---
+
+The `Tabs` component allows you to organize content into multiple sections, enabling users to switch between them easily. This is particularly useful for displaying related content in a compact manner.
+
+## Preview
+
+<Tabs defaultValue="java" className="pt-5 pb-1">
+  <TabsList>
+    <TabsTrigger value="java">Java</TabsTrigger>
+    <TabsTrigger value="typescript">TypeScript</TabsTrigger>
+  </TabsList>
+  <TabsContent value="java">
+    ```java
+    // HelloWorld.java
+    public class HelloWorld {
+        public static void main(String[] args) {
+            System.out.println("Hello, World!");
+        }
+    }
+    ```
+  </TabsContent>
+  <TabsContent value="typescript">
+    ```typescript
+    // helloWorld.ts
+    function helloWorld(): void {
+        console.log("Hello, World!");
+    }
+    helloWorld();
+    ```
+  </TabsContent>
+</Tabs>
+
+## Props
+
+| 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. |
+
+## Code
+
+````jsx
+<Tabs defaultValue="java" className="pt-5 pb-1">
+  <TabsList>
+    <TabsTrigger value="java">Java</TabsTrigger>
+    <TabsTrigger value="typescript">TypeScript</TabsTrigger>
+  </TabsList>
+  <TabsContent value="java">
+    ```java
+    // HelloWorld.java
+    public class HelloWorld {
+        public static void main(String[] args) {
+            System.out.println("Hello, World!");
+        }
+    }
+    ```</TabsContent>
+  <TabsContent value="typescript">
+    ```typescript
+    // helloWorld.ts
+    function helloWorld(): void {
+        console.log("Hello, World!");
+    }
+    helloWorld();
+    ```</TabsContent>
+</Tabs>
+````

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

@@ -0,0 +1,22 @@
+---
+title: Tooltips
+description: A component used to display additional information when hovering over a word or phrase.
+date: 19-02-2025
+---
+
+I have implemented the `tooltips` component into markdown which allows you to add additional information to a word or phrase when hovering. This feature is useful for providing definitions, explanations, or any other additional information that can enhance the user experience.
+
+## Usage
+You can use tooltips in your Markdown content to provide additional information when hovering over a word or phrase.
+
+### Preview
+
+What do you know about <Tooltip text="DocuBook" tip="npx @docubook/create@latest" /> ? Create interactive nested documentations using MDX.
+
+### Code
+
+The above Markdown is converted to:
+
+```markdown:index.mdx
+What do you know about <Tooltip text="DocuBook" tip="npx @docubook/create@latest" /> ? Create interactive nested documentations using MDX.
+```

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

@@ -0,0 +1,21 @@
+---
+title: Youtube
+description: A component used to embed YouTube videos directly into your documentation.
+date: 14-12-2024
+---
+
+I have implemented a `YouTube` component for your documentation. This component allows you to easily embed YouTube videos directly into your documentation by simply inputting the video's ID.
+
+## Preview
+
+<Youtube videoId="cpraXaw7dyc" />
+
+## Code
+
+```bash
+<Youtube videoId="cpraXaw7dyc" />
+```
+
+## Usage
+
+for example the youtube URL show this https://www.youtube.com/watch?v=cpraXaw7dyc the ID `cpraXaw7dyc`