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

72
contents/docs/components/accordion/index.mdx Normal file
View File

@@ -0,0 +1,72 @@
---
title: Accordion
description: A component used to create collapsible content that can be hidden and shown again.
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
### Code Block
<Accordion title="Code Block" defaultOpen={true}>
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
</Accordion>
### Text with Markdown
<Accordion title="Markdown">
this is an example of plain text content from the accordion component and below is markdown ;
1. number one
2. number two
3. number three
</Accordion>
## Props
| Prop | Type | Default | Description |
| ------------- | --------- | -------------- | -------------------------------------------------------------------------------------- |
| `title` | `string` | `null` | The value of Accordion title. |
| `children` | `ReactNode` | `null` | Flexible content, both HTML elements, markdown componenst and plain text. |
| `defaultOpen` | `boolean` | `false` | You can change the value to `true` if you want the content to open when the page loads |
## Code
<Tabs defaultValue="markdown" className="pt-5 pb-1">
<TabsList>
<TabsTrigger value="markdown">Markdown</TabsTrigger>
<TabsTrigger value="codeblock">Code Block</TabsTrigger>
</TabsList>
<TabsContent value="markdown">
```plaintext
<Accordion title="Markdown">
this is an example of plain text content from the accordion component and below is markdown ;
1. number one
2. number two
3. number three
</Accordion>
```
</TabsContent>
<TabsContent value="codeblock">
````plaintext
<Accordion title="Code Block" defaultOpen={true}>
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
</Accordion>
````
</TabsContent>
</Tabs>

42
contents/docs/components/button/index.mdx Normal file
View File

@@ -0,0 +1,42 @@
---
title: Button
description: A component used to create buttons that can be used to trigger actions or navigate to other pages.
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
<Button
text="Learn More"
href="https://learn.example.com"
icon="ArrowUpRight"
size="md"
target="_blank"
variation="primary"
/>
## Props
| Prop | Type | Default | Description |
| ----------- | -------- | -------------- | -------------------------------------------- |
| `text` | `string` | `""` | The value of text button. |
| `href` | `string` | `""` | The value of url button. |
| `icon` | `string` | `null` | The value of button icon render from lucide. |
| `size` | `string` | `"sm, md, lg"` | The value of size button. |
| `target` | `string` | `"_blank"` | By default target `_blank` |
| `variation` | `string` | `"primary"` | By default variation is **Primary** |
## Code
```bash
<Button
text="Learn More"
href="https://learn.example.com"
icon="MoveUpRight"
size="md"
target="_blank"
variation="primary"
/>
```

49
contents/docs/components/card-group/index.mdx Normal file
View File

@@ -0,0 +1,49 @@
---
title: Card Group
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
---
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
<CardGroup cols={2}>
<Card title="Heading 1" icon="Heading1">
This is an example of card content with columns.
</Card>
<Card title="Heading 2" icon="Heading2">
This is an example of card content with columns.
</Card>
<Card title="Grid Card" icon="Grid" horizontal>
This is a horizontal card layout.
</Card>
<Card title="Horizontal Card" icon="Layout" horizontal>
This is a horizontal card layout.
</Card>
</CardGroup>
## Props
| Prop | Type | Default | Description |
| ------------- | -------- | ------- | ------------------------------------------------------- |
| `cols` | `number` | `{2}` | By default 2 The number of columns per row |
## Code
```markdown
<CardGroup cols={2}>
<Card title="Heading 1" icon="Heading1">
This is an example of card content with columns.
</Card>
<Card title="Heading 2" icon="Heading2">
This is an example of card content with columns.
</Card>
<Card title="Grid Card" icon="Grid" horizontal>
This is a horizontal card layout.
</Card>
<Card title="Horizontal Card" icon="Layout" horizontal>
This is a horizontal card layout.
</Card>
</CardGroup>
```

70
contents/docs/components/card/index.mdx Normal file
View File

