dwindown/woonoow-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v.1.13.0 add: context menu

Browse Source
This commit is contained in:
gitfromwildan
2025-05-29 19:16:34 +07:00
parent 36242e6942
commit d9ce3893e6
29 changed files with 340 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

550
contents/docs/getting-started/changelog/index.mdx
View File

@@ -1,550 +0,0 @@
---
title: Changelog
description: List of latest changes and updates on DocuBook
date: 24-05-2025
---
## Version History
> This changelog contains a list of all the changes made to the DocuBook template. It will be updated with each new release and will include information about new features, bug fixes, and other improvements.
<div className="sr-only">
### v 1.12.0
</div>
<Release version="1.12.0" date="2025-05-28" title="New File Tree Component and enhancements for existing components or features">
<Changes type="added">
- New FileTree component for displaying hierarchical file structures
- Support for nested folders and files with expand/collapse functionality
- Hover effects showing file extensions
- Dark mode support with modern styling
- Keyboard navigation and accessibility features
- add toc-observer data attribute to detect toc section
- cli to copy from path npm registry
</Changes>
<Changes type="improved">
- search dialog hover effect return key
- search icon showing on mobile screens
</Changes>
<Changes type="fixed">
- fix search dialog on mobile screens
- fix release note component eslint error on mdx when rendering
- fix mob-toc callback function
- fix toc height issue when toc section is longer than screen height
</Changes>
<Changes type="removed">
- remove prompts depedencies
- remove degit depedencies
- remove prompts functions
- remove degit functions
- remove prompts and degit from package.json
- remove clone repository using git
</Changes>
</Release>
<Note type="note" title="Note">
on this version `1.12.0`, we remove clone repository using git and replace it with cli to copy from path npm registry
</Note>
<div className="sr-only">
### v 1.11.0
</div>
<Release version="1.11.0" date="2025-05-25" title="New Release Note components support multiple products or multiple changelogs">
<Changes type="added">
- New ReleaseNote component for structured changelog display
- Added support for categorized changes (added, fixed, improved, deprecated, removed)
- Integrated Lucide icons for better visual hierarchy
- Support for multiple release notes
</Changes>
<Changes type="improved">
- Enhanced documentation with comprehensive usage examples
- Better component organization and styling
- Semantic versioning support
- Nested release notes support
</Changes>
<Changes type="removed">
- Removed old changelog page in favor of the new ReleaseMdx component
- Removed changelog.md
- Removed changelog/page.tsx
- Removed changelog.ts
- Removed components/changelog
</Changes>
</Release>
<div className="sr-only">
### v 1.10.1
</div>
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
<Changes type="fixed">
- Added missing DialogDescription components for better accessibility
- Fixed image aspect ratio issues in navbar logo
- Resolved console warnings for missing image sizes
- Improved keyboard navigation in search component
- Fixed mobile layout for search result items
</Changes>
<Changes type="improved">
- Added proper ARIA labels for screen readers
- Enhanced focus management in dialogs
- Optimized image loading with proper sizing attributes
- Better mobile experience with responsive design fixes
</Changes>
<Changes type="removed">
- Remove blog page
- Remove blog functions on markdown
</Changes>
</Release>
<div className="sr-only">
### v 1.10.0
</div>
<Release version="1.10.0" date="2025-05-21" title="Sidebar Improvements and Mobile TOC Enhancements">
<Changes type="added">
- New reusable ToggleButton component with animation
- Mobile-friendly Table of Contents (TOC) component
- Click-outside handler for better mobile navigation
- Smooth scroll behavior for TOC navigation
- Active section highlighting in TOC
</Changes>
<Changes type="improved">
- Sidebar now has a collapsible design
- Enhanced mobile responsiveness for TOC
- Better visual hierarchy in sidebar navigation
- Smoother animations for sidebar toggle
- Optimized TOC performance with intersection observer
- Improved accessibility with proper ARIA labels
- Better spacing and alignment in mobile view
</Changes>
<Changes type="fixed">
- Fixed sidebar toggle button positioning
- Resolved TOC highlighting issues during scroll
- Fixed z-index conflicts in mobile view
- Addressed minor UI glitches in dark mode
- Fixed TOC not updating on route changes
- Resolved scroll jank on mobile devices
- Fixed incorrect active state in navigation
</Changes>
<Changes type="deprecated">
- No longer support changelog.md
- No longer support changelog/page.tsx (will be removed in future update)
</Changes>
</Release>
<div className="sr-only">
### v 1.9.0
</div>
<Release version="1.9.0" date="2025-05-19" title="New Keyboard component to show keyboard shortcut on docs page">
<Changes type="added">
- New Keyboard component with props show, type, children
- Snippet keyboard component
</Changes>
<Changes type="improved">
- Support custom content
- Support platform type (mac or window)
- Support automatic rendering of platform-specific key symbols
- Rename lowercase to camelCase for markdown component
</Changes>
</Release>
<div className="sr-only">
### v 1.8.5
</div>
<Release version="1.8.5" date="2025-05-10" title="Add sponsor card on single docs page">
<Changes type="added">
- Expandables Leftbar
- Sponsor badges or ads
- Boolean show/hide 'edit on github'
- With the same code run anywhere (bun or nodejs)
- Add frontmatter (metadata) to playground editor
</Changes>
<Changes type="improved">
- Adjustment docu.json
- Adjustment navbar, footer and components
</Changes>
<Changes type="fixed">
- Bun compatibility: rename .js to common js
- CLI manage packageManager on package.json
- Inconsistent design moved to better UI/UX
- Error handle render footer.social
</Changes>
<Changes type="removed">
- Remove confusing and verbose CLI on installer
</Changes>
</Release>
<div className="sr-only">
### v 1.8.0
</div>
<Release version="1.8.0" date="2025-03-01" title="Now looks more modern and clean which is a big change in layout and design">
<Changes type="added">
- Social footer
- Toggle group
- Site description in footer
- Site title in footer
</Changes>
<Changes type="improved">
- Header design changes
- Footer design changes
- New functions in theme provider
- Object changes in docu.json
</Changes>
<Changes type="fixed">
- Updates to path structure components
- Groups to organize components
</Changes>
</Release>
<div className="sr-only">
### v 1.7.0
</div>
<Release version="1.7.0" date="2025-02-23" title="Remove the old function in the search dialog and replace it with a new and more optimal feature">
<Changes type="added">
- Up and down navigation in search dialog
- Enter (return) to select in search dialog
- Escape to close the dialog
</Changes>
<Changes type="improved">
- Maintenance for anchor components
- Anchor.tsx adjustments for all elements that use it
</Changes>
<Changes type="removed">
- Remove suboptimal search features
</Changes>
</Release>
<div className="sr-only">
### v 1.6.0
</div>
<Release version="1.6.0" date="2025-02-21" title="New Feature Card Groups with arrays for more Flexible Content">
<Changes type="added">
- Card Groups Components
- Props: href to url link
- Props: horizontal boolean
</Changes>
<Changes type="improved">
- Card props styling
- Compatibility for Cards components
- Support for children props in card content
</Changes>
<Changes type="removed">
- Remove unused props cards components
</Changes>
</Release>
<div className="sr-only">
### v 1.5.0
</div>
<Release version="1.5.0" date="2025-02-18" title="Minor Update - improved features and responsiveness on all devices">
<Changes type="added">
- New dialog footer on searchbox above medium screens
- Icon X for close dialog on searchbox (ESC key on medium screen)
</Changes>
<Changes type="improved">
- Responsive Leftbar components on large screens
- Menu Trigger on medium screens
- Responsive Navbar components on medium screens
- Better UX for searchbox dialog
- Tooltips components can be written together with regular paragraphs
</Changes>
<Changes type="fixed">
- Responsive issues
- Compatibility for Bun
- Changes postcss.config.js to .cjs for Bun
- All CLI installer and updater not working
- Adjustments for package managers (npm, pnpm, bun, yarn)
</Changes>
</Release>
<div className="sr-only">
### v 1.4.2
</div>
<Release version="1.4.2" date="2025-02-16" title="Complex Content for Accordion Component props children">
<Changes type="added">
- New Props with children in accordion
- Compatibility for markdown in accordion
- Nested components inside an accordion
- New icon on note components
- Add CLI npx @docubook/create@latest
- Add CLI npx @docubook/update@latest
</Changes>
<Changes type="improved">
- Better UI design for accordion
- Styling Note components on markdown
- Change accordion output on playground
- Change accordion output on snippet
</Changes>
<Changes type="removed">
- Remove deprecated props on accordion
- Remove CLI npx update_docu
- Remove CLI npx create_docu
</Changes>
</Release>
<div className="sr-only">
### v 1.4.0
</div>
<Release version="1.4.0" date="2025-02-11" title="Floating Button Version with Dynamic Tag version on Changelog page">
<Changes type="added">
- New components / changelog floating-version.tsx
- Button popover to open version-toc below large screens
- Dynamic tag by section ID #version
- Dynamic url tag #version
- Dynamic version indicator on floating version when scrolling section by ID
</Changes>
<Changes type="improved">
- Change icon version history
- Responsive version-toc
- Improvement components to changelog page
</Changes>
</Release>
<div className="sr-only">
### v 1.3.8
</div>
<Release version="1.3.8" date="2025-02-08" title="Responsive Table of Content">
<Changes type="added">
- Components terminal MagicUI
- Components card Shadcn
- New mob-toc for a better experience on mobile devices
- New Components scroll to top button
- Scroll to top: blog-post
- Scroll to top: docs-post
</Changes>
<Changes type="improved">
- lib/markdown for generated dynamic toc on markdown
- Responsive Table of Content below large screens
- Improve docs page
</Changes>
</Release>
<div className="sr-only">
### v 1.3.6
</div>
<Release version="1.3.6" date="2025-02-01" title="Appears more modern editor for Docu Play">
<Changes type="added">
- Line Number for editor
- editor.css
</Changes>
<Changes type="improved">
- Better Design for Editor
- Similar to Github Editor
- Moved Handler Element (copy, download, reset and fullscreen) on Header
</Changes>
</Release>
<div className="sr-only">
### v 1.3.5
</div>
<Release version="1.3.5" date="2025-01-30" title="It's Easy to Write Markdown with Playground">
<Changes type="added">
- New Playground Page
- New Playground Layout
- Toolbar for Markdown Components
- Fullscreen Mode to Focus Editing Your Content
- Copy to Clipboard Your Content
- Download Your Content as index.mdx
- Reset Your Content without refresh the Browser
- Only Large Screen for Better Experience
</Changes>
</Release>
<div className="sr-only">
### v 1.3.1
</div>
<Release version="1.3.1" date="2025-01-20" title="Snippet Feature to Easily Write Markdown and Call DocuBook Components">
<Changes type="added">
- New Feature Snippet for Markdown Components
- Support Snippet for Visual Studio Code
</Changes>
<Changes type="removed">
- Remove props icon and props description for accordion components
</Changes>
</Release>
<div className="sr-only">
### v 1.3.0
</div>
<Release version="1.3.0" date="2024-12-31" title="Release Note Feature to Make it Easier to Write Changelogs">
<Changes type="added">
- New Release Note Feature
- New Layout for Changelog page
- New Changelog page
- Add Release Note Component
- Easily write release notes directly from the CHANGELOG.md file
- TOC for versioning
- Write with the markdown tag
- Add lib / changelog.ts
</Changes>
<Changes type="improved">
- Improvement Responsive feature image for Version Entry
- Improvement Layout for changelog page
- Improvement Padding on mobile devices
- Only use containers of md size
- Improvement syntax.css for ul>li classes
</Changes>
<Changes type="fixed">
- Fix og:image not showing on Page.tsx
- Fix text-indent on class li
</Changes>
<Changes type="removed">
- Remove excessive padding
- Remove Logo on Footer
</Changes>
</Release>
<div className="sr-only">
### v 1.2.0
</div>
<Release version="1.2.0" date="2024-12-22" title="New Accordion Component: Support content plain text, html and all markdown component">
<Changes type="added">
- Add New Accordion Component
</Changes>
<Changes type="improved">
- Props Improvement
- Support Dynamic Content for Accordion
</Changes>
</Release>
<div className="sr-only">
### v 1.1.0
</div>
<Release version="1.1.0" date="2024-12-15" title="Minor Update: Easily manage set up with docu.json">
<Changes type="added">
- Add docu.json file
- Add openGraph (title, description, image)
- Add Dynamic metadata
- Generate metadata as openGraph
- OpenGraph support for .mdx
</Changes>
<Changes type="improved">
- Routes-config from json
- Frontmatter improvement
- Edit the content of footer.tsx simply via the docu.json file
- Edit the content of navbar.tsx simply via the docu.json file
</Changes>
</Release>
<div className="sr-only">
### v 1.0.7
</div>
<Release version="1.0.7" date="2024-12-14" title="Easily updates your DocuBook Version with CLI npx update_docu">
<Changes type="added">
- CLI npx update_docu (update features into docubook existing directory)
- Playground (easily to written content)
- New Button component
- Navbar external link conditions
- CLI npx create_docu
</Changes>
<Changes type="improved">
- Searchbar Improvement
- Navigation Improvement
- Edit on Github Improvement
</Changes>
<Changes type="removed">
- Remove CLI npx create-docu (on this version not usage dash `-`)
</Changes>
</Release>
<div className="sr-only">
### v 1.0.6
</div>
<Release version="1.0.6" date="2024-11-24" title="New Components, Fix and Improvement">
<Changes type="added">
- New Card component
- New Tooltips component
</Changes>
<Changes type="fixed">
- Change root folder
</Changes>
<Changes type="improved">
- Logo on navbar & footer
- Easily change logo
</Changes>
</Release>
<div className="sr-only">
### v 1.0.5
</div>
<Release version="1.0.5" date="2024-11-16" title="Add New Features and Improvement for this version">
<Changes type="added">
- New Youtube component
- Edit this page - easily manage directory content via the github repo
- Support installation via CLI command npx create-docu
</Changes>
<Changes type="improved">
- Keyboard shortcut command + k or ctrl + k to open search dialog
</Changes>
</Release>
<div className="sr-only">
### v 1.0.0
</div>
<Release version="1.0.0" date="2024-11-10" title="Initial release of DocuBook to create interactive nested docs with MDX">
<Changes type="added">
- Initial release of DocuBook
- Basic documentation structure
- Markdown support with MDX
- Responsive design
- Search functionality
- Dark mode support
</Changes>
</Release>

