fix release version 1.11.0
This commit is contained in:
Wildan Nursahidan
512
contents/docs/getting-started/changelog/index.mdx
Normal file
512
contents/docs/getting-started/changelog/index.mdx
Normal file
@@ -0,0 +1,512 @@
|
||||
---
|
||||
title: Changelog
|
||||
description: List of latest changes and updates on DocuBook
|
||||
date: 24-05-2025
|
||||
---
|
||||
|
||||
## Version History
|
||||
|
||||
> This changelog contains a list of all the changes made to the DocuBook template. It will be updated with each new release and will include information about new features, bug fixes, and other improvements.
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.11.0
|
||||
</div>
|
||||
|
||||
<Release version="1.11.0" date="2025-05-25" title="New Release Note components support multiple products or multiple changelogs">
|
||||
<Changes type="added">
|
||||
- New ReleaseNote component for structured changelog display
|
||||
- Added support for categorized changes (added, fixed, improved, deprecated, removed)
|
||||
- Integrated Lucide icons for better visual hierarchy
|
||||
- Support for multiple release notes
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Enhanced documentation with comprehensive usage examples
|
||||
- Better component organization and styling
|
||||
- Semantic versioning support
|
||||
- Nested release notes support
|
||||
</Changes>
|
||||
|
||||
<Changes type="removed">
|
||||
- Removed old changelog page in favor of the new ReleaseMdx component
|
||||
- Removed changelog.md
|
||||
- Removed changelog/page.tsx
|
||||
- Removed changelog.ts
|
||||
- Removed components/changelog
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.10.1
|
||||
</div>
|
||||
|
||||
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
|
||||
<Changes type="fixed">
|
||||
- Added missing DialogDescription components for better accessibility
|
||||
- Fixed image aspect ratio issues in navbar logo
|
||||
- Resolved console warnings for missing image sizes
|
||||
- Improved keyboard navigation in search component
|
||||
- Fixed mobile layout for search result items
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Added proper ARIA labels for screen readers
|
||||
- Enhanced focus management in dialogs
|
||||
- Optimized image loading with proper sizing attributes
|
||||
- Better mobile experience with responsive design fixes
|
||||
</Changes>
|
||||
|
||||
<Changes type="removed">
|
||||
- Remove blog page
|
||||
- Remove blog functions on markdown
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.10.0
|
||||
</div>
|
||||
|
||||
<Release version="1.10.0" date="2025-05-21" title="Sidebar Improvements and Mobile TOC Enhancements">
|
||||
<Changes type="added">
|
||||
- New reusable ToggleButton component with animation
|
||||
- Mobile-friendly Table of Contents (TOC) component
|
||||
- Click-outside handler for better mobile navigation
|
||||
- Smooth scroll behavior for TOC navigation
|
||||
- Active section highlighting in TOC
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Sidebar now has a collapsible design
|
||||
- Enhanced mobile responsiveness for TOC
|
||||
- Better visual hierarchy in sidebar navigation
|
||||
- Smoother animations for sidebar toggle
|
||||
- Optimized TOC performance with intersection observer
|
||||
- Improved accessibility with proper ARIA labels
|
||||
- Better spacing and alignment in mobile view
|
||||
</Changes>
|
||||
|
||||
<Changes type="fixed">
|
||||
- Fixed sidebar toggle button positioning
|
||||
- Resolved TOC highlighting issues during scroll
|
||||
- Fixed z-index conflicts in mobile view
|
||||
- Addressed minor UI glitches in dark mode
|
||||
- Fixed TOC not updating on route changes
|
||||
- Resolved scroll jank on mobile devices
|
||||
- Fixed incorrect active state in navigation
|
||||
</Changes>
|
||||
|
||||
<Changes type="deprecated">
|
||||
- No longer support changelog.md
|
||||
- No longer support changelog/page.tsx (will be removed in future update)
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.9.0
|
||||
</div>
|
||||
|
||||
<Release version="1.9.0" date="2025-05-19" title="New Keyboard component to show keyboard shortcut on docs page">
|
||||
<Changes type="added">
|
||||
- New Keyboard component with props show, type, children
|
||||
- Snippet keyboard component
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Support custom content
|
||||
- Support platform type (mac or window)
|
||||
- Support automatic rendering of platform-specific key symbols
|
||||
- Rename lowercase to camelCase for markdown component
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.8.5
|
||||
</div>
|
||||
|
||||
<Release version="1.8.5" date="2025-05-10" title="Add sponsor card on single docs page">
|
||||
<Changes type="added">
|
||||
- Expandables Leftbar
|
||||
- Sponsor badges or ads
|
||||
- Boolean show/hide 'edit on github'
|
||||
- With the same code run anywhere (bun or nodejs)
|
||||
- Add frontmatter (metadata) to playground editor
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Adjustment docu.json
|
||||
- Adjustment navbar, footer and components
|
||||
</Changes>
|
||||
|
||||
<Changes type="fixed">
|
||||
- Bun compatibility: rename .js to common js
|
||||
- CLI manage packageManager on package.json
|
||||
- Inconsistent design moved to better UI/UX
|
||||
- Error handle render footer.social
|
||||
</Changes>
|
||||
|
||||
<Changes type="removed">
|
||||
- Remove confusing and verbose CLI on installer
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.8.0
|
||||
</div>
|
||||
|
||||
<Release version="1.8.0" date="2025-03-01" title="Now looks more modern and clean which is a big change in layout and design">
|
||||
<Changes type="added">
|
||||
- Social footer
|
||||
- Toggle group
|
||||
- Site description in footer
|
||||
- Site title in footer
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Header design changes
|
||||
- Footer design changes
|
||||
- New functions in theme provider
|
||||
- Object changes in docu.json
|
||||
</Changes>
|
||||
|
||||
<Changes type="fixed">
|
||||
- Updates to path structure components
|
||||
- Groups to organize components
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.7.0
|
||||
</div>
|
||||
|
||||
<Release version="1.7.0" date="2025-02-23" title="Remove the old function in the search dialog and replace it with a new and more optimal feature">
|
||||
<Changes type="added">
|
||||
- Up and down navigation in search dialog
|
||||
- Enter (return) to select in search dialog
|
||||
- Escape to close the dialog
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Maintenance for anchor components
|
||||
- Anchor.tsx adjustments for all elements that use it
|
||||
</Changes>
|
||||
|
||||
<Changes type="removed">
|
||||
- Remove suboptimal search features
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.6.0
|
||||
</div>
|
||||
|
||||
<Release version="1.6.0" date="2025-02-21" title="New Feature Card Groups with arrays for more Flexible Content">
|
||||
<Changes type="added">
|
||||
- Card Groups Components
|
||||
- Props: href to url link
|
||||
- Props: horizontal boolean
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Card props styling
|
||||
- Compatibility for Cards components
|
||||
- Support for children props in card content
|
||||
</Changes>
|
||||
|
||||
<Changes type="removed">
|
||||
- Remove unused props cards components
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.5.0
|
||||
</div>
|
||||
|
||||
<Release version="1.5.0" date="2025-02-18" title="Minor Update - improved features and responsiveness on all devices">
|
||||
<Changes type="added">
|
||||
- New dialog footer on searchbox above medium screens
|
||||
- Icon X for close dialog on searchbox (ESC key on medium screen)
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Responsive Leftbar components on large screens
|
||||
- Menu Trigger on medium screens
|
||||
- Responsive Navbar components on medium screens
|
||||
- Better UX for searchbox dialog
|
||||
- Tooltips components can be written together with regular paragraphs
|
||||
</Changes>
|
||||
|
||||
<Changes type="fixed">
|
||||
- Responsive issues
|
||||
- Compatibility for Bun
|
||||
- Changes postcss.config.js to .cjs for Bun
|
||||
- All CLI installer and updater not working
|
||||
- Adjustments for package managers (npm, pnpm, bun, yarn)
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.4.2
|
||||
</div>
|
||||
|
||||
<Release version="1.4.2" date="2025-02-16" title="Complex Content for Accordion Component props children">
|
||||
<Changes type="added">
|
||||
- New Props with children in accordion
|
||||
- Compatibility for markdown in accordion
|
||||
- Nested components inside an accordion
|
||||
- New icon on note components
|
||||
- Add CLI npx @docubook/create@latest
|
||||
- Add CLI npx @docubook/update@latest
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Better UI design for accordion
|
||||
- Styling Note components on markdown
|
||||
- Change accordion output on playground
|
||||
- Change accordion output on snippet
|
||||
</Changes>
|
||||
|
||||
<Changes type="removed">
|
||||
- Remove deprecated props on accordion
|
||||
- Remove CLI npx update_docu
|
||||
- Remove CLI npx create_docu
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.4.0
|
||||
</div>
|
||||
|
||||
<Release version="1.4.0" date="2025-02-11" title="Floating Button Version with Dynamic Tag version on Changelog page">
|
||||
<Changes type="added">
|
||||
- New components / changelog floating-version.tsx
|
||||
- Button popover to open version-toc below large screens
|
||||
- Dynamic tag by section ID #version
|
||||
- Dynamic url tag #version
|
||||
- Dynamic version indicator on floating version when scrolling section by ID
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Change icon version history
|
||||
- Responsive version-toc
|
||||
- Improvement components to changelog page
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.3.8
|
||||
</div>
|
||||
|
||||
<Release version="1.3.8" date="2025-02-08" title="Responsive Table of Content">
|
||||
<Changes type="added">
|
||||
- Components terminal MagicUI
|
||||
- Components card Shadcn
|
||||
- New mob-toc for a better experience on mobile devices
|
||||
- New Components scroll to top button
|
||||
- Scroll to top: blog-post
|
||||
- Scroll to top: docs-post
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- lib/markdown for generated dynamic toc on markdown
|
||||
- Responsive Table of Content below large screens
|
||||
- Improve docs page
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.3.6
|
||||
</div>
|
||||
|
||||
<Release version="1.3.6" date="2025-02-01" title="Appears more modern editor for Docu Play">
|
||||
|
||||
<Changes type="added">
|
||||
- Line Number for editor
|
||||
- editor.css
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Better Design for Editor
|
||||
- Similar to Github Editor
|
||||
- Moved Handler Element (copy, download, reset and fullscreen) on Header
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.3.5
|
||||
</div>
|
||||
|
||||
<Release version="1.3.5" date="2025-01-30" title="It's Easy to Write Markdown with Playground">
|
||||
|
||||
<Changes type="added">
|
||||
- New Playground Page
|
||||
- New Playground Layout
|
||||
- Toolbar for Markdown Components
|
||||
- Fullscreen Mode to Focus Editing Your Content
|
||||
- Copy to Clipboard Your Content
|
||||
- Download Your Content as index.mdx
|
||||
- Reset Your Content without refresh the Browser
|
||||
- Only Large Screen for Better Experience
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.3.1
|
||||
</div>
|
||||
|
||||
<Release version="1.3.1" date="2025-01-20" title="Snippet Feature to Easily Write Markdown and Call DocuBook Components">
|
||||
|
||||
<Changes type="added">
|
||||
- New Feature Snippet for Markdown Components
|
||||
- Support Snippet for Visual Studio Code
|
||||
</Changes>
|
||||
|
||||
<Changes type="removed">
|
||||
- Remove props icon and props description for accordion components
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.3.0
|
||||
</div>
|
||||
|
||||
<Release version="1.3.0" date="2024-12-31" title="Release Note Feature to Make it Easier to Write Changelogs">
|
||||
<Changes type="added">
|
||||
- New Release Note Feature
|
||||
- New Layout for Changelog page
|
||||
- New Changelog page
|
||||
- Add Release Note Component
|
||||
- Easily write release notes directly from the CHANGELOG.md file
|
||||
- TOC for versioning
|
||||
- Write with the markdown tag
|
||||
- Add lib / changelog.ts
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Improvement Responsive feature image for Version Entry
|
||||
- Improvement Layout for changelog page
|
||||
- Improvement Padding on mobile devices
|
||||
- Only use containers of md size
|
||||
- Improvement syntax.css for ul>li classes
|
||||
</Changes>
|
||||
|
||||
<Changes type="fixed">
|
||||
- Fix og:image not showing on Page.tsx
|
||||
- Fix text-indent on class li
|
||||
</Changes>
|
||||
|
||||
<Changes type="removed">
|
||||
- Remove excessive padding
|
||||
- Remove Logo on Footer
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.2.0
|
||||
</div>
|
||||
|
||||
<Release version="1.2.0" date="2024-12-22" title="New Accordion Component: Support content plain text, html and all markdown component">
|
||||
<Changes type="added">
|
||||
- Add New Accordion Component
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Props Improvement
|
||||
- Support Dynamic Content for Accordion
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.1.0
|
||||
</div>
|
||||
|
||||
<Release version="1.1.0" date="2024-12-15" title="Minor Update: Easily manage set up with docu.json">
|
||||
<Changes type="added">
|
||||
- Add docu.json file
|
||||
- Add openGraph (title, description, image)
|
||||
- Add Dynamic metadata
|
||||
- Generate metadata as openGraph
|
||||
- OpenGraph support for .mdx
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Routes-config from json
|
||||
- Frontmatter improvement
|
||||
- Edit the content of footer.tsx simply via the docu.json file
|
||||
- Edit the content of navbar.tsx simply via the docu.json file
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.0.7
|
||||
</div>
|
||||
|
||||
<Release version="1.0.7" date="2024-12-14" title="Easily updates your DocuBook Version with CLI npx update_docu">
|
||||
<Changes type="added">
|
||||
- CLI npx update_docu (update features into docubook existing directory)
|
||||
- Playground (easily to written content)
|
||||
- New Button component
|
||||
- Navbar external link conditions
|
||||
- CLI npx create_docu
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Searchbar Improvement
|
||||
- Navigation Improvement
|
||||
- Edit on Github Improvement
|
||||
</Changes>
|
||||
|
||||
<Changes type="removed">
|
||||
- Remove CLI npx create-docu (on this version not usage dash `-`)
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.0.6
|
||||
</div>
|
||||
|
||||
<Release version="1.0.6" date="2024-11-24" title="New Components, Fix and Improvement">
|
||||
<Changes type="added">
|
||||
- New Card component
|
||||
- New Tooltips component
|
||||
</Changes>
|
||||
|
||||
<Changes type="fixed">
|
||||
- Change root folder
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Logo on navbar & footer
|
||||
- Easily change logo
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.0.5
|
||||
</div>
|
||||
|
||||
<Release version="1.0.5" date="2024-11-16" title="Add New Features and Improvement for this version">
|
||||
<Changes type="added">
|
||||
- New Youtube component
|
||||
- Edit this page - easily manage directory content via the github repo
|
||||
- Support installation via CLI command npx create-docu
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Keyboard shortcut command + k or ctrl + k to open search dialog
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.0.0
|
||||
</div>
|
||||
|
||||
<Release version="1.0.0" date="2024-11-10" title="Initial release of DocuBook to create interactive nested docs with MDX">
|
||||
<Changes type="added">
|
||||
- Initial release of DocuBook
|
||||
- Basic documentation structure
|
||||
- Markdown support with MDX
|
||||
- Responsive design
|
||||
- Search functionality
|
||||
- Dark mode support
|
||||
</Changes>
|
||||
</Release>
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Accordion
|
||||
description: This section previews the Accordion component.
|
||||
description: A component used to create collapsible content that can be hidden and shown again.
|
||||
date: 22-12-2024
|
||||
---
|
||||
|
||||
I have implemented the `accordion` component into markdown which is ready to use.
|
||||
The Accordion component is a collapsible content container that can be used to hide and show content again. It is a flexible component that can be used to display any content, including HTML elements, markdown components, and plain text.
|
||||
|
||||
## Preview
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Button
|
||||
description: This section previews the Button component.
|
||||
description: A component used to create buttons that can be used to trigger actions or navigate to other pages.
|
||||
date: 14-12-2024
|
||||
---
|
||||
|
||||
I have implemented the `button` component into markdown which is ready to use.
|
||||
The Button component is a component used to create buttons that can be used to trigger actions or navigate to other pages.
|
||||
|
||||
## Preview
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Card Group
|
||||
description: This section previews the Card Group component.
|
||||
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
|
||||
---
|
||||
|
||||
I have implemented the `card group` component into markdown which is ready to use.
|
||||
The CardGroup component is a component used to create card groups that can be used to display multiple cards in a compact and organized way.
|
||||
|
||||
## Preview
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Cards
|
||||
description: This section previews the Cards component.
|
||||
description: A component used to create cards that can be used to display content in a compact and organized way.
|
||||
date: 20-02-2025
|
||||
---
|
||||
|
||||
I have implemented the `cards` component into markdown which is ready to use.
|
||||
The Card component is a component used to create cards that can be used to display content in a compact and organized way.
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Code Block
|
||||
description: This section previews the Code Block features in markdown.
|
||||
description: A component used to display code snippets with optional line numbering and line highlighting.
|
||||
date: 14-12-2024
|
||||
---
|
||||
|
||||
The Code Block in this documentation allows you to display code snippets with optional line numbering and line highlighting.
|
||||
The Code Block component is a component used to display code snippets with optional line numbering and line highlighting.
|
||||
|
||||
## Preview
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Image
|
||||
description: This section provides an overview of how DocuBook handles images in Markdown.
|
||||
description: A component used to display images in Markdown.
|
||||
date: 14-12-2024
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Link
|
||||
description: This section provides an overview of how DocuBook handles links in Markdown.
|
||||
description: A component used to create links that can be used to navigate to other pages.
|
||||
date: 14-12-2024
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Note
|
||||
description: This section previews the Note component.
|
||||
description: A component used to display different types of messages such as general notes, warnings, or success notifications.
|
||||
date: 14-12-2024
|
||||
---
|
||||
|
||||
|
||||
@@ -4,43 +4,127 @@ description: The Release Note component makes it easy for you to write updates f
|
||||
date: 31-12-2024
|
||||
---
|
||||
|
||||
## Usage
|
||||
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.
|
||||
|
||||
To fill in the Release Note content that will be displayed on the Changelog page, open the `CHANGELOG.md` file, write it with the markdown tag.
|
||||
## Basic Usage
|
||||
|
||||
<Accordion title="Example" defaultOpen={true}>
|
||||
```plaintext:CHANGELOG.md
|
||||
## [1.3.0] - 2024-12-31
|
||||
Here is a basic example of using the Release Note component:
|
||||
|
||||
> Release Note Feature to Make it Easier to Write Changelogs
|
||||
```jsx
|
||||
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
|
||||
<Changes type="added">
|
||||
- New feature to improve accessibility
|
||||
- Keyboard navigation support for dialog components
|
||||
</Changes>
|
||||
<Changes type="fixed">
|
||||
- Bug fix for mobile menu
|
||||
- Fixed loading issues on documentation pages
|
||||
</Changes>
|
||||
</Release>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
```
|
||||
<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>
|
||||
|
||||
## Preview : Render Output
|
||||
## Release Component
|
||||
|
||||
<Accordion title="Show Render">
|
||||
|
||||
</Accordion>
|
||||
The `Release` component is used to display key information about a release version, such as version number, release date, and title.
|
||||
|
||||
## Changes Category
|
||||
### Release Props
|
||||
|
||||
| **Category** | **Description** |
|
||||
| -------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| **Added** | Features or functionalities that are newly introduced. |
|
||||
| **Improved** | Enhancements or optimizations made to existing features or performance. |
|
||||
| **Fixed** | Bugs, issues, or errors that have been resolved in this version. |
|
||||
| **Deprecated** | Features or functionalities that are no longer recommended for use and may be removed in the future. |
|
||||
| **Removed** | Features or functionalities that have been completely taken out of the product. |
|
||||
| Prop | Type | Required | Description |
|
||||
|------|------|----------|-------------|
|
||||
| `version` | string | ✅ | Version number to display (without "v" prefix) |
|
||||
| `title` | string | ✅ | Title or name of the release |
|
||||
| `date` | string | ❌ | Release date in a valid format (example: "2025-05-24") |
|
||||
| `children` | ReactNode | ✅ | Child content, typically `Changes` components |
|
||||
|
||||
```jsx
|
||||
<Release
|
||||
version="1.10.1"
|
||||
date="2025-05-24"
|
||||
title="Accessibility Improvements and Bug Fixes"
|
||||
>
|
||||
{/* Changes content here */}
|
||||
</Release>
|
||||
```
|
||||
|
||||
## Changes Component
|
||||
|
||||
The `Changes` component is used to group changes by category with appropriate icons and colors.
|
||||
|
||||
### Changes Props
|
||||
|
||||
| Prop | Type | Required | Description |
|
||||
|------|------|----------|-------------|
|
||||
| `type` | string | ✅ | Type of change: 'added', 'fixed', 'improved', 'deprecated', or 'removed' |
|
||||
| `children` | ReactNode | ✅ | List of changes, can be text with Markdown formatting |
|
||||
|
||||
### Changes Note
|
||||
|
||||
| Category | Description |
|
||||
|----------|-------------|
|
||||
| `added` | New features or functionality added |
|
||||
| `fixed` | Bugs or issues that have been fixed |
|
||||
| `improved` | Enhancements or optimizations to existing features |
|
||||
| `deprecated` | Features that are not recommended and may be removed in future |
|
||||
| `removed` | Features that have been completely removed |
|
||||
|
||||
### Changes Example
|
||||
|
||||
```jsx
|
||||
<Changes type="added">
|
||||
- New feature to improve accessibility
|
||||
- Keyboard navigation support for dialog components
|
||||
</Changes>
|
||||
|
||||
<Changes type="fixed">
|
||||
- Bug fix for mobile menu
|
||||
- Fixed loading issues on documentation pages
|
||||
</Changes>
|
||||
```
|
||||
|
||||
## Complete Implementation
|
||||
|
||||
Here is a complete example of using the Release Note component in an MDX file:
|
||||
|
||||
````plaintext
|
||||
<!-- hidden heading for TOC -->
|
||||
|
||||
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
|
||||
<Changes type="added">
|
||||
- Keyboard navigation for all interactive components
|
||||
- Screen reader support for table components
|
||||
- Dark mode feature with system preference detection
|
||||
</Changes>
|
||||
|
||||
<Changes type="fixed">
|
||||
- Fixed mobile menu bug that wouldn't close when navigating to another page
|
||||
- Fixed loading issues on documentation pages
|
||||
- Fixed display issues in Safari browser
|
||||
</Changes>
|
||||
|
||||
<Changes type="improved">
|
||||
- Improved page loading performance
|
||||
- Optimized JavaScript bundle size
|
||||
- Enhanced responsive design across all viewports
|
||||
</Changes>
|
||||
</Release>
|
||||
````
|
||||
|
||||
## Usage Tips
|
||||
|
||||
1. **Date Format**: Use a consistent date format for all releases.
|
||||
2. **Version Ordering**: Arrange versions in reverse chronological order (newest version at the top).
|
||||
3. **List Items**: You can use standard Markdown list format (`-` or `*`) or write text directly, the component will handle the formatting.
|
||||
4. **TOC**: Use hidden headings to ensure each version is detected in the Table of Contents. Use `<div className="sr-only">### v 1.10.1</div>`
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Stepper
|
||||
description: This section previews the stepper component.
|
||||
description: A component used to display step-by-step instructions directly within the markdown render.
|
||||
date: 14-12-2024
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Tabs
|
||||
description: This section previews the Tabs component.
|
||||
description: Organize content into multiple sections with switchable tabs.
|
||||
date: 14-12-2024
|
||||
---
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Tooltips
|
||||
description: This section previews the Tooltips component.
|
||||
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 is ready to use.
|
||||
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.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Youtube
|
||||
description: This section previews the Youtube video embed component.
|
||||
description: A component used to embed YouTube videos directly into your documentation.
|
||||
date: 14-12-2024
|
||||
---
|
||||
|
||||
|
||||
@@ -32,7 +32,6 @@ DocuBook is proudly **open-source**! 🎉 We believe in creating an accessible,
|
||||
| ------------------------------- | ----------------------------------------------------- |
|
||||
| MDX Support | Write interactive documentation with MDX. |
|
||||
| Nested Pages | Organize content in a nested, hierarchical structure. |
|
||||
| Blog Section | Include a dedicated blog section. |
|
||||
| Pagination | Split content across multiple pages. |
|
||||
| Syntax Highlighting | Highlight code for better readability. |
|
||||
| Code Line Highlighting & Titles | Highlight specific lines with descriptive titles. |
|
||||
|
||||
@@ -4,9 +4,7 @@ description: This section provides an overview of Project Structure.
|
||||
date: 29-11-2024
|
||||
---
|
||||
|
||||
## Project Structure Overview
|
||||
|
||||
### app
|
||||
## 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` and `blog` sections, with dedicated pages and layouts for each section.
|
||||
|
||||
@@ -14,16 +12,12 @@ This folder contains the main application code for Next.js, managing layouts, ro
|
||||
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
|
||||
├── blog
|
||||
│ ├── page.tsx // Blog list page, displaying all blog posts with titles, dates, and excerpts
|
||||
│ └── [slug]
|
||||
│ └── page.tsx // Dynamic blog post page for viewing individual posts with rich content
|
||||
└── 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
|
||||
## 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.
|
||||
|
||||
@@ -37,7 +31,7 @@ components // Reusable components
|
||||
└── navbar.tsx // Main navigation component for the site header, managing links and responsive behavior
|
||||
```
|
||||
|
||||
### styles
|
||||
## styles
|
||||
|
||||
This folder contains global and component-specific CSS files, allowing for project-wide styling consistency and customizations.
|
||||
|
||||
@@ -48,7 +42,7 @@ styles // CSS files
|
||||
└── overrides.css // Additional custom styles that override specific component or plugin defaults
|
||||
```
|
||||
|
||||
### contents
|
||||
## 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.
|
||||
|
||||
@@ -57,13 +51,10 @@ 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
|
||||
└── blogs // Blog content, organized by post
|
||||
├── intro-to-project.md // Blog post introducing the project and its goals
|
||||
└── dev-updates.md // Post discussing recent development updates and new features
|
||||
| └── index.mdx // Step-by-step tutorial on a specific topic
|
||||
```
|
||||
|
||||
### public
|
||||
## 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.
|
||||
|
||||
@@ -76,18 +67,19 @@ public // Publicly accessible assets
|
||||
└── videos // Video files for media content, if any
|
||||
```
|
||||
|
||||
### lib
|
||||
## 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
|
||||
## 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.
|
||||
|
||||
@@ -1,157 +1,127 @@
|
||||
---
|
||||
title: Quick Start Guide
|
||||
description: This section provides an overview of Quick Start Guide.
|
||||
date: 29-11-2024
|
||||
description: Get up and running with DocuBook in minutes with this comprehensive guide
|
||||
date: 20-05-2025
|
||||
---
|
||||
|
||||
Follow these simple instructions to set up your project efficiently and begin creating content without delay!:
|
||||
Welcome to DocuBook! This guide will help you set up your documentation site quickly and efficiently.
|
||||
|
||||
## Homepage
|
||||
## Prerequisites
|
||||
|
||||
to change the homepage you can open the app folder.
|
||||
Before we begin, make sure you have the following installed:
|
||||
|
||||
- [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)
|
||||
|
||||
## Installation
|
||||
|
||||
<Note type="note" title="Note">
|
||||
Follow the instructions on the [installation page](/docs/getting-started/installation) to install the required dependencies and set up your project.
|
||||
</Note>
|
||||
|
||||
## Project Setup
|
||||
|
||||
### Customize Branding
|
||||
|
||||
<Stepper>
|
||||
<StepperItem title="Step 1: App">
|
||||
Open app folder.
|
||||
<StepperItem title="Step 1: Add Favicon">
|
||||
Place your favicon at `public/favicon.ico`
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 2: Page.tsx">
|
||||
Edit page.tsx file for home content.
|
||||
<StepperItem title="Step 2: Add Logo">
|
||||
Place your logo at `public/images/docu.svg` (SVG format recommended)
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 3: Update Site Info">
|
||||
Edit `docu.json` to update site name, description, and other settings
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
|
||||
## Docu.json
|
||||
Change logo, menu, routes and footer directly in docu.json
|
||||
## Creating Content
|
||||
|
||||
<Accordion title="default code">
|
||||
```json:docu.json
|
||||
{
|
||||
"navbar": {
|
||||
"logo": {
|
||||
"src": "/images/docu.svg",
|
||||
"alt": "DocuBook Logo"
|
||||
},
|
||||
"logoText": "DocuBook",
|
||||
"menu": [
|
||||
{ "title": "Docs", "href": "/docs/getting-started/introduction" },
|
||||
{ "title": "Changelog", "href": "/changelog" },
|
||||
{ "title": "Blog", "href": "/blog" },
|
||||
{ "title": "Playground", "href": "/playground" }
|
||||
]
|
||||
},
|
||||
"footer": {
|
||||
"copyright": "DocuBook",
|
||||
"social": [
|
||||
{
|
||||
"name": "Gitlab",
|
||||
"url": "https://gitlab.com/mywildancloud/docubook",
|
||||
"iconName": "GitlabIcon"
|
||||
},
|
||||
{
|
||||
"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://gitlab.com/mywildancloud/docubook",
|
||||
"editPathTemplate": "/blob/main/{filePath}"
|
||||
},
|
||||
"routes": [
|
||||
{
|
||||
"title": "Getting Started",
|
||||
"href": "/getting-started",
|
||||
"noLink": true,
|
||||
"items": [
|
||||
{ "title": "Introduction", "href": "/introduction" },
|
||||
{ "title": "Installation", "href": "/installation" },
|
||||
{ "title": "Quick Start Guide", "href": "/quick-start-guide" },
|
||||
{ "title": "Project Structure", "href": "/project-structure" },
|
||||
{
|
||||
"title": "Components",
|
||||
"href": "/components",
|
||||
"items": [
|
||||
{ "title": "Stepper", "href": "/stepper" },
|
||||
{ "title": "Tabs", "href": "/tabs" },
|
||||
{ "title": "Note", "href": "/note" },
|
||||
{ "title": "Code Block", "href": "/code-block" },
|
||||
{ "title": "Image", "href": "/image" },
|
||||
{ "title": "Link", "href": "/link" },
|
||||
{ "title": "Youtube", "href": "/youtube" },
|
||||
{ "title": "Tooltips", "href": "/tooltips" },
|
||||
{ "title": "Cards", "href": "/card" },
|
||||
{ "title": "Card Group", "href": "/card-group" },
|
||||
{ "title": "Button", "href": "/button" },
|
||||
{ "title": "Accordion", "href": "/accordion" },
|
||||
{ "title": "Release Note", "href": "/release-note" },
|
||||
{ "title": "Custom", "href": "/custom" }
|
||||
]
|
||||
},
|
||||
{ "title": "Customize", "href": "/customize" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
</Accordion>
|
||||
### File Structure
|
||||
|
||||
## Change Logo & Favicon
|
||||
DocuBook uses the following structure:
|
||||
|
||||
Save your logo, give it the name docu.svg then for the favicon, save your logo, give it the name favicon.ico
|
||||
````plaintext
|
||||
contents/
|
||||
docs/
|
||||
getting-started/
|
||||
quick-start-guide/ <-- You are here
|
||||
index.mdx
|
||||
guides/
|
||||
components/
|
||||
index.mdx
|
||||
````
|
||||
|
||||
### Adding New Pages
|
||||
|
||||
<Stepper>
|
||||
<StepperItem title="Step 1: Public">
|
||||
Open `public` folder then upload your logo save as **favicon.ico**
|
||||
<StepperItem title="Step 1: Create a New Folder">
|
||||
Create a new folder in `contents/docs/getting-started/` for your content section
|
||||
```bash
|
||||
mkdir -p contents/docs/getting-started/your-page-title
|
||||
```
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 2: Public/images">
|
||||
Open `public` folder --> `images` then upload your logo and save as **docu.svg**
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
|
||||
## Contents
|
||||
|
||||
Open **contents/docs/getting-started** folder add new folder to add content.
|
||||
|
||||
<Stepper>
|
||||
<StepperItem title="Step 1: Add new Folder">
|
||||
for example adding a folder for routes `how-to-install-myplugin`
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 2: Add new File">
|
||||
add `index.mdx` file in that folder
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 3: Writing the Content">
|
||||
To write content, you must first add metadata to the first line.
|
||||
````plaintext
|
||||
<StepperItem title="Step 2: Add MDX File">
|
||||
Create an `index.mdx` file with frontmatter:
|
||||
````markdown
|
||||
---
|
||||
title : Title
|
||||
description : Description
|
||||
date : 10-12-2024
|
||||
title: Your Page Title
|
||||
description: Brief description of your page
|
||||
date: 20-05-2025
|
||||
---
|
||||
<--- this is where you write the content --->
|
||||
|
||||
# Your Content Here
|
||||
|
||||
Start writing your documentation using Markdown or MDX components.
|
||||
````
|
||||
<Note type="warning" title="Warning">
|
||||
To write markdown content you can use all the [Components](/docs/getting-started/components)
|
||||
</Note>
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 3: Add to Navigation">
|
||||
Update the navigation in `docu.json`:
|
||||
```json:docu.json showLineNumbers {8}
|
||||
{
|
||||
"routes": [
|
||||
{
|
||||
"title": "Getting Started",
|
||||
"href": "/getting-started",
|
||||
"noLink": true,
|
||||
"items": [
|
||||
{ "title": "Your Page Title", "href": "/your-page-title" } // Add your page here separated by comma `,`
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
|
||||
## Development
|
||||
|
||||
Start the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Visit [http://localhost:3000](http://localhost:3000) to see your site.
|
||||
|
||||
## Building for Production
|
||||
|
||||
When you're ready to deploy:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
npm start
|
||||
```
|
||||
|
||||
## Need Help?
|
||||
|
||||
<Note type="info">
|
||||
Check out the [Components Guide](/docs/getting-started/components) to learn about all available components.
|
||||
</Note>
|
||||
|
||||
<Note type="warning">
|
||||
Make sure to commit your changes to version control before deploying.
|
||||
</Note>
|
||||
|
||||
Reference in New Issue
Block a user