@@ -0,0 +1,70 @@
---
title: Cards
description: A component used to create cards that can be used to display content in a compact and organized way.
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
### Card with Link and icon
<Card title="Click on me" icon="Link" href="/docs/getting-started/components/card-group">
This is how you use a card with an icon and a link. Clicking on this card
brings you to the Card Group page.
</Card>
### Card Horizontal
<Card title="Horizontal Card" icon="Layout" horizontal>
This is a horizontal card layout.
</Card>
### Card Simple
<Card title="Simple Card">
This is a simple card without an icon or link.
</Card>
## Props
| Prop | Type | Default | Description |
| ------------- | -------- | ------- | ------------------------------------------------------- |
| `title` | `string` | `""` | The value of card title. |
| `icon` | `string` | `null` | The value of card icon render from lucide. |
| `href` | `string` | `null` | The value of card link url. |
| `horizontal` | `boolean` | `""` | horizontal layout for card. |
## Code
<Tabs defaultValue="link" className="pt-5 pb-1">
<TabsList>
<TabsTrigger value="link">Link & Icon</TabsTrigger>
<TabsTrigger value="horizontal">Horizontal</TabsTrigger>
<TabsTrigger value="simple">Simple</TabsTrigger>
</TabsList>
<TabsContent value="link">
```markdown
<Card title="Click on me" icon="Link" href="/docs/getting-started/components/button">
This is how you use a card with an icon and a link. Clicking on this card
brings you to the Card Group page.
</Card>
```
</TabsContent>
<TabsContent value="horizontal">
```markdown
<Card title="Horizontal Card" icon="Layout" horizontal>
This is a horizontal card layout.
</Card>
```
</TabsContent>
<TabsContent value="simple">
```markdown
<Card title="Simple Card">
This is a simple card without an icon or link.
</Card>
```
</TabsContent>
</Tabs>

41
contents/docs/components/code-block/index.mdx Normal file
View File

