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

production ready

Browse Source
This commit is contained in:
Wildan Nursahidan
2025-04-12 18:07:10 +07:00
parent da85bc0bbf
commit ad9904d5d5
31 changed files with 115 additions and 1120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/docs/[[...slug]]/page.tsx
View File

@@ -87,13 +87,13 @@ export default async function DocsPage({ params: { slug = [] } }: PageProps) {
<h1 className="text-3xl !-mt-0.5">{title}</h1>
<p className="-mt-4 text-muted-foreground text-[16.5px]">{description}</p>
<div>{res.content}</div>
<div className="my-8 flex justify-between items-center border-b-2 border-x-muted-foreground">
<div className="my-8 flex justify-end items-center border-b-2 border-x-muted-foreground">
{date && (
<p className="text-[13px] text-muted-foreground">
Published on {formatDate2(date)}
</p>
)}
<EditThisPage filePath={filePath} />
{/* <EditThisPage filePath={filePath} /> */}
</div>
<Pagination pathname={pathName} />
</Typography>

31
app/page.tsx
View File

@@ -1,6 +1,6 @@
import { buttonVariants } from "@/components/ui/button";
import { page_routes } from "@/lib/routes-config";
import { ArrowRightIcon, FileJson, GitCommitHorizontal, SquarePlay } from "lucide-react";
import { ArrowRightIcon, BookOpenCheck, Headset, Youtube } from "lucide-react";
import Link from "next/link";
import { cn } from "@/lib/utils";
import AnimatedShinyText from "@/components/ui/animated-shiny-text";
@@ -15,7 +15,7 @@ export default function Home() {
return (
<div className="flex flex-col min-h:[100vh] items-center justify-center text-center px-4 sm:py-40 py-12">
<Link
href="/changelog"
href="https://tutoraddons.com/products/"
className="mb-5 sm:text-lg flex items-center gap-2 underline underline-offset-4 sm:-mt-12"
>
<div className="z-10 flex min-h-10 items-center justify-center max-[800px]:mt-10">
@@ -25,18 +25,15 @@ export default function Home() {
)}
>
<AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-100 hover:duration-300 hover:dark:text-neutral-200">
<span>🚀 New Version - Release v.1.8.0</span>
<span>🚀 Buy This Plugin</span>
<ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
</AnimatedShinyText>
</div>
</div>
</Link>
<h1 className="text-2xl font-bold mb-6 sm:text-6xl">DocuBook Starter Templates</h1>
<h1 className="text-2xl font-bold mb-6 sm:text-6xl">TutorAddons - Knowledge Base</h1>
<p className="mb-10 sm:text-xl max-w-[800px] text-muted-foreground">
Get started by editing app/page.tsx . Save and see your changes instantly.{' '}
<Link className="text-primary underline" href="https://www.docubook.pro/docs/getting-started/introduction" target="_blank">
Read Documentations
</Link>
Tutorials with video, image and written content as well as explanations on how to use the plugin starting from how to install, configure and use it.
</p>
<div className="flex flex-row items-center gap-6 mb-10">
<Link
@@ -62,29 +59,29 @@ export default function Home() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 py-12">
<Card className="px-2 py-6">
<CardHeader className="flex flex-row justify-center items-center gap-3">
<FileJson className="size-6 text-primary" />
<CardTitle className="text-xl">docu.json</CardTitle>
<Youtube className="size-6 text-primary" />
<CardTitle className="text-xl">Youtube</CardTitle>
</CardHeader>
<CardContent>
<p>Edit the docu.json file to change the content in the header, footer and sidebar.</p>
<p>Watch video tutorials via youtube playlist.</p>
</CardContent>
</Card>
<Card className="px-2 py-6">
<CardHeader className="flex flex-row justify-center items-center gap-3">
<GitCommitHorizontal className="size-6 text-primary" />
<CardTitle className="text-xl">CHANGELOG.md</CardTitle>
<BookOpenCheck className="size-6 text-primary" />
<CardTitle className="text-xl">Documentations</CardTitle>
</CardHeader>
<CardContent>
<p>Manage changes to each version of your application in the CHANGELOG.md file.</p>
<p>Interactive documentation that is easy to understand and follow.</p>
</CardContent>
</Card>
<Card className="px-2 py-6">
<CardHeader className="flex flex-row justify-center items-center gap-3">
<SquarePlay className="size-6 text-primary" />
<CardTitle className="text-xl">Docu Play</CardTitle>
<Headset className="size-6 text-primary" />
<CardTitle className="text-xl">Support</CardTitle>
</CardHeader>
<CardContent>
<p>Easy to write interactive markdown content with a playground.</p>
<p>Support from developers with tickets and community.</p>
</CardContent>
</Card>
</div>

4
components/docs/footer.tsx
View File

@@ -12,9 +12,9 @@ export function Footer() {
<div className="items-start justify-center hidden gap-4 lg:flex-col lg:flex lg:w-3/5">
<h3 className="text-lg font-bold font-code">{meta.title}</h3>
<span className="w-3/4 text-base text-wrap text-muted-foreground">{meta.description}</span>
<div className="flex items-center gap-6 mt-2">
{/* <div className="flex items-center gap-6 mt-2">
<FooterButtons />
</div>
</div> */}
</div>
<div className="flex flex-col items-start justify-center w-full gap-4 mt-4 xl:items-end lg:w-2/5">
<p className="text-center text-muted-foreground">

4
components/docs/leftbar.tsx
View File

@@ -46,9 +46,9 @@ export function SheetLeftbar() {
<div className="mx-2 px-5">
<DocsMenu isSheet />
</div>
<div className="px-6 py-2 flex justify-start items-center gap-6">
{/* <div className="px-6 py-2 flex justify-start items-center gap-6">
<FooterButtons />
</div>
</div> */}
<div className="flex w-2/4 px-5">
<ModeToggle />
</div>

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

@@ -1,72 +0,0 @@
---
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
View File

@@ -1,42 +0,0 @@
---
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
View File

@@ -1,49 +0,0 @@
---
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
View File

@@ -1,70 +0,0 @@
---
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
View File

@@ -1,41 +0,0 @@
---
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
View File

@@ -1,38 +0,0 @@
---
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
View File

@@ -1,37 +0,0 @@
---
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
View File

@@ -1,9 +0,0 @@
---
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
View File

@@ -1,34 +0,0 @@
---
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
View File

@@ -1,46 +0,0 @@
---
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
View File

@@ -1,61 +0,0 @@
---
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
View File

@@ -1,47 +0,0 @@
---
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
View File

@@ -1,70 +0,0 @@
---
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
View File

@@ -1,22 +0,0 @@
---
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
View File

@@ -1,21 +0,0 @@
---
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`

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

@@ -1,94 +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)"],
},
}
}
```
For theme and colors, refer to the [Theme section](/docs/getting-started/themes)

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

@@ -1,84 +1,30 @@
---
title: Installation
description: Installation guide for our application.
date: 17-02-2025
description: Steps for installation.
date: 12-04-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.
<Note type="note" title="Note">
Before you install the TutorAddons plugin, make sure you have installed Tutor LMS first.
</Note>
## Clone Repository
To get started, you can clone the DocuBook repository directly from GitHub.
## Upload plugin
### Via Wordpress Dashboard
<Stepper>
<StepperItem title="Step 1: Clone the DocuBook Repository">
Begin by cloning the DocuBook repository from GitHub:
```bash
git clone --branch starter https://gitlab.com/mywildancloud/docubook.git
```
<StepperItem title="Step 1: Log in to Wordpress">
Login via wordpress wp-admin.
</StepperItem>
<StepperItem title="Step 2: Access the Project Directory">
After cloning, navigate into the project directory to start setting up:
```bash
cd docubook
```
<StepperItem title="Step 2: Go to Plugins">
On the WordPress dashboard page, please go to the Plugins menu.
</StepperItem>
<StepperItem title="Step 3: Install Required Dependencies">
Install all necessary project dependencies with npm:
```bash
npm install
```
<StepperItem title="Step 3: Add New Plugin">
Then select Add New Plugin.
</StepperItem>
<StepperItem title="Step 4: Launch the Development Server">
Finally, start the development server to view the project locally:
```bash
npm run dev
```
<StepperItem title="Step 4: Upload Plugin">
Click the upload plugin button then select the plugin file then click install now.
</StepperItem>
<StepperItem title="Step 5: Activate Plugin">
After the installation procedure is complete, please activate the plugin.
</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.

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

@@ -1,51 +1,22 @@
---
title: Introduction
description: This section provides an overview of DocuBook.
date: 29-11-2024
image: example-img.png
description: Introduction to the plugin addon for Tutor LMS.
date: 12-04-2025
---
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.
## What's this?
TutorAddons is a WordPress plugin to complement the features of Tutor LMS.
## Open Source Philosophy
- Addon Tutor - Duitku : for payment gateway via Duitku service.
- Addon Tutor - Moota : to check payment mutations automatically.
- Addon Tutor - Tripay : for payment gateway via Tripay service.
- and other plugins coming in the future.
DocuBook is proudly **open-source**! 🎉 We believe in creating an accessible, collaborative platform that thrives on community contributions.
## Freebie
You can use some plugins for `free` to build an online learning platform built with Wordpress, Tutor LMS and TutorAddons.
<Note title="Contribute">
Interested in helping us improve? Check out our [GitHub
repository](https://github.com/mywildancloud/docubook) to get started! From
feature suggestions to bug fixes, all contributions are welcome.
</Note>
## Dependencies
To be able to use the TutorAddons plugin requires some dependencies ;
## Project Overview
**DocuBook** is more than just a documentation template. It's a **complete toolkit** designed for modern web development. Key features include:
- **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.
### Key Features
| **Feature** | **Description** |
| ------------------------------- | ----------------------------------------------------- |
| MDX Support | Write interactive documentation with MDX. |
| Nested Pages | Organize content in a nested, hierarchical structure. |
| Blog Section | Include a dedicated blog section. |
| 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.
- Wordpress (wordpress self hosting).
- Tutor LMS (main plugin).

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

@@ -0,0 +1,30 @@
---
title : Activate License
description : Tutor Addons plugin license activation.
date : 12-04-2025
---
<Note type="warning" title="Warning">
To use the plugin and get updates and support from the developer you must have a license key on the site [https://tutoraddons.com/](https://tutoraddons.com/)
</Note>
## License Keys
To get a plugin license you must be validated by purchasing the TutorAddons plugin officially.
<Stepper>
<StepperItem title="Step 1: Log in to Your Account">
Log in using the email and password you have on our site [https://tutoraddons.com/login/](https://tutoraddons.com/login/)
</StepperItem>
<StepperItem title="Step 2: Navigate to License Keys">
On the dashboard page, navigate to the License Keys menu.
</StepperItem>
<StepperItem title="Step 3: Copy to Clipboard">
Copy the license key of the plugin you want to activate.
</StepperItem>
<StepperItem title="Step 4: Go to Wordpress Dashboard">
Enter the WordPress admin page, then on the Tutor LMS menu, navigate to `Tutor Tripay`, then paste the license key in the activation column, then click activate license.
<Accordion title="Tutor Tripay">
For example, to activate the license for the **Addon Tutor - Tripay** plugin, this could be different from the name of the other TutorAddons plugins for the menu name.
</Accordion>
</StepperItem>
</Stepper>

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

@@ -1,96 +0,0 @@
---
title: Project Structure
description: This section provides an overview of Project Structure.
date: 29-11-2024
---
## Project Structure Overview
### 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` and `blog` 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
├── blog
│ ├── page.tsx // Blog list page, displaying all blog posts with titles, dates, and excerpts
│ └── [slug]
│ └── page.tsx // Dynamic blog post page for viewing individual posts with rich content
└── 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.md // Introductory guide for new users
│ ├── api-reference.md // API documentation with detailed endpoint descriptions
│ └── tutorials // Subfolder for tutorial-style content
│ └── tutorial-1.md // Step-by-step tutorial on a specific topic
└── blogs // Blog content, organized by post
├── intro-to-project.md // Blog post introducing the project and its goals
└── dev-updates.md // Post discussing recent development updates and new features
```
### 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
│ ├── logo.png // Project logo for branding
│ └── banner.jpg // Banner image for the hero section
├── icons // SVG icons 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
├── 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.

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

@@ -1,84 +0,0 @@
---
title: Quick Start Guide
description: This section provides an overview of Quick Start Guide.
date: 29-11-2024
---
Follow these simple instructions to set up your project efficiently and begin creating content without delay!:
## Documentation
1. **Configure Routing**
- Open the `@lib/route-config.ts` file and add your routing pages:
```typescript
export const ROUTES: EachRoute[] = [
// Add new route below
{
title: "Fundamentals",
href: "/fundamentals",
noLink: true, // Set to true to prevent routing
items: [
// All the sub-sections under `fundamentals`
{ title: "HTTP Server", href: "/http-server" },
],
},
];
```
2. **Create Content Structure**
- Navigate to the `@content/docs` directory and create a folder named `fundamentals`, as defined in the `route-config` file. Within this folder, create a subfolder named `http-server`, and inside that, create an `index.mdx` file that will render when you navigate to `/fundamentals/http-server`:
```plaintext
root
├── content/docs
│ └── fundamentals
│ └── http-server
│ └── index.mdx
```
3. **Write Your Markdown Content**
- Start writing your markdown content inside the `index.mdx` file. Be sure to include frontmatter at the beginning of the file, which is used for the page title and description:
```markdown showLineNumbers {1-4}
---
title: HTTP Server
description: This section is about HTTP Server.
---
<!-- Here goes your markdown content -->
```
4. **Run Your Application**
- Ensure your application is running. Navigate to `http://localhost:3000/docs/fundamentals/http-server` to view your content. You should also see it in the left panel, allowing you to navigate to other pages.
## Blogs
To get started with blogs, follow these steps:
- Navigate to the `@content/blogs` directory and create a file with a unique name prefixed with `.mdx`, then start writing the markdown content inside.
- Make sure to add the following frontmatter to format data for the blogs properly:
```markdown
---
title: "Building a Recursive File System with React: A Deep Dive"
description: "Explore how to create a recursive file system in React. This blog post provides a comprehensive guide on building a file system where folders and files can be nested, added, renamed, and deleted."
date: 02-09-2024
authors:
- avatar: "https://ui.shadcn.com/avatars/02.png"
handle: nisabmohd
username: Nisab Mohd
handleUrl: "https://github.com/nisabmohd"
cover: "https://img.freepik.com/premium-vector/many-monsters-various-colors-doodle-come-bless-birthday-happy_577083-84.jpg?w=826"
---
<!-- Your blog markdown content -->
```
- Navigate to your local development server at `http://localhost:3000/blog`, where you will see your blog listed and sorted based on date. You can navigate to any blog to read it.
## Explore Further
This section serves as your starting point for exploring the application. By following the steps above, you can quickly and easily set up your content. For more customization and control, please refer to the following pages.

7
contents/docs/getting-started/tutor-tripay/index.mdx Normal file
View File

@@ -0,0 +1,7 @@
---
title: Tutor Addon - Tripay
description: Panduan penggunaan plugin Tutor Addon Tripay
date: 12-04-2025
---
<Outlet path="getting-started/tutor-tripay" />

5
contents/docs/getting-started/tutor-tripay/mendaftar-akun-tripay/index.mdx Normal file
View File

@@ -0,0 +1,5 @@
---
title : Mendaftar Akun Tripay
description : Anda harus mendaftar akun pada layanan Tripay.
date : 12-04-2025
---

60
docu.json
View File

@@ -4,16 +4,15 @@
"src": "/images/docu.svg",
"alt": "DocuBook Logo"
},
"logoText": "DocuBook",
"logoText": "TutorAddons",
"menu": [
{ "title": "Home", "href": "/" },
{ "title": "Docs", "href": "/docs/getting-started/introduction" },
{ "title": "Changelog", "href": "/changelog" },
{ "title": "Blog", "href": "/blog" },
{ "title": "Playground", "href": "/playground" }
{ "title": "Support", "href": "https://tutoraddons.com/support/" }
]
},
"footer": {
"copyright": "DocuBook",
"copyright": "TutorAddons",
"social": [
{
"name": "Gitlab",
@@ -24,33 +23,13 @@
"name": "Instagram",
"url": "https://www.instagram.com/wildan.nrs/",
"iconName": "InstagramIcon"
},
{
"name": "Facebook",
"url": "https://www.facebook.com/wildan.nrsh",
"iconName": "FacebookIcon"
},
{
"name": "Twitter",
"url": "https://x.com/wildan_nrss",
"iconName": "TwitterIcon"
},
{
"name": "Youtube",
"url": "https://www.youtube.com/@wildan.nrs_",
"iconName": "YoutubeIcon"
},
{
"name": "Hire",
"url": "/hire-me",
"iconName": "HeartHandshakeIcon"
}
]
},
"meta": {
"baseURL": "https://docubook.pro",
"title": "DocuBook",
"description": "DocuBook is a modern documentation platform for building, deploying, and managing your docs with ease.",
"baseURL": "https://docs.tutoraddons.com",
"title": "TutorAddons",
"description": "TutorAddons is not affiliated with Tutor LMS and is not part of the brand. However, TutorAddons is an independent brand for Tutor LMS addon plugins.",
"favicon": "/favicon.ico"
},
"repository": {
@@ -65,29 +44,14 @@
"items": [
{ "title": "Introduction", "href": "/introduction" },
{ "title": "Installation", "href": "/installation" },
{ "title": "Quick Start Guide", "href": "/quick-start-guide" },
{ "title": "Project Structure", "href": "/project-structure" },
{ "title": "Activate License", "href": "/license" },
{
"title": "Components",
"href": "/components",
"title": "Tutor - Tripay",
"href": "/tutor-tripay",
"items": [
{ "title": "Stepper", "href": "/stepper" },
{ "title": "Tabs", "href": "/tabs" },
{ "title": "Note", "href": "/note" },
{ "title": "Code Block", "href": "/code-block" },
{ "title": "Image", "href": "/image" },
{ "title": "Link", "href": "/link" },
{ "title": "Youtube", "href": "/youtube" },
{ "title": "Tooltips", "href": "/tooltips" },
{ "title": "Cards", "href": "/card" },
{ "title": "Card Group", "href": "/card-group" },
{ "title": "Button", "href": "/button" },
{ "title": "Accordion", "href": "/accordion" },
{ "title": "Release Note", "href": "/release-note" },
{ "title": "Custom", "href": "/custom" }
{ "title": "Daftar Akun", "href": "/mendaftar-akun-tripay" }
]
},
{ "title": "Customize", "href": "/customize" }
}
]
}
]

0
postcss.config.js → postcss.config.cjs
View File

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 14 KiB

10
public/images/docu.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 406 B

After

Width:  |  Height:  |  Size: 52 KiB