72
contents/docs/getting-started/components/accordion/index.mdx
View File

@@ -1,72 +0,0 @@
---
title: Accordion
description: A component used to create collapsible content that can be hidden and shown again.
date: 22-12-2024
---
The Accordion component is a collapsible content container that can be used to hide and show content again. It is a flexible component that can be used to display any content, including HTML elements, markdown components, and plain text.
## Preview
### Code Block
<Accordion title="Code Block" defaultOpen={true}>
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
</Accordion>
### Text with Markdown
<Accordion title="Markdown">
this is an example of plain text content from the accordion component and below is markdown ;
1. number one
2. number two
3. number three
</Accordion>
## Props
| Prop | Type | Default | Description |
| ------------- | --------- | -------------- | -------------------------------------------------------------------------------------- |
| `title` | `string` | `null` | The value of Accordion title. |
| `children` | `ReactNode` | `null` | Flexible content, both HTML elements, markdown componenst and plain text. |
| `defaultOpen` | `boolean` | `false` | You can change the value to `true` if you want the content to open when the page loads |
## Code
<Tabs defaultValue="markdown" className="pt-5 pb-1">
<TabsList>
<TabsTrigger value="markdown">Markdown</TabsTrigger>
<TabsTrigger value="codeblock">Code Block</TabsTrigger>
</TabsList>
<TabsContent value="markdown">
```plaintext
<Accordion title="Markdown">
this is an example of plain text content from the accordion component and below is markdown ;
1. number one
2. number two
3. number three
</Accordion>
```
</TabsContent>
<TabsContent value="codeblock">
````plaintext
<Accordion title="Code Block" defaultOpen={true}>
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
</Accordion>
````
</TabsContent>
</Tabs>

