@docubook/create 2.3.0 → 2.5.0

package/src/dist/docs/components/tables.mdx

@@ -0,0 +1,35 @@
+---
+title: Tables
+description: Organize your data in style with GitHub-flavored tables.
+date: 08-02-2026
+---
+
+Tables are a powerful way to organize and present data. With full support for GitHub Flavored Markdown, you can easily create clean, responsive grids to display properties, comparisons, or datasets. Control column alignment and headers with simple syntax, ensuring your information looks professional and is easy to read.
+
+## Basic Table
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `title` | The title of the table | `string` | - |
+| `description` | The description of the table | `string` | - |
+
+## Alignment
+
+| Left | Center | Right |
+| :--- | :---: | ---: |
+| Left-aligned text | Center-aligned text | Right-aligned text |
+| Left-aligned text | Center-aligned text | Right-aligned text |
+
+## Output Markdown
+
+```markdown:index.mdx
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `title` | The title of the table | `string` | - |
+| `description` | The description of the table | `string` | - |
+
+| Left | Center | Right |
+| :--- | :---: | ---: |
+| Left-aligned text | Center-aligned text | Right-aligned text |
+| Left-aligned text | Center-aligned text | Right-aligned text |
+```

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

@@ -0,0 +1,72 @@
+---
+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
+    // HelloWorld.java
+    public class HelloWorld {
+        public static void main(String[] args) {
+            System.out.println("Hello, World!");
+        }
+    }
+    ```
+  </TabsContent>
+  <TabsContent value="typescript">
+    ```typescript:helloWorld.ts
+    // 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
+    // HelloWorld.java
+    public class HelloWorld {
+        public static void main(String[] args) {
+            System.out.println("Hello, World!");
+        }
+    }
+    ```
+  </TabsContent>
+  <TabsContent value="typescript">
+    ```typescript:helloWorld.ts
+    // helloWorld.ts
+    function helloWorld(): void {
+        console.log("Hello, World!");
+    }
+    helloWorld();
+    ```
+  </TabsContent>
+</Tabs>
+````

package/src/dist/docs/components/tooltips.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.
+
+### 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/docs/components/youtube.mdx

@@ -0,0 +1,23 @@
+---
+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="OPM2t54T-Vo" />
+
+## Output Markdown
+
+```markdown
+<Youtube videoId="OPM2t54T-Vo" />
+```
+
+## Usage
+
+<Note type="note" title="Usage">
+  for example the youtube URL show this https://www.youtube.com/watch?v=OPM2t54T-Vo the ID `OPM2t54T-Vo`
+</Note>

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

@@ -0,0 +1,18 @@
+---
+title : Introduction
+description : overview or synopsis of a project
+date : 10-12-2024
+---
+
+## Hello World
+
+Welcome to the documentation!
+
+<CardGroup cols={2}>
+  <Card title="Quickstart" icon="Zap" href="/docs/getting-started/quick-start-guide">
+    Get started with DocuBook in minutes.
+  </Card>
+  <Card title="Components" icon="Layers" href="/docs/components">
+    Explore the available library of components.
+  </Card>
+</CardGroup>

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

@@ -0,0 +1,60 @@
+---
+title : Quick Start Guide
+description : a quick way to understand how to use it
+date : 10-12-2024
+---
+
+## Adding a Route
+
+To add a new page to your documentation, you need to register it in the `docu.json` file.
+
+<Stepper>
+  <StepperItem title="Create the MDX file">
+    Create a new `.mdx` file in the `docs` directory. For example, `docs/my-new-page.mdx`.
+  </StepperItem>
+  <StepperItem title="Register in docu.json">
+    Open `docu.json` and add an entry to the `routes` array.
+
+    ```json
+    {
+      "title": "My New Page",
+      "href": "/my-new-page"
+    }
+    ```
+  </StepperItem>
+</Stepper>
+
+## Writing Content
+
+DocuBook supports standard Markdown and a variety of custom components to make your documentation more interactive.
+
+### Using Components
+
+Here are some common components you can use:
+
+#### Cards
+
+Use cards to highlight important links or features.
+
+<CardGroup cols={2}>
+  <Card title="Installation" icon="Download" href="#">
+    Learn how to install DocuBook.
+  </Card>
+  <Card title="Configuration" icon="Settings" href="#">
+    Configure your documentation site.
+  </Card>
+</CardGroup>
+
+#### Notes
+
+Use notes to provide additional context or warnings.
+
+<Note type="warning" title="Warning">
+  Always remember to back up your configuration files.
+</Note>
+
+<Note type="note" title="Pro Tip">
+  You can use Lucide icons in your cards by specifying the `icon` prop.
+</Note>
+
+For more details on available components, check out the [Components](/docs/components) section.

package/src/dist/docu.json

@@ -21,7 +21,7 @@
   "repository": {
     "url": "https://github.com/DocuBook/docubook",
     "editPathTemplate": "/blob/main/{filePath}",
-    "editLink": true
+    "editLink": false
   },
   "sponsor": {
     "title": "Hosted on",
@@ -63,41 +63,44 @@
       "href": "/getting-started",
       "noLink": true,
       "context": {
-              "icon": "Book",
-              "description": "Set up your Documentation",
-              "title": "Guides"
-              },
-              "items": [
-                      { "title": "Introduction", "href": "/introduction" },
-                      { "title": "Quick Start Guide", "href": "/quick-start-guide" },
-                      { "title": "Development", "href": "/development" }
-              ]
+        "icon": "Book",
+        "description": "Set up your Documentation",
+        "title": "Guides"
       },
-      {
-      "title": "Api Reference",
-      "href": "/api-reference",
+      "items": [
+        { "title": "Introduction", "href": "/introduction" },
+        { "title": "Quick Start Guide", "href": "/quick-start-guide" }
+      ]
+    },
+    {
+      "title": "Components",
+      "href": "/components",
       "noLink": true,
       "context": {
-              "icon": "Terminal",
-              "description": "reference for using the API",
-              "title": "API Reference"
-              },
-              "items": [
-                      { "title": "Get", "href": "/get" },
-                      { "title": "Fetch", "href": "/fetch" },
-                      { "title": "Post", "href": "/post" },
-                      { "title": "Delete", "href": "/delete" }
-              ]
+        "icon": "Layers",
+        "description": "Write with Markdown",
+        "title": "Markdown"
       },
-      {
-      "title": "Changelog",
-      "href": "/changelog",
-      "noLink": true,
-      "context": {
-              "icon": "History",
-              "description": "Update and Changes",
-              "title": "Release"
-              }
-      }
+      "items": [
+        { "title": "Accordion", "href": "/accordion" },
+        { "title": "Accordion Group", "href": "/accordion-group" },
+        { "title": "Button", "href": "/button" },
+        { "title": "Card", "href": "/card" },
+        { "title": "Card Group", "href": "/card-group" },
+        { "title": "Code Block", "href": "/code-block" },
+        { "title": "File Tree", "href": "/file-tree" },
+        { "title": "Image", "href": "/image" },
+        { "title": "Keyboard", "href": "/keyboard" },
+        { "title": "Link", "href": "/link" },
+        { "title": "Note", "href": "/note" },
+        { "title": "Release Note", "href": "/release-note" },
+        { "title": "Stepper", "href": "/stepper" },
+        { "title": "Tabs", "href": "/tabs" },
+        { "title": "Tooltips", "href": "/tooltips" },
+        { "title": "Tables", "href": "/tables" },
+        { "title": "Youtube", "href": "/youtube" },
+        { "title": "Custom", "href": "/custom" }
+      ]
+    }
     ]
 }

package/src/dist/eslint.config.mjs

@@ -1,35 +1,22 @@
-import { defineConfig } from "eslint/config";
 import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
 import nextTypescript from "eslint-config-next/typescript";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
+import tseslint from "typescript-eslint";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
-});
-
-export default defineConfig([{
-    extends: [
-        ...nextCoreWebVitals,
-        ...nextTypescript,
-        ...compat.extends("plugin:@typescript-eslint/recommended")
-    ],
-
-    rules: {
-        "@typescript-eslint/no-explicit-any": "warn",
-
-        "@typescript-eslint/no-unused-vars": ["warn", {
-            argsIgnorePattern: "^_",
-            varsIgnorePattern: "^_",
-            caughtErrorsIgnorePattern: "^_",
-        }],
-
-        "@typescript-eslint/no-empty-object-type": "off",
+export default tseslint.config(
+    js.configs.recommended,
+    ...nextCoreWebVitals,
+    ...nextTypescript,
+    ...tseslint.configs["recommended"],
+    {
+        rules: {
+            "@typescript-eslint/no-explicit-any": "warn",
+            "@typescript-eslint/no-unused-vars": ["warn", {
+                argsIgnorePattern: "^_",
+                varsIgnorePattern: "^_",
+                caughtErrorsIgnorePattern: "^_",
+            }],
+            "@typescript-eslint/no-empty-object-type": "off",
+        },
     },
-}]);
+);

package/src/dist/hooks/useActiveSection.ts

@@ -1,68 +1,70 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
-import { TocItem } from '@/lib/toc';
+"use client"
+
+import { useState, useCallback, useEffect, useRef } from "react"
+import { TocItem } from "@/lib/toc"
 
 export function useActiveSection(tocs: TocItem[]) {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const observerRef = useRef<IntersectionObserver | null>(null);
-  const clickedIdRef = useRef<string | null>(null);
+  const [activeId, setActiveId] = useState<string | null>(null)
+  const observerRef = useRef<IntersectionObserver | null>(null)
+  const clickedIdRef = useRef<string | null>(null)
 
   // Handle intersection observer for active section
   useEffect(() => {
-    if (typeof document === 'undefined' || !tocs.length) return;
+    if (typeof document === "undefined" || !tocs.length) return
 
     const handleIntersect = (entries: IntersectionObserverEntry[]) => {
-      if (clickedIdRef.current) return;
+      if (clickedIdRef.current) return
 
-      const visibleEntries = entries.filter(entry => entry.isIntersecting);
-      if (!visibleEntries.length) return;
+      const visibleEntries = entries.filter((entry) => entry.isIntersecting)
+      if (!visibleEntries.length) return
 
       // Find the most visible entry
       const mostVisibleEntry = visibleEntries.reduce((prev, current) => {
-        return current.intersectionRatio > prev.intersectionRatio ? current : prev;
-      }, visibleEntries[0]);
+        return current.intersectionRatio > prev.intersectionRatio ? current : prev
+      }, visibleEntries[0])
 
-      const newActiveId = mostVisibleEntry.target.id;
+      const newActiveId = mostVisibleEntry.target.id
       if (newActiveId !== activeId) {
-        setActiveId(newActiveId);
+        setActiveId(newActiveId)
       }
-    };
+    }
 
     // Initialize intersection observer
     observerRef.current = new IntersectionObserver(handleIntersect, {
-      root: null,
-      rootMargin: '0px 0px -80% 0px',
-      threshold: 0.1,
-    });
+      root: document.getElementById("scroll-container"),
+      rootMargin: "0px 0px -60% 0px",
+      threshold: 0,
+    })
 
     // Observe all headings
-    tocs.forEach(toc => {
-      const element = document.getElementById(toc.href.slice(1));
+    tocs.forEach((toc) => {
+      const element = document.getElementById(toc.href.slice(1))
       if (element) {
-        observerRef.current?.observe(element);
+        observerRef.current?.observe(element)
       }
-    });
+    })
 
     // Cleanup
     return () => {
-      observerRef.current?.disconnect();
-    };
-  }, [tocs, activeId]);
+      observerRef.current?.disconnect()
+    }
+  }, [tocs, activeId])
 
   const handleLinkClick = useCallback((id: string) => {
-    clickedIdRef.current = id;
-    setActiveId(id);
+    clickedIdRef.current = id
+    setActiveId(id)
 
     // Reset clicked state after scroll completes
     const timer = setTimeout(() => {
-      clickedIdRef.current = null;
-    }, 1000);
+      clickedIdRef.current = null
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  }, []);
+    return () => clearTimeout(timer)
+  }, [])
 
   return {
     activeId,
     setActiveId,
     handleLinkClick,
-  };
+  }
 }

package/src/dist/hooks/useScrollPosition.ts

@@ -1,29 +1,31 @@
-import { useState, useCallback, useEffect } from 'react';
+"use client"
+
+import { useState, useCallback, useEffect } from "react"
 
 export function useScrollPosition(threshold = 0.5) {
-  const [isScrolled, setIsScrolled] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false)
 
   const handleScroll = useCallback(() => {
-    if (typeof window === 'undefined') return;
+    if (typeof window === "undefined") return
 
-    const scrollPosition = window.scrollY;
-    const viewportHeight = window.innerHeight;
-    const shouldBeSticky = scrollPosition > viewportHeight * threshold;
+    const scrollPosition = window.scrollY
+    const viewportHeight = window.innerHeight
+    const shouldBeSticky = scrollPosition > viewportHeight * threshold
 
-    setIsScrolled(prev => shouldBeSticky !== prev ? shouldBeSticky : prev);
-  }, [threshold]);
+    setIsScrolled((prev) => (shouldBeSticky !== prev ? shouldBeSticky : prev))
+  }, [threshold])
 
   // Add scroll event listener
   useEffect(() => {
     // Initial check
     // eslint-disable-next-line react-hooks/set-state-in-effect
-    handleScroll();
+    handleScroll()
 
-    window.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener("scroll", handleScroll, { passive: true })
     return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [handleScroll]);
+      window.removeEventListener("scroll", handleScroll)
+    }
+  }, [handleScroll])
 
-  return isScrolled;
+  return isScrolled
 }

package/src/dist/lib/markdown.ts

@@ -6,7 +6,7 @@ import rehypePrism from "rehype-prism-plus";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeSlug from "rehype-slug";
 import rehypeCodeTitles from "rehype-code-titles";
-import { page_routes, ROUTES } from "./routes-config";
+import { page_routes, ROUTES } from "./routes";
 import { visit } from "unist-util-visit";
 import type { Node, Parent } from "unist";
 import matter from "gray-matter";
@@ -163,17 +163,20 @@ export type BaseMdxFrontmatter = {
 
 export async function getDocsForSlug(slug: string) {
   try {
-    const contentPath = getDocsContentPath(slug);
-    const rawMdx = await fs.readFile(contentPath, "utf-8");
-    return await parseMdx<BaseMdxFrontmatter>(rawMdx);
+    const { content, filePath } = await getRawMdx(slug);
+    const mdx = await parseMdx<BaseMdxFrontmatter>(content);
+    return {
+      ...mdx,
+      filePath,
+    };
   } catch (err) {
     console.log(err);
   }
 }
 
 export async function getDocsTocs(slug: string) {
-  const contentPath = getDocsContentPath(slug);
-  const rawMdx = await fs.readFile(contentPath, "utf-8");
+  const { content } = await getRawMdx(slug);
+  const rawMdx = content;
 
   // Regex to match code blocks (```...```), standard markdown headings (##), and <Release> tags
   const combinedRegex = /(```[\s\S]*?```)|^(#{2,4})\s(.+)$|<Release[^>]*version="([^"]+)"/gm;
@@ -222,8 +225,26 @@ function sluggify(text: string) {
   return slug.replace(/[^a-z0-9-]/g, "");
 }
 
-function getDocsContentPath(slug: string) {
-  return path.join(process.cwd(), "/docs/", `${slug}/index.mdx`);
+async function getRawMdx(slug: string) {
+  const commonPath = path.join(process.cwd(), "/docs/");
+  const paths = [
+    path.join(commonPath, `${slug}.mdx`),
+    path.join(commonPath, slug, "index.mdx"),
+  ];
+
+  for (const p of paths) {
+    try {
+      const content = await fs.readFile(p, "utf-8");
+      return {
+        content,
+        filePath: `docs/${path.relative(commonPath, p)}`,
+      };
+    } catch {
+      // ignore and try next
+    }
+  }
+
+  throw new Error(`Could not find mdx file for slug: ${slug}`);
 }
 
 function justGetFrontmatterFromMD<Frontmatter>(rawMd: string): Frontmatter {
@@ -245,16 +266,10 @@ export async function getAllChilds(pathString: string) {
 
   return await Promise.all(
     page_routes_copy.map(async (it) => {
-      const totalPath = path.join(
-        process.cwd(),
-        "/docs/",
-        prevHref,
-        it.href,
-        "index.mdx"
-      );
-      const raw = await fs.readFile(totalPath, "utf-8");
+      const slug = path.join(prevHref, it.href);
+      const { content } = await getRawMdx(slug);
       return {
-        ...justGetFrontmatterFromMD<BaseMdxFrontmatter>(raw),
+        ...justGetFrontmatterFromMD<BaseMdxFrontmatter>(content),
         href: `/docs${prevHref}${it.href}`,
       };
     })

package/src/dist/lib/utils.ts

@@ -1,6 +1,6 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { EachRoute, ROUTES } from "./routes-config";
+import { EachRoute, ROUTES } from "./routes";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));

package/src/dist/next.config.mjs

@@ -1,14 +1,13 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "**",
-      },
-    ],
-  },
-};
-
-export default nextConfig;
+    images: {
+        remotePatterns: [
+            {
+                protocol: "https",
+                hostname: "**",
+            },
+        ],
+    },
+}
 
+export default nextConfig

package/src/dist/package.json

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