@docubook/create 1.12.0 → 1.13.5

package/src/dist/contents/docs/{getting-started/components → 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/customize/index.mdx

@@ -90,5 +90,3 @@ For both options, ensure that you add the variable to `tailwind.config.ts`:
     }
 }
 ```
-
-For theme and colors, refer to the [Theme section](/docs/getting-started/themes)

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/installation/index.mdx

@@ -15,7 +15,7 @@ To get started, you can clone the DocuBook repository directly from GitHub.
     Begin by cloning the DocuBook repository from GitHub:
 
     ```bash
-    git clone --branch starter https://gitlab.com/mywildancloud/docubook.git
+    git clone --branch main https://github.com/DocuBook/docubook.git
     ```
 
   </StepperItem>

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

@@ -13,7 +13,7 @@ DocuBook is proudly **open-source**! 🎉 We believe in creating an accessible,
 
 <Note title="Contribute">
   Interested in helping us improve? Check out our [GitHub
-  repository](https://github.com/gitfromwildan/docubook) to get started! From
+  repository](https://github.com/DocuBook/docubook) to get started! From
   feature suggestions to bug fixes, all contributions are welcome.
 </Note>
 

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

@@ -4,11 +4,11 @@ description: Get up and running with DocuBook in minutes with this comprehensive
 date: 20-05-2025
 ---
 
-Welcome to DocuBook! This guide will help you set up your documentation site quickly and efficiently.
+Welcome to DocuBook! This guide will help you set up and customize your documentation site efficiently.
 
 ## Prerequisites
 
-Before we begin, make sure you have the following installed:
+Before we begin, ensure you have the following installed:
 
 - [Git](https://git-scm.com/)
 - [Node.js 18+](https://nodejs.org/) or [Bun 1.0+](https://bun.sh/)
@@ -16,112 +16,130 @@ Before we begin, make sure you have the following installed:
 
 ## Installation
 
-<Note type="note" title="Note">
-  Follow the instructions on the [installation page](/docs/getting-started/installation) to install the required dependencies and set up your project.
+<Note type="note" title="Initial Setup">
+  Follow the [installation guide](/docs/getting-started/installation) to set up your project dependencies and configuration.
 </Note>
 
 ## Project Setup
 
-### Customize Branding
+### Configuration
 
 <Stepper>
-  <StepperItem title="Step 1: Add Favicon">
-    Place your favicon at `public/favicon.ico`
+  <StepperItem title="Add Favicon">
+    Place your favicon at `public/favicon.ico` for browser tab display.
   </StepperItem>
-  <StepperItem title="Step 2: Add Logo">
-    Place your logo at `public/images/docu.svg` (SVG format recommended)
+  <StepperItem title="Add Logo">
+    Add your logo at `public/images/docu.svg` (SVG format recommended for scalability).
   </StepperItem>
-  <StepperItem title="Step 3: Update Site Info">
-    Edit `docu.json` to update site name, description, and other settings
+  <StepperItem title="Update Site Information">
+    Customize your site's metadata in `docu.json`:
+    - Site title and description
+    - Navigation structure
+    - Default theme settings
   </StepperItem>
 </Stepper>
 
-## Creating Content
+## Content Management
 
 ### File Structure
 
-DocuBook uses the following structure:
+DocuBook organizes content in a hierarchical structure:
 
-````plaintext
+```plaintext
 contents/
-  docs/
-    getting-started/
-      quick-start-guide/  <-- You are here
+  docs/                    # Main documentation directory
+    getting-started/        # Section for getting started guides
+      quick-start-guide/    # Current guide
+        index.mdx           # Main content file
+    guides/                # Additional documentation sections
+      components/          # Component-specific documentation
         index.mdx
-    guides/
-      components/
-        index.mdx
-````
+```
 
-### Adding New Pages
+### Creating New Content
 
 <Stepper>
-  <StepperItem title="Step 1: Create a New Folder">
-    Create a new folder in `contents/docs/getting-started/` for your content section
+  <StepperItem title="1. Create Content Directory">
+    Organize your documentation by creating a new directory:
+    ```bash
+    mkdir -p contents/docs/your-section/your-topic
+    ```
+
+    Example for an API reference:
     ```bash
-    mkdir -p contents/docs/getting-started/your-page-title
+    mkdir -p contents/docs/api/authentication
     ```
   </StepperItem>
-  <StepperItem title="Step 2: Add MDX File">
-    Create an `index.mdx` file with frontmatter:
+
+  <StepperItem title="2. Create MDX Content">
+    Add an `index.mdx` file with frontmatter metadata:
     ````markdown
     ---
-    title: Your Page Title
-    description: Brief description of your page
-    date: 20-05-2025
+    title: Authentication
+    description: Learn how to implement user authentication
+    date: 2025-05-29
     ---
 
-    # Your Content Here
+    Your comprehensive guide to implementing authentication in your application.
+
+    ## Getting Started
 
-    Start writing your documentation using Markdown or MDX components.
+    Start by setting up your authentication provider...
     ````
   </StepperItem>
-  <StepperItem title="Step 3: Add to Navigation">
-    Update the navigation in `docu.json`:
-    ```json:docu.json showLineNumbers {8}
-{
+
+  <StepperItem title="3. Update Navigation">
+    Add your new section to the navigation in `docu.json`. Here's how to add the authentication section we created earlier:
+
+    ```json:docu.json showLineNumbers {4-16}
+    {
       "routes": [
+        // ... existing routes ...
         {
-        "title": "Getting Started",
-        "href": "/getting-started",
-        "noLink": true,
-            "items": [
-                { "title": "Your Page Title", "href": "/your-page-title" } // Add your page here separated by comma `,`
-            ]
+          "title": "API",
+          "href": "/api",
+          "noLink": true,
+          "context": {
+            "icon": "Code2",
+            "description": "API Reference and Integration",
+            "title": "API"
+          },
+          "items": [
+            { "title": "Authentication", "href": "/authentication" }
+          ]
         }
-    ]
-}
+      ]
+    }
     ```
+
+    This will add a new "API" section with an "Authentication" page under it. The `context` object defines how this section appears in the navigation, including its icon and description.
   </StepperItem>
 </Stepper>
 
-## Development
+## Development Workflow
+
+### Local Development
 
-Start the development server:
+Start the development server with live reload:
 
 ```bash
+# Using npm
 npm run dev
-# or
+
+# Or using Bun
 bun dev
 ```
 
-Visit [http://localhost:3000](http://localhost:3000) to see your site.
+Access your site at [http://localhost:3000](http://localhost:3000)
 
-## Building for Production
+### Building for Production
 
-When you're ready to deploy:
+When ready to deploy:
 
 ```bash
+# Build the production version
 npm run build
+
+# Start the production server
 npm start
 ```
-
-## Need Help?
-
-<Note type="info">
-  Check out the [Components Guide](/docs/getting-started/components) to learn about all available components.
-</Note>
-
-<Note type="warning">
-  Make sure to commit your changes to version control before deploying.
-</Note>

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

@@ -0,0 +1,167 @@
+---
+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
+
+DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.
+
+<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,163 @@
+---
+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
+
+DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.
+
+<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>