diff --git a/app/page.tsx b/app/page.tsx
index 91342f1..76ca52f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -25,7 +25,7 @@ export default function Home() {
)}
>
- π New Version - Release v1.15.1
+ π New Version - Release v1.15.2
diff --git a/contents/docs/api-reference/delete/index.mdx b/contents/docs/api-reference/delete/index.mdx
new file mode 100644
index 0000000..bb0cd9c
--- /dev/null
+++ b/contents/docs/api-reference/delete/index.mdx
@@ -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
+
+ This is a general note to convey information to the user.
+
+```
+
+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.
+
+
+ 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
+---
+ ```
+
\ No newline at end of file
diff --git a/contents/docs/api-reference/fetch/index.mdx b/contents/docs/api-reference/fetch/index.mdx
new file mode 100644
index 0000000..ce0f5d0
--- /dev/null
+++ b/contents/docs/api-reference/fetch/index.mdx
@@ -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
+
+ This is a general note to convey information to the user.
+
+```
+
+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.
+
+
+ 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
+---
+ ```
+
\ No newline at end of file
diff --git a/contents/docs/api-reference/get/index.mdx b/contents/docs/api-reference/get/index.mdx
new file mode 100644
index 0000000..916db15
--- /dev/null
+++ b/contents/docs/api-reference/get/index.mdx
@@ -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
+
+ This is a general note to convey information to the user.
+
+```
+
+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.
+
+
+ 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
+---
+ ```
+
\ No newline at end of file
diff --git a/contents/docs/api-reference/post/index.mdx b/contents/docs/api-reference/post/index.mdx
new file mode 100644
index 0000000..fa780cd
--- /dev/null
+++ b/contents/docs/api-reference/post/index.mdx
@@ -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
+
+ This is a general note to convey information to the user.
+
+```
+
+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.
+
+
+ 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
+---
+ ```
+
\ No newline at end of file
diff --git a/contents/docs/changelog/version-1/index.mdx b/contents/docs/changelog/version-1/index.mdx
index c7e37f1..f5a1ce8 100644
--- a/contents/docs/changelog/version-1/index.mdx
+++ b/contents/docs/changelog/version-1/index.mdx
@@ -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
---
-
- 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.
-
+## Render as
-
-### v 1.15.1
-
-
-
+
- - new DocSearch.tsx components
- - add props type algolia
- - add searchprops
- - add algolia.css
-
-
-
-
-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 to
-```
-
-
-
-### v 1.14.2
-
-
-
-
- - Refactor Search component into three distinct components: Search, SearchTrigger, and SearchModal for better maintainability and scalability.
- - New SearchTrigger components
- - New SearchModal components
+ - add components
- - 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.
-
-
-
-
-### v 1.14.0
-
-
-
-
- - Add workflows to run Sync NPM package
- - Add sync-from-npm.yml
- - Add PR to organization github.com/DocuBook/docubook
-
-
-
-
-### v 1.13.9
-
-
-
-
- - 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
- - 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
-
- - 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
-
-
- - Removed unused state and variables in toc-observer.tsx
- - Removed unused imports for cleaner codebase
-
-
-
-
-### v 1.13.6
-
-
-
-
- - Improve sheet leftbar and search icon
- - color scheme for sheet leftbar
- - color scheme for search icon
-
-
-
-
-### v 1.13.5
-
-
-
-
- - Add Theme schema
- - Add Freshlime theme
- - Add Coffee theme
- - Add llms context for generated theme with AI
-
-
- - Markdown support for theme-colors
- - consistent theme-colors page
- - all components now consistent with theme-colors
- - syntax with theme-colors
-
-
- - fix bug FileTree component
- - fix issue markdown with theme-colors
-
-
-
-
-### v 1.13.0
-
-
-
-
- - New ContextMenu component for organizing file and folder
- - Nested docs folder and file support with context menu
-
-
- - 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
-
-
-
-
-### v 1.12.0
-
-
-
-
- - 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
-
-
- - search dialog hover effect return key
- - search icon showing on mobile screens
-
-
- - 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
-
-
- - remove prompts depedencies
- - remove degit depedencies
- - remove prompts functions
- - remove degit functions
- - remove prompts and degit from package.json
- - remove clone repository using git
-
-
-
-
- on this version `1.12.0`, we remove clone repository using git and replace it with cli to copy from path npm registry
-
-
-
-### v 1.11.0
-
-
-
-
- - 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
-
-
-
- - Enhanced documentation with comprehensive usage examples
- - Better component organization and styling
- - Semantic versioning support
- - Nested release notes support
-
-
-
- - Removed old changelog page in favor of the new ReleaseMdx component
- - Removed changelog.md
- - Removed changelog/page.tsx
- - Removed changelog.ts
- - Removed components/changelog
-
-
-
-
-### v 1.10.1
-
-
-
-
- - 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
-
-
-
- - 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
-
-
-
- - Remove blog page
- - Remove blog functions on markdown
-
-
-
-
-### v 1.10.0
-
-
-
-
- - 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
-
-
-
- - 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
-
-
-
- - 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
-
-
- - No longer support changelog.md
- - No longer support changelog/page.tsx (will be removed in future update)
+ - deprecated footer components
+
+
+ - removed utility class
+ - removed unused hooks
-
-### v 1.9.0
-
+## Output Markdown
-
+```
+
- - New Keyboard component with props show, type, children
- - Snippet keyboard component
+ - add components
-
-
- - Support custom content
- - Support platform type (mac or window)
- - Support automatic rendering of platform-specific key symbols
- - Rename lowercase to camelCase for markdown component
-
-
-
-
-### v 1.8.5
-
-
-
-
- - 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
-
-
-
- - Adjustment docu.json
- - Adjustment navbar, footer and components
-
-
- - 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
+
+
+ - improved search components
+
+
+ - deprecated footer components
-
- - Remove confusing and verbose CLI on installer
+ - removed utility class
+ - removed unused hooks
-
-
-### v 1.8.0
-
-
-
-
- - Social footer
- - Toggle group
- - Site description in footer
- - Site title in footer
-
-
-
- - Header design changes
- - Footer design changes
- - New functions in theme provider
- - Object changes in docu.json
-
-
-
- - Updates to path structure components
- - Groups to organize components
-
-
-
-
-### v 1.7.0
-
-
-
-
- - Up and down navigation in search dialog
- - Enter (return) to select in search dialog
- - Escape to close the dialog
-
-
-
- - Maintenance for anchor components
- - Anchor.tsx adjustments for all elements that use it
-
-
-
- - Remove suboptimal search features
-
-
-
-
-### v 1.6.0
-
-
-
-
- - Card Groups Components
- - Props: href to url link
- - Props: horizontal boolean
-
-
-
- - Card props styling
- - Compatibility for Cards components
- - Support for children props in card content
-
-
-
- - Remove unused props cards components
-
-
-
-
-### v 1.5.0
-
-
-
-
- - New dialog footer on searchbox above medium screens
- - Icon X for close dialog on searchbox (ESC key on medium screen)
-
-
-
- - 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
-
-
-
- - 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)
-
-
-
-
-### v 1.4.2
-
-
-
-
- - 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
-
-
-
- - Better UI design for accordion
- - Styling Note components on markdown
- - Change accordion output on playground
- - Change accordion output on snippet
-
-
-
- - Remove deprecated props on accordion
- - Remove CLI npx update_docu
- - Remove CLI npx create_docu
-
-
-
-
-### v 1.4.0
-
-
-
-
- - 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
-
-
-
- - Change icon version history
- - Responsive version-toc
- - Improvement components to changelog page
-
-
-
-
-### v 1.3.8
-
-
-
-
- - 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
-
-
-
- - lib/markdown for generated dynamic toc on markdown
- - Responsive Table of Content below large screens
- - Improve docs page
-
-
-
-
-### v 1.3.6
-
-
-
-
-
- - Line Number for editor
- - editor.css
-
-
-
- - Better Design for Editor
- - Similar to Github Editor
- - Moved Handler Element (copy, download, reset and fullscreen) on Header
-
-
-
-
-### v 1.3.5
-
-
-
-
-
- - 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
-
-
-
-
-### v 1.3.1
-
-
-
-
-
- - New Feature Snippet for Markdown Components
- - Support Snippet for Visual Studio Code
-
-
-
- - Remove props icon and props description for accordion components
-
-
-
-
-### v 1.3.0
-
-
-
-
- - 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
-
-
-
- - 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
-
-
-
- - Fix og:image not showing on Page.tsx
- - Fix text-indent on class li
-
-
-
- - Remove excessive padding
- - Remove Logo on Footer
-
-
-
-
-### v 1.2.0
-
-
-
-
- - Add New Accordion Component
-
-
-
- - Props Improvement
- - Support Dynamic Content for Accordion
-
-
-
-
-### v 1.1.0
-
-
-
-
- - Add docu.json file
- - Add openGraph (title, description, image)
- - Add Dynamic metadata
- - Generate metadata as openGraph
- - OpenGraph support for .mdx
-
-
-
- - 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
-
-
-
-
-### v 1.0.7
-
-
-
-
- - 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
-
-
-
- - Searchbar Improvement
- - Navigation Improvement
- - Edit on Github Improvement
-
-
-
- - Remove CLI npx create-docu (on this version not usage dash `-`)
-
-
-
-
-### v 1.0.6
-
-
-
-
- - New Card component
- - New Tooltips component
-
-
-
- - Change root folder
-
-
-
- - Logo on navbar & footer
- - Easily change logo
-
-
-
-
-### v 1.0.5
-
-
-
-
- - New Youtube component
- - Edit this page - easily manage directory content via the github repo
- - Support installation via CLI command npx create-docu
-
-
-
- - Keyboard shortcut command + k or ctrl + k to open search dialog
-
-
-
-
-### v 1.0.0
-
-
-
-
- - Initial release of DocuBook
- - Basic documentation structure
- - Markdown support with MDX
- - Responsive design
- - Search functionality
- - Dark mode support
-
-
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/contents/docs/changelog/version-2/index.mdx b/contents/docs/changelog/version-2/index.mdx
new file mode 100644
index 0000000..05b201e
--- /dev/null
+++ b/contents/docs/changelog/version-2/index.mdx
@@ -0,0 +1,49 @@
+---
+title : Version 2
+description : changelog version
+date : 10-12-2024
+---
+
+## Render as
+
+
+
+ - add components
+
+
+ - fix globals.css
+
+
+ - improved search components
+
+
+ - deprecated footer components
+
+
+ - removed utility class
+ - removed unused hooks
+
+
+
+## Output Markdown
+
+```
+
+
+ - add components
+
+
+ - fix globals.css
+
+
+ - improved search components
+
+
+ - deprecated footer components
+
+
+ - removed utility class
+ - removed unused hooks
+
+
+```
\ No newline at end of file
diff --git a/contents/docs/changelog/version-3/index.mdx b/contents/docs/changelog/version-3/index.mdx
new file mode 100644
index 0000000..1ddfba8
--- /dev/null
+++ b/contents/docs/changelog/version-3/index.mdx
@@ -0,0 +1,49 @@
+---
+title : Version 3
+description : changelog version
+date : 10-12-2024
+---
+
+## Render as
+
+
+
+ - add components
+
+
+ - fix globals.css
+
+
+ - improved search components
+
+
+ - deprecated footer components
+
+
+ - removed utility class
+ - removed unused hooks
+
+
+
+## Output Markdown
+
+```
+
+
+ - add components
+
+
+ - fix globals.css
+
+
+ - improved search components
+
+
+ - deprecated footer components
+
+
+ - removed utility class
+ - removed unused hooks
+
+
+```
\ No newline at end of file
diff --git a/contents/docs/components/accordion/index.mdx b/contents/docs/components/accordion/index.mdx
deleted file mode 100644
index fbc1343..0000000
--- a/contents/docs/components/accordion/index.mdx
+++ /dev/null
@@ -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
-
-
- 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.
-
-
-### With Code Block
-
-
- ```javascript:utils.js showLineNumbers
- // Example of using the Accordion component
- import Accordion from '@/components/markdown/AccordionMdx';
-
- function Example() {
- return (
-
-
-
- );
- }
- ```
-
-
-### With Markdown Content
-
-
- ## 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.
-
-
-## 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
-
-
-
- Markdown
- Code Block
-
-
- ```plaintext
-
- 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
-
- ```
-
-
- ````plaintext
-
- ```javascript:main.js showLineNumbers {3-4}
- function isRocketAboutToCrash() {
- // Check if the rocket is stable
- if (!isStable()) {
- NoCrash(); // Prevent the crash
- }
- }
- ```
-
- ````
-
-
diff --git a/contents/docs/components/button/index.mdx b/contents/docs/components/button/index.mdx
deleted file mode 100644
index a26749a..0000000
--- a/contents/docs/components/button/index.mdx
+++ /dev/null
@@ -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
-
-
-
-## 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
-
-```
diff --git a/contents/docs/components/card-group/index.mdx b/contents/docs/components/card-group/index.mdx
deleted file mode 100644
index a00c15d..0000000
--- a/contents/docs/components/card-group/index.mdx
+++ /dev/null
@@ -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
-
-
-
- This is an example of card content with columns.
-
-
- This is an example of card content with columns.
-
-
- This is a horizontal card layout.
-
-
- This is a horizontal card layout.
-
-
-
-## Props
-
-| Prop | Type | Default | Description |
-| ------------- | -------- | ------- | ------------------------------------------------------- |
-| `cols` | number | {2} | By default 2 The number of columns per row |
-
-## Output Markdown
-
-```markdown
-
-
- This is an example of card content with columns.
-
-
- This is an example of card content with columns.
-
-
- This is a horizontal card layout.
-
-
- This is a horizontal card layout.
-
-
-```
diff --git a/contents/docs/components/card/index.mdx b/contents/docs/components/card/index.mdx
deleted file mode 100644
index b6e3bc9..0000000
--- a/contents/docs/components/card/index.mdx
+++ /dev/null
@@ -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
-
-
- 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 Horizontal
-
-
- This is a horizontal card layout.
-
-
-### Card Simple
-
-
- This is a simple card without an icon or link.
-
-
-
-## 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
-
-
-
- Link & Icon
- Horizontal
- Simple
-
-
- ```markdown
-
- This is how you use a card with an icon and a link. Clicking on this card
- brings you to the Card Group page.
-
- ```
-
-
- ```markdown
-
- This is a horizontal card layout.
-
- ```
-
-
- ```markdown
-
- This is a simple card without an icon or link.
-
- ```
-
-
diff --git a/contents/docs/components/code-block/index.mdx b/contents/docs/components/code-block/index.mdx
deleted file mode 100644
index 4cb8898..0000000
--- a/contents/docs/components/code-block/index.mdx
+++ /dev/null
@@ -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.
diff --git a/contents/docs/components/custom/index.mdx b/contents/docs/components/custom/index.mdx
deleted file mode 100644
index 8f17023..0000000
--- a/contents/docs/components/custom/index.mdx
+++ /dev/null
@@ -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
-
- This is some custom content rendered by the Outlet component!
-
-```
-
-### 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.
diff --git a/contents/docs/components/file-tree/index.mdx b/contents/docs/components/file-tree/index.mdx
deleted file mode 100644
index 56dc13e..0000000
--- a/contents/docs/components/file-tree/index.mdx
+++ /dev/null
@@ -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
-
-```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-Render As:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-## 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
-
-```
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### Minimal Example
-
-```
-
-
-
-
-
-
-```
-
-## 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
diff --git a/contents/docs/components/image/index.mdx b/contents/docs/components/image/index.mdx
deleted file mode 100644
index e7db2fa..0000000
--- a/contents/docs/components/image/index.mdx
+++ /dev/null
@@ -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
-
-```
-
-## 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.
diff --git a/contents/docs/components/index.mdx b/contents/docs/components/index.mdx
deleted file mode 100644
index 643f735..0000000
--- a/contents/docs/components/index.mdx
+++ /dev/null
@@ -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.
-
-
diff --git a/contents/docs/components/keyboard/index.mdx b/contents/docs/components/keyboard/index.mdx
deleted file mode 100644
index 654631c..0000000
--- a/contents/docs/components/keyboard/index.mdx
+++ /dev/null
@@ -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
- +
-```
-
-Renders as:
- +
-
-### Automatic Symbol Rendering
-
-The component automatically renders appropriate symbols based on the platform:
-
-```tsx
-{/* Windows style (default) */}
- +
-
-{/* Mac style */}
- +
-```
-
-Renders as:
-- Windows: +
-- Mac: +
-
-### Custom Content
-
-For custom key labels, provide children:
-
-```tsx
-Custom
-```
-
-Renders as: Custom
-
-## 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 */}
- +
-
-{/* Paste shortcut */}
- +
-
-{/* Save shortcut */}
- +
-```
-
-### Custom Key Combinations
-
-```tsx
-{/* Custom application shortcut */}
- + +
-```
-
-Render as: + +
-
-### Arrow Key
-
-```tsx
-
-```
-
-Render as:
-
-## 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 `` 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
diff --git a/contents/docs/components/link/index.mdx b/contents/docs/components/link/index.mdx
deleted file mode 100644
index 2d43317..0000000
--- a/contents/docs/components/link/index.mdx
+++ /dev/null
@@ -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
-
- Visit OpenAI
-
-```
-
-## 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.
diff --git a/contents/docs/components/note/index.mdx b/contents/docs/components/note/index.mdx
deleted file mode 100644
index a65b45c..0000000
--- a/contents/docs/components/note/index.mdx
+++ /dev/null
@@ -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
-
-
- This is a general note to convey information to the user.
-
-
- This is a danger alert to notify the user of a critical issue.
-
-
- This is a warning alert for issues that require attention.
-
-
- This is a success message to inform the user of successful actions.
-
-
-## 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
-
- This is a general note to convey information to the user.
-
-
- This is a danger alert to notify the user of a critical issue.
-
-
- This is a warning alert for issues that require attention.
-
-
- This is a success message to inform the user of successful actions.
-
-```
diff --git a/contents/docs/components/release-note/index.mdx b/contents/docs/components/release-note/index.mdx
deleted file mode 100644
index 76e5eda..0000000
--- a/contents/docs/components/release-note/index.mdx
+++ /dev/null
@@ -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
-
-
- - New feature to improve accessibility
- - Keyboard navigation support for dialog components
-
-
- - Bug fix for mobile menu
- - Fixed loading issues on documentation pages
-
-
-```
-
-
-
-
- - New feature to improve accessibility
- - Keyboard navigation support for dialog components
-
-
- - Bug fix for mobile menu
- - Fixed loading issues on documentation pages
-
-
-
-
-## 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
-
- {/* Changes content here */}
-
-```
-
-## 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
-
- - New feature to improve accessibility
- - Keyboard navigation support for dialog components
-
-
-
- - Bug fix for mobile menu
- - Fixed loading issues on documentation pages
-
-```
-
-## Complete Implementation
-
-Here is a complete example of using the Release Note component in an MDX file:
-
-````plaintext
-
-
-
-
- - Keyboard navigation for all interactive components
- - Screen reader support for table components
- - Dark mode feature with system preference detection
-
-
-
- - 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
-
-
-
- - Improved page loading performance
- - Optimized JavaScript bundle size
- - Enhanced responsive design across all viewports
-
-
-````
-
-## 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 `
### v 1.10.1
`
diff --git a/contents/docs/components/stepper/index.mdx b/contents/docs/components/stepper/index.mdx
deleted file mode 100644
index 2f7d350..0000000
--- a/contents/docs/components/stepper/index.mdx
+++ /dev/null
@@ -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
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
- felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
- dolor in lorem.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
- eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
- ipsum nec nulla ultricies porttitor et non justo.
-
-
-
-## Output Markdown
-
-```markdown
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
- felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
- dolor in lorem.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
- eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
- ipsum nec nulla ultricies porttitor et non justo.
-
-
-```
diff --git a/contents/docs/components/tabs/index.mdx b/contents/docs/components/tabs/index.mdx
deleted file mode 100644
index 85285a9..0000000
--- a/contents/docs/components/tabs/index.mdx
+++ /dev/null
@@ -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
-
-
-
- Java
- TypeScript
-
-
- ```java
- // HelloWorld.java
- public class HelloWorld {
- public static void main(String[] args) {
- System.out.println("Hello, World!");
- }
- }
- ```
-
-
- ```typescript
- // helloWorld.ts
- function helloWorld(): void {
- console.log("Hello, World!");
- }
- helloWorld();
- ```
-
-
-
-## 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
-
-
- Java
- TypeScript
-
-
- ```java
- // HelloWorld.java
- public class HelloWorld {
- public static void main(String[] args) {
- System.out.println("Hello, World!");
- }
- }
- ```
-
- ```typescript
- // helloWorld.ts
- function helloWorld(): void {
- console.log("Hello, World!");
- }
- helloWorld();
- ```
-
-````
diff --git a/contents/docs/components/tooltips/index.mdx b/contents/docs/components/tooltips/index.mdx
deleted file mode 100644
index 63d2658..0000000
--- a/contents/docs/components/tooltips/index.mdx
+++ /dev/null
@@ -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 ? Create interactive nested documentations using MDX.
-
-### Output Markdown
-
-The above Markdown is converted to:
-
-```markdown:index.mdx
-What do you know about ? Create interactive nested documentations using MDX.
-```
diff --git a/contents/docs/components/youtube/index.mdx b/contents/docs/components/youtube/index.mdx
deleted file mode 100644
index d2b2ae3..0000000
--- a/contents/docs/components/youtube/index.mdx
+++ /dev/null
@@ -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
-
-
-
-## Output Markdown
-
-```markdown
-
-```
-
-## Usage
-
-
- for example the youtube URL show this https://www.youtube.com/watch?v=8sM0Di7Ew9Q the ID `8sM0Di7Ew9Q`
-
diff --git a/contents/docs/getting-started/customize/index.mdx b/contents/docs/getting-started/customize/index.mdx
deleted file mode 100644
index 15ad1f7..0000000
--- a/contents/docs/getting-started/customize/index.mdx
+++ /dev/null
@@ -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(rawMdx: string) {
- return await compileMDX({
- 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 (
-
-
- {children}
-
-
- );
-}
-```
-
-### 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 (
-
-
- {children}
-
-
- );
-}
-```
-
-For both options, ensure that you add the variable to `tailwind.config.ts`:
-
-```ts:tailwind.config.ts
-{
- // ...
- extend: {
- fontFamily: {
- regular: ["var(--font-regular)"],
- },
- }
-}
-```
diff --git a/contents/docs/getting-started/development/index.mdx b/contents/docs/getting-started/development/index.mdx
new file mode 100644
index 0000000..a43ea12
--- /dev/null
+++ b/contents/docs/getting-started/development/index.mdx
@@ -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
+
+ This is a general note to convey information to the user.
+
+```
+
+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.
+
+
+ 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
+---
+ ```
+
\ No newline at end of file
diff --git a/contents/docs/getting-started/index.mdx b/contents/docs/getting-started/index.mdx
deleted file mode 100644
index 49d2917..0000000
--- a/contents/docs/getting-started/index.mdx
+++ /dev/null
@@ -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.
-
-
diff --git a/contents/docs/getting-started/installation/index.mdx b/contents/docs/getting-started/installation/index.mdx
deleted file mode 100644
index 1c88f2e..0000000
--- a/contents/docs/getting-started/installation/index.mdx
+++ /dev/null
@@ -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.
-
-
-
- Begin by cloning the DocuBook repository from GitHub:
-
- ```bash
- git clone --branch main https://github.com/DocuBook/docubook.git
- ```
-
-
-
-
- After cloning, navigate into the project directory to start setting up:
-
- ```bash
- cd docubook
- ```
-
-
-
-
- Install all necessary project dependencies with npm:
-
- ```bash
- npm install
- ```
-
-
-
-
- Finally, start the development server to view the project locally:
-
- ```bash
- npm run dev
- ```
-
-
-
-
-## Quick Setup with CLI
-
-For a faster setup, use the `cli` command to create a new DocuBook project in one step:
-
-
-
- npm
- pnpm
- bun
- yarn
-
-
- ```shell
- npx @docubook/create@latest
- ```
-
-
- ```shell
- pnpm dlx @docubook/create@latest
- ```
-
-
- ```shell
- bunx @docubook/create@latest
- ```
-
-
- ```shell
- yarn dlx @docubook/create@latest
- ```
-
-
-
-With this setup, youβll have a ready-to-use DocuBook instance to start building your documentation.
diff --git a/contents/docs/getting-started/introduction/index.mdx b/contents/docs/getting-started/introduction/index.mdx
index 9a40c72..aef1f89 100644
--- a/contents/docs/getting-started/introduction/index.mdx
+++ b/contents/docs/getting-started/introduction/index.mdx
@@ -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
-
- 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
+
+ This is a general note to convey information to the user.
+```
-## 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.
+
+ 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
+---
+ ```
+
\ No newline at end of file
diff --git a/contents/docs/getting-started/project-structure/index.mdx b/contents/docs/getting-started/project-structure/index.mdx
deleted file mode 100644
index 2de9246..0000000
--- a/contents/docs/getting-started/project-structure/index.mdx
+++ /dev/null
@@ -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.
diff --git a/contents/docs/getting-started/quick-start-guide/index.mdx b/contents/docs/getting-started/quick-start-guide/index.mdx
index b5d7810..ea98cff 100644
--- a/contents/docs/getting-started/quick-start-guide/index.mdx
+++ b/contents/docs/getting-started/quick-start-guide/index.mdx
@@ -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
-
- 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
+
+ This is a general note to convey information to the user.
+```
-## Project Setup
-
-### Configuration
-
-
-
- Place your favicon at `public/favicon.ico` for browser tab display.
-
-
- Add your logo at `public/images/docu.svg` (SVG format recommended for scalability).
-
-
- Customize your site's metadata in `docu.json`:
- - Site title and description
- - Navigation structure
- - Default theme settings
-
-
-
-## 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 :
+
-
-
- 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
- ```
-
-
-
- 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...
- ````
-
-
-
- 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.
-
-
-
-## 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
-```
+
+ 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
+---
+ ```
+
\ No newline at end of file
diff --git a/contents/docs/getting-started/theme-colors/coffee/index.mdx b/contents/docs/getting-started/theme-colors/coffee/index.mdx
deleted file mode 100644
index 456ecba..0000000
--- a/contents/docs/getting-started/theme-colors/coffee/index.mdx
+++ /dev/null
@@ -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
-
-
- You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
-
-
-
-
- globals.css
- syntax.css
-
-
- ```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);
- }
-}
-```
-
-
-
- ```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;
-}
-```
-
-
diff --git a/contents/docs/getting-started/theme-colors/default/index.mdx b/contents/docs/getting-started/theme-colors/default/index.mdx
deleted file mode 100644
index de9e2ed..0000000
--- a/contents/docs/getting-started/theme-colors/default/index.mdx
+++ /dev/null
@@ -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
-
- You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
-
-
-
-
- globals.css
- syntax.css
-
-
- ```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);
- }
-}
-```
-
-
-
- ```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 */
-}
-```
-
-
diff --git a/contents/docs/getting-started/theme-colors/freshlime/index.mdx b/contents/docs/getting-started/theme-colors/freshlime/index.mdx
deleted file mode 100644
index afd863e..0000000
--- a/contents/docs/getting-started/theme-colors/freshlime/index.mdx
+++ /dev/null
@@ -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
-
- You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
-
-
-
-
- globals.css
- syntax.css
-
-
- ```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);
- }
-}
-```
-
-
-
- ```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 */
-}
-```
-
-
diff --git a/contents/docs/getting-started/theme-colors/index.mdx b/contents/docs/getting-started/theme-colors/index.mdx
deleted file mode 100644
index b983d5e..0000000
--- a/contents/docs/getting-started/theme-colors/index.mdx
+++ /dev/null
@@ -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.
-
-
diff --git a/contents/docs/getting-started/theme-colors/llms/index.mdx b/contents/docs/getting-started/theme-colors/llms/index.mdx
deleted file mode 100644
index b3e5563..0000000
--- a/contents/docs/getting-started/theme-colors/llms/index.mdx
+++ /dev/null
@@ -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
-
-
-
-
-
-
-
-## Generate New Theme
-
-
-
- Ensure you have access to a language model (LLM) that supports color palette generation
-
-
- Share the content of the [llms.txt](/llms.txt) file with the AI to provide the current color scheme context.
-
-
- Determine your preferred color scheme or theme requirements
-
-
- 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
- ```
-
-changes the value of Hex color `#2281E3` into your brand colors.
-
-
-
-
-## 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
diff --git a/docu.json b/docu.json
index 6603fee..55c4b76 100644
--- a/docu.json
+++ b/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" }
+ ]
+ }
+ ]
}
diff --git a/package.json b/package.json
index f98ce7b..1f2760f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "docubook",
- "version": "1.15.1",
+ "version": "1.15.2",
"private": true,
"scripts": {
"dev": "next dev",