dwindown/docs.tutoraddons.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial docs

Browse Source
This commit is contained in:
Wildan Nursahidan
2025-04-12 14:34:53 +07:00
commit ea9a71e23c
138 changed files with 23045 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,72 @@
---
title: Accordion
description: This section previews the Accordion component.
date: 22-12-2024
---
I have implemented the `accordion` component into markdown which is ready to use.
## 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/getting-started/components/button/index.mdx Normal file
View File

@@ -0,0 +1,42 @@
---
title: Button
description: This section previews the Button component.
date: 14-12-2024
---
I have implemented the `button` component into markdown which is ready to use.
## 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/getting-started/components/card-group/index.mdx Normal file
View File

@@ -0,0 +1,49 @@
---
title: Card Group
description: This section previews the Card Group component.
date: 20-02-2025
---
I have implemented the `card group` component into markdown which is ready to use.
## 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/getting-started/components/card/index.mdx Normal file
View File

@@ -0,0 +1,70 @@
---
title: Cards
description: This section previews the Cards component.
date: 20-02-2025
---
I have implemented the `cards` component into markdown which is ready to use.
## 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">Card with Link & Icon</TabsTrigger>
<TabsTrigger value="horizontal">Card Horizontal</TabsTrigger>
<TabsTrigger value="simple">Card 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/getting-started/components/code-block/index.mdx Normal file
View File

@@ -0,0 +1,41 @@
---
title: Code Block
description: This section previews the Code Block features in markdown.
date: 14-12-2024
---
The Code Block in this documentation allows you 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/getting-started/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.

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

@@ -0,0 +1,37 @@
---
title: Image
description: This section provides an overview of how DocuBook handles 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.

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

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

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

@@ -0,0 +1,34 @@
---
title: Link
description: This section provides an overview of how DocuBook handles links in Markdown.
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/getting-started/components/note/index.mdx Normal file
View File

@@ -0,0 +1,46 @@
---
title: Note
description: This section previews the Note component.
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>
```

61
contents/docs/getting-started/components/release-note/index.mdx Normal file
View File

@@ -0,0 +1,61 @@
---
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
---
## Usage
To fill in the Release Note content that will be displayed on the Changelog page, open the `CHANGELOG.md` file, write it with the markdown tag.
<Accordion title="Example" defaultOpen={true}>
```plaintext:CHANGELOG.md
## [1.3.0] - 2024-12-31
> Release Note Feature to Make it Easier to Write Changelogs
![Your Image Alt Text](https://docubook.pro/images/example-img.png)
### Added
- New Release Note Feature
- New Layout for Changelog page
- New Changelog page
- add Release Note Component
- Easily write release notes directly from the CHANGELOG.md file
- Toc for versioning
- Write with the markdown tag
- add lib / changelog.ts
```
</Accordion>
## Preview : Render Output
<Accordion title="Show Render">
## v1.3.0 - Jan 31, 2024
> Release Note Feature to Make it Easier to Write Changelogs
![Your Image Alt Text](https://docubook.pro/images/example-img.png)
### Added
- New Release Note Feature
- New Layout for Changelog page
- New Changelog page
- add Release Note Component
- Easily write release notes directly from the CHANGELOG.md file
- Toc for versioning
- Write with the markdown tag
- add lib / changelog.ts
</Accordion>
## Changes Category
| **Category** | **Description** |
| -------------- | ---------------------------------------------------------------------------------------------------- |
| **Added** | Features or functionalities that are newly introduced. |
| **Improved** | Enhancements or optimizations made to existing features or performance. |
| **Fixed** | Bugs, issues, or errors that have been resolved in this version. |
| **Deprecated** | Features or functionalities that are no longer recommended for use and may be removed in the future. |
| **Removed** | Features or functionalities that have been completely taken out of the product. |

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

@@ -0,0 +1,47 @@
---
title: Stepper
description: This section previews the stepper component.
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/getting-started/components/tabs/index.mdx Normal file
View File

@@ -0,0 +1,70 @@
---
title: Tabs
description: This section previews the Tabs component.
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/getting-started/components/tooltips/index.mdx Normal file
View File

@@ -0,0 +1,22 @@
---
title: Tooltips
description: This section previews the Tooltips component.
date: 19-02-2025
---
I have implemented the `tooltips` component into markdown which is ready to use.
## 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/getting-started/components/youtube/index.mdx Normal file
View File

@@ -0,0 +1,21 @@
---
title: Youtube
description: This section previews the Youtube video embed component.
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`