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

chore: Sync package version v1.15.1

Browse Source
This commit is contained in:
Bot DocuBook
2025-08-09 18:04:38 +00:00
parent ebd5348bf5
commit e13ba8c9e9
39 changed files with 630 additions and 2740 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
contents/docs/getting-started/customize/index.mdx
View File

@@ -1,92 +0,0 @@
---
title: Customize
description: This guide provides instructions on customizing our application.
date: 29-11-2024
---
## Markdown Options
To customize Markdown parsing, navigate to `@lib/markdown.ts` and locate the `parseMdx` function. You can add your desired plugins in the `mdxOptions`. Here’s an example:
```ts:lib/markdown.ts
async function parseMdx<Frontmatter>(rawMdx: string) {
return await compileMDX<Frontmatter>({
source: rawMdx,
options: {
parseFrontmatter: true,
mdxOptions: {
// Add your plugins here
rehypePlugins: [Shiki],
remarkPlugins: [remarkGfm],
},
},
components,
});
}
```
## Fonts
Currently, this project uses the `Geist` font. If you want to use other fonts, you can change the configuration in the main layout as shown below:
### Google Fonts
To use a Google font, import your desired font from `next/font/google`, initialize it with options, and apply the variable to the `body`:
```tsx:app/layout.tsx
import { Space_Grotesk } from "next/font/google";
const fontSans = Space_Grotesk({
display: "swap",
variable: "--font-regular",
weight: "400",
subsets: ["latin"],
});
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={`${fontSans.variable} font-regular`}>
{children}
</body>
</html>
);
}
```
### Local Fonts
To use a local font, you need to use the local font loader from Next.js. Pass the options and apply them to the `body`:
```tsx:app/layout.tsx
import localFont from "next/font/local";
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-regular",
weight: "100 900",
});
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={`${geistSans.variable} font-regular`}>
{children}
</body>
</html>
);
}
```
For both options, ensure that you add the variable to `tailwind.config.ts`:
```ts:tailwind.config.ts
{
// ...
extend: {
fontFamily: {
regular: ["var(--font-regular)"],
},
}
}
```

63
contents/docs/getting-started/development/index.mdx Normal file
View File

