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

v.1.13.0 add: context menu

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

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

@@ -4,11 +4,11 @@ description: Get up and running with DocuBook in minutes with this comprehensive
date: 20-05-2025
---
Welcome to DocuBook! This guide will help you set up your documentation site quickly and efficiently.
Welcome to DocuBook! This guide will help you set up and customize your documentation site efficiently.
## Prerequisites
Before we begin, make sure you have the following installed:
Before we begin, ensure you have the following installed:
- [Git](https://git-scm.com/)
- [Node.js 18+](https://nodejs.org/) or [Bun 1.0+](https://bun.sh/)
@@ -16,112 +16,130 @@ Before we begin, make sure you have the following installed:
## Installation
<Note type="note" title="Note">
Follow the instructions on the [installation page](/docs/getting-started/installation) to install the required dependencies and set up your project.
<Note type="note" title="Initial Setup">
Follow the [installation guide](/docs/getting-started/installation) to set up your project dependencies and configuration.
</Note>
## Project Setup
### Customize Branding
### Configuration
<Stepper>
<StepperItem title="Step 1: Add Favicon">
Place your favicon at `public/favicon.ico`
<StepperItem title="Add Favicon">
Place your favicon at `public/favicon.ico` for browser tab display.
</StepperItem>
<StepperItem title="Step 2: Add Logo">
Place your logo at `public/images/docu.svg` (SVG format recommended)
<StepperItem title="Add Logo">
Add your logo at `public/images/docu.svg` (SVG format recommended for scalability).
</StepperItem>
<StepperItem title="Step 3: Update Site Info">
Edit `docu.json` to update site name, description, and other settings
<StepperItem title="Update Site Information">
Customize your site's metadata in `docu.json`:
- Site title and description
- Navigation structure
- Default theme settings
</StepperItem>
</Stepper>
## Creating Content
## Content Management
### File Structure
DocuBook uses the following structure:
DocuBook organizes content in a hierarchical structure:
````plaintext
```plaintext
contents/
docs/
getting-started/
quick-start-guide/ <-- You are here
docs/ # Main documentation directory
getting-started/ # Section for getting started guides
quick-start-guide/ # Current guide
index.mdx # Main content file
guides/ # Additional documentation sections
components/ # Component-specific documentation
index.mdx
guides/
components/
index.mdx
````
```
### Adding New Pages
### Creating New Content
<Stepper>
<StepperItem title="Step 1: Create a New Folder">
Create a new folder in `contents/docs/getting-started/` for your content section
<StepperItem title="1. Create Content Directory">
Organize your documentation by creating a new directory:
```bash
mkdir -p contents/docs/getting-started/your-page-title
mkdir -p contents/docs/your-section/your-topic
```
Example for an API reference:
```bash
mkdir -p contents/docs/api/authentication
```
</StepperItem>
<StepperItem title="Step 2: Add MDX File">
Create an `index.mdx` file with frontmatter:
<StepperItem title="2. Create MDX Content">
Add an `index.mdx` file with frontmatter metadata:
````markdown
---
title: Your Page Title
description: Brief description of your page
date: 20-05-2025
title: Authentication
description: Learn how to implement user authentication
date: 2025-05-29
---
# Your Content Here
Your comprehensive guide to implementing authentication in your application.
Start writing your documentation using Markdown or MDX components.
## Getting Started
Start by setting up your authentication provider...
````
</StepperItem>
<StepperItem title="Step 3: Add to Navigation">
Update the navigation in `docu.json`:
```json:docu.json showLineNumbers {8}
{
<StepperItem title="3. Update Navigation">
Add your new section to the navigation in `docu.json`. Here's how to add the authentication section we created earlier:
```json:docu.json showLineNumbers {4-16}
{
"routes": [
// ... existing routes ...
{
"title": "Getting Started",
"href": "/getting-started",
"noLink": true,
"items": [
{ "title": "Your Page Title", "href": "/your-page-title" } // Add your page here separated by comma `,`
]
"title": "API",
"href": "/api",
"noLink": true,
"context": {
"icon": "Code2",
"description": "API Reference and Integration",
"title": "API"
},
"items": [
{ "title": "Authentication", "href": "/authentication" }
]
}
]
}
]
}
```
This will add a new "API" section with an "Authentication" page under it. The `context` object defines how this section appears in the navigation, including its icon and description.
</StepperItem>
</Stepper>
## Development
## Development Workflow
Start the development server:
### Local Development
Start the development server with live reload:
```bash
# Using npm
npm run dev
# or
# Or using Bun
bun dev
```
Visit [http://localhost:3000](http://localhost:3000) to see your site.
Access your site at [http://localhost:3000](http://localhost:3000)
## Building for Production
### Building for Production
When you're ready to deploy:
When ready to deploy:
```bash
# Build the production version
npm run build
# Start the production server
npm start
```
## Need Help?
<Note type="info">
Check out the [Components Guide](/docs/getting-started/components) to learn about all available components.
</Note>
<Note type="warning">
Make sure to commit your changes to version control before deploying.
</Note>