@docubook/create 1.9.1 → 1.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/README.md +1 -3
  2. package/package.json +4 -5
  3. package/src/cli/program.js +32 -0
  4. package/src/cli/promptHandler.js +73 -0
  5. package/src/dist/LICENSE +21 -0
  6. package/src/dist/README.md +37 -0
  7. package/src/dist/app/docs/[[...slug]]/page.tsx +105 -0
  8. package/src/dist/app/docs/layout.tsx +16 -0
  9. package/src/dist/app/error.tsx +44 -0
  10. package/src/dist/app/layout.tsx +96 -0
  11. package/src/dist/app/not-found.tsx +19 -0
  12. package/src/dist/app/page.tsx +96 -0
  13. package/src/dist/components/GithubStart.tsx +44 -0
  14. package/src/dist/components/Sponsor.tsx +69 -0
  15. package/src/dist/components/anchor.tsx +84 -0
  16. package/src/dist/components/contexts/theme-provider.tsx +9 -0
  17. package/src/dist/components/docs-breadcrumb.tsx +47 -0
  18. package/src/dist/components/docs-menu.tsx +45 -0
  19. package/src/dist/components/edit-on-github.tsx +33 -0
  20. package/src/dist/components/footer.tsx +85 -0
  21. package/src/dist/components/leftbar.tsx +95 -0
  22. package/src/dist/components/markdown/AccordionMdx.tsx +47 -0
  23. package/src/dist/components/markdown/ButtonMdx.tsx +52 -0
  24. package/src/dist/components/markdown/CardGroupMdx.tsx +28 -0
  25. package/src/dist/components/markdown/CardMdx.tsx +41 -0
  26. package/src/dist/components/markdown/CopyMdx.tsx +33 -0
  27. package/src/dist/components/markdown/ImageMdx.tsx +25 -0
  28. package/src/dist/components/markdown/KeyboardMdx.tsx +102 -0
  29. package/src/dist/components/markdown/LinkMdx.tsx +14 -0
  30. package/src/dist/components/markdown/NoteMdx.tsx +52 -0
  31. package/src/dist/components/markdown/OutletMdx.tsx +29 -0
  32. package/src/dist/components/markdown/PreMdx.tsx +19 -0
  33. package/src/dist/components/markdown/ReleaseMdx.tsx +109 -0
  34. package/src/dist/components/markdown/StepperMdx.tsx +41 -0
  35. package/src/dist/components/markdown/TooltipsMdx.tsx +28 -0
  36. package/src/dist/components/markdown/YoutubeMdx.tsx +22 -0
  37. package/src/dist/components/markdown/mdx-provider.tsx +29 -0
  38. package/src/dist/components/mob-toc.tsx +128 -0
  39. package/src/dist/components/navbar.tsx +87 -0
  40. package/src/dist/components/pagination.tsx +49 -0
  41. package/src/dist/components/scroll-to-top.tsx +86 -0
  42. package/src/dist/components/search.tsx +214 -0
  43. package/src/dist/components/sublink.tsx +133 -0
  44. package/src/dist/components/theme-toggle.tsx +71 -0
  45. package/src/dist/components/toc-observer.tsx +264 -0
  46. package/src/dist/components/toc.tsx +27 -0
  47. package/src/dist/components/typography.tsx +9 -0
  48. package/src/dist/components/ui/accordion.tsx +58 -0
  49. package/src/dist/components/ui/animated-shiny-text.tsx +40 -0
  50. package/src/dist/components/ui/aurora.tsx +45 -0
  51. package/src/dist/components/ui/avatar.tsx +50 -0
  52. package/src/dist/components/ui/badge.tsx +37 -0
  53. package/src/dist/components/ui/breadcrumb.tsx +115 -0
  54. package/src/dist/components/ui/button.tsx +57 -0
  55. package/src/dist/components/ui/card.tsx +76 -0
  56. package/src/dist/components/ui/collapsible.tsx +11 -0
  57. package/src/dist/components/ui/command.tsx +153 -0
  58. package/src/dist/components/ui/dialog.tsx +124 -0
  59. package/src/dist/components/ui/dropdown-menu.tsx +200 -0
  60. package/src/dist/components/ui/icon-cloud.tsx +324 -0
  61. package/src/dist/components/ui/input.tsx +25 -0
  62. package/src/dist/components/ui/interactive-hover-button.tsx +35 -0
  63. package/src/dist/components/ui/popover.tsx +33 -0
  64. package/src/dist/components/ui/scroll-area.tsx +48 -0
  65. package/src/dist/components/ui/separator.tsx +30 -0
  66. package/src/dist/components/ui/sheet.tsx +140 -0
  67. package/src/dist/components/ui/shine-border.tsx +64 -0
  68. package/src/dist/components/ui/skeleton.tsx +15 -0
  69. package/src/dist/components/ui/sonner.tsx +31 -0
  70. package/src/dist/components/ui/table.tsx +117 -0
  71. package/src/dist/components/ui/tabs.tsx +55 -0
  72. package/src/dist/components/ui/toggle-group.tsx +61 -0
  73. package/src/dist/components/ui/toggle.tsx +46 -0
  74. package/src/dist/components.json +17 -0
  75. package/src/dist/contents/docs/getting-started/changelog/index.mdx +512 -0
  76. package/src/dist/contents/docs/getting-started/components/accordion/index.mdx +72 -0
  77. package/src/dist/contents/docs/getting-started/components/button/index.mdx +42 -0
  78. package/src/dist/contents/docs/getting-started/components/card/index.mdx +70 -0
  79. package/src/dist/contents/docs/getting-started/components/card-group/index.mdx +49 -0
  80. package/src/dist/contents/docs/getting-started/components/code-block/index.mdx +41 -0
  81. package/src/dist/contents/docs/getting-started/components/custom/index.mdx +38 -0
  82. package/src/dist/contents/docs/getting-started/components/image/index.mdx +37 -0
  83. package/src/dist/contents/docs/getting-started/components/index.mdx +9 -0
  84. package/src/dist/contents/docs/getting-started/components/keyboard/index.mdx +117 -0
  85. package/src/dist/contents/docs/getting-started/components/link/index.mdx +34 -0
  86. package/src/dist/contents/docs/getting-started/components/note/index.mdx +46 -0
  87. package/src/dist/contents/docs/getting-started/components/release-note/index.mdx +130 -0
  88. package/src/dist/contents/docs/getting-started/components/stepper/index.mdx +47 -0
  89. package/src/dist/contents/docs/getting-started/components/tabs/index.mdx +70 -0
  90. package/src/dist/contents/docs/getting-started/components/tooltips/index.mdx +22 -0
  91. package/src/dist/contents/docs/getting-started/components/youtube/index.mdx +21 -0
  92. package/src/dist/contents/docs/getting-started/customize/index.mdx +94 -0
  93. package/src/dist/contents/docs/getting-started/installation/index.mdx +84 -0
  94. package/src/dist/contents/docs/getting-started/introduction/index.mdx +50 -0
  95. package/src/dist/contents/docs/getting-started/project-structure/index.mdx +87 -0
  96. package/src/dist/contents/docs/getting-started/quick-start-guide/index.mdx +127 -0
  97. package/src/dist/docu.json +100 -0
  98. package/src/dist/hooks/index.ts +2 -0
  99. package/src/dist/hooks/useActiveSection.ts +68 -0
  100. package/src/dist/hooks/useScrollPosition.ts +28 -0
  101. package/src/dist/lib/markdown.ts +244 -0
  102. package/src/dist/lib/routes-config.ts +28 -0
  103. package/src/dist/lib/toc.ts +9 -0
  104. package/src/dist/lib/utils.ts +80 -0
  105. package/src/dist/next-env.d.ts +5 -0
  106. package/src/dist/next.config.mjs +14 -0
  107. package/src/dist/package.json +58 -0
  108. package/src/dist/postcss.config.js +6 -0
  109. package/src/dist/public/favicon.ico +0 -0
  110. package/src/dist/public/images/docu.svg +6 -0
  111. package/src/dist/public/images/example-img.png +0 -0
  112. package/src/dist/public/images/img-playground.png +0 -0
  113. package/src/dist/public/images/new-editor.png +0 -0
  114. package/src/dist/public/images/og-image.png +0 -0
  115. package/src/dist/public/images/release-note.png +0 -0
  116. package/src/dist/public/images/snippet.png +0 -0
  117. package/src/dist/public/images/vercel.png +0 -0
  118. package/src/dist/public/images/view-changelog.png +0 -0
  119. package/src/dist/styles/editor.css +57 -0
  120. package/src/dist/styles/globals.css +156 -0
  121. package/src/dist/styles/syntax.css +100 -0
  122. package/src/dist/tailwind.config.ts +112 -0
  123. package/src/dist/tsconfig.json +26 -0
  124. package/src/index.js +19 -0
  125. package/src/installer/projectInstaller.js +125 -0
  126. package/src/utils/display.js +83 -0
  127. package/src/utils/logger.js +11 -0
  128. package/src/utils/packageManager.js +54 -0
  129. package/create.js +0 -211