@@ -0,0 +1,63 @@
---
title : Development
description : for Development server and production
date : 10-12-2024
---
## Heading 2
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
### Heading 3
example of ordered list format :
- list one
- sub list
- list two
- list three
#### Heading 4
Below is an example of how to write a code block :
````plaintext
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
````
example note :
```plaintext
<Note type="note" title="Note">
This is a general note to convey information to the user.
</Note>
```
displaying an image in markdown format :
```plaintext
![Alt text for the image](https://via.placeholder.com/150)
```
render as :
![Alt text for the image](https://via.placeholder.com/150)
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
<Note type="warning" title="Warning">
every page that is indexed in a folder will have an `index.mdx` file with metadata :
```plaintext
---
title : Introduction
description : overview or synopsis of a project
date : 10-12-2024
image : example-img.png
---
```
</Note>

9
contents/docs/getting-started/index.mdx
View File

@@ -1,9 +0,0 @@
---
title: Getting Started
description: Set up Your Documentations with DocuBook
date: 29-05-2025
---
Welcome to DocuBook! This guide will help you set up and customize your documentation site quickly. Whether you're creating API references, user guides, or technical documentation, these components will help you build a professional and consistent documentation experience. Follow the steps below to get started with DocuBook and make the most of its powerful features.
<Outlet path="getting-started" />

84
contents/docs/getting-started/installation/index.mdx
View File

@@ -1,84 +0,0 @@
---
title: Installation
description: Installation guide for our application.
date: 17-02-2025
---
Setting up DocuBook is straightforward, with options to clone the repository or use the convenient `npx` command. DocuBook requires [Node.js](https://nodejs.org/) version 18 or higher for optimal performance.
## Clone Repository
To get started, you can clone the DocuBook repository directly from GitHub.
<Stepper>
<StepperItem title="Step 1: Clone the DocuBook Repository">
Begin by cloning the DocuBook repository from GitHub:
```bash
git clone --branch main https://github.com/DocuBook/docubook.git
```
</StepperItem>
<StepperItem title="Step 2: Access the Project Directory">
After cloning, navigate into the project directory to start setting up:
```bash
cd docubook
```
</StepperItem>
<StepperItem title="Step 3: Install Required Dependencies">
Install all necessary project dependencies with npm:
```bash
npm install
```
</StepperItem>
<StepperItem title="Step 4: Launch the Development Server">
Finally, start the development server to view the project locally:
```bash
npm run dev
```
</StepperItem>
</Stepper>
## Quick Setup with CLI
For a faster setup, use the `cli` command to create a new DocuBook project in one step:
<Tabs defaultValue="npm" className="pt-5 pb-1">
<TabsList>
<TabsTrigger value="npm">npm</TabsTrigger>
<TabsTrigger value="pnpm">pnpm</TabsTrigger>
<TabsTrigger value="bun">bun</TabsTrigger>
<TabsTrigger value="yarn">yarn</TabsTrigger>
</TabsList>
<TabsContent value="npm">
```shell
npx @docubook/create@latest
```
</TabsContent>
<TabsContent value="pnpm">
```shell
pnpm dlx @docubook/create@latest
```
</TabsContent>
<TabsContent value="bun">
```shell
bunx @docubook/create@latest
```
</TabsContent>
<TabsContent value="yarn">
```shell
yarn dlx @docubook/create@latest
```
</TabsContent>
</Tabs>
With this setup, you’ll have a ready-to-use DocuBook instance to start building your documentation.

89
contents/docs/getting-started/introduction/index.mdx
View File

@@ -1,50 +1,63 @@
---
title: Introduction
description: This section provides an overview of DocuBook.
date: 29-11-2024
image: example-img.png
title : Introduction
description : overview or synopsis of a project
date : 10-12-2024
---
Welcome to **DocuBook**! This template provides a modern, flexible, and user-friendly foundation for creating engaging documentation. Whether you're building a knowledge base, project docs, or a personal blog, DocuBook makes it easy to set up and scale.
## Heading 2
## Open Source Philosophy
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
DocuBook is proudly **open-source**! 🎉 We believe in creating an accessible, collaborative platform that thrives on community contributions.
### Heading 3
<Note title="Contribute">
Interested in helping us improve? Check out our [GitHub
repository](https://github.com/DocuBook/docubook) to get started! From
feature suggestions to bug fixes, all contributions are welcome.
example of ordered list format :
- list one
- sub list
- list two
- list three
#### Heading 4
Below is an example of how to write a code block :
````plaintext
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
````
example note :
```plaintext
<Note type="note" title="Note">
This is a general note to convey information to the user.
</Note>
```
## Project Overview
displaying an image in markdown format :
**DocuBook** is more than just a documentation template. It's a **complete toolkit** designed for modern web development. Key features include:
```plaintext
![Alt text for the image](https://via.placeholder.com/150)
```
- **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 :
![Alt text for the image](https://via.placeholder.com/150)
### Key Features
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
| **Feature** | **Description** |
| ------------------------------- | ----------------------------------------------------- |
| MDX Support | Write interactive documentation with MDX. |
| Nested Pages | Organize content in a nested, hierarchical structure. |
| Pagination | Split content across multiple pages. |
| Syntax Highlighting | Highlight code for better readability. |
| Code Line Highlighting & Titles | Highlight specific lines with descriptive titles. |
| Interactive Code Blocks | Language-specific and interactive code display. |
| Custom Markdown Components | Embed custom, reusable components in your docs. |
| Static Site Generation | Generate a static, high-performance site. |
| SEO-Optimized | Structured for optimal search engine indexing. |
## Technology & Libraries
DocuBook leverages cutting-edge technologies to ensure performance and flexibility:
- **Next.js 14** - The powerful React framework optimized for production.
- **Tailwind CSS** - Utility-first styling for quick, clean designs.
- **Shadcn-UI** - Elegant, accessible components for a polished look.
- **next-mdx-remote** - Enables MDX support for dynamic, interactive Markdown content.
<Note type="warning" title="Warning">
every page that is indexed in a folder will have an `index.mdx` file with metadata :
```plaintext
---
title : Introduction
description : overview or synopsis of a project
date : 10-12-2024
image : example-img.png
---
```
</Note>

87
contents/docs/getting-started/project-structure/index.mdx
View File

@@ -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.

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

@@ -1,145 +1,63 @@
---
title: Quick Start Guide
description: Get up and running with DocuBook in minutes with this comprehensive guide
date: 20-05-2025
title : Quick Start Guide
description : a quick way to understand how to use it
date : 10-12-2024
---
Welcome to DocuBook! This guide will help you set up and customize your documentation site efficiently.
## Heading 2
## Prerequisites
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
Before we begin, ensure you have the following installed:
### Heading 3
- [Git](https://git-scm.com/)
- [Node.js 18+](https://nodejs.org/) or [Bun 1.0+](https://bun.sh/)
- A package manager (npm, yarn, or pnpm)
example of ordered list format :
## Installation
- list one
- sub list
- list two
- list three
<Note type="note" title="Initial Setup">
Follow the [installation guide](/docs/getting-started/installation) to set up your project dependencies and configuration.
#### Heading 4
Below is an example of how to write a code block :
````plaintext
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
````
example note :
```plaintext
<Note type="note" title="Note">
This is a general note to convey information to the user.
</Note>
```
## Project Setup
### Configuration
<Stepper>
<StepperItem title="Add Favicon">
Place your favicon at `public/favicon.ico` for browser tab display.
</StepperItem>
<StepperItem title="Add Logo">
Add your logo at `public/images/docu.svg` (SVG format recommended for scalability).
</StepperItem>
<StepperItem title="Update Site Information">
Customize your site's metadata in `docu.json`:
- Site title and description
- Navigation structure
- Default theme settings
</StepperItem>
</Stepper>
## Content Management
### File Structure
DocuBook organizes content in a hierarchical structure:
displaying an image in markdown format :
```plaintext
contents/
docs/ # Main documentation directory
getting-started/ # Section for getting started guides
quick-start-guide/ # Current guide
index.mdx # Main content file
guides/ # Additional documentation sections
components/ # Component-specific documentation
index.mdx
![Alt text for the image](https://via.placeholder.com/150)
```
### Creating New Content
render as :
![Alt text for the image](https://via.placeholder.com/150)
<Stepper>
<StepperItem title="1. Create Content Directory">
Organize your documentation by creating a new directory:
```bash
mkdir -p contents/docs/your-section/your-topic
```
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
Example for an API reference:
```bash
mkdir -p contents/docs/api/authentication
```
</StepperItem>
<StepperItem title="2. Create MDX Content">
Add an `index.mdx` file with frontmatter metadata:
````markdown
---
title: Authentication
description: Learn how to implement user authentication
date: 2025-05-29
---
Your comprehensive guide to implementing authentication in your application.
## Getting Started
Start by setting up your authentication provider...
````
</StepperItem>
<StepperItem title="3. Update Navigation">
Add your new section to the navigation in `docu.json`. Here's how to add the authentication section we created earlier:
```json:docu.json showLineNumbers {4-16}
{
"routes": [
// ... existing routes ...
{
"title": "API",
"href": "/api",
"noLink": true,
"context": {
"icon": "Code2",
"description": "API Reference and Integration",
"title": "API"
},
"items": [
{ "title": "Authentication", "href": "/authentication" }
]
}
]
}
```
This will add a new "API" section with an "Authentication" page under it. The `context` object defines how this section appears in the navigation, including its icon and description.
</StepperItem>
</Stepper>
## Development Workflow
### Local Development
Start the development server with live reload:
```bash
# Using npm
npm run dev
# Or using Bun
bun dev
```
Access your site at [http://localhost:3000](http://localhost:3000)
### Building for Production
When ready to deploy:
```bash
# Build the production version
npm run build
# Start the production server
npm start
```
<Note type="warning" title="Warning">
every page that is indexed in a folder will have an `index.mdx` file with metadata :
```plaintext
---
title : Introduction
description : overview or synopsis of a project
date : 10-12-2024
image : example-img.png
---
```
</Note>

165
contents/docs/getting-started/theme-colors/coffee/index.mdx
View File

@@ -1,165 +0,0 @@
---
title: Coffee
description: A warm, minimalistic design inspired by early computing. This theme is a replica of the "Coffee" theme from the `shiki-twoslash` package.
date: 2025-05-30
---
## Styles
<Note type="note" title="note">
You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
</Note>
<Tabs defaultValue="globals" className="pt-5 pb-1">
<TabsList>
<TabsTrigger value="globals">globals.css</TabsTrigger>
<TabsTrigger value="syntax">syntax.css</TabsTrigger>
</TabsList>
<TabsContent value="globals">
```css:globals.css
/* Rich Coffee Theme */
@layer base {
:root {
--background: 35 40% 96%;
--foreground: 25 25% 10%;
--card: 0 0% 100%;
--card-foreground: 25 25% 10%;
--popover: 0 0% 100%;
--popover-foreground: 25 25% 10%;
--primary: 25 60% 40%;
--primary-foreground: 0 0% 100%;
--secondary: 35 30% 90%;
--secondary-foreground: 25 25% 10%;
--muted: 35 20% 94%;
--muted-foreground: 25 15% 35%;
--accent: 30 50% 38%;
--accent-foreground: 0 0% 100%;
--destructive: 5 85% 45%;
--destructive-foreground: 0 0% 100%;
--border: 30 15% 85%;
--input: 30 15% 88%;
--ring: 25 60% 40%;
--radius: 0.5rem;
--chart-1: 25 60% 45%;
--chart-2: 30 55% 45%;
--chart-3: 35 50% 42%;
--chart-4: 20 45% 38%;
--chart-5: 40 45% 40%;
--line-number-color: rgba(0, 0, 0, 0.08);
}
.dark {
--background: 30 10% 6%;
--foreground: 35 20% 94%;
--card: 30 10% 8%;
--card-foreground: 35 20% 94%;
--popover: 30 10% 8%;
--popover-foreground: 35 20% 94%;
--primary: 30 45% 52%;
--primary-foreground: 30 10% 6%;
--secondary: 30 12% 14%;
--secondary-foreground: 35 20% 94%;
--muted: 30 10% 16%;
--muted-foreground: 30 15% 60%;
--accent: 28 40% 48%;
--accent-foreground: 0 0% 100%;
--destructive: 5 80% 55%;
--destructive-foreground: 0 0% 100%;
--border: 30 10% 20%;
--input: 30 10% 20%;
--ring: 30 45% 52%;
--chart-1: 30 45% 52%;
--chart-2: 28 40% 50%;
--chart-3: 32 45% 50%;
--chart-4: 25 35% 46%;
--chart-5: 35 40% 48%;
--line-number-color: rgba(255, 255, 255, 0.12);
}
}
```
</TabsContent>
<TabsContent value="syntax">
```css:syntax.css
/* Rich Coffee Theme - Syntax Highlighting */
/* Light Mode */
.keyword {
color: hsl(25 60% 35%); /* Rich coffee brown */
}
.function {
color: hsl(30 55% 38%); /* Warm coffee brown */
}
.punctuation {
color: hsl(30 15% 55%); /* Muted brown */
}
.comment {
color: hsl(25 15% 45%); /* Muted brown */
font-style: italic;
opacity: 0.9;
}
.string,
.constant,
.annotation,
.boolean,
.number {
color: hsl(32 50% 40%); /* Warm brown with hint of orange */
}
.tag {
color: hsl(25 65% 30%); /* Dark rich coffee */
}
.attr-name {
color: hsl(28 55% 38%); /* Warm brown */
}
.attr-value {
color: hsl(35 55% 35%); /* Slightly orange brown */
}
/* Dark Mode */
.dark .keyword {
color: hsl(30 50% 65%); /* Light warm brown */
}
.dark .function {
color: hsl(28 55% 68%); /* Light warm brown */
}
.dark .string,
.dark .constant,
.dark .annotation,
.dark .boolean,
.dark .number {
color: hsl(35 50% 72%); /* Light warm brown with hint of orange */
}
.dark .tag {
color: hsl(30 50% 75%); /* Light warm brown */
}
.dark .attr-name {
color: hsl(28 45% 70%); /* Light warm brown */
}
.dark .attr-value {
color: hsl(35 50% 70%); /* Light warm brown with hint of orange */
}
.dark .comment {
color: hsl(30 15% 65%); /* Light brown-gray */
opacity: 0.8;
}
.dark .punctuation {
color: hsl(30 15% 70%); /* Light brown-gray */
opacity: 0.9;
}
```
</TabsContent>
</Tabs>

160
contents/docs/getting-started/theme-colors/default/index.mdx
View File

@@ -1,160 +0,0 @@
---
title: Default Theme
description: This page explains the Modern Blue theme colors used in DocuBook, which is a default theme provided by DocuBook.
date: 2025-05-20
---
## Styles
<Note type="note" title="note">
You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
</Note>
<Tabs defaultValue="globals" className="pt-5 pb-1">
<TabsList>
<TabsTrigger value="globals">globals.css</TabsTrigger>
<TabsTrigger value="syntax">syntax.css</TabsTrigger>
</TabsList>
<TabsContent value="globals">
```css:globals.css
/* Modern Blue Theme */
@layer base {
:root {
--background: 210 40% 98%;
--foreground: 220 30% 15%;
--card: 0 0% 100%;
--card-foreground: 220 30% 15%;
--popover: 0 0% 100%;
--popover-foreground: 220 30% 15%;
--primary: 210 81% 56%; /* #2281E3 */
--primary-foreground: 0 0% 100%;
--secondary: 210 30% 90%;
--secondary-foreground: 220 30% 15%;
--muted: 210 20% 92%;
--muted-foreground: 220 15% 50%;
--accent: 200 100% 40%;
--accent-foreground: 0 0% 100%;
--destructive: 0 85% 60%;
--destructive-foreground: 0 0% 100%;
--border: 210 20% 85%;
--input: 210 20% 85%;
--ring: 210 81% 56%;
--radius: 0.5rem;
--chart-1: 210 81% 56%;
--chart-2: 200 100% 40%;
--chart-3: 220 76% 60%;
--chart-4: 190 90% 50%;
--chart-5: 230 86% 45%;
--line-number-color: rgba(0, 0, 0, 0.05);
}
.dark {
--background: 220 25% 10%;
--foreground: 210 30% 96%;
--card: 220 25% 15%;
--card-foreground: 210 30% 96%;
--popover: 220 25% 15%;
--popover-foreground: 210 30% 96%;
--primary: 210 100% 65%;
--primary-foreground: 220 25% 10%;
--secondary: 215 25% 20%;
--secondary-foreground: 210 30% 96%;
--muted: 215 20% 25%;
--muted-foreground: 215 20% 65%;
--accent: 200 100% 60%;
--accent-foreground: 0 0% 100%;
--destructive: 0 85% 70%;
--destructive-foreground: 0 0% 100%;
--border: 215 20% 25%;
--input: 215 20% 25%;
--ring: 210 100% 65%;
--chart-1: 210 100% 65%;
--chart-2: 200 100% 60%;
--chart-3: 220 90% 70%;
--chart-4: 190 100% 65%;
--chart-5: 230 90% 60%;
--line-number-color: rgba(255, 255, 255, 0.1);
}
}
```
</TabsContent>
<TabsContent value="syntax">
```css:syntax.css
/* Modern Blue Theme */
/* Light Mode */
.keyword {
color: #1d4ed8; /* Darker blue for better contrast */
}
.function {
color: #0369a1; /* Deep blue */
}
.punctuation {
color: #4b5563; /* Slate gray */
}
.comment {
color: #6b7280; /* Muted gray */
font-style: italic;
}
.string,
.constant,
.annotation,
.boolean,
.number {
color: #0d9488; /* Teal for better distinction */
}
.tag {
color: #1d4ed8; /* Matching keyword color */
}
.attr-name {
color: #0284c7; /* Sky blue */
}
.attr-value {
color: #2563eb; /* Primary blue */
}
/* Dark Mode */
.dark .keyword {
color: #60a5fa; /* Soft blue */
}
.dark .function {
color: #38bdf8; /* Sky blue */
}
.dark .string,
.dark .constant,
.dark .annotation,
.dark .boolean,
.dark .number {
color: #2dd4bf; /* Teal */
}
.dark .tag {
color: #60a5fa; /* Matching keyword color */
}
.dark .attr-name {
color: #7dd3fc; /* Lighter blue */
}
.dark .attr-value {
color: #3b82f6; /* Brighter blue */
}
.dark .comment {
color: #9ca3af; /* Lighter gray for dark mode */
}
.dark .punctuation {
color: #9ca3af; /* Lighter gray for dark mode */
}
```
</TabsContent>
</Tabs>

161
contents/docs/getting-started/theme-colors/freshlime/index.mdx
View File

@@ -1,161 +0,0 @@
---
title: Fresh Lime
description: A fresh and vibrant freshlime-themed color scheme that's easy on the eyes while maintaining excellent readability.
date: 2025-05-30
---
## Styles
<Note type="note" title="note">
You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
</Note>
<Tabs defaultValue="globals" className="pt-5 pb-1">
<TabsList>
<TabsTrigger value="globals">globals.css</TabsTrigger>
<TabsTrigger value="syntax">syntax.css</TabsTrigger>
</TabsList>
<TabsContent value="globals">
```css:globals.css
/* Fresh Lime Theme */
@layer base {
:root {
--background: 85 45% 98%;
--foreground: 85 30% 10%;
--card: 0 0% 100%;
--card-foreground: 85 30% 10%;
--popover: 0 0% 100%;
--popover-foreground: 85 30% 10%;
--primary: 85 70% 45%;
--primary-foreground: 0 0% 100%;
--secondary: 85 40% 90%;
--secondary-foreground: 85 30% 10%;
--muted: 85 30% 92%;
--muted-foreground: 85 15% 45%;
--accent: 85 60% 40%;
--accent-foreground: 0 0% 100%;
--destructive: 0 85% 60%;
--destructive-foreground: 0 0% 100%;
--border: 85 25% 88%;
--input: 85 25% 88%;
--ring: 85 70% 45%;
--radius: 0.5rem;
--chart-1: 85 70% 45%;
--chart-2: 85 60% 40%;
--chart-3: 85 80% 40%;
--chart-4: 85 85% 35%;
--chart-5: 85 90% 30%;
--line-number-color: rgba(0, 0, 0, 0.05);
}
.dark {
--background: 85 20% 8%;
--foreground: 85 30% 96%;
--card: 85 20% 10%;
--card-foreground: 85 30% 96%;
--popover: 85 20% 10%;
--popover-foreground: 85 30% 96%;
--primary: 85 75% 55%;
--primary-foreground: 85 20% 8%;
--secondary: 85 25% 18%;
--secondary-foreground: 85 30% 96%;
--muted: 85 20% 20%;
--muted-foreground: 85 20% 70%;
--accent: 85 70% 50%;
--accent-foreground: 0 0% 100%;
--destructive: 0 85% 65%;
--destructive-foreground: 0 0% 100%;
--border: 85 25% 22%;
--input: 85 25% 22%;
--ring: 85 75% 55%;
--chart-1: 85 75% 55%;
--chart-2: 85 70% 50%;
--chart-3: 85 80% 45%;
--chart-4: 85 85% 40%;
--chart-5: 85 90% 35%;
--line-number-color: rgba(255, 255, 255, 0.1);
}
}
```
</TabsContent>
<TabsContent value="syntax">
```css:syntax.css
/* Fresh Lime Theme - Syntax Highlighting */
/* Light Mode */
.keyword {
color: hsl(85 70% 30%); /* Dark lime green */
}
.function {
color: hsl(85 65% 35%); /* Slightly lighter lime */
}
.punctuation {
color: hsl(85 15% 50%); /* Muted green-gray */
}
.comment {
color: hsl(85 15% 50%); /* Muted green-gray */
font-style: italic;
}
.string,
.constant,
.annotation,
.boolean,
.number {
color: hsl(85 50% 35%); /* Medium lime green */
}
.tag {
color: hsl(85 70% 25%); /* Darker lime */
}
.attr-name {
color: hsl(85 60% 35%); /* Lime green */
}
.attr-value {
color: hsl(85 70% 30%); /* Dark lime green */
}
/* Dark Mode */
.dark .keyword {
color: hsl(85 75% 65%); /* Bright lime */
}
.dark .function {
color: hsl(85 75% 60%); /* Slightly less bright lime */
}
.dark .string,
.dark .constant,
.dark .annotation,
.dark .boolean,
.dark .number {
color: hsl(85 60% 70%); /* Light lime */
}
.dark .tag {
color: hsl(85 70% 70%); /* Bright lime */
}
.dark .attr-name {
color: hsl(85 65% 70%); /* Light lime */
}
.dark .attr-value {
color: hsl(85 75% 65%); /* Bright lime */
}
.dark .comment {
color: hsl(85 15% 60%); /* Light gray-green */
}
.dark .punctuation {
color: hsl(85 20% 70%); /* Light gray-green */
}
```
</TabsContent>
</Tabs>

9
contents/docs/getting-started/theme-colors/index.mdx
View File

@@ -1,9 +0,0 @@
---
title : Theme Colors
description : Color system used in DocuBook for styling UI elements
date : 2025-05-20
---
DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.
<Outlet path="getting-started/theme-colors" />

77
contents/docs/getting-started/theme-colors/llms/index.mdx
View File

@@ -1,77 +0,0 @@
---
title: Llms.txt - Generate Custom Theme
description: Complete guide for creating and using AI-generated custom themes based on LLMS context.
date: 2025-05-31
---
## Introduction
This document explains how to create and implement custom color themes using AI with LLMS context. The context includes a consistent color palette for both light and dark modes, along with syntax highlighting colors for code.
## File Structure
<Files>
<Folder name="styles">
<File name="globals.css" />
<File name="syntax.css" />
</Folder>
</Files>
## Generate New Theme
<Stepper>
<StepperItem title="Step 1: Access LLM for Color Generation">
Ensure you have access to a language model (LLM) that supports color palette generation
</StepperItem>
<StepperItem title="Step 2: Prepare Color Context">
Share the content of the [llms.txt](/llms.txt) file with the AI to provide the current color scheme context.
</StepperItem>
<StepperItem title="Step 3: Define Color Requirements">
Determine your preferred color scheme or theme requirements
</StepperItem>
<StepperItem title="Step 4: Generate New Theme">
Use the following prompt to request a new theme from the AI:
```markdown
Create a new color theme based on the provided context with the following requirements:
1. Different primary color #2281E3
2. Maintain good contrast for accessibility
3. Include variants for both light and dark modes
4. Keep the same structure as the provided context
```
<Note type="danger" title="Colors example">
changes the value of Hex color `#2281E3` into your brand colors.
</Note>
</StepperItem>
</Stepper>
## Implementation
After receiving the new color palette:
1. Copy the generated CSS code to your theme file
2. Update CSS variables in `globals.css`
3. Adjust syntax colors in `syntax.css` if needed
4. Test the theme across different devices and display modes
## Example Implementation
```css
:root {
--primary: 210 81% 56%; /* Primary color */
--secondary: 210 30% 90%; /* Secondary color */
/* ... and so on */
}
.dark {
--primary: 210 100% 65%; /* Dark mode primary color */
/* ... and so on */
}
```
## Tips and Recommendations
- Always test color contrast to ensure accessibility
- Maintain consistency with existing themes
- Use tools like [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) to verify contrast ratios
- Keep backups of previous theme versions before making major changes
## Troubleshooting
- If colors don't change, ensure CSS variables are properly imported
- Check CSS selector specificity if styles conflict
- Verify dark/light mode toggling is working correctly