v.1.13.0 add: context menu
This commit is contained in:
gitfromwildan
@@ -8,6 +8,23 @@ date: 24-05-2025
|
||||
|
||||
> 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.13.0
|
||||
</div>
|
||||
|
||||
<Release version="1.13.0" date="2025-05-29" title="Context Menu for organize file and folder">
|
||||
<Changes type="added">
|
||||
- New ContextMenu component for organizing file and folder
|
||||
- Nested docs folder and file support with context menu
|
||||
</Changes>
|
||||
<Changes type="improved">
|
||||
- improve routes-config with context menu
|
||||
- improve docu.json with context menu
|
||||
- improve leftbar with context menu
|
||||
- improve docs-menu with context menu
|
||||
</Changes>
|
||||
</Release>
|
||||
|
||||
<div className="sr-only">
|
||||
### v 1.12.0
|
||||
</div>
|
||||
@@ -41,9 +41,9 @@ The Card component is a component used to create cards that can be used to displ
|
||||
|
||||
<Tabs defaultValue="link" className="pt-5 pb-1">
|
||||
<TabsList>
|
||||
<TabsTrigger value="link">Card with Link & Icon</TabsTrigger>
|
||||
<TabsTrigger value="horizontal">Card Horizontal</TabsTrigger>
|
||||
<TabsTrigger value="simple">Card Simple</TabsTrigger>
|
||||
<TabsTrigger value="link">Link & Icon</TabsTrigger>
|
||||
<TabsTrigger value="horizontal">Horizontal</TabsTrigger>
|
||||
<TabsTrigger value="simple">Simple</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="link">
|
||||
```markdown
|
||||
@@ -1,9 +0,0 @@
|
||||
---
|
||||
title: Components
|
||||
description: This section provides an overview of the custom components available in DocuBook.
|
||||
date: 29-11-2024
|
||||
---
|
||||
|
||||
Explore the custom components we've defined for easy integration and development within your projects. Each component is designed to enhance your workflow and streamline your development process.
|
||||
|
||||
<Outlet path="getting-started/components" />
|
||||
@@ -90,5 +90,3 @@ For both options, ensure that you add the variable to `tailwind.config.ts`:
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
For theme and colors, refer to the [Theme section](/docs/getting-started/themes)
|
||||
|
||||
@@ -15,7 +15,7 @@ To get started, you can clone the DocuBook repository directly from GitHub.
|
||||
Begin by cloning the DocuBook repository from GitHub:
|
||||
|
||||
```bash
|
||||
git clone --branch starter https://gitlab.com/mywildancloud/docubook.git
|
||||
git clone --branch main https://github.com/DocuBook/docubook.git
|
||||
```
|
||||
|
||||
</StepperItem>
|
||||
|
||||
@@ -13,7 +13,7 @@ DocuBook is proudly **open-source**! 🎉 We believe in creating an accessible,
|
||||
|
||||
<Note title="Contribute">
|
||||
Interested in helping us improve? Check out our [GitHub
|
||||
repository](https://github.com/gitfromwildan/docubook) to get started! From
|
||||
repository](https://github.com/DocuBook/docubook) to get started! From
|
||||
feature suggestions to bug fixes, all contributions are welcome.
|
||||
</Note>
|
||||
|
||||
|
||||
@@ -4,11 +4,11 @@ description: Get up and running with DocuBook in minutes with this comprehensive
|
||||
date: 20-05-2025
|
||||
---
|
||||
|
||||
Welcome to DocuBook! This guide will help you set up your documentation site quickly and efficiently.
|
||||
Welcome to DocuBook! This guide will help you set up and customize your documentation site efficiently.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before we begin, make sure you have the following installed:
|
||||
Before we begin, ensure you have the following installed:
|
||||
|
||||
- [Git](https://git-scm.com/)
|
||||
- [Node.js 18+](https://nodejs.org/) or [Bun 1.0+](https://bun.sh/)
|
||||
@@ -16,112 +16,130 @@ Before we begin, make sure you have the following installed:
|
||||
|
||||
## Installation
|
||||
|
||||
<Note type="note" title="Note">
|
||||
Follow the instructions on the [installation page](/docs/getting-started/installation) to install the required dependencies and set up your project.
|
||||
<Note type="note" title="Initial Setup">
|
||||
Follow the [installation guide](/docs/getting-started/installation) to set up your project dependencies and configuration.
|
||||
</Note>
|
||||
|
||||
## Project Setup
|
||||
|
||||
### Customize Branding
|
||||
### Configuration
|
||||
|
||||
<Stepper>
|
||||
<StepperItem title="Step 1: Add Favicon">
|
||||
Place your favicon at `public/favicon.ico`
|
||||
<StepperItem title="Add Favicon">
|
||||
Place your favicon at `public/favicon.ico` for browser tab display.
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 2: Add Logo">
|
||||
Place your logo at `public/images/docu.svg` (SVG format recommended)
|
||||
<StepperItem title="Add Logo">
|
||||
Add your logo at `public/images/docu.svg` (SVG format recommended for scalability).
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 3: Update Site Info">
|
||||
Edit `docu.json` to update site name, description, and other settings
|
||||
<StepperItem title="Update Site Information">
|
||||
Customize your site's metadata in `docu.json`:
|
||||
- Site title and description
|
||||
- Navigation structure
|
||||
- Default theme settings
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
|
||||
## Creating Content
|
||||
## Content Management
|
||||
|
||||
### File Structure
|
||||
|
||||
DocuBook uses the following structure:
|
||||
DocuBook organizes content in a hierarchical structure:
|
||||
|
||||
````plaintext
|
||||
```plaintext
|
||||
contents/
|
||||
docs/
|
||||
getting-started/
|
||||
quick-start-guide/ <-- You are here
|
||||
docs/ # Main documentation directory
|
||||
getting-started/ # Section for getting started guides
|
||||
quick-start-guide/ # Current guide
|
||||
index.mdx # Main content file
|
||||
guides/ # Additional documentation sections
|
||||
components/ # Component-specific documentation
|
||||
index.mdx
|
||||
guides/
|
||||
components/
|
||||
index.mdx
|
||||
````
|
||||
```
|
||||
|
||||
### Adding New Pages
|
||||
### Creating New Content
|
||||
|
||||
<Stepper>
|
||||
<StepperItem title="Step 1: Create a New Folder">
|
||||
Create a new folder in `contents/docs/getting-started/` for your content section
|
||||
<StepperItem title="1. Create Content Directory">
|
||||
Organize your documentation by creating a new directory:
|
||||
```bash
|
||||
mkdir -p contents/docs/getting-started/your-page-title
|
||||
mkdir -p contents/docs/your-section/your-topic
|
||||
```
|
||||
|
||||
Example for an API reference:
|
||||
```bash
|
||||
mkdir -p contents/docs/api/authentication
|
||||
```
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 2: Add MDX File">
|
||||
Create an `index.mdx` file with frontmatter:
|
||||
|
||||
<StepperItem title="2. Create MDX Content">
|
||||
Add an `index.mdx` file with frontmatter metadata:
|
||||
````markdown
|
||||
---
|
||||
title: Your Page Title
|
||||
description: Brief description of your page
|
||||
date: 20-05-2025
|
||||
title: Authentication
|
||||
description: Learn how to implement user authentication
|
||||
date: 2025-05-29
|
||||
---
|
||||
|
||||
# Your Content Here
|
||||
Your comprehensive guide to implementing authentication in your application.
|
||||
|
||||
Start writing your documentation using Markdown or MDX components.
|
||||
## Getting Started
|
||||
|
||||
Start by setting up your authentication provider...
|
||||
````
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 3: Add to Navigation">
|
||||
Update the navigation in `docu.json`:
|
||||
```json:docu.json showLineNumbers {8}
|
||||
{
|
||||
|
||||
<StepperItem title="3. Update Navigation">
|
||||
Add your new section to the navigation in `docu.json`. Here's how to add the authentication section we created earlier:
|
||||
|
||||
```json:docu.json showLineNumbers {4-16}
|
||||
{
|
||||
"routes": [
|
||||
// ... existing routes ...
|
||||
{
|
||||
"title": "Getting Started",
|
||||
"href": "/getting-started",
|
||||
"noLink": true,
|
||||
"items": [
|
||||
{ "title": "Your Page Title", "href": "/your-page-title" } // Add your page here separated by comma `,`
|
||||
]
|
||||
"title": "API",
|
||||
"href": "/api",
|
||||
"noLink": true,
|
||||
"context": {
|
||||
"icon": "Code2",
|
||||
"description": "API Reference and Integration",
|
||||
"title": "API"
|
||||
},
|
||||
"items": [
|
||||
{ "title": "Authentication", "href": "/authentication" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
This will add a new "API" section with an "Authentication" page under it. The `context` object defines how this section appears in the navigation, including its icon and description.
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
|
||||
## Development
|
||||
## Development Workflow
|
||||
|
||||
Start the development server:
|
||||
### Local Development
|
||||
|
||||
Start the development server with live reload:
|
||||
|
||||
```bash
|
||||
# Using npm
|
||||
npm run dev
|
||||
# or
|
||||
|
||||
# Or using Bun
|
||||
bun dev
|
||||
```
|
||||
|
||||
Visit [http://localhost:3000](http://localhost:3000) to see your site.
|
||||
Access your site at [http://localhost:3000](http://localhost:3000)
|
||||
|
||||
## Building for Production
|
||||
### Building for Production
|
||||
|
||||
When you're ready to deploy:
|
||||
When ready to deploy:
|
||||
|
||||
```bash
|
||||
# Build the production version
|
||||
npm run build
|
||||
|
||||
# Start the production server
|
||||
npm start
|
||||
```
|
||||
|
||||
## Need Help?
|
||||
|
||||
<Note type="info">
|
||||
Check out the [Components Guide](/docs/getting-started/components) to learn about all available components.
|
||||
</Note>
|
||||
|
||||
<Note type="warning">
|
||||
Make sure to commit your changes to version control before deploying.
|
||||
</Note>
|
||||
|
||||
Reference in New Issue
Block a user