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

update documentations

Browse Source
This commit is contained in:
gitfromwildan
2025-05-30 17:23:02 +07:00
parent 63fc96be07
commit bcafa9b5d9
14 changed files with 92 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
contents/docs/components/accordion/index.mdx
View File

@@ -4,41 +4,55 @@ description: A component used to create collapsible content that can be hidden a
date: 22-12-2024 date: 22-12-2024
--- ---
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 ## Preview
### Code Block ### Basic Usage
<Accordion title="Code Block" defaultOpen={true}> <Accordion title="Click to expand" defaultOpen={true}>
```javascript:main.js showLineNumbers {3-4} 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.
function isRocketAboutToCrash() { </Accordion>
// Check if the rocket is stable
if (!isStable()) { ### With Code Block
NoCrash(); // Prevent the crash
} <Accordion title="Code Example" className="mt-4">
```javascript:utils.js showLineNumbers
// Example of using the Accordion component
import Accordion from '@/components/markdown/AccordionMdx';
function Example() {
return (
<Accordion title="Click to see code">
<pre>
{`function greet() {\n console.log('Hello, world!');\n}`}
</pre>
</Accordion>
);
} }
``` ```
</Accordion> </Accordion>
### Text with Markdown ### With Markdown Content
<Accordion title="Markdown"> <Accordion title="Markdown Example" className="mt-4">
this is an example of plain text content from the accordion component and below is markdown ; ## This is a markdown heading
1. number one
2. number two - List item 1
3. number three - List item 2
- List item 3
You can include **bold** and *italic* text, [links](#), and other markdown elements.
</Accordion> </Accordion>
## Props ## Props
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
| ------------- | --------- | -------------- | -------------------------------------------------------------------------------------- | |------|------|---------|-------------|
| `title` | `string` | `null` | The value of Accordion title. | | `title` | string | - | **Required**. The text displayed in the accordion header. |
| `children` | `ReactNode` | `null` | Flexible content, both HTML elements, markdown componenst and plain text. | | `children` | ReactNode | null | The content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components. |
| `defaultOpen` | `boolean` | `false` | You can change the value to `true` if you want the content to open when the page loads | | `defaultOpen` | boolean | false | When true, the accordion will be expanded by default. |
| `className` | string | undefined | Additional CSS classes to apply to the accordion container. |
## Code ## Output Markdown
<Tabs defaultValue="markdown" className="pt-5 pb-1"> <Tabs defaultValue="markdown" className="pt-5 pb-1">
<TabsList> <TabsList>

22
contents/docs/components/button/index.mdx
View File

@@ -4,14 +4,12 @@ description: A component used to create buttons that can be used to trigger acti
date: 14-12-2024 date: 14-12-2024
--- ---
The Button component is a component used to create buttons that can be used to trigger actions or navigate to other pages.
## Preview ## Preview
<Button <Button
text="Learn More" text="Learn More"
href="https://learn.example.com" href="https://learn.example.com"
icon="ArrowUpRight" icon="MoveUpRight"
size="md" size="md"
target="_blank" target="_blank"
variation="primary" variation="primary"
@@ -20,17 +18,17 @@ The Button component is a component used to create buttons that can be used to t
## Props ## Props
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
| ----------- | -------- | -------------- | -------------------------------------------- | | ----------- | -------- | ----------- | -------------------------------------------- |
| `text` | `string` | `""` | The value of text button. | | `text` | string | undefined | The button text |
| `href` | `string` | `""` | The value of url button. | | `href` | string | **required**| The URL to navigate to |
| `icon` | `string` | `null` | The value of button icon render from lucide. | | `icon` | string | undefined | Lucide icon name (e.g. "MoveUpRight") |
| `size` | `string` | `"sm, md, lg"` | The value of size button. | | `size` | string | "md" | Button size: `"sm"`, `"md"`, or `"lg"` |
| `target` | `string` | `"_blank"` | By default target `_blank` | | `target` | string | undefined | Link target (e.g. "_blank") |
| `variation` | `string` | `"primary"` | By default variation is **Primary** | | `variation` | string | "primary" | Button style: `"primary"`, `"accent"`, or `"outline"` |
## Code ## Output Markdown
```bash ```markdown
<Button <Button
text="Learn More" text="Learn More"
href="https://learn.example.com" href="https://learn.example.com"

6
contents/docs/components/card-group/index.mdx
View File

@@ -4,8 +4,6 @@ description: A component used to create card groups that can be used to display
date: 20-02-2025 date: 20-02-2025
--- ---
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 ## Preview
<CardGroup cols={2}> <CardGroup cols={2}>
@@ -27,9 +25,9 @@ The CardGroup component is a component used to create card groups that can be us
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
| ------------- | -------- | ------- | ------------------------------------------------------- | | ------------- | -------- | ------- | ------------------------------------------------------- |
| `cols` | `number` | `{2}` | By default 2 The number of columns per row | | `cols` | number | {2} | By default 2 The number of columns per row |
## Code ## Output Markdown
```markdown ```markdown
<CardGroup cols={2}> <CardGroup cols={2}>

14
contents/docs/components/card/index.mdx
View File

@@ -4,13 +4,11 @@ description: A component used to create cards that can be used to display conten
date: 20-02-2025 date: 20-02-2025
--- ---
The Card component is a component used to create cards that can be used to display content in a compact and organized way.
## Example ## Example
### Card with Link and icon ### Card with Link and icon
<Card title="Click on me" icon="Link" href="/docs/getting-started/components/card-group"> <Card title="Click on me" icon="Link" href="/docs/components/card-group">
This is how you use a card with an icon and a link. Clicking on this card This is how you use a card with an icon and a link. Clicking on this card
brings you to the Card Group page. brings you to the Card Group page.
</Card> </Card>
@@ -32,12 +30,12 @@ The Card component is a component used to create cards that can be used to displ
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
| ------------- | -------- | ------- | ------------------------------------------------------- | | ------------- | -------- | ------- | ------------------------------------------------------- |
| `title` | `string` | `""` | The value of card title. | | `title` | string | null | The value of card title. |
| `icon` | `string` | `null` | The value of card icon render from lucide. | | `icon` | string | null | The value of card icon render from lucide. |
| `href` | `string` | `null` | The value of card link url. | | `href` | string | null | The value of card link url. |
| `horizontal` | `boolean` | `""` | horizontal layout for card. | | `horizontal` | boolean | undefined | horizontal layout for card. |
## Code ## Output Markdown
<Tabs defaultValue="link" className="pt-5 pb-1"> <Tabs defaultValue="link" className="pt-5 pb-1">
<TabsList> <TabsList>

6
contents/docs/components/code-block/index.mdx
View File

@@ -4,8 +4,6 @@ description: A component used to display code snippets with optional line number
date: 14-12-2024 date: 14-12-2024
--- ---
The Code Block component is a component used to display code snippets with optional line numbering and line highlighting.
## Preview ## Preview
```javascript:main.js showLineNumbers {3-4} ```javascript:main.js showLineNumbers {3-4}
@@ -19,7 +17,7 @@ function isRocketAboutToCrash() {
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}`. 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}`.
## Usage ## Output Markdown
You can directly use the following syntax to create a code block with line numbers and highlight specific lines: You can directly use the following syntax to create a code block with line numbers and highlight specific lines:
@@ -34,7 +32,7 @@ function isRocketAboutToCrash() {
``` ```
```` ````
### Features ## Features
- **Line Numbers**: Enable line numbers by adding `showLineNumbers` after the opening backticks. - **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}`). - **Highlight Lines**: Specify lines to highlight using curly braces (e.g., `{2,3-5}`).

6
contents/docs/components/file-tree/index.mdx
View File

@@ -51,14 +51,14 @@ The root component that wraps the entire file tree.
| Prop | Type | Required | Description | | Prop | Type | Required | Description |
|----------|----------|----------|---------------------------------------| |----------|----------|----------|---------------------------------------|
| name | string | Yes | The name of the folder | | `name` | string | Yes | The name of the folder |
| children | ReactNode | No | Child elements (File or Folder) | | `children` | ReactNode | No | Child elements (File or Folder) |
### File ### File
| Prop | Type | Required | Description | | Prop | Type | Required | Description |
|------|--------|----------|----------------------------| |------|--------|----------|----------------------------|
| name | string | Yes | The name of the file | | `name` | string | Yes | The name of the file |
## Examples ## Examples

6
contents/docs/components/keyboard/index.mdx
View File

@@ -49,9 +49,9 @@ Renders as: <Kbd show="custom">Custom</Kbd>
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
|-----------|---------------------|------------|-------------| |-----------|---------------------|------------|-------------|
| `show` | `string` | (required) | The key identifier (e.g., 'cmd', 'ctrl', 'a') | | `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 | | `type` | string | `window` | for device type `mac` or `window` | Platform style or custom content |
| `children`| `ReactNode` | - | Custom content to display (overrides automatic rendering) | | `children`| ReactNode | - | Custom content to display (overrides automatic rendering) |
## Supported Keys ## Supported Keys

10
contents/docs/components/note/index.mdx
View File

@@ -4,8 +4,6 @@ description: A component used to display different types of messages such as gen
date: 14-12-2024 date: 14-12-2024
--- ---
The `Note` component allows you to display different types of messages such as general notes, warnings, or success notifications. Each type is styled accordingly, providing a clear visual cue to the user.
## Preview ## Preview
<Note type="note" title="Note"> <Note type="note" title="Note">
@@ -25,12 +23,12 @@ The `Note` component allows you to display different types of messages such as g
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
| ------- | ---------------------------------------------- | ------- | ---------------------------------------- | | ------- | ---------------------------------------------- | ------- | ---------------------------------------- |
| `title` | `string` | "Note" | Sets the title of the note. | | `title` | string | "Note" | Sets the title of the note. |
| `type` | `"note"`, `"danger"`, `"warning"`, `"success"` | "note" | Determines the visual style of the note. | | `type` | "note" "danger" "success" "warning" | undefined | Determines the visual style of the note. |
## Code ## Output Markdown
```jsx ```markdown
<Note type="note" title="Note"> <Note type="note" title="Note">
This is a general note to convey information to the user. This is a general note to convey information to the user.
</Note> </Note>

4
contents/docs/components/release-note/index.mdx
View File

@@ -10,7 +10,7 @@ The Release Note component makes it easy for you to write and display changelogs
Here is a basic example of using the Release Note component: Here is a basic example of using the Release Note component:
```jsx ```markdown
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes"> <Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
<Changes type="added"> <Changes type="added">
- New feature to improve accessibility - New feature to improve accessibility
@@ -49,7 +49,7 @@ The `Release` component is used to display key information about a release versi
| `date` | string | ❌ | Release date in a valid format (example: "2025-05-24") | | `date` | string | ❌ | Release date in a valid format (example: "2025-05-24") |
| `children` | ReactNode | ✅ | Child content, typically `Changes` components | | `children` | ReactNode | ✅ | Child content, typically `Changes` components |
```jsx ```markdown
<Release <Release
version="1.10.1" version="1.10.1"
date="2025-05-24" date="2025-05-24"

6
contents/docs/components/stepper/index.mdx
View File

@@ -8,8 +8,6 @@ In this guide, we utilize a custom `Stepper` component, specifically designed fo
## Preview ## Preview
##
<Stepper> <Stepper>
<StepperItem title="Step 1: Clone the DocuBook Repository"> <StepperItem title="Step 1: Clone the DocuBook Repository">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
@@ -26,9 +24,9 @@ In this guide, we utilize a custom `Stepper` component, specifically designed fo
</StepperItem> </StepperItem>
</Stepper> </Stepper>
## Code ## Output Markdown
```jsx ```markdown
<Stepper> <Stepper>
<StepperItem title="Step 1: Clone the DocuBook Repository"> <StepperItem title="Step 1: Clone the DocuBook Repository">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,

8
contents/docs/components/tabs/index.mdx
View File

@@ -38,12 +38,12 @@ The `Tabs` component allows you to organize content into multiple sections, enab
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
| -------------- | -------- | ------- | ------------------------------------------------------ | | -------------- | -------- | ------- | ------------------------------------------------------ |
| `defaultValue` | `string` | `null` | The value of the tab that is selected by default. | | `defaultValue` | string | null | The value of the tab that is selected by default. |
| `className` | `string` | `""` | Additional CSS classes for styling the Tabs component. | | `className` | string | null | Additional CSS classes for styling the Tabs component. |
## Code ## Output Markdown
````jsx ````plaintext
<Tabs defaultValue="java" className="pt-5 pb-1"> <Tabs defaultValue="java" className="pt-5 pb-1">
<TabsList> <TabsList>
<TabsTrigger value="java">Java</TabsTrigger> <TabsTrigger value="java">Java</TabsTrigger>

2
contents/docs/components/tooltips/index.mdx
View File

@@ -13,7 +13,7 @@ You can use tooltips in your Markdown content to provide additional information
What do you know about <Tooltip text="DocuBook" tip="npx @docubook/create@latest" /> ? Create interactive nested documentations using MDX. What do you know about <Tooltip text="DocuBook" tip="npx @docubook/create@latest" /> ? Create interactive nested documentations using MDX.
### Code ### Output Markdown
The above Markdown is converted to: The above Markdown is converted to:

12
contents/docs/components/youtube/index.mdx
View File

@@ -8,14 +8,16 @@ I have implemented a `YouTube` component for your documentation. This component
## Preview ## Preview
<Youtube videoId="cpraXaw7dyc" /> <Youtube videoId="8sM0Di7Ew9Q" />
## Code ## Output Markdown
```bash ```markdown
<Youtube videoId="cpraXaw7dyc" /> <Youtube videoId="8sM0Di7Ew9Q" />
``` ```
## Usage ## Usage
for example the youtube URL show this https://www.youtube.com/watch?v=cpraXaw7dyc the ID `cpraXaw7dyc` <Note type="note" title="Usage">
for example the youtube URL show this https://www.youtube.com/watch?v=8sM0Di7Ew9Q the ID `8sM0Di7Ew9Q`
</Note>

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

@@ -0,0 +1,9 @@
---
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" />