chore: Sync package version v1.15.1
This commit is contained in:
Bot DocuBook
@@ -25,7 +25,7 @@ export default function Home() {
|
||||
)}
|
||||
>
|
||||
<AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-100 hover:duration-300 hover:dark:text-neutral-200">
|
||||
<span>🚀 New Version - Release v1.15.1</span>
|
||||
<span>🚀 New Version - Release v1.15.2</span>
|
||||
<ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
|
||||
</AnimatedShinyText>
|
||||
</div>
|
||||
|
||||
63
contents/docs/api-reference/delete/index.mdx
Normal file
63
contents/docs/api-reference/delete/index.mdx
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title : Delete
|
||||
description : example api DELETE
|
||||
date : 10-12-2024
|
||||
---
|
||||
|
||||
## Heading 2
|
||||
|
||||
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
|
||||
|
||||
### Heading 3
|
||||
|
||||
example of ordered list format :
|
||||
|
||||
- list one
|
||||
- sub list
|
||||
- list two
|
||||
- list three
|
||||
|
||||
#### Heading 4
|
||||
|
||||
Below is an example of how to write a code block :
|
||||
|
||||
````plaintext
|
||||
```javascript:main.js showLineNumbers {3-4}
|
||||
function isRocketAboutToCrash() {
|
||||
// Check if the rocket is stable
|
||||
if (!isStable()) {
|
||||
NoCrash(); // Prevent the crash
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
example note :
|
||||
```plaintext
|
||||
<Note type="note" title="Note">
|
||||
This is a general note to convey information to the user.
|
||||
</Note>
|
||||
```
|
||||
|
||||
displaying an image in markdown format :
|
||||
|
||||
```plaintext
|
||||
|
||||
```
|
||||
|
||||
render as :
|
||||
|
||||
|
||||
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
|
||||
|
||||
<Note type="warning" title="Warning">
|
||||
every page that is indexed in a folder will have an `index.mdx` file with metadata :
|
||||
```plaintext
|
||||
---
|
||||
title : Introduction
|
||||
description : overview or synopsis of a project
|
||||
date : 10-12-2024
|
||||
image : example-img.png
|
||||
---
|
||||
```
|
||||
</Note>
|
||||
63
contents/docs/api-reference/fetch/index.mdx
Normal file
63
contents/docs/api-reference/fetch/index.mdx
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title : Fetch
|
||||
description : example api FETCH
|
||||
date : 10-12-2024
|
||||
---
|
||||
|
||||
## Heading 2
|
||||
|
||||
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
|
||||
|
||||
### Heading 3
|
||||
|
||||
example of ordered list format :
|
||||
|
||||
- list one
|
||||
- sub list
|
||||
- list two
|
||||
- list three
|
||||
|
||||
#### Heading 4
|
||||
|
||||
Below is an example of how to write a code block :
|
||||
|
||||
````plaintext
|
||||
```javascript:main.js showLineNumbers {3-4}
|
||||
function isRocketAboutToCrash() {
|
||||
// Check if the rocket is stable
|
||||
if (!isStable()) {
|
||||
NoCrash(); // Prevent the crash
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
example note :
|
||||
```plaintext
|
||||
<Note type="note" title="Note">
|
||||
This is a general note to convey information to the user.
|
||||
</Note>
|
||||
```
|
||||
|
||||
displaying an image in markdown format :
|
||||
|
||||
```plaintext
|
||||
|
||||
```
|
||||
|
||||
render as :
|
||||
|
||||
|
||||
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
|
||||
|
||||
<Note type="warning" title="Warning">
|
||||
every page that is indexed in a folder will have an `index.mdx` file with metadata :
|
||||
```plaintext
|
||||
---
|
||||
title : Introduction
|
||||
description : overview or synopsis of a project
|
||||
date : 10-12-2024
|
||||
image : example-img.png
|
||||
---
|
||||
```
|
||||
</Note>
|
||||
63
contents/docs/api-reference/get/index.mdx
Normal file
63
contents/docs/api-reference/get/index.mdx
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title : Get
|
||||
description : example api GET
|
||||
date : 10-12-2024
|
||||
---
|
||||
|
||||
## Heading 2
|
||||
|
||||
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
|
||||
|
||||
### Heading 3
|
||||
|
||||
example of ordered list format :
|
||||
|
||||
- list one
|
||||
- sub list
|
||||
- list two
|
||||
- list three
|
||||
|
||||
#### Heading 4
|
||||
|
||||
Below is an example of how to write a code block :
|
||||
|
||||
````plaintext
|
||||
```javascript:main.js showLineNumbers {3-4}
|
||||
function isRocketAboutToCrash() {
|
||||
// Check if the rocket is stable
|
||||
if (!isStable()) {
|
||||
NoCrash(); // Prevent the crash
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
example note :
|
||||
```plaintext
|
||||
<Note type="note" title="Note">
|
||||
This is a general note to convey information to the user.
|
||||
</Note>
|
||||
```
|
||||
|
||||
displaying an image in markdown format :
|
||||
|
||||
```plaintext
|
||||
|
||||
```
|
||||
|
||||
render as :
|
||||
|
||||
|
||||
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
|
||||
|
||||
<Note type="warning" title="Warning">
|
||||
every page that is indexed in a folder will have an `index.mdx` file with metadata :
|
||||
```plaintext
|
||||
---
|
||||
title : Introduction
|
||||
description : overview or synopsis of a project
|
||||
date : 10-12-2024
|
||||
image : example-img.png
|
||||
---
|
||||
```
|
||||
</Note>
|
||||
63
contents/docs/api-reference/post/index.mdx
Normal file
63
contents/docs/api-reference/post/index.mdx
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title : Post
|
||||
description : example api POST
|
||||
date : 10-12-2024
|
||||
---
|
||||
|
||||
## Heading 2
|
||||
|
||||
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
|
||||
|
||||
### Heading 3
|
||||
|
||||
example of ordered list format :
|
||||
|
||||
- list one
|
||||
- sub list
|
||||
- list two
|
||||
- list three
|
||||
|
||||
#### Heading 4
|
||||
|
||||
Below is an example of how to write a code block :
|
||||
|
||||
````plaintext
|
||||
```javascript:main.js showLineNumbers {3-4}
|
||||
function isRocketAboutToCrash() {
|
||||
// Check if the rocket is stable
|
||||
if (!isStable()) {
|
||||
NoCrash(); // Prevent the crash
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
example note :
|
||||
```plaintext
|
||||
<Note type="note" title="Note">
|
||||
This is a general note to convey information to the user.
|
||||
</Note>
|
||||
```
|
||||
|
||||
displaying an image in markdown format :
|
||||
|
||||
```plaintext
|
||||
|
||||
```
|
||||
|
||||
render as :
|
||||
|
||||
|
||||
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
|
||||
|
||||
<Note type="warning" title="Warning">
|
||||
every page that is indexed in a folder will have an `index.mdx` file with metadata :
|
||||
```plaintext
|
||||
---
|
||||
title : Introduction
|
||||
description : overview or synopsis of a project
|
||||
date : 10-12-2024
|
||||
image : example-img.png
|
||||
---
|
||||
```
|
||||
</Note>
|
||||
@@ -1,687 +1,49 @@
|
||||
---
|
||||
title: Release Version 1.0+
|
||||
description: List of latest changes and updates on DocuBook
|
||||
date: 02-08-2025
|
||||
title : Version 1
|
||||
description : changelog version
|
||||
date : 10-12-2024
|
||||
---
|
||||
|
||||
<Note type="note" title="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.
|
||||
</Note>
|
||||
## Render as
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.15.1
|
||||
</div>
|
||||
|
||||
<Release version="1.15.1" date="2025-08-06" title="Algolia DocSearch for better search result">
|
||||
<Release version="1.0.0" date="2025-08-10" title="Release version 1.0.0">
|
||||
<Changes type="added">
|
||||
- new DocSearch.tsx components
|
||||
- add props type algolia
|
||||
- add searchprops
|
||||
- add algolia.css
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<Note type="warning" title="environment">
|
||||
To use Algolia DocSearch, you need to configure the following environment variables:
|
||||
|
||||
```plaintext
|
||||
NEXT_PUBLIC_ALGOLIA_DOCSEARCH_APP_ID="your_app_id"
|
||||
NEXT_PUBLIC_ALGOLIA_DOCSEARCH_API_KEY="your_api_key"
|
||||
NEXT_PUBLIC_ALGOLIA_DOCSEARCH_INDEX_NAME="your_index_name"
|
||||
```
|
||||
|
||||
in the navbar component, add a prop to the class
|
||||
|
||||
```
|
||||
Change <Search /> to <Search type="algolia" />
|
||||
```
|
||||
</Note>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.14.2
|
||||
</div>
|
||||
|
||||
<Release version="1.14.2" date="2025-08-05" title="Refactor & Fix: Decouple Search Component and Resolve Type Errors">
|
||||
<Changes type="added">
|
||||
- Refactor Search component into three distinct components: Search, SearchTrigger, and SearchModal for better maintainability and scalability.
|
||||
- New SearchTrigger components
|
||||
- New SearchModal components
|
||||
- add components
|
||||
</Changes>
|
||||
<Changes type="fixed">
|
||||
- Resolve TypeScript error for missing 'noLink' property on the 'Page' type after refactoring.
|
||||
- Fix TypeScript error for missing 'context' property by providing a complete inline type annotation in the SearchModal component.
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.14.0
|
||||
</div>
|
||||
|
||||
<Release version="1.14.0" date="2025-08-02" title="Dev: Add workflow to run Sync NPM package">
|
||||
<Changes type="added">
|
||||
- Add workflows to run Sync NPM package
|
||||
- Add sync-from-npm.yml
|
||||
- Add PR to organization github.com/DocuBook/docubook
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.13.9
|
||||
</div>
|
||||
|
||||
<Release version="1.13.9" date="2025-07-27" title="Code Cleanup & Stability Improvements">
|
||||
<Changes type="added">
|
||||
- Added proper type definitions for unist-util-visit
|
||||
- Added .eslintrc.json configuration file
|
||||
- Added proper type checking for node values in markdown processing
|
||||
- fix globals.css
|
||||
</Changes>
|
||||
<Changes type="improved">
|
||||
- Enhanced type safety in lib/markdown.ts with proper TypeScript interfaces
|
||||
- Converted interface extensions to type aliases in UI components for consistency
|
||||
- Improved code organization across multiple files
|
||||
- improved search components
|
||||
</Changes>
|
||||
<Changes type="fixed">
|
||||
- Fixed potential null reference in markdown.ts when processing code blocks
|
||||
- Updated import for MDXRemote in mdx-provider.tsx
|
||||
- Optimized event listener cleanup in toc-observer.tsx
|
||||
</Changes>
|
||||
<Changes type="removed">
|
||||
- Removed unused state and variables in toc-observer.tsx
|
||||
- Removed unused imports for cleaner codebase
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.13.6
|
||||
</div>
|
||||
|
||||
<Release version="1.13.6" date="2025-06-01" title="Improve sheet leftbar and search icon">
|
||||
<Changes type="improved">
|
||||
- Improve sheet leftbar and search icon
|
||||
- color scheme for sheet leftbar
|
||||
- color scheme for search icon
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.13.5
|
||||
</div>
|
||||
|
||||
<Release version="1.13.5" date="2025-05-31" title="Add Theme schema for consistent theme">
|
||||
<Changes type="added">
|
||||
- Add Theme schema
|
||||
- Add Freshlime theme
|
||||
- Add Coffee theme
|
||||
- Add llms context for generated theme with AI
|
||||
</Changes>
|
||||
<Changes type="improved">
|
||||
- Markdown support for theme-colors
|
||||
- consistent theme-colors page
|
||||
- all components now consistent with theme-colors
|
||||
- syntax with theme-colors
|
||||
</Changes>
|
||||
<Changes type="fixed">
|
||||
- fix bug FileTree component
|
||||
- fix issue markdown with theme-colors
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.13.0
|
||||
</div>
|
||||
|
||||
<Release version="1.13.0" date="2025-05-29" title="Context Menu for organize file and folder">
|
||||
<Changes type="added">
|
||||
- New ContextMenu component for organizing file and folder
|
||||
- Nested docs folder and file support with context menu
|
||||
</Changes>
|
||||
<Changes type="improved">
|
||||
- improve routes-config with context menu
|
||||
- improve docu.json with context menu
|
||||
- improve leftbar with context menu
|
||||
- improve docs-menu with context menu
|
||||
- improve search dialog limit result to 6 post per suggestion
|
||||
- improve search result typing 3 characters to show suggestion
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<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)
|
||||
- deprecated footer components
|
||||
</Changes>
|
||||
<Changes type="removed">
|
||||
- removed utility class
|
||||
- removed unused hooks
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.9.0
|
||||
</div>
|
||||
## Output Markdown
|
||||
|
||||
<Release version="1.9.0" date="2025-05-19" title="New Keyboard component to show keyboard shortcut on docs page">
|
||||
```
|
||||
<Release version="1.0.0" date="2025-08-10" title="Release version 1.0.0">
|
||||
<Changes type="added">
|
||||
- New Keyboard component with props show, type, children
|
||||
- Snippet keyboard component
|
||||
- add components
|
||||
</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
|
||||
- fix globals.css
|
||||
</Changes>
|
||||
<Changes type="improved">
|
||||
- improved search components
|
||||
</Changes>
|
||||
<Changes type="deprecated">
|
||||
- deprecated footer components
|
||||
</Changes>
|
||||
|
||||
<Changes type="removed">
|
||||
- Remove confusing and verbose CLI on installer
|
||||
- removed utility class
|
||||
- removed unused hooks
|
||||
</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>
|
||||
```
|
||||
49
contents/docs/changelog/version-2/index.mdx
Normal file
49
contents/docs/changelog/version-2/index.mdx
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title : Version 2
|
||||
description : changelog version
|
||||
date : 10-12-2024
|
||||
---
|
||||
|
||||
## Render as
|
||||
|
||||
<Release version="2.0.0" date="2025-08-10" title="Release version 2.0.0">
|
||||
<Changes type="added">
|
||||
- add components
|
||||
</Changes>
|
||||
<Changes type="fixed">
|
||||
- fix globals.css
|
||||
</Changes>
|
||||
<Changes type="improved">
|
||||
- improved search components
|
||||
</Changes>
|
||||
<Changes type="deprecated">
|
||||
- deprecated footer components
|
||||
</Changes>
|
||||
<Changes type="removed">
|
||||
- removed utility class
|
||||
- removed unused hooks
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
## Output Markdown
|
||||
|
||||
```
|
||||
<Release version="2.0.0" date="2025-08-10" title="Release version 2.0.0">
|
||||
<Changes type="added">
|
||||
- add components
|
||||
</Changes>
|
||||
<Changes type="fixed">
|
||||
- fix globals.css
|
||||
</Changes>
|
||||
<Changes type="improved">
|
||||
- improved search components
|
||||
</Changes>
|
||||
<Changes type="deprecated">
|
||||
- deprecated footer components
|
||||
</Changes>
|
||||
<Changes type="removed">
|
||||
- removed utility class
|
||||
- removed unused hooks
|
||||
</Changes>
|
||||
</Release>
|
||||
```
|
||||
49
contents/docs/changelog/version-3/index.mdx
Normal file
49
contents/docs/changelog/version-3/index.mdx
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title : Version 3
|
||||
description : changelog version
|
||||
date : 10-12-2024
|
||||
---
|
||||
|
||||
## Render as
|
||||
|
||||
<Release version="3.0.0" date="2025-08-10" title="Release version 3.0.0">
|
||||
<Changes type="added">
|
||||
- add components
|
||||
</Changes>
|
||||
<Changes type="fixed">
|
||||
- fix globals.css
|
||||
</Changes>
|
||||
<Changes type="improved">
|
||||
- improved search components
|
||||
</Changes>
|
||||
<Changes type="deprecated">
|
||||
- deprecated footer components
|
||||
</Changes>
|
||||
<Changes type="removed">
|
||||
- removed utility class
|
||||
- removed unused hooks
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
## Output Markdown
|
||||
|
||||
```
|
||||
<Release version="3.0.0" date="2025-08-10" title="Release version 3.0.0">
|
||||
<Changes type="added">
|
||||
- add components
|
||||
</Changes>
|
||||
<Changes type="fixed">
|
||||
- fix globals.css
|
||||
</Changes>
|
||||
<Changes type="improved">
|
||||
- improved search components
|
||||
</Changes>
|
||||
<Changes type="deprecated">
|
||||
- deprecated footer components
|
||||
</Changes>
|
||||
<Changes type="removed">
|
||||
- removed utility class
|
||||
- removed unused hooks
|
||||
</Changes>
|
||||
</Release>
|
||||
```
|
||||
@@ -1,86 +0,0 @@
|
||||
---
|
||||
title: Accordion
|
||||
description: A component used to create collapsible content that can be hidden and shown again.
|
||||
date: 22-12-2024
|
||||
---
|
||||
|
||||
## Preview
|
||||
|
||||
### Basic Usage
|
||||
|
||||
<Accordion title="Click to expand" defaultOpen={true}>
|
||||
This is a simple accordion component that can be toggled by clicking the header. The content can include any valid React nodes, including text, components, and markdown.
|
||||
</Accordion>
|
||||
|
||||
### With Code Block
|
||||
|
||||
<Accordion title="Code Example" className="mt-4">
|
||||
```javascript:utils.js showLineNumbers
|
||||
// Example of using the Accordion component
|
||||
import Accordion from '@/components/markdown/AccordionMdx';
|
||||
|
||||
function Example() {
|
||||
return (
|
||||
<Accordion title="Click to see code">
|
||||
<pre>
|
||||
{`function greet() {\n console.log('Hello, world!');\n}`}
|
||||
</pre>
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
```
|
||||
</Accordion>
|
||||
|
||||
### With Markdown Content
|
||||
|
||||
<Accordion title="Markdown Example" className="mt-4">
|
||||
## This is a markdown heading
|
||||
|
||||
- List item 1
|
||||
- List item 2
|
||||
- List item 3
|
||||
|
||||
You can include **bold** and *italic* text, [links](#), and other markdown elements.
|
||||
</Accordion>
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `title` | string | - | **Required**. The text displayed in the accordion header. |
|
||||
| `children` | ReactNode | null | The content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components. |
|
||||
| `defaultOpen` | boolean | false | When true, the accordion will be expanded by default. |
|
||||
| `className` | string | undefined | Additional CSS classes to apply to the accordion container. |
|
||||
|
||||
## Output Markdown
|
||||
|
||||
<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>
|
||||
@@ -1,40 +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
|
||||
---
|
||||
|
||||
## Preview
|
||||
|
||||
<Button
|
||||
text="Learn More"
|
||||
href="https://learn.example.com"
|
||||
icon="MoveUpRight"
|
||||
size="md"
|
||||
target="_blank"
|
||||
variation="primary"
|
||||
/>
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| ----------- | -------- | ----------- | -------------------------------------------- |
|
||||
| `text` | string | undefined | The button text |
|
||||
| `href` | string | **required**| The URL to navigate to |
|
||||
| `icon` | string | undefined | Lucide icon name (e.g. "MoveUpRight") |
|
||||
| `size` | string | "md" | Button size: `"sm"`, `"md"`, or `"lg"` |
|
||||
| `target` | string | undefined | Link target (e.g. "_blank") |
|
||||
| `variation` | string | "primary" | Button style: `"primary"`, `"accent"`, or `"outline"` |
|
||||
|
||||
## Output Markdown
|
||||
|
||||
```markdown
|
||||
<Button
|
||||
text="Learn More"
|
||||
href="https://learn.example.com"
|
||||
icon="MoveUpRight"
|
||||
size="md"
|
||||
target="_blank"
|
||||
variation="primary"
|
||||
/>
|
||||
```
|
||||
@@ -1,47 +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
|
||||
---
|
||||
|
||||
## 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 |
|
||||
|
||||
## Output Markdown
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -1,68 +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
|
||||
---
|
||||
|
||||
## Example
|
||||
|
||||
### Card with Link and icon
|
||||
|
||||
<Card title="Click on me" icon="Link" href="/docs/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 | null | 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 | undefined | horizontal layout for card. |
|
||||
|
||||
## Output Markdown
|
||||
|
||||
<Tabs defaultValue="link" className="pt-5 pb-1">
|
||||
<TabsList>
|
||||
<TabsTrigger value="link">Link & Icon</TabsTrigger>
|
||||
<TabsTrigger value="horizontal">Horizontal</TabsTrigger>
|
||||
<TabsTrigger value="simple">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>
|
||||
@@ -1,39 +0,0 @@
|
||||
---
|
||||
title: Code Block
|
||||
description: A component used to display code snippets with optional line numbering and line highlighting.
|
||||
date: 14-12-2024
|
||||
---
|
||||
|
||||
## 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}`.
|
||||
|
||||
## Output Markdown
|
||||
|
||||
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.
|
||||
@@ -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.
|
||||
@@ -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
|
||||
@@ -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
|
||||
|
||||
```
|
||||
|
||||
### 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.
|
||||
@@ -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="components" />
|
||||
@@ -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
|
||||
@@ -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.
|
||||
@@ -1,44 +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
|
||||
---
|
||||
|
||||
## 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" "success" "warning" | undefined | Determines the visual style of the note. |
|
||||
|
||||
## Output Markdown
|
||||
|
||||
```markdown
|
||||
<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>
|
||||
```
|
||||
@@ -1,130 +0,0 @@
|
||||
---
|
||||
title: Release Note
|
||||
description: The Release Note component makes it easy for you to write updates for each version of your application.
|
||||
date: 31-12-2024
|
||||
---
|
||||
|
||||
The Release Note component makes it easy for you to write and display changelogs in a structured and organized way. This component consists of two main parts: `Release` and `Changes` which can be used to display version, date, release title, and a list of changes categorized by type.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
Here is a basic example of using the Release Note component:
|
||||
|
||||
```markdown
|
||||
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
|
||||
<Changes type="added">
|
||||
- New feature to improve accessibility
|
||||
- Keyboard navigation support for dialog components
|
||||
</Changes>
|
||||
<Changes type="fixed">
|
||||
- Bug fix for mobile menu
|
||||
- Fixed loading issues on documentation pages
|
||||
</Changes>
|
||||
</Release>
|
||||
```
|
||||
|
||||
<Accordion title="Render As" defaultOpen={true}>
|
||||
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
|
||||
<Changes type="added">
|
||||
- New feature to improve accessibility
|
||||
- Keyboard navigation support for dialog components
|
||||
</Changes>
|
||||
<Changes type="fixed">
|
||||
- Bug fix for mobile menu
|
||||
- Fixed loading issues on documentation pages
|
||||
</Changes>
|
||||
</Release>
|
||||
</Accordion>
|
||||
|
||||
## Release Component
|
||||
|
||||
The `Release` component is used to display key information about a release version, such as version number, release date, and title.
|
||||
|
||||
### Release Props
|
||||
|
||||
| Prop | Type | Required | Description |
|
||||
|------|------|----------|-------------|
|
||||
| `version` | string | ✅ | Version number to display (without "v" prefix) |
|
||||
| `title` | string | ✅ | Title or name of the release |
|
||||
| `date` | string | ❌ | Release date in a valid format (example: "2025-05-24") |
|
||||
| `children` | ReactNode | ✅ | Child content, typically `Changes` components |
|
||||
|
||||
```markdown
|
||||
<Release
|
||||
version="1.10.1"
|
||||
date="2025-05-24"
|
||||
title="Accessibility Improvements and Bug Fixes"
|
||||
>
|
||||
{/* Changes content here */}
|
||||
</Release>
|
||||
```
|
||||
|
||||
## Changes Component
|
||||
|
||||
The `Changes` component is used to group changes by category with appropriate icons and colors.
|
||||
|
||||
### Changes Props
|
||||
|
||||
| Prop | Type | Required | Description |
|
||||
|------|------|----------|-------------|
|
||||
| `type` | string | ✅ | Type of change: 'added', 'fixed', 'improved', 'deprecated', or 'removed' |
|
||||
| `children` | ReactNode | ✅ | List of changes, can be text with Markdown formatting |
|
||||
|
||||
### Changes Note
|
||||
|
||||
| Category | Description |
|
||||
|----------|-------------|
|
||||
| `added` | New features or functionality added |
|
||||
| `fixed` | Bugs or issues that have been fixed |
|
||||
| `improved` | Enhancements or optimizations to existing features |
|
||||
| `deprecated` | Features that are not recommended and may be removed in future |
|
||||
| `removed` | Features that have been completely removed |
|
||||
|
||||
### Changes Example
|
||||
|
||||
```jsx
|
||||
<Changes type="added">
|
||||
- New feature to improve accessibility
|
||||
- Keyboard navigation support for dialog components
|
||||
</Changes>
|
||||
|
||||
<Changes type="fixed">
|
||||
- Bug fix for mobile menu
|
||||
- Fixed loading issues on documentation pages
|
||||
</Changes>
|
||||
```
|
||||
|
||||
## Complete Implementation
|
||||
|
||||
Here is a complete example of using the Release Note component in an MDX file:
|
||||
|
||||
````plaintext
|
||||
<!-- hidden heading for TOC -->
|
||||
|
||||
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
|
||||
<Changes type="added">
|
||||
- Keyboard navigation for all interactive components
|
||||
- Screen reader support for table components
|
||||
- Dark mode feature with system preference detection
|
||||
</Changes>
|
||||
|
||||
<Changes type="fixed">
|
||||
- Fixed mobile menu bug that wouldn't close when navigating to another page
|
||||
- Fixed loading issues on documentation pages
|
||||
- Fixed display issues in Safari browser
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Improved page loading performance
|
||||
- Optimized JavaScript bundle size
|
||||
- Enhanced responsive design across all viewports
|
||||
</Changes>
|
||||
</Release>
|
||||
````
|
||||
|
||||
## Usage Tips
|
||||
|
||||
1. **Date Format**: Use a consistent date format for all releases.
|
||||
2. **Version Ordering**: Arrange versions in reverse chronological order (newest version at the top).
|
||||
3. **List Items**: You can use standard Markdown list format (`-` or `*`) or write text directly, the component will handle the formatting.
|
||||
4. **TOC**: Use hidden headings to ensure each version is detected in the Table of Contents. Use `<div className="sr-only">### v 1.10.1</div>`
|
||||
@@ -1,45 +0,0 @@
|
||||
---
|
||||
title: Stepper
|
||||
description: A component used to display step-by-step instructions directly within the markdown render.
|
||||
date: 14-12-2024
|
||||
---
|
||||
|
||||
In this guide, we utilize a custom `Stepper` component, specifically designed for DocuBook, which enables users to display step-by-step instructions directly within the markdown render.
|
||||
|
||||
## Preview
|
||||
|
||||
<Stepper>
|
||||
<StepperItem title="Step 1: Clone the DocuBook Repository">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
|
||||
felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
|
||||
dolor in lorem.
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 2: Access the Project Directory">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
|
||||
eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 3: Install Required Dependencies">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
|
||||
ipsum nec nulla ultricies porttitor et non justo.
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
|
||||
## Output Markdown
|
||||
|
||||
```markdown
|
||||
<Stepper>
|
||||
<StepperItem title="Step 1: Clone the DocuBook Repository">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
|
||||
felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
|
||||
dolor in lorem.
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 2: Access the Project Directory">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
|
||||
eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 3: Install Required Dependencies">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
|
||||
ipsum nec nulla ultricies porttitor et non justo.
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
```
|
||||
@@ -1,70 +0,0 @@
|
||||
---
|
||||
title: Tabs
|
||||
description: Organize content into multiple sections with switchable tabs.
|
||||
date: 14-12-2024
|
||||
---
|
||||
|
||||
The `Tabs` component allows you to organize content into multiple sections, enabling users to switch between them easily. This is particularly useful for displaying related content in a compact manner.
|
||||
|
||||
## Preview
|
||||
|
||||
<Tabs defaultValue="java" className="pt-5 pb-1">
|
||||
<TabsList>
|
||||
<TabsTrigger value="java">Java</TabsTrigger>
|
||||
<TabsTrigger value="typescript">TypeScript</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="java">
|
||||
```java
|
||||
// HelloWorld.java
|
||||
public class HelloWorld {
|
||||
public static void main(String[] args) {
|
||||
System.out.println("Hello, World!");
|
||||
}
|
||||
}
|
||||
```
|
||||
</TabsContent>
|
||||
<TabsContent value="typescript">
|
||||
```typescript
|
||||
// helloWorld.ts
|
||||
function helloWorld(): void {
|
||||
console.log("Hello, World!");
|
||||
}
|
||||
helloWorld();
|
||||
```
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| -------------- | -------- | ------- | ------------------------------------------------------ |
|
||||
| `defaultValue` | string | null | The value of the tab that is selected by default. |
|
||||
| `className` | string | null | Additional CSS classes for styling the Tabs component. |
|
||||
|
||||
## Output Markdown
|
||||
|
||||
````plaintext
|
||||
<Tabs defaultValue="java" className="pt-5 pb-1">
|
||||
<TabsList>
|
||||
<TabsTrigger value="java">Java</TabsTrigger>
|
||||
<TabsTrigger value="typescript">TypeScript</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="java">
|
||||
```java
|
||||
// HelloWorld.java
|
||||
public class HelloWorld {
|
||||
public static void main(String[] args) {
|
||||
System.out.println("Hello, World!");
|
||||
}
|
||||
}
|
||||
```</TabsContent>
|
||||
<TabsContent value="typescript">
|
||||
```typescript
|
||||
// helloWorld.ts
|
||||
function helloWorld(): void {
|
||||
console.log("Hello, World!");
|
||||
}
|
||||
helloWorld();
|
||||
```</TabsContent>
|
||||
</Tabs>
|
||||
````
|
||||
@@ -1,22 +0,0 @@
|
||||
---
|
||||
title: Tooltips
|
||||
description: A component used to display additional information when hovering over a word or phrase.
|
||||
date: 19-02-2025
|
||||
---
|
||||
|
||||
I have implemented the `tooltips` component into markdown which allows you to add additional information to a word or phrase when hovering. This feature is useful for providing definitions, explanations, or any other additional information that can enhance the user experience.
|
||||
|
||||
## Usage
|
||||
You can use tooltips in your Markdown content to provide additional information when hovering over a word or phrase.
|
||||
|
||||
### Preview
|
||||
|
||||
What do you know about <Tooltip text="DocuBook" tip="npx @docubook/create@latest" /> ? Create interactive nested documentations using MDX.
|
||||
|
||||
### Output Markdown
|
||||
|
||||
The above Markdown is converted to:
|
||||
|
||||
```markdown:index.mdx
|
||||
What do you know about <Tooltip text="DocuBook" tip="npx @docubook/create@latest" /> ? Create interactive nested documentations using MDX.
|
||||
```
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
title: Youtube
|
||||
description: A component used to embed YouTube videos directly into your documentation.
|
||||
date: 14-12-2024
|
||||
---
|
||||
|
||||
I have implemented a `YouTube` component for your documentation. This component allows you to easily embed YouTube videos directly into your documentation by simply inputting the video's ID.
|
||||
|
||||
## Preview
|
||||
|
||||
<Youtube videoId="8sM0Di7Ew9Q" />
|
||||
|
||||
## Output Markdown
|
||||
|
||||
```markdown
|
||||
<Youtube videoId="8sM0Di7Ew9Q" />
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
<Note type="note" title="Usage">
|
||||
for example the youtube URL show this https://www.youtube.com/watch?v=8sM0Di7Ew9Q the ID `8sM0Di7Ew9Q`
|
||||
</Note>
|
||||
@@ -1,92 +0,0 @@
|
||||
---
|
||||
title: Customize
|
||||
description: This guide provides instructions on customizing our application.
|
||||
date: 29-11-2024
|
||||
---
|
||||
|
||||
## Markdown Options
|
||||
|
||||
To customize Markdown parsing, navigate to `@lib/markdown.ts` and locate the `parseMdx` function. You can add your desired plugins in the `mdxOptions`. Here’s an example:
|
||||
|
||||
```ts:lib/markdown.ts
|
||||
async function parseMdx<Frontmatter>(rawMdx: string) {
|
||||
return await compileMDX<Frontmatter>({
|
||||
source: rawMdx,
|
||||
options: {
|
||||
parseFrontmatter: true,
|
||||
mdxOptions: {
|
||||
// Add your plugins here
|
||||
rehypePlugins: [Shiki],
|
||||
remarkPlugins: [remarkGfm],
|
||||
},
|
||||
},
|
||||
components,
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## Fonts
|
||||
|
||||
Currently, this project uses the `Geist` font. If you want to use other fonts, you can change the configuration in the main layout as shown below:
|
||||
|
||||
### Google Fonts
|
||||
|
||||
To use a Google font, import your desired font from `next/font/google`, initialize it with options, and apply the variable to the `body`:
|
||||
|
||||
```tsx:app/layout.tsx
|
||||
import { Space_Grotesk } from "next/font/google";
|
||||
|
||||
const fontSans = Space_Grotesk({
|
||||
display: "swap",
|
||||
variable: "--font-regular",
|
||||
weight: "400",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`${fontSans.variable} font-regular`}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Local Fonts
|
||||
|
||||
To use a local font, you need to use the local font loader from Next.js. Pass the options and apply them to the `body`:
|
||||
|
||||
```tsx:app/layout.tsx
|
||||
import localFont from "next/font/local";
|
||||
|
||||
const geistSans = localFont({
|
||||
src: "./fonts/GeistVF.woff",
|
||||
variable: "--font-regular",
|
||||
weight: "100 900",
|
||||
});
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`${geistSans.variable} font-regular`}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
For both options, ensure that you add the variable to `tailwind.config.ts`:
|
||||
|
||||
```ts:tailwind.config.ts
|
||||
{
|
||||
// ...
|
||||
extend: {
|
||||
fontFamily: {
|
||||
regular: ["var(--font-regular)"],
|
||||
},
|
||||
}
|
||||
}
|
||||
```
|
||||
63
contents/docs/getting-started/development/index.mdx
Normal file
63
contents/docs/getting-started/development/index.mdx
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title : Development
|
||||
description : for Development server and production
|
||||
date : 10-12-2024
|
||||
---
|
||||
|
||||
## Heading 2
|
||||
|
||||
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
|
||||
|
||||
### Heading 3
|
||||
|
||||
example of ordered list format :
|
||||
|
||||
- list one
|
||||
- sub list
|
||||
- list two
|
||||
- list three
|
||||
|
||||
#### Heading 4
|
||||
|
||||
Below is an example of how to write a code block :
|
||||
|
||||
````plaintext
|
||||
```javascript:main.js showLineNumbers {3-4}
|
||||
function isRocketAboutToCrash() {
|
||||
// Check if the rocket is stable
|
||||
if (!isStable()) {
|
||||
NoCrash(); // Prevent the crash
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
example note :
|
||||
```plaintext
|
||||
<Note type="note" title="Note">
|
||||
This is a general note to convey information to the user.
|
||||
</Note>
|
||||
```
|
||||
|
||||
displaying an image in markdown format :
|
||||
|
||||
```plaintext
|
||||
|
||||
```
|
||||
|
||||
render as :
|
||||
|
||||
|
||||
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
|
||||
|
||||
<Note type="warning" title="Warning">
|
||||
every page that is indexed in a folder will have an `index.mdx` file with metadata :
|
||||
```plaintext
|
||||
---
|
||||
title : Introduction
|
||||
description : overview or synopsis of a project
|
||||
date : 10-12-2024
|
||||
image : example-img.png
|
||||
---
|
||||
```
|
||||
</Note>
|
||||
@@ -1,9 +0,0 @@
|
||||
---
|
||||
title: Getting Started
|
||||
description: Set up Your Documentations with DocuBook
|
||||
date: 29-05-2025
|
||||
---
|
||||
|
||||
Welcome to DocuBook! This guide will help you set up and customize your documentation site quickly. Whether you're creating API references, user guides, or technical documentation, these components will help you build a professional and consistent documentation experience. Follow the steps below to get started with DocuBook and make the most of its powerful features.
|
||||
|
||||
<Outlet path="getting-started" />
|
||||
@@ -1,84 +0,0 @@
|
||||
---
|
||||
title: Installation
|
||||
description: Installation guide for our application.
|
||||
date: 17-02-2025
|
||||
---
|
||||
|
||||
Setting up DocuBook is straightforward, with options to clone the repository or use the convenient `npx` command. DocuBook requires [Node.js](https://nodejs.org/) version 18 or higher for optimal performance.
|
||||
|
||||
## Clone Repository
|
||||
|
||||
To get started, you can clone the DocuBook repository directly from GitHub.
|
||||
|
||||
<Stepper>
|
||||
<StepperItem title="Step 1: Clone the DocuBook Repository">
|
||||
Begin by cloning the DocuBook repository from GitHub:
|
||||
|
||||
```bash
|
||||
git clone --branch main https://github.com/DocuBook/docubook.git
|
||||
```
|
||||
|
||||
</StepperItem>
|
||||
|
||||
<StepperItem title="Step 2: Access the Project Directory">
|
||||
After cloning, navigate into the project directory to start setting up:
|
||||
|
||||
```bash
|
||||
cd docubook
|
||||
```
|
||||
|
||||
</StepperItem>
|
||||
|
||||
<StepperItem title="Step 3: Install Required Dependencies">
|
||||
Install all necessary project dependencies with npm:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
</StepperItem>
|
||||
|
||||
<StepperItem title="Step 4: Launch the Development Server">
|
||||
Finally, start the development server to view the project locally:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
|
||||
## Quick Setup with CLI
|
||||
|
||||
For a faster setup, use the `cli` command to create a new DocuBook project in one step:
|
||||
|
||||
<Tabs defaultValue="npm" className="pt-5 pb-1">
|
||||
<TabsList>
|
||||
<TabsTrigger value="npm">npm</TabsTrigger>
|
||||
<TabsTrigger value="pnpm">pnpm</TabsTrigger>
|
||||
<TabsTrigger value="bun">bun</TabsTrigger>
|
||||
<TabsTrigger value="yarn">yarn</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="npm">
|
||||
```shell
|
||||
npx @docubook/create@latest
|
||||
```
|
||||
</TabsContent>
|
||||
<TabsContent value="pnpm">
|
||||
```shell
|
||||
pnpm dlx @docubook/create@latest
|
||||
```
|
||||
</TabsContent>
|
||||
<TabsContent value="bun">
|
||||
```shell
|
||||
bunx @docubook/create@latest
|
||||
```
|
||||
</TabsContent>
|
||||
<TabsContent value="yarn">
|
||||
```shell
|
||||
yarn dlx @docubook/create@latest
|
||||
```
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
With this setup, you’ll have a ready-to-use DocuBook instance to start building your documentation.
|
||||
@@ -1,50 +1,63 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: This section provides an overview of DocuBook.
|
||||
date: 29-11-2024
|
||||
image: example-img.png
|
||||
title : Introduction
|
||||
description : overview or synopsis of a project
|
||||
date : 10-12-2024
|
||||
---
|
||||
|
||||
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.
|
||||
## Heading 2
|
||||
|
||||
## Open Source Philosophy
|
||||
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
|
||||
|
||||
DocuBook is proudly **open-source**! 🎉 We believe in creating an accessible, collaborative platform that thrives on community contributions.
|
||||
### Heading 3
|
||||
|
||||
<Note title="Contribute">
|
||||
Interested in helping us improve? Check out our [GitHub
|
||||
repository](https://github.com/DocuBook/docubook) to get started! From
|
||||
feature suggestions to bug fixes, all contributions are welcome.
|
||||
example of ordered list format :
|
||||
|
||||
- list one
|
||||
- sub list
|
||||
- list two
|
||||
- list three
|
||||
|
||||
#### Heading 4
|
||||
|
||||
Below is an example of how to write a code block :
|
||||
|
||||
````plaintext
|
||||
```javascript:main.js showLineNumbers {3-4}
|
||||
function isRocketAboutToCrash() {
|
||||
// Check if the rocket is stable
|
||||
if (!isStable()) {
|
||||
NoCrash(); // Prevent the crash
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
example note :
|
||||
```plaintext
|
||||
<Note type="note" title="Note">
|
||||
This is a general note to convey information to the user.
|
||||
</Note>
|
||||
```
|
||||
|
||||
## Project Overview
|
||||
displaying an image in markdown format :
|
||||
|
||||
**DocuBook** is more than just a documentation template. It's a **complete toolkit** designed for modern web development. Key features include:
|
||||
```plaintext
|
||||
|
||||
```
|
||||
|
||||
- **Markdown & MDX Support:** Easily write documentation in Markdown, with the option to include interactive components via MDX.
|
||||
- **Customizable Themes:** Designed with a minimalist ShadCN-inspired theme that’s easy to style.
|
||||
- **SEO-Optimized:** Each page is SEO-ready, ensuring search engines can find and rank your content.
|
||||
- **Interactive Code Blocks:** Beautifully styled, language-specific code blocks for an enhanced reading experience.
|
||||
render as :
|
||||
|
||||
|
||||
### Key Features
|
||||
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
|
||||
|
||||
| **Feature** | **Description** |
|
||||
| ------------------------------- | ----------------------------------------------------- |
|
||||
| MDX Support | Write interactive documentation with MDX. |
|
||||
| Nested Pages | Organize content in a nested, hierarchical structure. |
|
||||
| Pagination | Split content across multiple pages. |
|
||||
| Syntax Highlighting | Highlight code for better readability. |
|
||||
| Code Line Highlighting & Titles | Highlight specific lines with descriptive titles. |
|
||||
| Interactive Code Blocks | Language-specific and interactive code display. |
|
||||
| Custom Markdown Components | Embed custom, reusable components in your docs. |
|
||||
| Static Site Generation | Generate a static, high-performance site. |
|
||||
| SEO-Optimized | Structured for optimal search engine indexing. |
|
||||
|
||||
## Technology & Libraries
|
||||
|
||||
DocuBook leverages cutting-edge technologies to ensure performance and flexibility:
|
||||
|
||||
- **Next.js 14** - The powerful React framework optimized for production.
|
||||
- **Tailwind CSS** - Utility-first styling for quick, clean designs.
|
||||
- **Shadcn-UI** - Elegant, accessible components for a polished look.
|
||||
- **next-mdx-remote** - Enables MDX support for dynamic, interactive Markdown content.
|
||||
<Note type="warning" title="Warning">
|
||||
every page that is indexed in a folder will have an `index.mdx` file with metadata :
|
||||
```plaintext
|
||||
---
|
||||
title : Introduction
|
||||
description : overview or synopsis of a project
|
||||
date : 10-12-2024
|
||||
image : example-img.png
|
||||
---
|
||||
```
|
||||
</Note>
|
||||
@@ -1,87 +0,0 @@
|
||||
---
|
||||
title: Project Structure
|
||||
description: This section provides an overview of Project Structure.
|
||||
date: 29-11-2024
|
||||
---
|
||||
|
||||
## app
|
||||
|
||||
This folder contains the main application code for Next.js, managing layouts, routing, and specific content pages. It is organized to support both the `docs` sections, with dedicated pages and layouts for each section.
|
||||
|
||||
```
|
||||
app // Main Next.js application folder
|
||||
├── page.tsx // Hero page - the entry point of the app showcasing key content
|
||||
├── layout.tsx // Main layout file, applies global navigation and footer
|
||||
└── docs
|
||||
├── layout.tsx // Documentation layout with sidebar, providing easy navigation across doc pages
|
||||
└── [[...slug]] // Catch-all route to handle nested documentation pages, allowing flexible doc structure
|
||||
```
|
||||
|
||||
## components
|
||||
|
||||
This folder contains all reusable components used throughout the project. It’s structured to categorize components, making it easy to locate and manage UI elements, Markdown customizations, and navigation.
|
||||
|
||||
```
|
||||
components // Reusable components
|
||||
├── ui // ShadCN components, includes standardized UI elements like buttons, forms, and modals
|
||||
├── markdown // Custom Markdown components for rendering rich Markdown content
|
||||
│ ├── CodeBlock.tsx // Component for rendering syntax-highlighted code blocks
|
||||
│ ├── Image.tsx // Component for handling responsive images in Markdown
|
||||
│ └── Table.tsx // Component to render tables with consistent styling
|
||||
└── navbar.tsx // Main navigation component for the site header, managing links and responsive behavior
|
||||
```
|
||||
|
||||
## styles
|
||||
|
||||
This folder contains global and component-specific CSS files, allowing for project-wide styling consistency and customizations.
|
||||
|
||||
```
|
||||
styles // CSS files
|
||||
├── globals.css // Global CSS file, includes Tailwind base, utilities, and custom global styles
|
||||
├── syntax.css // Syntax highlighting styles, providing consistent code block appearance across the site
|
||||
└── overrides.css // Additional custom styles that override specific component or plugin defaults
|
||||
```
|
||||
|
||||
## contents
|
||||
|
||||
This folder stores all Markdown content for the documentation and blog sections, with clear organization by content type. Each Markdown file represents a single piece of content, with frontmatter used for metadata.
|
||||
|
||||
```
|
||||
contents // Markdown content for blogs and documentation
|
||||
├── docs // Documentation content, structured to support nested sections and pages
|
||||
│ ├── getting-started // Main Folder at the Contents
|
||||
│ └─── installation // Subfolder for tutorial-style content
|
||||
| └── index.mdx // Step-by-step tutorial on a specific topic
|
||||
```
|
||||
|
||||
## public
|
||||
|
||||
This folder holds all static assets, such as images, videos, fonts, and icons. These files are directly accessible via URL, so it’s important to avoid sensitive or private content here.
|
||||
|
||||
```
|
||||
public // Publicly accessible assets
|
||||
├── images // Image assets, used across various parts of the app
|
||||
│ ├── og-image.png // Default opengraph image for thumbnail
|
||||
│ └── docu.svg // Your site Logo
|
||||
├── favicon.ico // Favicon for the app
|
||||
└── videos // Video files for media content, if any
|
||||
```
|
||||
|
||||
## lib
|
||||
|
||||
This folder contains helper functions and utilities used across the application, such as Markdown parsing and routing logic. These utilities help keep the codebase clean and organized by separating out common functionality.
|
||||
|
||||
```
|
||||
lib // Utility or helper functions
|
||||
├── changelog.ts // Change log for the app, used to display recent changes and updates
|
||||
├── markdown.ts // Markdown parsing logic, converts Markdown to HTML and adds custom components
|
||||
├── routes-config.ts // Routing configuration for docs, maps URLs to content files for dynamic routing
|
||||
└── utils.tsx // General utility functions used across the app, such as data formatting and validation helpers
|
||||
```
|
||||
|
||||
## Additional
|
||||
|
||||
- **`package.json`**: Contains metadata about the project, dependencies, and scripts for building and running the application.
|
||||
- **`tailwind.config.ts`**: Configures Tailwind CSS, allowing customization of theme colors, fonts, and responsive breakpoints specific to this project.
|
||||
|
||||
This structure organizes your project in a way that supports scalability and maintainability, making it easier to navigate and work on different sections of the application.
|
||||
@@ -1,145 +1,63 @@
|
||||
---
|
||||
title: Quick Start Guide
|
||||
description: Get up and running with DocuBook in minutes with this comprehensive guide
|
||||
date: 20-05-2025
|
||||
title : Quick Start Guide
|
||||
description : a quick way to understand how to use it
|
||||
date : 10-12-2024
|
||||
---
|
||||
|
||||
Welcome to DocuBook! This guide will help you set up and customize your documentation site efficiently.
|
||||
## Heading 2
|
||||
|
||||
## Prerequisites
|
||||
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
|
||||
|
||||
Before we begin, ensure you have the following installed:
|
||||
### Heading 3
|
||||
|
||||
- [Git](https://git-scm.com/)
|
||||
- [Node.js 18+](https://nodejs.org/) or [Bun 1.0+](https://bun.sh/)
|
||||
- A package manager (npm, yarn, or pnpm)
|
||||
example of ordered list format :
|
||||
|
||||
## Installation
|
||||
- list one
|
||||
- sub list
|
||||
- list two
|
||||
- list three
|
||||
|
||||
<Note type="note" title="Initial Setup">
|
||||
Follow the [installation guide](/docs/getting-started/installation) to set up your project dependencies and configuration.
|
||||
#### Heading 4
|
||||
|
||||
Below is an example of how to write a code block :
|
||||
|
||||
````plaintext
|
||||
```javascript:main.js showLineNumbers {3-4}
|
||||
function isRocketAboutToCrash() {
|
||||
// Check if the rocket is stable
|
||||
if (!isStable()) {
|
||||
NoCrash(); // Prevent the crash
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
example note :
|
||||
```plaintext
|
||||
<Note type="note" title="Note">
|
||||
This is a general note to convey information to the user.
|
||||
</Note>
|
||||
```
|
||||
|
||||
## Project Setup
|
||||
|
||||
### Configuration
|
||||
|
||||
<Stepper>
|
||||
<StepperItem title="Add Favicon">
|
||||
Place your favicon at `public/favicon.ico` for browser tab display.
|
||||
</StepperItem>
|
||||
<StepperItem title="Add Logo">
|
||||
Add your logo at `public/images/docu.svg` (SVG format recommended for scalability).
|
||||
</StepperItem>
|
||||
<StepperItem title="Update Site Information">
|
||||
Customize your site's metadata in `docu.json`:
|
||||
- Site title and description
|
||||
- Navigation structure
|
||||
- Default theme settings
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
|
||||
## Content Management
|
||||
|
||||
### File Structure
|
||||
|
||||
DocuBook organizes content in a hierarchical structure:
|
||||
displaying an image in markdown format :
|
||||
|
||||
```plaintext
|
||||
contents/
|
||||
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
|
||||
|
||||
```
|
||||
|
||||
### Creating New Content
|
||||
render as :
|
||||
|
||||
|
||||
<Stepper>
|
||||
<StepperItem title="1. Create Content Directory">
|
||||
Organize your documentation by creating a new directory:
|
||||
```bash
|
||||
mkdir -p contents/docs/your-section/your-topic
|
||||
```
|
||||
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
|
||||
|
||||
Example for an API reference:
|
||||
```bash
|
||||
mkdir -p contents/docs/api/authentication
|
||||
```
|
||||
</StepperItem>
|
||||
|
||||
<StepperItem title="2. Create MDX Content">
|
||||
Add an `index.mdx` file with frontmatter metadata:
|
||||
````markdown
|
||||
---
|
||||
title: Authentication
|
||||
description: Learn how to implement user authentication
|
||||
date: 2025-05-29
|
||||
---
|
||||
|
||||
Your comprehensive guide to implementing authentication in your application.
|
||||
|
||||
## Getting Started
|
||||
|
||||
Start by setting up your authentication provider...
|
||||
````
|
||||
</StepperItem>
|
||||
|
||||
<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": "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 Workflow
|
||||
|
||||
### Local Development
|
||||
|
||||
Start the development server with live reload:
|
||||
|
||||
```bash
|
||||
# Using npm
|
||||
npm run dev
|
||||
|
||||
# Or using Bun
|
||||
bun dev
|
||||
```
|
||||
|
||||
Access your site at [http://localhost:3000](http://localhost:3000)
|
||||
|
||||
### Building for Production
|
||||
|
||||
When ready to deploy:
|
||||
|
||||
```bash
|
||||
# Build the production version
|
||||
npm run build
|
||||
|
||||
# Start the production server
|
||||
npm start
|
||||
```
|
||||
<Note type="warning" title="Warning">
|
||||
every page that is indexed in a folder will have an `index.mdx` file with metadata :
|
||||
```plaintext
|
||||
---
|
||||
title : Introduction
|
||||
description : overview or synopsis of a project
|
||||
date : 10-12-2024
|
||||
image : example-img.png
|
||||
---
|
||||
```
|
||||
</Note>
|
||||
@@ -1,165 +0,0 @@
|
||||
---
|
||||
title: Coffee
|
||||
description: A warm, minimalistic design inspired by early computing. This theme is a replica of the "Coffee" theme from the `shiki-twoslash` package.
|
||||
date: 2025-05-30
|
||||
---
|
||||
|
||||
## Styles
|
||||
|
||||
<Note type="note" title="note">
|
||||
You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
|
||||
</Note>
|
||||
|
||||
<Tabs defaultValue="globals" className="pt-5 pb-1">
|
||||
<TabsList>
|
||||
<TabsTrigger value="globals">globals.css</TabsTrigger>
|
||||
<TabsTrigger value="syntax">syntax.css</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="globals">
|
||||
```css:globals.css
|
||||
/* Rich Coffee Theme */
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 35 40% 96%;
|
||||
--foreground: 25 25% 10%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 25 25% 10%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 25 25% 10%;
|
||||
--primary: 25 60% 40%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 35 30% 90%;
|
||||
--secondary-foreground: 25 25% 10%;
|
||||
--muted: 35 20% 94%;
|
||||
--muted-foreground: 25 15% 35%;
|
||||
--accent: 30 50% 38%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
--destructive: 5 85% 45%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 30 15% 85%;
|
||||
--input: 30 15% 88%;
|
||||
--ring: 25 60% 40%;
|
||||
--radius: 0.5rem;
|
||||
--chart-1: 25 60% 45%;
|
||||
--chart-2: 30 55% 45%;
|
||||
--chart-3: 35 50% 42%;
|
||||
--chart-4: 20 45% 38%;
|
||||
--chart-5: 40 45% 40%;
|
||||
--line-number-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 30 10% 6%;
|
||||
--foreground: 35 20% 94%;
|
||||
--card: 30 10% 8%;
|
||||
--card-foreground: 35 20% 94%;
|
||||
--popover: 30 10% 8%;
|
||||
--popover-foreground: 35 20% 94%;
|
||||
--primary: 30 45% 52%;
|
||||
--primary-foreground: 30 10% 6%;
|
||||
--secondary: 30 12% 14%;
|
||||
--secondary-foreground: 35 20% 94%;
|
||||
--muted: 30 10% 16%;
|
||||
--muted-foreground: 30 15% 60%;
|
||||
--accent: 28 40% 48%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
--destructive: 5 80% 55%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 30 10% 20%;
|
||||
--input: 30 10% 20%;
|
||||
--ring: 30 45% 52%;
|
||||
--chart-1: 30 45% 52%;
|
||||
--chart-2: 28 40% 50%;
|
||||
--chart-3: 32 45% 50%;
|
||||
--chart-4: 25 35% 46%;
|
||||
--chart-5: 35 40% 48%;
|
||||
--line-number-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
```
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="syntax">
|
||||
```css:syntax.css
|
||||
/* Rich Coffee Theme - Syntax Highlighting */
|
||||
|
||||
/* Light Mode */
|
||||
.keyword {
|
||||
color: hsl(25 60% 35%); /* Rich coffee brown */
|
||||
}
|
||||
|
||||
.function {
|
||||
color: hsl(30 55% 38%); /* Warm coffee brown */
|
||||
}
|
||||
|
||||
.punctuation {
|
||||
color: hsl(30 15% 55%); /* Muted brown */
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: hsl(25 15% 45%); /* Muted brown */
|
||||
font-style: italic;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.string,
|
||||
.constant,
|
||||
.annotation,
|
||||
.boolean,
|
||||
.number {
|
||||
color: hsl(32 50% 40%); /* Warm brown with hint of orange */
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: hsl(25 65% 30%); /* Dark rich coffee */
|
||||
}
|
||||
|
||||
.attr-name {
|
||||
color: hsl(28 55% 38%); /* Warm brown */
|
||||
}
|
||||
|
||||
.attr-value {
|
||||
color: hsl(35 55% 35%); /* Slightly orange brown */
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
.dark .keyword {
|
||||
color: hsl(30 50% 65%); /* Light warm brown */
|
||||
}
|
||||
|
||||
.dark .function {
|
||||
color: hsl(28 55% 68%); /* Light warm brown */
|
||||
}
|
||||
|
||||
.dark .string,
|
||||
.dark .constant,
|
||||
.dark .annotation,
|
||||
.dark .boolean,
|
||||
.dark .number {
|
||||
color: hsl(35 50% 72%); /* Light warm brown with hint of orange */
|
||||
}
|
||||
|
||||
.dark .tag {
|
||||
color: hsl(30 50% 75%); /* Light warm brown */
|
||||
}
|
||||
|
||||
.dark .attr-name {
|
||||
color: hsl(28 45% 70%); /* Light warm brown */
|
||||
}
|
||||
|
||||
.dark .attr-value {
|
||||
color: hsl(35 50% 70%); /* Light warm brown with hint of orange */
|
||||
}
|
||||
|
||||
.dark .comment {
|
||||
color: hsl(30 15% 65%); /* Light brown-gray */
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.dark .punctuation {
|
||||
color: hsl(30 15% 70%); /* Light brown-gray */
|
||||
opacity: 0.9;
|
||||
}
|
||||
```
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
@@ -1,160 +0,0 @@
|
||||
---
|
||||
title: Default Theme
|
||||
description: This page explains the Modern Blue theme colors used in DocuBook, which is a default theme provided by DocuBook.
|
||||
date: 2025-05-20
|
||||
---
|
||||
|
||||
## Styles
|
||||
<Note type="note" title="note">
|
||||
You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
|
||||
</Note>
|
||||
|
||||
<Tabs defaultValue="globals" className="pt-5 pb-1">
|
||||
<TabsList>
|
||||
<TabsTrigger value="globals">globals.css</TabsTrigger>
|
||||
<TabsTrigger value="syntax">syntax.css</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="globals">
|
||||
```css:globals.css
|
||||
/* Modern Blue Theme */
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 210 40% 98%;
|
||||
--foreground: 220 30% 15%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 220 30% 15%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 220 30% 15%;
|
||||
--primary: 210 81% 56%; /* #2281E3 */
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 210 30% 90%;
|
||||
--secondary-foreground: 220 30% 15%;
|
||||
--muted: 210 20% 92%;
|
||||
--muted-foreground: 220 15% 50%;
|
||||
--accent: 200 100% 40%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
--destructive: 0 85% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 210 20% 85%;
|
||||
--input: 210 20% 85%;
|
||||
--ring: 210 81% 56%;
|
||||
--radius: 0.5rem;
|
||||
--chart-1: 210 81% 56%;
|
||||
--chart-2: 200 100% 40%;
|
||||
--chart-3: 220 76% 60%;
|
||||
--chart-4: 190 90% 50%;
|
||||
--chart-5: 230 86% 45%;
|
||||
--line-number-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 220 25% 10%;
|
||||
--foreground: 210 30% 96%;
|
||||
--card: 220 25% 15%;
|
||||
--card-foreground: 210 30% 96%;
|
||||
--popover: 220 25% 15%;
|
||||
--popover-foreground: 210 30% 96%;
|
||||
--primary: 210 100% 65%;
|
||||
--primary-foreground: 220 25% 10%;
|
||||
--secondary: 215 25% 20%;
|
||||
--secondary-foreground: 210 30% 96%;
|
||||
--muted: 215 20% 25%;
|
||||
--muted-foreground: 215 20% 65%;
|
||||
--accent: 200 100% 60%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
--destructive: 0 85% 70%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 215 20% 25%;
|
||||
--input: 215 20% 25%;
|
||||
--ring: 210 100% 65%;
|
||||
--chart-1: 210 100% 65%;
|
||||
--chart-2: 200 100% 60%;
|
||||
--chart-3: 220 90% 70%;
|
||||
--chart-4: 190 100% 65%;
|
||||
--chart-5: 230 90% 60%;
|
||||
--line-number-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
```
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="syntax">
|
||||
```css:syntax.css
|
||||
/* Modern Blue Theme */
|
||||
/* Light Mode */
|
||||
.keyword {
|
||||
color: #1d4ed8; /* Darker blue for better contrast */
|
||||
}
|
||||
|
||||
.function {
|
||||
color: #0369a1; /* Deep blue */
|
||||
}
|
||||
|
||||
.punctuation {
|
||||
color: #4b5563; /* Slate gray */
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: #6b7280; /* Muted gray */
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.string,
|
||||
.constant,
|
||||
.annotation,
|
||||
.boolean,
|
||||
.number {
|
||||
color: #0d9488; /* Teal for better distinction */
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: #1d4ed8; /* Matching keyword color */
|
||||
}
|
||||
|
||||
.attr-name {
|
||||
color: #0284c7; /* Sky blue */
|
||||
}
|
||||
|
||||
.attr-value {
|
||||
color: #2563eb; /* Primary blue */
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
.dark .keyword {
|
||||
color: #60a5fa; /* Soft blue */
|
||||
}
|
||||
|
||||
.dark .function {
|
||||
color: #38bdf8; /* Sky blue */
|
||||
}
|
||||
|
||||
.dark .string,
|
||||
.dark .constant,
|
||||
.dark .annotation,
|
||||
.dark .boolean,
|
||||
.dark .number {
|
||||
color: #2dd4bf; /* Teal */
|
||||
}
|
||||
|
||||
.dark .tag {
|
||||
color: #60a5fa; /* Matching keyword color */
|
||||
}
|
||||
|
||||
.dark .attr-name {
|
||||
color: #7dd3fc; /* Lighter blue */
|
||||
}
|
||||
|
||||
.dark .attr-value {
|
||||
color: #3b82f6; /* Brighter blue */
|
||||
}
|
||||
|
||||
.dark .comment {
|
||||
color: #9ca3af; /* Lighter gray for dark mode */
|
||||
}
|
||||
|
||||
.dark .punctuation {
|
||||
color: #9ca3af; /* Lighter gray for dark mode */
|
||||
}
|
||||
```
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
@@ -1,161 +0,0 @@
|
||||
---
|
||||
title: Fresh Lime
|
||||
description: A fresh and vibrant freshlime-themed color scheme that's easy on the eyes while maintaining excellent readability.
|
||||
date: 2025-05-30
|
||||
---
|
||||
|
||||
## Styles
|
||||
<Note type="note" title="note">
|
||||
You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
|
||||
</Note>
|
||||
|
||||
<Tabs defaultValue="globals" className="pt-5 pb-1">
|
||||
<TabsList>
|
||||
<TabsTrigger value="globals">globals.css</TabsTrigger>
|
||||
<TabsTrigger value="syntax">syntax.css</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="globals">
|
||||
```css:globals.css
|
||||
/* Fresh Lime Theme */
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 85 45% 98%;
|
||||
--foreground: 85 30% 10%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 85 30% 10%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 85 30% 10%;
|
||||
--primary: 85 70% 45%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 85 40% 90%;
|
||||
--secondary-foreground: 85 30% 10%;
|
||||
--muted: 85 30% 92%;
|
||||
--muted-foreground: 85 15% 45%;
|
||||
--accent: 85 60% 40%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
--destructive: 0 85% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 85 25% 88%;
|
||||
--input: 85 25% 88%;
|
||||
--ring: 85 70% 45%;
|
||||
--radius: 0.5rem;
|
||||
--chart-1: 85 70% 45%;
|
||||
--chart-2: 85 60% 40%;
|
||||
--chart-3: 85 80% 40%;
|
||||
--chart-4: 85 85% 35%;
|
||||
--chart-5: 85 90% 30%;
|
||||
--line-number-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 85 20% 8%;
|
||||
--foreground: 85 30% 96%;
|
||||
--card: 85 20% 10%;
|
||||
--card-foreground: 85 30% 96%;
|
||||
--popover: 85 20% 10%;
|
||||
--popover-foreground: 85 30% 96%;
|
||||
--primary: 85 75% 55%;
|
||||
--primary-foreground: 85 20% 8%;
|
||||
--secondary: 85 25% 18%;
|
||||
--secondary-foreground: 85 30% 96%;
|
||||
--muted: 85 20% 20%;
|
||||
--muted-foreground: 85 20% 70%;
|
||||
--accent: 85 70% 50%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
--destructive: 0 85% 65%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 85 25% 22%;
|
||||
--input: 85 25% 22%;
|
||||
--ring: 85 75% 55%;
|
||||
--chart-1: 85 75% 55%;
|
||||
--chart-2: 85 70% 50%;
|
||||
--chart-3: 85 80% 45%;
|
||||
--chart-4: 85 85% 40%;
|
||||
--chart-5: 85 90% 35%;
|
||||
--line-number-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
```
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="syntax">
|
||||
```css:syntax.css
|
||||
/* Fresh Lime Theme - Syntax Highlighting */
|
||||
|
||||
/* Light Mode */
|
||||
.keyword {
|
||||
color: hsl(85 70% 30%); /* Dark lime green */
|
||||
}
|
||||
|
||||
.function {
|
||||
color: hsl(85 65% 35%); /* Slightly lighter lime */
|
||||
}
|
||||
|
||||
.punctuation {
|
||||
color: hsl(85 15% 50%); /* Muted green-gray */
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: hsl(85 15% 50%); /* Muted green-gray */
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.string,
|
||||
.constant,
|
||||
.annotation,
|
||||
.boolean,
|
||||
.number {
|
||||
color: hsl(85 50% 35%); /* Medium lime green */
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: hsl(85 70% 25%); /* Darker lime */
|
||||
}
|
||||
|
||||
.attr-name {
|
||||
color: hsl(85 60% 35%); /* Lime green */
|
||||
}
|
||||
|
||||
.attr-value {
|
||||
color: hsl(85 70% 30%); /* Dark lime green */
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
.dark .keyword {
|
||||
color: hsl(85 75% 65%); /* Bright lime */
|
||||
}
|
||||
|
||||
.dark .function {
|
||||
color: hsl(85 75% 60%); /* Slightly less bright lime */
|
||||
}
|
||||
|
||||
.dark .string,
|
||||
.dark .constant,
|
||||
.dark .annotation,
|
||||
.dark .boolean,
|
||||
.dark .number {
|
||||
color: hsl(85 60% 70%); /* Light lime */
|
||||
}
|
||||
|
||||
.dark .tag {
|
||||
color: hsl(85 70% 70%); /* Bright lime */
|
||||
}
|
||||
|
||||
.dark .attr-name {
|
||||
color: hsl(85 65% 70%); /* Light lime */
|
||||
}
|
||||
|
||||
.dark .attr-value {
|
||||
color: hsl(85 75% 65%); /* Bright lime */
|
||||
}
|
||||
|
||||
.dark .comment {
|
||||
color: hsl(85 15% 60%); /* Light gray-green */
|
||||
}
|
||||
|
||||
.dark .punctuation {
|
||||
color: hsl(85 20% 70%); /* Light gray-green */
|
||||
}
|
||||
```
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
@@ -1,9 +0,0 @@
|
||||
---
|
||||
title : Theme Colors
|
||||
description : Color system used in DocuBook for styling UI elements
|
||||
date : 2025-05-20
|
||||
---
|
||||
|
||||
DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.
|
||||
|
||||
<Outlet path="getting-started/theme-colors" />
|
||||
@@ -1,77 +0,0 @@
|
||||
---
|
||||
title: Llms.txt - Generate Custom Theme
|
||||
description: Complete guide for creating and using AI-generated custom themes based on LLMS context.
|
||||
date: 2025-05-31
|
||||
---
|
||||
|
||||
## Introduction
|
||||
This document explains how to create and implement custom color themes using AI with LLMS context. The context includes a consistent color palette for both light and dark modes, along with syntax highlighting colors for code.
|
||||
|
||||
## File Structure
|
||||
<Files>
|
||||
<Folder name="styles">
|
||||
<File name="globals.css" />
|
||||
<File name="syntax.css" />
|
||||
</Folder>
|
||||
</Files>
|
||||
|
||||
## Generate New Theme
|
||||
|
||||
<Stepper>
|
||||
<StepperItem title="Step 1: Access LLM for Color Generation">
|
||||
Ensure you have access to a language model (LLM) that supports color palette generation
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 2: Prepare Color Context">
|
||||
Share the content of the [llms.txt](/llms.txt) file with the AI to provide the current color scheme context.
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 3: Define Color Requirements">
|
||||
Determine your preferred color scheme or theme requirements
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 4: Generate New Theme">
|
||||
Use the following prompt to request a new theme from the AI:
|
||||
|
||||
```markdown
|
||||
Create a new color theme based on the provided context with the following requirements:
|
||||
1. Different primary color #2281E3
|
||||
2. Maintain good contrast for accessibility
|
||||
3. Include variants for both light and dark modes
|
||||
4. Keep the same structure as the provided context
|
||||
```
|
||||
<Note type="danger" title="Colors example">
|
||||
changes the value of Hex color `#2281E3` into your brand colors.
|
||||
</Note>
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
|
||||
## Implementation
|
||||
After receiving the new color palette:
|
||||
|
||||
1. Copy the generated CSS code to your theme file
|
||||
2. Update CSS variables in `globals.css`
|
||||
3. Adjust syntax colors in `syntax.css` if needed
|
||||
4. Test the theme across different devices and display modes
|
||||
|
||||
## Example Implementation
|
||||
```css
|
||||
:root {
|
||||
--primary: 210 81% 56%; /* Primary color */
|
||||
--secondary: 210 30% 90%; /* Secondary color */
|
||||
/* ... and so on */
|
||||
}
|
||||
|
||||
.dark {
|
||||
--primary: 210 100% 65%; /* Dark mode primary color */
|
||||
/* ... and so on */
|
||||
}
|
||||
```
|
||||
|
||||
## Tips and Recommendations
|
||||
- Always test color contrast to ensure accessibility
|
||||
- Maintain consistency with existing themes
|
||||
- Use tools like [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) to verify contrast ratios
|
||||
- Keep backups of previous theme versions before making major changes
|
||||
|
||||
## Troubleshooting
|
||||
- If colors don't change, ensure CSS variables are properly imported
|
||||
- Check CSS selector specificity if styles conflict
|
||||
- Verify dark/light mode toggling is working correctly
|
||||
194
docu.json
194
docu.json
@@ -1,5 +1,12 @@
|
||||
{
|
||||
"navbar": {
|
||||
"$schema": "https://docubook.pro/docu.schema.json",
|
||||
"meta": {
|
||||
"baseURL": "https://docubook.pro",
|
||||
"title": "DocuBook",
|
||||
"description": "DocuBook is a modern documentation platform for building, deploying, and managing your docs with ease.",
|
||||
"favicon": "/favicon.ico"
|
||||
},
|
||||
"navbar": {
|
||||
"logo": {
|
||||
"src": "/images/docu.svg",
|
||||
"alt": "DocuBook Logo"
|
||||
@@ -10,120 +17,99 @@
|
||||
{ "title": "Docs", "href": "/docs/getting-started/introduction" },
|
||||
{ "title": "Community", "href": "https://docubook.pro" }
|
||||
]
|
||||
},
|
||||
"footer": {
|
||||
"copyright": "DocuBook",
|
||||
"social": [
|
||||
{
|
||||
"name": "Instagram",
|
||||
"url": "https://www.instagram.com/wildan.nrs",
|
||||
"iconName": "InstagramIcon"
|
||||
},
|
||||
{
|
||||
"name": "Facebook",
|
||||
"url": "https://www.facebook.com/wildan.nrsh",
|
||||
"iconName": "FacebookIcon"
|
||||
},
|
||||
{
|
||||
"name": "Twitter",
|
||||
"url": "https://x.com/wildan_nrss",
|
||||
"iconName": "TwitterIcon"
|
||||
},
|
||||
{
|
||||
"name": "Youtube",
|
||||
"url": "https://www.youtube.com/@wildan.nrs_",
|
||||
"iconName": "YoutubeIcon"
|
||||
}
|
||||
},
|
||||
"repository": {
|
||||
"url": "https://github.com/DocuBook/docubook",
|
||||
"editPathTemplate": "/blob/main/{filePath}",
|
||||
"editLink": true
|
||||
},
|
||||
"sponsor": {
|
||||
"title": "Hosted on",
|
||||
"item": {
|
||||
"title": "Vercel",
|
||||
"description": "Deploy your DocuBook app with zero configuration.",
|
||||
"image": "/images/vercel.png",
|
||||
"url": "https://vercel.com/import/project?template=https://github.com/DocuBook/docubook"
|
||||
}
|
||||
},
|
||||
"footer": {
|
||||
"copyright": "DocuBook",
|
||||
"social": [
|
||||
{
|
||||
"name": "Instagram",
|
||||
"url": "https://www.instagram.com/wildan.nrs",
|
||||
"iconName": "InstagramIcon"
|
||||
},
|
||||
{
|
||||
"name": "Facebook",
|
||||
"url": "https://www.facebook.com/wildan.nrsh",
|
||||
"iconName": "FacebookIcon"
|
||||
},
|
||||
{
|
||||
"name": "Twitter",
|
||||
"url": "https://x.com/wildan_nrss",
|
||||
"iconName": "TwitterIcon"
|
||||
},
|
||||
{
|
||||
"name": "Youtube",
|
||||
"url": "https://www.youtube.com/@wildan.nrs_",
|
||||
"iconName": "YoutubeIcon"
|
||||
}
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"baseURL": "https://docubook.pro",
|
||||
"title": "DocuBook",
|
||||
"description": "DocuBook is a modern documentation platform for building, deploying, and managing your docs with ease.",
|
||||
"favicon": "/favicon.ico"
|
||||
},
|
||||
"repository": {
|
||||
"url": "https://github.com/DocuBook/docubook",
|
||||
"editPathTemplate": "/blob/main/{filePath}",
|
||||
"editLink": true
|
||||
},
|
||||
"sponsor": {
|
||||
"title": "Hosted on",
|
||||
"item": {
|
||||
"title": "Vercel",
|
||||
"description": "Deploy your DocuBook app with zero configuration.",
|
||||
"image": "/images/vercel.png",
|
||||
"url": "https://vercel.com/import/project?template=https://github.com/DocuBook/docubook"
|
||||
}
|
||||
},
|
||||
"routes": [
|
||||
{
|
||||
{
|
||||
"title": "Getting Started",
|
||||
"href": "/getting-started",
|
||||
"noLink": true,
|
||||
"context": {
|
||||
"icon": "Book",
|
||||
"description": "Set up your Documentation",
|
||||
"title": "Guides"
|
||||
"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" },
|
||||
{
|
||||
"title": "Config",
|
||||
"href": "/config",
|
||||
"items": [
|
||||
{ "title": "Sub Config", "href": "/subconfig" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"items": [
|
||||
{ "title": "Introduction", "href": "/introduction" },
|
||||
{ "title": "Installation", "href": "/installation" },
|
||||
{ "title": "Quick Start Guide", "href": "/quick-start-guide" },
|
||||
{ "title": "Project Structure", "href": "/project-structure" },
|
||||
{ "title": "Customize", "href": "/customize" },
|
||||
{
|
||||
"title": "Theme Colors",
|
||||
"href": "/theme-colors",
|
||||
"items": [
|
||||
{ "title": "Default", "href": "/default" },
|
||||
{ "title": "Fresh Lime", "href": "/freshlime" },
|
||||
{ "title": "Coffee", "href": "/coffee" },
|
||||
{ "title": "llms.txt", "href": "/llms" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Components",
|
||||
"href": "/components",
|
||||
{
|
||||
"title": "Api Reference",
|
||||
"href": "/api-reference",
|
||||
"noLink": true,
|
||||
"context": {
|
||||
"icon": "Layers",
|
||||
"description": "Write with Markdown",
|
||||
"title": "Markdown"
|
||||
"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" }
|
||||
]
|
||||
},
|
||||
"items": [
|
||||
{ "title": "Accordion", "href": "/accordion" },
|
||||
{ "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": "Youtube", "href": "/youtube" },
|
||||
{ "title": "Custom", "href": "/custom" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Release",
|
||||
"href": "/changelog",
|
||||
{
|
||||
"title": "Changelog",
|
||||
"href": "/Changelog",
|
||||
"noLink": true,
|
||||
"context": {
|
||||
"icon": "History",
|
||||
"description": "Updates and changes",
|
||||
"title": "Changelog"
|
||||
},
|
||||
"items": [
|
||||
{ "title": "Version 1.0+", "href": "/version-1" }
|
||||
]
|
||||
}
|
||||
]
|
||||
"icon": "Hystory",
|
||||
"description": "Update and Changes",
|
||||
"title": "Release"
|
||||
},
|
||||
"items": [
|
||||
{ "title": "version 1", "href": "/version-1" },
|
||||
{ "title": "version 2", "href": "/version-2" },
|
||||
{ "title": "version 3", "href": "/version-3" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "docubook",
|
||||
"version": "1.15.1",
|
||||
"version": "1.15.2",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
|
||||
Reference in New Issue
Block a user