@docubook/create 1.15.1 → 1.15.2

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

@@ -1,130 +0,0 @@
----
-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:
-
-```markdown
-<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 |
-
-```markdown
-<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/components/stepper/index.mdx

@@ -1,45 +0,0 @@
----
-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>
-
-## Output Markdown
-
-```markdown
-<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/components/tabs/index.mdx

@@ -1,70 +0,0 @@
----
-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   | null    | Additional CSS classes for styling the Tabs component. |
-
-## Output Markdown
-
-````plaintext
-<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/components/tooltips/index.mdx

@@ -1,22 +0,0 @@
----
-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.
-
-### Output Markdown
-
-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/components/youtube/index.mdx

@@ -1,23 +0,0 @@
----
-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="8sM0Di7Ew9Q" />
-
-## Output Markdown
-
-```markdown
-<Youtube videoId="8sM0Di7Ew9Q" />
-```
-
-## Usage
-
-<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/customize/index.mdx

@@ -1,92 +0,0 @@
----
-title: Customize
-description: This guide provides instructions on customizing our application.
-date: 29-11-2024
----
-
-## Markdown Options
-
-To customize Markdown parsing, navigate to `@lib/markdown.ts` and locate the `parseMdx` function. You can add your desired plugins in the `mdxOptions`. Here’s an example:
-
-```ts:lib/markdown.ts
-async function parseMdx<Frontmatter>(rawMdx: string) {
-    return await compileMDX<Frontmatter>({
-        source: rawMdx,
-        options: {
-            parseFrontmatter: true,
-            mdxOptions: {
-                // Add your plugins here
-                rehypePlugins: [Shiki],
-                remarkPlugins: [remarkGfm],
-            },
-        },
-        components,
-    });
-}
-```
-
-## Fonts
-
-Currently, this project uses the `Geist` font. If you want to use other fonts, you can change the configuration in the main layout as shown below:
-
-### Google Fonts
-
-To use a Google font, import your desired font from `next/font/google`, initialize it with options, and apply the variable to the `body`:
-
-```tsx:app/layout.tsx
-import { Space_Grotesk } from "next/font/google";
-
-const fontSans = Space_Grotesk({
-    display: "swap",
-    variable: "--font-regular",
-    weight: "400",
-    subsets: ["latin"],
-});
-
-export default function RootLayout({ children }) {
-    return (
-        <html lang="en">
-            <body className={`${fontSans.variable} font-regular`}>
-                {children}
-            </body>
-        </html>
-    );
-}
-```
-
-### Local Fonts
-
-To use a local font, you need to use the local font loader from Next.js. Pass the options and apply them to the `body`:
-
-```tsx:app/layout.tsx
-import localFont from "next/font/local";
-
-const geistSans = localFont({
-    src: "./fonts/GeistVF.woff",
-    variable: "--font-regular",
-    weight: "100 900",
-});
-
-export default function RootLayout({ children }) {
-    return (
-        <html lang="en">
-            <body className={`${geistSans.variable} font-regular`}>
-                {children}
-            </body>
-        </html>
-    );
-}
-```
-
-For both options, ensure that you add the variable to `tailwind.config.ts`:
-
-```ts:tailwind.config.ts
-{
-    // ...
-    extend: {
-        fontFamily: {
-            regular: ["var(--font-regular)"],
-        },
-    }
-}
-```

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

@@ -1,9 +0,0 @@
----
-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/installation/index.mdx

@@ -1,84 +0,0 @@
----
-title: Installation
-description: Installation guide for our application.
-date: 17-02-2025
----
-
-Setting up DocuBook is straightforward, with options to clone the repository or use the convenient `npx` command. DocuBook requires [Node.js](https://nodejs.org/) version 18 or higher for optimal performance.
-
-## Clone Repository
-
-To get started, you can clone the DocuBook repository directly from GitHub.
-
-<Stepper>
-  <StepperItem title="Step 1: Clone the DocuBook Repository">
-    Begin by cloning the DocuBook repository from GitHub:
-
-    ```bash
-    git clone --branch main https://github.com/DocuBook/docubook.git
-    ```
-
-  </StepperItem>
-
-  <StepperItem title="Step 2: Access the Project Directory">
-    After cloning, navigate into the project directory to start setting up:
-
-    ```bash
-    cd docubook
-    ```
-
-  </StepperItem>
-
-  <StepperItem title="Step 3: Install Required Dependencies">
-    Install all necessary project dependencies with npm:
-
-    ```bash
-    npm install
-    ```
-
-  </StepperItem>
-
-  <StepperItem title="Step 4: Launch the Development Server">
-    Finally, start the development server to view the project locally:
-
-    ```bash
-    npm run dev
-    ```
-
-  </StepperItem>
-</Stepper>
-
-## Quick Setup with CLI
-
-For a faster setup, use the `cli` command to create a new DocuBook project in one step:
-
-<Tabs defaultValue="npm" className="pt-5 pb-1">
-  <TabsList>
-    <TabsTrigger value="npm">npm</TabsTrigger>
-    <TabsTrigger value="pnpm">pnpm</TabsTrigger>
-    <TabsTrigger value="bun">bun</TabsTrigger>
-    <TabsTrigger value="yarn">yarn</TabsTrigger>
-  </TabsList>
-  <TabsContent value="npm">
-    ```shell
-    npx @docubook/create@latest
-    ```
-  </TabsContent>
-  <TabsContent value="pnpm">
-    ```shell
-    pnpm dlx @docubook/create@latest
-    ```
-  </TabsContent>
-  <TabsContent value="bun">
-    ```shell
-    bunx @docubook/create@latest
-    ```
-  </TabsContent>
-  <TabsContent value="yarn">
-    ```shell
-    yarn dlx @docubook/create@latest
-    ```
-  </TabsContent>
-</Tabs>
-
-With this setup, you’ll have a ready-to-use DocuBook instance to start building your documentation.

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

@@ -1,87 +0,0 @@
----
-title: Project Structure
-description: This section provides an overview of Project Structure.
-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` sections, with dedicated pages and layouts for each section.
-
-```
-app                         // Main Next.js application folder
-├── page.tsx                // Hero page - the entry point of the app showcasing key content
-├── layout.tsx              // Main layout file, applies global navigation and footer
-└── docs
-    ├── layout.tsx          // Documentation layout with sidebar, providing easy navigation across doc pages
-    └── [[...slug]]         // Catch-all route to handle nested documentation pages, allowing flexible doc structure
-```
-
-## components
-
-This folder contains all reusable components used throughout the project. It’s structured to categorize components, making it easy to locate and manage UI elements, Markdown customizations, and navigation.
-
-```
-components                    // Reusable components
-├── ui                        // ShadCN components, includes standardized UI elements like buttons, forms, and modals
-├── markdown                  // Custom Markdown components for rendering rich Markdown content
-│   ├── CodeBlock.tsx         // Component for rendering syntax-highlighted code blocks
-│   ├── Image.tsx             // Component for handling responsive images in Markdown
-│   └── Table.tsx             // Component to render tables with consistent styling
-└── navbar.tsx                // Main navigation component for the site header, managing links and responsive behavior
-```
-
-## styles
-
-This folder contains global and component-specific CSS files, allowing for project-wide styling consistency and customizations.
-
-```
-styles                        // CSS files
-├── globals.css               // Global CSS file, includes Tailwind base, utilities, and custom global styles
-├── syntax.css                // Syntax highlighting styles, providing consistent code block appearance across the site
-└── overrides.css             // Additional custom styles that override specific component or plugin defaults
-```
-
-## contents
-
-This folder stores all Markdown content for the documentation and blog sections, with clear organization by content type. Each Markdown file represents a single piece of content, with frontmatter used for metadata.
-
-```
-contents                      // Markdown content for blogs and documentation
-├── docs                      // Documentation content, structured to support nested sections and pages
-│   ├── getting-started       // Main Folder at the Contents
-│       └─── installation     // Subfolder for tutorial-style content
-|            └── index.mdx    // Step-by-step tutorial on a specific topic
-```
-
-## public
-
-This folder holds all static assets, such as images, videos, fonts, and icons. These files are directly accessible via URL, so it’s important to avoid sensitive or private content here.
-
-```
-public                        // Publicly accessible assets
-├── images                    // Image assets, used across various parts of the app
-│   ├── og-image.png          // Default opengraph image for thumbnail
-│   └── docu.svg              // Your site Logo
-├── favicon.ico               // Favicon for the app
-└── videos                    // Video files for media content, if any
-```
-
-## lib
-
-This folder contains helper functions and utilities used across the application, such as Markdown parsing and routing logic. These utilities help keep the codebase clean and organized by separating out common functionality.
-
-```
-lib                           // Utility or helper functions
-├── changelog.ts              // Change log for the app, used to display recent changes and updates
-├── markdown.ts               // Markdown parsing logic, converts Markdown to HTML and adds custom components
-├── routes-config.ts          // Routing configuration for docs, maps URLs to content files for dynamic routing
-└── utils.tsx                 // General utility functions used across the app, such as data formatting and validation helpers
-```
-
-## Additional
-
-- **`package.json`**: Contains metadata about the project, dependencies, and scripts for building and running the application.
-- **`tailwind.config.ts`**: Configures Tailwind CSS, allowing customization of theme colors, fonts, and responsive breakpoints specific to this project.
-
-This structure organizes your project in a way that supports scalability and maintainability, making it easier to navigate and work on different sections of the application.