42
contents/docs/getting-started/components/button/index.mdx
View File

@@ -1,42 +0,0 @@
---
title: Button
description: A component used to create buttons that can be used to trigger actions or navigate to other pages.
date: 14-12-2024
---
The Button component is a component used to create buttons that can be used to trigger actions or navigate to other pages.
## Preview
<Button
text="Learn More"
href="https://learn.example.com"
icon="ArrowUpRight"
size="md"
target="_blank"
variation="primary"
/>
## Props
| Prop | Type | Default | Description |
| ----------- | -------- | -------------- | -------------------------------------------- |
| `text` | `string` | `""` | The value of text button. |
| `href` | `string` | `""` | The value of url button. |
| `icon` | `string` | `null` | The value of button icon render from lucide. |
| `size` | `string` | `"sm, md, lg"` | The value of size button. |
| `target` | `string` | `"_blank"` | By default target `_blank` |
| `variation` | `string` | `"primary"` | By default variation is **Primary** |
## Code
```bash
<Button
text="Learn More"
href="https://learn.example.com"
icon="MoveUpRight"
size="md"
target="_blank"
variation="primary"
/>
```

49
contents/docs/getting-started/components/card-group/index.mdx
View File

@@ -1,49 +0,0 @@
---
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>
```

70
contents/docs/getting-started/components/card/index.mdx
View File

@@ -1,70 +0,0 @@
---
title: Cards
description: A component used to create cards that can be used to display content in a compact and organized way.
date: 20-02-2025
---
The Card component is a component used to create cards that can be used to display content in a compact and organized way.
## Example
### Card with Link and icon
<Card title="Click on me" icon="Link" href="/docs/getting-started/components/card-group">
This is how you use a card with an icon and a link. Clicking on this card
brings you to the Card Group page.
</Card>
### Card Horizontal
<Card title="Horizontal Card" icon="Layout" horizontal>
This is a horizontal card layout.
</Card>
### Card Simple
<Card title="Simple Card">
This is a simple card without an icon or link.
</Card>
## Props
| Prop | Type | Default | Description |
| ------------- | -------- | ------- | ------------------------------------------------------- |
| `title` | `string` | `""` | The value of card title. |
| `icon` | `string` | `null` | The value of card icon render from lucide. |
| `href` | `string` | `null` | The value of card link url. |
| `horizontal` | `boolean` | `""` | horizontal layout for card. |
## Code
<Tabs defaultValue="link" className="pt-5 pb-1">
<TabsList>
<TabsTrigger value="link">Card with Link & Icon</TabsTrigger>
<TabsTrigger value="horizontal">Card Horizontal</TabsTrigger>
<TabsTrigger value="simple">Card Simple</TabsTrigger>
</TabsList>
<TabsContent value="link">
```markdown
<Card title="Click on me" icon="Link" href="/docs/getting-started/components/button">
This is how you use a card with an icon and a link. Clicking on this card
brings you to the Card Group page.
</Card>
```
</TabsContent>
<TabsContent value="horizontal">
```markdown
<Card title="Horizontal Card" icon="Layout" horizontal>
This is a horizontal card layout.
</Card>
```
</TabsContent>
<TabsContent value="simple">
```markdown
<Card title="Simple Card">
This is a simple card without an icon or link.
</Card>
```
</TabsContent>
</Tabs>

41
contents/docs/getting-started/components/code-block/index.mdx
View File

@@ -1,41 +0,0 @@
---
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.

38
contents/docs/getting-started/components/custom/index.mdx
View File

@@ -1,38 +0,0 @@
---
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.

109
contents/docs/getting-started/components/file-tree/index.mdx
View File

@@ -1,109 +0,0 @@
---
title: File Tree Component
description: A customizable file tree component for displaying hierarchical file structures in your documentation.
date: 28-05-2025
---
The File Tree component allows you to display hierarchical file structures in your documentation with collapsible folders and files.
## Basic Usage
```
<Files>
<Folder name="src">
<File name="App.tsx" />
<File name="index.tsx" />
<Folder name="components">
<File name="Button.tsx" />
<File name="Card.tsx" />
</Folder>
<Folder name="pages">
<File name="Home.tsx" />
<File name="About.tsx" />
</Folder>
</Folder>
</Files>
```
Render As:
<Files>
<Folder name="src">
<File name="App.tsx" />
<File name="index.tsx" />
<Folder name="components">
<File name="Button.tsx" />
<File name="Card.tsx" />
</Folder>
<Folder name="pages">
<File name="Home.tsx" />
<File name="About.tsx" />
</Folder>
</Folder>
</Files>
## Props
### Files
The root component that wraps the entire file tree.
### Folder
| Prop | Type | Required | Description |
|----------|----------|----------|---------------------------------------|
| name | string | Yes | The name of the folder |
| children | ReactNode | No | Child elements (File or Folder) |
### File
| Prop | Type | Required | Description |
|------|--------|----------|----------------------------|
| name | string | Yes | The name of the file |
## Examples
### Nested Folder Structure
```
<Files>
<Folder name="project-root">
<File name="package.json" />
<File name="tsconfig.json" />
<Folder name="src">
<File name="index.ts" />
<Folder name="components">
<File name="Button.tsx" />
<File name="Card.tsx" />
</Folder>
</Folder>
</Folder>
</Files>
```
### Minimal Example
```
<Files>
<Folder name="components">
<File name="Button.tsx" />
<File name="Input.tsx" />
</Folder>
</Files>
```
## Best Practices
1. Keep the nesting level reasonable (recommended max 3-4 levels deep)
2. Use clear and descriptive names for files and folders
3. Consider the user experience when displaying large file structures
4. Use consistent naming conventions throughout your file tree
## Accessibility
The File Tree component includes built-in accessibility features:
- Keyboard navigation support
- ARIA attributes for screen readers
- Focus management for interactive elements
- High contrast mode support

37
contents/docs/getting-started/components/image/index.mdx
View File

@@ -1,37 +0,0 @@
---
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.

9
contents/docs/getting-started/components/index.mdx
View File

@@ -1,9 +0,0 @@
---
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" />

117
contents/docs/getting-started/components/keyboard/index.mdx
View File

@@ -1,117 +0,0 @@
---
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

34
contents/docs/getting-started/components/link/index.mdx
View File

@@ -1,34 +0,0 @@
---
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.

46
contents/docs/getting-started/components/note/index.mdx
View File

@@ -1,46 +0,0 @@
---
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>
```