package/src/dist/contents/docs/getting-started/customize/index.mdx ADDED
@@ -0,0 +1,94 @@
1
+ ---
2
+ title: Customize
3
+ description: This guide provides instructions on customizing our application.
4
+ date: 29-11-2024
5
+ ---
6
+
7
+ ## Markdown Options
8
+
9
+ 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:
10
+
11
+ ```ts:lib/markdown.ts
12
+ async function parseMdx<Frontmatter>(rawMdx: string) {
13
+ return await compileMDX<Frontmatter>({
14
+ source: rawMdx,
15
+ options: {
16
+ parseFrontmatter: true,
17
+ mdxOptions: {
18
+ // Add your plugins here
19
+ rehypePlugins: [Shiki],
20
+ remarkPlugins: [remarkGfm],
21
+ },
22
+ },
23
+ components,
24
+ });
25
+ }
26
+ ```
27
+
28
+ ## Fonts
29
+
30
+ 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:
31
+
32
+ ### Google Fonts
33
+
34
+ To use a Google font, import your desired font from `next/font/google`, initialize it with options, and apply the variable to the `body`:
35
+
36
+ ```tsx:app/layout.tsx
37
+ import { Space_Grotesk } from "next/font/google";
38
+
39
+ const fontSans = Space_Grotesk({
40
+ display: "swap",
41
+ variable: "--font-regular",
42
+ weight: "400",
43
+ subsets: ["latin"],
44
+ });
45
+
46
+ export default function RootLayout({ children }) {
47
+ return (
48
+ <html lang="en">
49
+ <body className={`${fontSans.variable} font-regular`}>
50
+ {children}
51
+ </body>
52
+ </html>
53
+ );
54
+ }
55
+ ```
56
+
57
+ ### Local Fonts
58
+
59
+ 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`:
60
+
61
+ ```tsx:app/layout.tsx
62
+ import localFont from "next/font/local";
63
+
64
+ const geistSans = localFont({
65
+ src: "./fonts/GeistVF.woff",
66
+ variable: "--font-regular",
67
+ weight: "100 900",
68
+ });
69
+
70
+ export default function RootLayout({ children }) {
71
+ return (
72
+ <html lang="en">
73
+ <body className={`${geistSans.variable} font-regular`}>
74
+ {children}
75
+ </body>
76
+ </html>
77
+ );
78
+ }
79
+ ```
80
+
81
+ For both options, ensure that you add the variable to `tailwind.config.ts`:
82
+
83
+ ```ts:tailwind.config.ts
84
+ {
85
+ // ...
86
+ extend: {
87
+ fontFamily: {
88
+ regular: ["var(--font-regular)"],
89
+ },
90
+ }
91
+ }
92
+ ```
93
+
94
+ For theme and colors, refer to the [Theme section](/docs/getting-started/themes)
package/src/dist/contents/docs/getting-started/installation/index.mdx ADDED
@@ -0,0 +1,84 @@
1
+ ---
2
+ title: Installation
3
+ description: Installation guide for our application.
4
+ date: 17-02-2025
5
+ ---
6
+
7
+ 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.
8
+
9
+ ## Clone Repository
10
+
11
+ To get started, you can clone the DocuBook repository directly from GitHub.
12
+
13
+ <Stepper>
14
+ <StepperItem title="Step 1: Clone the DocuBook Repository">
15
+ Begin by cloning the DocuBook repository from GitHub:
16
+
17
+ ```bash
18
+ git clone --branch starter https://gitlab.com/mywildancloud/docubook.git
19
+ ```
20
+
21
+ </StepperItem>
22
+
23
+ <StepperItem title="Step 2: Access the Project Directory">
24
+ After cloning, navigate into the project directory to start setting up:
25
+
26
+ ```bash
27
+ cd docubook
28
+ ```
29
+
30
+ </StepperItem>
31
+
32
+ <StepperItem title="Step 3: Install Required Dependencies">
33
+ Install all necessary project dependencies with npm:
34
+
35
+ ```bash
36
+ npm install
37
+ ```
38
+
39
+ </StepperItem>
40
+
41
+ <StepperItem title="Step 4: Launch the Development Server">
42
+ Finally, start the development server to view the project locally:
43
+
44
+ ```bash
45
+ npm run dev
46
+ ```
47
+
48
+ </StepperItem>
49
+ </Stepper>
50
+
51
+ ## Quick Setup with CLI
52
+
53
+ For a faster setup, use the `cli` command to create a new DocuBook project in one step:
54
+
55
+ <Tabs defaultValue="npm" className="pt-5 pb-1">
56
+ <TabsList>
57
+ <TabsTrigger value="npm">npm</TabsTrigger>
58
+ <TabsTrigger value="pnpm">pnpm</TabsTrigger>
59
+ <TabsTrigger value="bun">bun</TabsTrigger>
60
+ <TabsTrigger value="yarn">yarn</TabsTrigger>
61
+ </TabsList>
62
+ <TabsContent value="npm">
63
+ ```shell
64
+ npx @docubook/create@latest
65
+ ```
66
+ </TabsContent>
67
+ <TabsContent value="pnpm">
68
+ ```shell
69
+ pnpm dlx @docubook/create@latest
70
+ ```
71
+ </TabsContent>
72
+ <TabsContent value="bun">
73
+ ```shell
74
+ bunx @docubook/create@latest
75
+ ```
76
+ </TabsContent>
77
+ <TabsContent value="yarn">
78
+ ```shell
79
+ yarn dlx @docubook/create@latest
80
+ ```
81
+ </TabsContent>
82
+ </Tabs>
83
+
84
+ With this setup, you’ll have a ready-to-use DocuBook instance to start building your documentation.
package/src/dist/contents/docs/getting-started/introduction/index.mdx ADDED
@@ -0,0 +1,50 @@
1
+ ---
2
+ title: Introduction
3
+ description: This section provides an overview of DocuBook.
4
+ date: 29-11-2024
5
+ image: example-img.png
6
+ ---
7
+
8
+ Welcome to **DocuBook**! This template provides a modern, flexible, and user-friendly foundation for creating engaging documentation. Whether you're building a knowledge base, project docs, or a personal blog, DocuBook makes it easy to set up and scale.
9
+
10
+ ## Open Source Philosophy
11
+
12
+ DocuBook is proudly **open-source**! 🎉 We believe in creating an accessible, collaborative platform that thrives on community contributions.
13
+
14
+ <Note title="Contribute">
15
+ Interested in helping us improve? Check out our [GitHub
16
+ repository](https://github.com/gitfromwildan/docubook) to get started! From
17
+ feature suggestions to bug fixes, all contributions are welcome.
18
+ </Note>
19
+
20
+ ## Project Overview
21
+
22
+ **DocuBook** is more than just a documentation template. It's a **complete toolkit** designed for modern web development. Key features include:
23
+
24
+ - **Markdown & MDX Support:** Easily write documentation in Markdown, with the option to include interactive components via MDX.
25
+ - **Customizable Themes:** Designed with a minimalist ShadCN-inspired theme that’s easy to style.
26
+ - **SEO-Optimized:** Each page is SEO-ready, ensuring search engines can find and rank your content.
27
+ - **Interactive Code Blocks:** Beautifully styled, language-specific code blocks for an enhanced reading experience.
28
+
29
+ ### Key Features
30
+
31
+ | **Feature** | **Description** |
32
+ | ------------------------------- | ----------------------------------------------------- |
33
+ | MDX Support | Write interactive documentation with MDX. |
34
+ | Nested Pages | Organize content in a nested, hierarchical structure. |
35
+ | Pagination | Split content across multiple pages. |
36
+ | Syntax Highlighting | Highlight code for better readability. |
37
+ | Code Line Highlighting & Titles | Highlight specific lines with descriptive titles. |
38
+ | Interactive Code Blocks | Language-specific and interactive code display. |
39
+ | Custom Markdown Components | Embed custom, reusable components in your docs. |
40
+ | Static Site Generation | Generate a static, high-performance site. |
41
+ | SEO-Optimized | Structured for optimal search engine indexing. |
42
+
43
+ ## Technology & Libraries
44
+
45
+ DocuBook leverages cutting-edge technologies to ensure performance and flexibility:
46
+
47
+ - **Next.js 14** - The powerful React framework optimized for production.
48
+ - **Tailwind CSS** - Utility-first styling for quick, clean designs.
49
+ - **Shadcn-UI** - Elegant, accessible components for a polished look.
50
+ - **next-mdx-remote** - Enables MDX support for dynamic, interactive Markdown content.
package/src/dist/contents/docs/getting-started/project-structure/index.mdx ADDED
@@ -0,0 +1,87 @@
1
+ ---
2
+ title: Project Structure
3
+ description: This section provides an overview of Project Structure.
4
+ date: 29-11-2024
5
+ ---
6
+
7
+ ## app
8
+
9
+ 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` and `blog` sections, with dedicated pages and layouts for each section.
10
+
11
+ ```
12
+ app // Main Next.js application folder
13
+ ├── page.tsx // Hero page - the entry point of the app showcasing key content
14
+ ├── layout.tsx // Main layout file, applies global navigation and footer
15
+ └── docs
16
+ ├── layout.tsx // Documentation layout with sidebar, providing easy navigation across doc pages
17
+ └── [[...slug]] // Catch-all route to handle nested documentation pages, allowing flexible doc structure
18
+ ```
19
+
20
+ ## components
21
+
22
+ 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.
23
+
24
+ ```
25
+ components // Reusable components
26
+ ├── ui // ShadCN components, includes standardized UI elements like buttons, forms, and modals
27
+ ├── markdown // Custom Markdown components for rendering rich Markdown content
28
+ │ ├── CodeBlock.tsx // Component for rendering syntax-highlighted code blocks
29
+ │ ├── Image.tsx // Component for handling responsive images in Markdown
30
+ │ └── Table.tsx // Component to render tables with consistent styling
31
+ └── navbar.tsx // Main navigation component for the site header, managing links and responsive behavior
32
+ ```
33
+
34
+ ## styles
35
+
36
+ This folder contains global and component-specific CSS files, allowing for project-wide styling consistency and customizations.
37
+
38
+ ```
39
+ styles // CSS files
40
+ ├── globals.css // Global CSS file, includes Tailwind base, utilities, and custom global styles
41
+ ├── syntax.css // Syntax highlighting styles, providing consistent code block appearance across the site
42
+ └── overrides.css // Additional custom styles that override specific component or plugin defaults
43
+ ```
44
+
45
+ ## contents
46
+
47
+ 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.
48
+
49
+ ```
50
+ contents // Markdown content for blogs and documentation
51
+ ├── docs // Documentation content, structured to support nested sections and pages
52
+ │ ├── getting-started // Main Folder at the Contents
53
+ │ └─── installation // Subfolder for tutorial-style content
54
+ | └── index.mdx // Step-by-step tutorial on a specific topic
55
+ ```
56
+
57
+ ## public
58
+
59
+ 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.
60
+
61
+ ```
62
+ public // Publicly accessible assets
63
+ ├── images // Image assets, used across various parts of the app
64
+ │ ├── og-image.png // Default opengraph image for thumbnail
65
+ │ └── docu.svg // Your site Logo
66
+ ├── favicon.ico // Favicon for the app
67
+ └── videos // Video files for media content, if any
68
+ ```
69
+
70
+ ## lib
71
+
72
+ 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.
73
+
74
+ ```
75
+ lib // Utility or helper functions
76
+ ├── changelog.ts // Change log for the app, used to display recent changes and updates
77
+ ├── markdown.ts // Markdown parsing logic, converts Markdown to HTML and adds custom components
78
+ ├── routes-config.ts // Routing configuration for docs, maps URLs to content files for dynamic routing
79
+ └── utils.tsx // General utility functions used across the app, such as data formatting and validation helpers
80
+ ```
81
+
82
+ ## Additional
83
+
84
+ - **`package.json`**: Contains metadata about the project, dependencies, and scripts for building and running the application.
85
+ - **`tailwind.config.ts`**: Configures Tailwind CSS, allowing customization of theme colors, fonts, and responsive breakpoints specific to this project.
86
+
87
+ 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.
package/src/dist/contents/docs/getting-started/quick-start-guide/index.mdx ADDED
@@ -0,0 +1,127 @@
1
+ ---
2
+ title: Quick Start Guide
3
+ description: Get up and running with DocuBook in minutes with this comprehensive guide
4
+ date: 20-05-2025
5
+ ---
6
+
7
+ Welcome to DocuBook! This guide will help you set up your documentation site quickly and efficiently.
8
+
9
+ ## Prerequisites
10
+
11
+ Before we begin, make sure you have the following installed:
12
+
13
+ - [Git](https://git-scm.com/)
14
+ - [Node.js 18+](https://nodejs.org/) or [Bun 1.0+](https://bun.sh/)
15
+ - A package manager (npm, yarn, or pnpm)
16
+
17
+ ## Installation
18
+
19
+ <Note type="note" title="Note">
20
+ Follow the instructions on the [installation page](/docs/getting-started/installation) to install the required dependencies and set up your project.
21
+ </Note>
22
+
23
+ ## Project Setup
24
+
25
+ ### Customize Branding
26
+
27
+ <Stepper>
28
+ <StepperItem title="Step 1: Add Favicon">
29
+ Place your favicon at `public/favicon.ico`
30
+ </StepperItem>
31
+ <StepperItem title="Step 2: Add Logo">
32
+ Place your logo at `public/images/docu.svg` (SVG format recommended)
33
+ </StepperItem>
34
+ <StepperItem title="Step 3: Update Site Info">
35
+ Edit `docu.json` to update site name, description, and other settings
36
+ </StepperItem>
37
+ </Stepper>
38
+
39
+ ## Creating Content
40
+
41
+ ### File Structure
42
+
43
+ DocuBook uses the following structure:
44
+
45
+ ````plaintext
46
+ contents/
47
+ docs/
48
+ getting-started/
49
+ quick-start-guide/ <-- You are here
50
+ index.mdx
51
+ guides/
52
+ components/
53
+ index.mdx
54
+ ````
55
+
56
+ ### Adding New Pages
57
+
58
+ <Stepper>
59
+ <StepperItem title="Step 1: Create a New Folder">
60
+ Create a new folder in `contents/docs/getting-started/` for your content section
61
+ ```bash
62
+ mkdir -p contents/docs/getting-started/your-page-title
63
+ ```
64
+ </StepperItem>
65
+ <StepperItem title="Step 2: Add MDX File">
66
+ Create an `index.mdx` file with frontmatter:
67
+ ````markdown
68
+ ---
69
+ title: Your Page Title
70
+ description: Brief description of your page
71
+ date: 20-05-2025
72
+ ---
73
+
74
+ # Your Content Here
75
+
76
+ Start writing your documentation using Markdown or MDX components.
77
+ ````
78
+ </StepperItem>
79
+ <StepperItem title="Step 3: Add to Navigation">
80
+ Update the navigation in `docu.json`:
81
+ ```json:docu.json showLineNumbers {8}
82
+ {
83
+ "routes": [
84
+ {
85
+ "title": "Getting Started",
86
+ "href": "/getting-started",
87
+ "noLink": true,
88
+ "items": [
89
+ { "title": "Your Page Title", "href": "/your-page-title" } // Add your page here separated by comma `,`
90
+ ]
91
+ }
92
+ ]
93
+ }
94
+ ```
95
+ </StepperItem>
96
+ </Stepper>
97
+
98
+ ## Development
99
+
100
+ Start the development server:
101
+
102
+ ```bash
103
+ npm run dev
104
+ # or
105
+ bun dev
106
+ ```
107
+
108
+ Visit [http://localhost:3000](http://localhost:3000) to see your site.
109
+
110
+ ## Building for Production
111
+
112
+ When you're ready to deploy:
113
+
114
+ ```bash
115
+ npm run build
116
+ npm start
117
+ ```
118
+
119
+ ## Need Help?
120
+
121
+ <Note type="info">
122
+ Check out the [Components Guide](/docs/getting-started/components) to learn about all available components.
123
+ </Note>
124
+
125
+ <Note type="warning">
126
+ Make sure to commit your changes to version control before deploying.
127
+ </Note>
package/src/dist/docu.json ADDED
@@ -0,0 +1,100 @@
1
+ {
2
+ "navbar": {
3
+ "logo": {
4
+ "src": "/images/docu.svg",
5
+ "alt": "DocuBook Logo"
6
+ },
7
+ "logoText": "DocuBook",
8
+ "menu": [
9
+ { "title": "Home", "href": "/" },
10
+ { "title": "Docs", "href": "/docs/getting-started/introduction" },
11
+ { "title": "Community", "href": "https://docubook.pro" }
12
+ ]
13
+ },
14
+ "footer": {
15
+ "copyright": "DocuBook",
16
+ "social": [
17
+ {
18
+ "name": "Gitlab",
19
+ "url": "https://gitlab.com/mywildancloud",
20
+ "iconName": "GitlabIcon"
21
+ },
22
+ {
23
+ "name": "Instagram",
24
+ "url": "https://www.instagram.com/wildan.nrs",
25
+ "iconName": "InstagramIcon"
26
+ },
27
+ {
28
+ "name": "Facebook",
29
+ "url": "https://www.facebook.com/wildan.nrsh",
30
+ "iconName": "FacebookIcon"
31
+ },
32
+ {
33
+ "name": "Twitter",
34
+ "url": "https://x.com/wildan_nrss",
35
+ "iconName": "TwitterIcon"
36
+ },
37
+ {
38
+ "name": "Youtube",
39
+ "url": "https://www.youtube.com/@wildan.nrs_",
40
+ "iconName": "YoutubeIcon"
41
+ }
42
+ ]
43
+ },
44
+ "meta": {
45
+ "baseURL": "https://docubook.pro",
46
+ "title": "DocuBook",
47
+ "description": "DocuBook is a modern documentation platform for building, deploying, and managing your docs with ease.",
48
+ "favicon": "/favicon.ico"
49
+ },
50
+ "repository": {
51
+ "url": "https://github.com/DocuBook/docubook",
52
+ "editPathTemplate": "/blob/main/{filePath}",
53
+ "editLink": true
54
+ },
55
+ "sponsor": {
56
+ "title": "Hosted on",
57
+ "item": {
58
+ "title": "Vercel",
59
+ "description": "Deploy your DocuBook app with zero configuration.",
60
+ "image": "/images/vercel.png",
61
+ "url": "https://vercel.com/import/project?template=https://github.com/DocuBook/docubook"
62
+ }
63
+ },
64
+ "routes": [
65
+ {
66
+ "title": "Getting Started",
67
+ "href": "/getting-started",
68
+ "noLink": true,
69
+ "items": [
70
+ { "title": "Introduction", "href": "/introduction" },
71
+ { "title": "Installation", "href": "/installation" },
72
+ { "title": "Quick Start Guide", "href": "/quick-start-guide" },
73
+ { "title": "Project Structure", "href": "/project-structure" },
74
+ {
75
+ "title": "Components",
76
+ "href": "/components",
77
+ "items": [
78
+ { "title": "Accordion", "href": "/accordion" },
79
+ { "title": "Button", "href": "/button" },
80
+ { "title": "Card", "href": "/card" },
81
+ { "title": "Card Group", "href": "/card-group" },
82
+ { "title": "Code Block", "href": "/code-block" },
83
+ { "title": "Image", "href": "/image" },
84
+ { "title": "Keyboard", "href": "/keyboard" },
85
+ { "title": "Link", "href": "/link" },
86
+ { "title": "Note", "href": "/note" },
87
+ { "title": "Release Note", "href": "/release-note" },
88
+ { "title": "Stepper", "href": "/stepper" },
89
+ { "title": "Tabs", "href": "/tabs" },
90
+ { "title": "Tooltips", "href": "/tooltips" },
91
+ { "title": "Youtube", "href": "/youtube" },
92
+ { "title": "Custom", "href": "/custom" }
93
+ ]
94
+ },
95
+ { "title": "Customize", "href": "/customize" },
96
+ { "title": "Changelog", "href": "/changelog" }
97
+ ]
98
+ }
99
+ ]
100
+ }
package/src/dist/hooks/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './useScrollPosition';
2
+ export * from './useActiveSection';
package/src/dist/hooks/useActiveSection.ts ADDED
@@ -0,0 +1,68 @@
1
+ import { useState, useCallback, useEffect, useRef } from 'react';
2
+ import { TocItem } from '@/lib/toc';
3
+
4
+ export function useActiveSection(tocs: TocItem[]) {
5
+ const [activeId, setActiveId] = useState<string | null>(null);
6
+ const observerRef = useRef<IntersectionObserver | null>(null);
7
+ const clickedIdRef = useRef<string | null>(null);
8
+
9
+ // Handle intersection observer for active section
10
+ useEffect(() => {
11
+ if (typeof document === 'undefined' || !tocs.length) return;
12
+
13
+ const handleIntersect = (entries: IntersectionObserverEntry[]) => {
14
+ if (clickedIdRef.current) return;
15
+
16
+ const visibleEntries = entries.filter(entry => entry.isIntersecting);
17
+ if (!visibleEntries.length) return;
18
+
19
+ // Find the most visible entry
20
+ const mostVisibleEntry = visibleEntries.reduce((prev, current) => {
21
+ return current.intersectionRatio > prev.intersectionRatio ? current : prev;
22
+ }, visibleEntries[0]);
23
+
24
+ const newActiveId = mostVisibleEntry.target.id;
25
+ if (newActiveId !== activeId) {
26
+ setActiveId(newActiveId);
27
+ }
28
+ };
29
+
30
+ // Initialize intersection observer
31
+ observerRef.current = new IntersectionObserver(handleIntersect, {
32
+ root: null,
33
+ rootMargin: '0px 0px -80% 0px',
34
+ threshold: 0.1,
35
+ });
36
+
37
+ // Observe all headings
38
+ tocs.forEach(toc => {
39
+ const element = document.getElementById(toc.href.slice(1));
40
+ if (element) {
41
+ observerRef.current?.observe(element);
42
+ }
43
+ });
44
+
45
+ // Cleanup
46
+ return () => {
47
+ observerRef.current?.disconnect();
48
+ };
49
+ }, [tocs, activeId]);
50
+
51
+ const handleLinkClick = useCallback((id: string) => {
52
+ clickedIdRef.current = id;
53
+ setActiveId(id);
54
+
55
+ // Reset clicked state after scroll completes
56
+ const timer = setTimeout(() => {
57
+ clickedIdRef.current = null;
58
+ }, 1000);
59
+
60
+ return () => clearTimeout(timer);
61
+ }, []);
62
+
63
+ return {
64
+ activeId,
65
+ setActiveId,
66
+ handleLinkClick,
67
+ };
68
+ }
package/src/dist/hooks/useScrollPosition.ts ADDED
@@ -0,0 +1,28 @@
1
+ import { useState, useCallback, useEffect } from 'react';
2
+
3
+ export function useScrollPosition(threshold = 0.5) {
4
+ const [isScrolled, setIsScrolled] = useState(false);
5
+
6
+ const handleScroll = useCallback(() => {
7
+ if (typeof window === 'undefined') return;
8
+
9
+ const scrollPosition = window.scrollY;
10
+ const viewportHeight = window.innerHeight;
11
+ const shouldBeSticky = scrollPosition > viewportHeight * threshold;
12
+
13
+ setIsScrolled(prev => shouldBeSticky !== prev ? shouldBeSticky : prev);
14
+ }, [threshold]);
15
+
16
+ // Add scroll event listener
17
+ useEffect(() => {
18
+ // Initial check
19
+ handleScroll();
20
+
21
+ window.addEventListener('scroll', handleScroll, { passive: true });
22
+ return () => {
23
+ window.removeEventListener('scroll', handleScroll);
24
+ };
25
+ }, [handleScroll]);
26
+
27
+ return isScrolled;
28
+ }