@@ -0,0 +1,41 @@
---
title: Code Block
description: A component used to display code snippets with optional line numbering and line highlighting.
date: 14-12-2024
---
The Code Block component is a component used to display code snippets with optional line numbering and line highlighting.
## Preview
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
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
You can directly use the following syntax to create a code block with line numbers and highlight specific lines:
````plaintext
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
````
### Features
- **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}`).
- **Syntax Highlighting**: Use the appropriate language for syntax highlighting.

38
contents/docs/components/custom/index.mdx Normal file
View File

@@ -0,0 +1,38 @@
---
title: Custom Components
description: How to create custom components for Markdown.
date: 14-12-2024
---
To add custom components in DocuBook, follow these steps:
1. **Create Your Component**: First, create your custom component in the `@components/markdown` folder. For example, you might create a file named `Outlet.tsx`.
2. **Import Your Component**: Next, open the `@lib/markdown.ts` file. This is where you'll register your custom component for use in Markdown.
3. **Add Your Component to the Components Object**: In the `@lib/markdown.ts` file, import your custom component and add it to the `components` object. Here’s how to do it:
```ts
import Outlet from "@/components/markdown/outlet";
// Add custom components
const components = {
Outlet,
};
```
4. **Using Your Custom Component in Markdown**: After registering your component, you can now use it anywhere in your Markdown content. For instance, if your `Outlet` component is designed to display additional information, you can use it as follows:
### Markdown Example
```markdown
<Outlet>
This is some custom content rendered by the Outlet component!
</Outlet>
```
### Rendered Output
This will render the content inside the `Outlet` component, allowing you to create reusable and dynamic Markdown content.
By following these steps, you can extend the capabilities of your Markdown documentation and create a more engaging user experience.

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

@@ -0,0 +1,109 @@
---
title: File Tree Component
description: A customizable file tree component for displaying hierarchical file structures in your documentation.
date: 28-05-2025
---
The File Tree component allows you to display hierarchical file structures in your documentation with collapsible folders and files.
## Basic Usage
```
<Files>
<Folder name="src">
<File name="App.tsx" />
<File name="index.tsx" />
<Folder name="components">
<File name="Button.tsx" />
<File name="Card.tsx" />
</Folder>
<Folder name="pages">
<File name="Home.tsx" />
<File name="About.tsx" />
</Folder>
</Folder>
</Files>
```
Render As:
<Files>
<Folder name="src">
<File name="App.tsx" />
<File name="index.tsx" />
<Folder name="components">
<File name="Button.tsx" />
<File name="Card.tsx" />
</Folder>
<Folder name="pages">
<File name="Home.tsx" />
<File name="About.tsx" />
</Folder>
</Folder>
</Files>
## Props
### Files
The root component that wraps the entire file tree.
### Folder
| Prop | Type | Required | Description |
|----------|----------|----------|---------------------------------------|
| name | string | Yes | The name of the folder |
| children | ReactNode | No | Child elements (File or Folder) |
### File
| Prop | Type | Required | Description |
|------|--------|----------|----------------------------|
| name | string | Yes | The name of the file |
## Examples
### Nested Folder Structure
```
<Files>
<Folder name="project-root">
<File name="package.json" />
<File name="tsconfig.json" />
<Folder name="src">
<File name="index.ts" />
<Folder name="components">
<File name="Button.tsx" />
<File name="Card.tsx" />
</Folder>
</Folder>
</Folder>
</Files>
```
### Minimal Example
```
<Files>
<Folder name="components">
<File name="Button.tsx" />
<File name="Input.tsx" />
</Folder>
</Files>
```
## Best Practices
1. Keep the nesting level reasonable (recommended max 3-4 levels deep)
2. Use clear and descriptive names for files and folders
3. Consider the user experience when displaying large file structures
4. Use consistent naming conventions throughout your file tree
## Accessibility
The File Tree component includes built-in accessibility features:
- Keyboard navigation support
- ARIA attributes for screen readers
- Focus management for interactive elements
- High contrast mode support

37
contents/docs/components/image/index.mdx Normal file
View File

@@ -0,0 +1,37 @@
---
title: Image
description: A component used to display images in Markdown.
date: 14-12-2024
---
In DocuBook, all images written in Markdown are automatically converted to their respective Next.js components. This allows for better optimization and performance in your application.
## Images
Similarly, images in Markdown are transformed into the Next.js `Image` component. This allows for automatic image optimization, such as lazy loading and resizing, which enhances performance and user experience. Here’s an example:
### Markdown
```markdown
![Alt text for the image](https://via.placeholder.com/150)
```
### Rendered Output
The above Markdown is converted to:
```jsx
<Image
src="https://via.placeholder.com/150"
alt="Alt text for the image"
width={800}
height={350}
/>
```
## Benefits
- **Performance Optimization**: Automatic conversion to Next.js components ensures optimized loading of images.
- **Responsive Images**: Next.js `Image` component handles responsive images, providing the best quality for various device sizes.
By utilizing these features, you can ensure that your documentation is not only visually appealing but also performs efficiently.

117
contents/docs/components/keyboard/index.mdx Normal file
View File

@@ -0,0 +1,117 @@
---
title: Keyboard
description: Display keyboard keys with platform-specific styling for Windows and macOS.
date : 19-05-2025
---
The `Keyboard` component automatically renders platform-appropriate key symbols for macOS and Windows. It's perfect for documenting keyboard shortcuts in your application.
## Usage
### Basic Usage
Simply use the `Kbd` component with a `show` prop:
```tsx
<Kbd show="cmd" type="mac" /> + <Kbd show="c" />
```
Renders as:
<Kbd show="cmd" type="mac" /> + <Kbd show="c" />
### Automatic Symbol Rendering
The component automatically renders appropriate symbols based on the platform:
```tsx
{/* Windows style (default) */}
<Kbd show="ctrl" /> + <Kbd show="v" />
{/* Mac style */}
<Kbd show="cmd" type="mac" /> + <Kbd show="v" type="mac" />
```
Renders as:
- Windows: <Kbd show="ctrl" type="window" /> + <Kbd show="v" type="window" />
- Mac: <Kbd show="cmd" type="mac" /> + <Kbd show="v" type="mac" />
### Custom Content
For custom key labels, provide children:
```tsx
<Kbd show="custom">Custom</Kbd>
```
Renders as: <Kbd show="custom">Custom</Kbd>
## Props
| Prop | Type | Default | Description |
|-----------|---------------------|------------|-------------|
| `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 |
| `children`| `ReactNode` | - | Custom content to display (overrides automatic rendering) |
## Supported Keys
The component includes special handling for common keys:
| Key Name | Windows | macOS |
|-------------|---------|-------|
| command/cmd | `Win` | `⌘` |
| option/alt | `Alt` | `⌥` |
| shift | `Shift` | `⇧` |
| ctrl/control| `Ctrl` | `⌃` |
| tab | `Tab` | `⇥` |
| enter/return| `Enter` | `⏎` |
| delete | `Del` | `⌫` |
| escape/esc | `Esc` | `⎋` |
| up/down/left/right | `↑` `↓` `←` `→` | `↑` `↓` `←` `→` |
| space | `Space` | `␣` |
## Examples
### Common Shortcuts
```tsx
{/* Copy shortcut */}
<Kbd show="ctrl" /> + <Kbd show="c" />
{/* Paste shortcut */}
<Kbd show="cmd" type="mac" /> + <Kbd show="v" type="mac" />
{/* Save shortcut */}
<Kbd show="ctrl" /> + <Kbd show="s" />
```
### Custom Key Combinations
```tsx
{/* Custom application shortcut */}
<Kbd show="cmd" type="mac" /> + <Kbd show="option" type="mac" /> + <Kbd show="a" type="mac"/>
```
Render as: <Kbd show="cmd" type="mac" /> + <Kbd show="option" type="mac" /> + <Kbd show="a" type="mac"/>
### Arrow Key
```tsx
<Kbd show="up" /> <Kbd show="down" /> <Kbd show="left" /> <Kbd show="right" />
```
Render as: <Kbd show="up" /> <Kbd show="down" /> <Kbd show="left" /> <Kbd show="right" />
## Best Practices
1. **Be Consistent**: Stick to one platform style within the same context
2. **Use Type Wisely**:
- Use `type="mac"` for Mac-specific documentation
- Use `type="window"` (default) for Windows/Linux
3. **Accessibility**: The component uses semantic `<kbd>` HTML for better accessibility
## Notes
- The component automatically capitalizes single letters (e.g., 'a' becomes 'A')
- Unrecognized keys are displayed as-is
- Dark mode is automatically supported through Tailwind's dark mode classes

34
contents/docs/components/link/index.mdx Normal file
View File

@@ -0,0 +1,34 @@
---
title: Link
description: A component used to create links that can be used to navigate to other pages.
date: 14-12-2024
---
In DocuBook, all links written in Markdown are automatically converted to their respective Next.js components. This allows for better optimization and performance in your application.
## Links
When you create a link in your Markdown, it is converted to the Next.js `Link` component. This enables client-side navigation and improves loading times. Here’s an example of how a Markdown link is transformed:
### Markdown
```markdown
[Visit OpenAI](https://www.openai.com)
```
### Rendered Output
The above Markdown is converted to:
```jsx
<Link href="https://www.openai.com" target="_blank" rel="noopener noreferrer">
Visit OpenAI
</Link>
```
## Benefits
- **Performance Optimization**: Automatic conversion to Next.js components ensures optimized loading of links.
- **Improved User Experience**: Client-side navigation with Next.js `Link` improves the browsing experience.
By utilizing these features, you can ensure that your documentation is not only visually appealing but also performs efficiently.

46
contents/docs/components/note/index.mdx Normal file
View File

@@ -0,0 +1,46 @@
---
title: Note
description: A component used to display different types of messages such as general notes, warnings, or success notifications.
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
<Note type="note" title="Note">
This is a general note to convey information to the user.
</Note>
<Note type="danger" title="Danger">
This is a danger alert to notify the user of a critical issue.
</Note>
<Note type="warning" title="Warning">
This is a warning alert for issues that require attention.
</Note>
<Note type="success" title="Success">
This is a success message to inform the user of successful actions.
</Note>
## Props
| Prop | Type | Default | Description |
| ------- | ---------------------------------------------- | ------- | ---------------------------------------- |
| `title` | `string` | "Note" | Sets the title of the note. |
| `type` | `"note"`, `"danger"`, `"warning"`, `"success"` | "note" | Determines the visual style of the note. |
## Code
```jsx
<Note type="note" title="Note">
This is a general note to convey information to the user.
</Note>
<Note type="danger" title="Danger">
This is a danger alert to notify the user of a critical issue.
</Note>
<Note type="warning" title="Warning">
This is a warning alert for issues that require attention.
</Note>
<Note type="success" title="Success">
This is a success message to inform the user of successful actions.
</Note>
```

130
contents/docs/components/release-note/index.mdx Normal file
View File

@@ -0,0 +1,130 @@
---
title: Release Note
description: The Release Note component makes it easy for you to write updates for each version of your application.
date: 31-12-2024
---
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.
## Basic Usage
Here is a basic example of using the Release Note component:
```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>
```
<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>
## Release Component
The `Release` component is used to display key information about a release version, such as version number, release date, and title.
### Release Props
| 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>`

47
contents/docs/components/stepper/index.mdx Normal file
View File

@@ -0,0 +1,47 @@
---
title: Stepper
description: A component used to display step-by-step instructions directly within the markdown render.
date: 14-12-2024
---
In this guide, we utilize a custom `Stepper` component, specifically designed for DocuBook, which enables users to display step-by-step instructions directly within the markdown render.
## Preview
##
<Stepper>
<StepperItem title="Step 1: Clone the DocuBook Repository">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
dolor in lorem.
</StepperItem>
<StepperItem title="Step 2: Access the Project Directory">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
</StepperItem>
<StepperItem title="Step 3: Install Required Dependencies">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
ipsum nec nulla ultricies porttitor et non justo.
</StepperItem>
</Stepper>
## Code
```jsx
<Stepper>
<StepperItem title="Step 1: Clone the DocuBook Repository">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
dolor in lorem.
</StepperItem>
<StepperItem title="Step 2: Access the Project Directory">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
</StepperItem>
<StepperItem title="Step 3: Install Required Dependencies">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
ipsum nec nulla ultricies porttitor et non justo.
</StepperItem>
</Stepper>
```

70
contents/docs/components/tabs/index.mdx Normal file
View File

@@ -0,0 +1,70 @@
---
title: Tabs
description: Organize content into multiple sections with switchable tabs.
date: 14-12-2024
---
The `Tabs` component allows you to organize content into multiple sections, enabling users to switch between them easily. This is particularly useful for displaying related content in a compact manner.
## Preview
<Tabs defaultValue="java" className="pt-5 pb-1">
<TabsList>
<TabsTrigger value="java">Java</TabsTrigger>
<TabsTrigger value="typescript">TypeScript</TabsTrigger>
</TabsList>
<TabsContent value="java">
```java
// HelloWorld.java
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
</TabsContent>
<TabsContent value="typescript">
```typescript
// helloWorld.ts
function helloWorld(): void {
console.log("Hello, World!");
}
helloWorld();
```
</TabsContent>
</Tabs>
## Props
| Prop | Type | Default | Description |
| -------------- | -------- | ------- | ------------------------------------------------------ |
| `defaultValue` | `string` | `null` | The value of the tab that is selected by default. |
| `className` | `string` | `""` | Additional CSS classes for styling the Tabs component. |
## Code
````jsx
<Tabs defaultValue="java" className="pt-5 pb-1">
<TabsList>
<TabsTrigger value="java">Java</TabsTrigger>
<TabsTrigger value="typescript">TypeScript</TabsTrigger>
</TabsList>
<TabsContent value="java">
```java
// HelloWorld.java
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```</TabsContent>
<TabsContent value="typescript">
```typescript
// helloWorld.ts
function helloWorld(): void {
console.log("Hello, World!");
}
helloWorld();
```</TabsContent>
</Tabs>
````

22
contents/docs/components/tooltips/index.mdx Normal file
View File

@@ -0,0 +1,22 @@
---
title: Tooltips
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 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.
### Preview
What do you know about <Tooltip text="DocuBook" tip="npx @docubook/create@latest" /> ? Create interactive nested documentations using MDX.
### Code
The above Markdown is converted to:
```markdown:index.mdx
What do you know about <Tooltip text="DocuBook" tip="npx @docubook/create@latest" /> ? Create interactive nested documentations using MDX.
```

21
contents/docs/components/youtube/index.mdx Normal file
View File

@@ -0,0 +1,21 @@
---
title: Youtube
description: A component used to embed YouTube videos directly into your documentation.
date: 14-12-2024
---
I have implemented a `YouTube` component for your documentation. This component allows you to easily embed YouTube videos directly into your documentation by simply inputting the video's ID.
## Preview
<Youtube videoId="cpraXaw7dyc" />
## Code
```bash
<Youtube videoId="cpraXaw7dyc" />
```
## Usage
for example the youtube URL show this https://www.youtube.com/watch?v=cpraXaw7dyc the ID `cpraXaw7dyc`