130
contents/docs/getting-started/components/release-note/index.mdx
View File

@@ -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:
```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>`

47
contents/docs/getting-started/components/stepper/index.mdx
View File

@@ -1,47 +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>
## 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>
```

70
contents/docs/getting-started/components/tabs/index.mdx
View File

@@ -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` | `""` | 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>
````

22
contents/docs/getting-started/components/tooltips/index.mdx
View File

@@ -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.
### 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.
```

21
contents/docs/getting-started/components/youtube/index.mdx
View File

@@ -1,21 +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="cpraXaw7dyc" />
## Code
```bash
<Youtube videoId="cpraXaw7dyc" />
```
## Usage
for example the youtube URL show this https://www.youtube.com/watch?v=cpraXaw7dyc the ID `cpraXaw7dyc`

2
contents/docs/getting-started/customize/index.mdx
View File

@@ -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)

2
contents/docs/getting-started/installation/index.mdx
View File

@@ -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>

2
contents/docs/getting-started/introduction/index.mdx
View File

@@ -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>

138
contents/docs/getting-started/quick-start-guide/index.mdx
View File

@@ -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/getting-started/your-page-title
mkdir -p contents/docs/your-section/your-topic
```
Example for an API reference:
```bash
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.
Start writing your documentation using Markdown or MDX components.
## Getting Started
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
Start the development server:
### Local Development
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>