diff --git a/app/page.tsx b/app/page.tsx
index b8e9356..e77f37b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -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 (
@@ -25,18 +25,15 @@ export default function Home() {
)}
>
- π New Version - Release v.1.8.0
+ π Buy This Plugin
-
DocuBook Starter Templates
+
TutorAddons - Knowledge Base
- Get started by editing app/page.tsx . Save and see your changes instantly.{' '}
-
- Read Documentations
-
+ 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.
-
- docu.json
+
+ Youtube
-
Edit the docu.json file to change the content in the header, footer and sidebar.
+
Watch video tutorials via youtube playlist.
-
- CHANGELOG.md
+
+ Documentations
-
Manage changes to each version of your application in the CHANGELOG.md file.
+
Interactive documentation that is easy to understand and follow.
-
- Docu Play
+
+ Support
-
Easy to write interactive markdown content with a playground.
+
Support from developers with tickets and community.
diff --git a/components/docs/footer.tsx b/components/docs/footer.tsx
index dbda998..b1e8787 100644
--- a/components/docs/footer.tsx
+++ b/components/docs/footer.tsx
@@ -12,9 +12,9 @@ export function Footer() {
{meta.title}
{meta.description}
-
+ {/*
-
+
*/}
diff --git a/components/docs/leftbar.tsx b/components/docs/leftbar.tsx
index e5d5932..e38911f 100644
--- a/components/docs/leftbar.tsx
+++ b/components/docs/leftbar.tsx
@@ -46,9 +46,9 @@ export function SheetLeftbar() {
-
+ {/*
-
+
*/}
diff --git a/contents/docs/getting-started/components/accordion/index.mdx b/contents/docs/getting-started/components/accordion/index.mdx
deleted file mode 100644
index 9f9f658..0000000
--- a/contents/docs/getting-started/components/accordion/index.mdx
+++ /dev/null
@@ -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
-
-
- ```javascript:main.js showLineNumbers {3-4}
- function isRocketAboutToCrash() {
- // Check if the rocket is stable
- if (!isStable()) {
- NoCrash(); // Prevent the crash
- }
- }
- ```
-
-
-### Text with 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
-
-
-## 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
-
-
-
- Markdown
- Code Block
-
-
- ```plaintext
-
- 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
-
- ```
-
-
- ````plaintext
-
- ```javascript:main.js showLineNumbers {3-4}
- function isRocketAboutToCrash() {
- // Check if the rocket is stable
- if (!isStable()) {
- NoCrash(); // Prevent the crash
- }
- }
- ```
-
- ````
-
-
diff --git a/contents/docs/getting-started/components/button/index.mdx b/contents/docs/getting-started/components/button/index.mdx
deleted file mode 100644
index 84f3c78..0000000
--- a/contents/docs/getting-started/components/button/index.mdx
+++ /dev/null
@@ -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
-
-
-
-## 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
-
-```
diff --git a/contents/docs/getting-started/components/card-group/index.mdx b/contents/docs/getting-started/components/card-group/index.mdx
deleted file mode 100644
index c475ebb..0000000
--- a/contents/docs/getting-started/components/card-group/index.mdx
+++ /dev/null
@@ -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
-
-
-
- This is an example of card content with columns.
-
-
- This is an example of card content with columns.
-
-
- This is a horizontal card layout.
-
-
- This is a horizontal card layout.
-
-
-
-## Props
-
-| Prop | Type | Default | Description |
-| ------------- | -------- | ------- | ------------------------------------------------------- |
-| `cols` | `number` | `{2}` | By default 2 The number of columns per row |
-
-## Code
-
-```markdown
-
-
- This is an example of card content with columns.
-
-
- This is an example of card content with columns.
-
-
- This is a horizontal card layout.
-
-
- This is a horizontal card layout.
-
-
-```
diff --git a/contents/docs/getting-started/components/card/index.mdx b/contents/docs/getting-started/components/card/index.mdx
deleted file mode 100644
index 7212b24..0000000
--- a/contents/docs/getting-started/components/card/index.mdx
+++ /dev/null
@@ -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
-
-
- 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 Horizontal
-
-
- This is a horizontal card layout.
-
-
-### Card Simple
-
-
- This is a simple card without an icon or link.
-
-
-
-## 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
-
-
-
- Card with Link & Icon
- Card Horizontal
- Card Simple
-
-
- ```markdown
-
- This is how you use a card with an icon and a link. Clicking on this card
- brings you to the Card Group page.
-
- ```
-
-
- ```markdown
-
- This is a horizontal card layout.
-
- ```
-
-
- ```markdown
-
- This is a simple card without an icon or link.
-
- ```
-
-
diff --git a/contents/docs/getting-started/components/code-block/index.mdx b/contents/docs/getting-started/components/code-block/index.mdx
deleted file mode 100644
index c2c238e..0000000
--- a/contents/docs/getting-started/components/code-block/index.mdx
+++ /dev/null
@@ -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.
diff --git a/contents/docs/getting-started/components/custom/index.mdx b/contents/docs/getting-started/components/custom/index.mdx
deleted file mode 100644
index 8f17023..0000000
--- a/contents/docs/getting-started/components/custom/index.mdx
+++ /dev/null
@@ -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
-
- This is some custom content rendered by the Outlet component!
-
-```
-
-### 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.
diff --git a/contents/docs/getting-started/components/image/index.mdx b/contents/docs/getting-started/components/image/index.mdx
deleted file mode 100644
index 7e43d86..0000000
--- a/contents/docs/getting-started/components/image/index.mdx
+++ /dev/null
@@ -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
-
-```
-
-### Rendered Output
-
-The above Markdown is converted to:
-
-```jsx
-
-```
-
-## 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.
diff --git a/contents/docs/getting-started/components/index.mdx b/contents/docs/getting-started/components/index.mdx
deleted file mode 100644
index 8388d1d..0000000
--- a/contents/docs/getting-started/components/index.mdx
+++ /dev/null
@@ -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.
-
-
diff --git a/contents/docs/getting-started/components/link/index.mdx b/contents/docs/getting-started/components/link/index.mdx
deleted file mode 100644
index a600cb5..0000000
--- a/contents/docs/getting-started/components/link/index.mdx
+++ /dev/null
@@ -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
-
- Visit OpenAI
-
-```
-
-## 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.
diff --git a/contents/docs/getting-started/components/note/index.mdx b/contents/docs/getting-started/components/note/index.mdx
deleted file mode 100644
index 7288a01..0000000
--- a/contents/docs/getting-started/components/note/index.mdx
+++ /dev/null
@@ -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
-
-
- This is a general note to convey information to the user.
-
-
- This is a danger alert to notify the user of a critical issue.
-
-
- This is a warning alert for issues that require attention.
-
-
- This is a success message to inform the user of successful actions.
-
-
-## 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
-
- This is a general note to convey information to the user.
-
-
- This is a danger alert to notify the user of a critical issue.
-
-
- This is a warning alert for issues that require attention.
-
-
- This is a success message to inform the user of successful actions.
-
-```
diff --git a/contents/docs/getting-started/components/release-note/index.mdx b/contents/docs/getting-started/components/release-note/index.mdx
deleted file mode 100644
index d2298d4..0000000
--- a/contents/docs/getting-started/components/release-note/index.mdx
+++ /dev/null
@@ -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.
-
-
- ```plaintext:CHANGELOG.md
- ## [1.3.0] - 2024-12-31
-
- > Release Note Feature to Make it Easier to Write Changelogs
-
- 
-
- ### 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
- ```
-
-
-## Preview : Render Output
-
-
- ## v1.3.0 - Jan 31, 2024
-
- > Release Note Feature to Make it Easier to Write Changelogs
-
- 
-
- ### 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
-
-
-## 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. |
diff --git a/contents/docs/getting-started/components/stepper/index.mdx b/contents/docs/getting-started/components/stepper/index.mdx
deleted file mode 100644
index 4bac8c6..0000000
--- a/contents/docs/getting-started/components/stepper/index.mdx
+++ /dev/null
@@ -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
-
-##
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
- felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
- dolor in lorem.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
- eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
- ipsum nec nulla ultricies porttitor et non justo.
-
-
-
-## Code
-
-```jsx
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
- felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
- dolor in lorem.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
- eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
- ipsum nec nulla ultricies porttitor et non justo.
-
-
-```
diff --git a/contents/docs/getting-started/components/tabs/index.mdx b/contents/docs/getting-started/components/tabs/index.mdx
deleted file mode 100644
index ef1e1ea..0000000
--- a/contents/docs/getting-started/components/tabs/index.mdx
+++ /dev/null
@@ -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
-
-
-
- Java
- TypeScript
-
-
- ```java
- // HelloWorld.java
- public class HelloWorld {
- public static void main(String[] args) {
- System.out.println("Hello, World!");
- }
- }
- ```
-
-
- ```typescript
- // helloWorld.ts
- function helloWorld(): void {
- console.log("Hello, World!");
- }
- helloWorld();
- ```
-
-
-
-## 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
-
-
- Java
- TypeScript
-
-
- ```java
- // HelloWorld.java
- public class HelloWorld {
- public static void main(String[] args) {
- System.out.println("Hello, World!");
- }
- }
- ```
-
- ```typescript
- // helloWorld.ts
- function helloWorld(): void {
- console.log("Hello, World!");
- }
- helloWorld();
- ```
-
-````
diff --git a/contents/docs/getting-started/components/tooltips/index.mdx b/contents/docs/getting-started/components/tooltips/index.mdx
deleted file mode 100644
index b4540a1..0000000
--- a/contents/docs/getting-started/components/tooltips/index.mdx
+++ /dev/null
@@ -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 ? Create interactive nested documentations using MDX.
-
-### Code
-
-The above Markdown is converted to:
-
-```markdown:index.mdx
-What do you know about ? Create interactive nested documentations using MDX.
-```
diff --git a/contents/docs/getting-started/components/youtube/index.mdx b/contents/docs/getting-started/components/youtube/index.mdx
deleted file mode 100644
index 2ca3138..0000000
--- a/contents/docs/getting-started/components/youtube/index.mdx
+++ /dev/null
@@ -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
-
-
-
-## Code
-
-```bash
-
-```
-
-## Usage
-
-for example the youtube URL show this https://www.youtube.com/watch?v=cpraXaw7dyc the ID `cpraXaw7dyc`
diff --git a/contents/docs/getting-started/customize/index.mdx b/contents/docs/getting-started/customize/index.mdx
deleted file mode 100644
index a347547..0000000
--- a/contents/docs/getting-started/customize/index.mdx
+++ /dev/null
@@ -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(rawMdx: string) {
- return await compileMDX({
- 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 (
-
-
- {children}
-
-
- );
-}
-```
-
-### 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 (
-
-
- {children}
-
-
- );
-}
-```
-
-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)
diff --git a/contents/docs/getting-started/installation/index.mdx b/contents/docs/getting-started/installation/index.mdx
index aa315bc..13c367d 100644
--- a/contents/docs/getting-started/installation/index.mdx
+++ b/contents/docs/getting-started/installation/index.mdx
@@ -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.
+
+ Before you install the TutorAddons plugin, make sure you have installed Tutor LMS first.
+
-## Clone Repository
-
-To get started, you can clone the DocuBook repository directly from GitHub.
+## Upload plugin
+### Via Wordpress Dashboard
-
- Begin by cloning the DocuBook repository from GitHub:
-
- ```bash
- git clone --branch starter https://gitlab.com/mywildancloud/docubook.git
- ```
-
+
+ Login via wordpress wp-admin.
-
-
- After cloning, navigate into the project directory to start setting up:
-
- ```bash
- cd docubook
- ```
-
+
+ On the WordPress dashboard page, please go to the Plugins menu.
-
-
- Install all necessary project dependencies with npm:
-
- ```bash
- npm install
- ```
-
+
+ Then select Add New Plugin.
-
-
- Finally, start the development server to view the project locally:
-
- ```bash
- npm run dev
- ```
-
+
+ Click the upload plugin button then select the plugin file then click install now.
+
+
+ After the installation procedure is complete, please activate the plugin.
-
-## Quick Setup with CLI
-
-For a faster setup, use the `cli` command to create a new DocuBook project in one step:
-
-
-
- npm
- pnpm
- bun
- yarn
-
-
- ```shell
- npx @docubook/create@latest
- ```
-
-
- ```shell
- pnpm dlx @docubook/create@latest
- ```
-
-
- ```shell
- bunx @docubook/create@latest
- ```
-
-
- ```shell
- yarn dlx @docubook/create@latest
- ```
-
-
-
-With this setup, youβll have a ready-to-use DocuBook instance to start building your documentation.
diff --git a/contents/docs/getting-started/introduction/index.mdx b/contents/docs/getting-started/introduction/index.mdx
index a0396ca..03c2931 100644
--- a/contents/docs/getting-started/introduction/index.mdx
+++ b/contents/docs/getting-started/introduction/index.mdx
@@ -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.
-
- 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.
-
+## 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).
diff --git a/contents/docs/getting-started/license/index.mdx b/contents/docs/getting-started/license/index.mdx
new file mode 100644
index 0000000..dbb4b5e
--- /dev/null
+++ b/contents/docs/getting-started/license/index.mdx
@@ -0,0 +1,30 @@
+---
+title : Activate License
+description : Tutor Addons plugin license activation.
+date : 12-04-2025
+---
+
+
+ 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/)
+
+
+## License Keys
+To get a plugin license you must be validated by purchasing the TutorAddons plugin officially.
+
+
+
+ Log in using the email and password you have on our site [https://tutoraddons.com/login/](https://tutoraddons.com/login/)
+
+
+ On the dashboard page, navigate to the License Keys menu.
+
+
+ Copy the license key of the plugin you want to activate.
+
+
+ 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.
+
+ 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.
+
+
+
diff --git a/contents/docs/getting-started/project-structure/index.mdx b/contents/docs/getting-started/project-structure/index.mdx
deleted file mode 100644
index c8e0b21..0000000
--- a/contents/docs/getting-started/project-structure/index.mdx
+++ /dev/null
@@ -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.
diff --git a/contents/docs/getting-started/quick-start-guide/index.mdx b/contents/docs/getting-started/quick-start-guide/index.mdx
deleted file mode 100644
index d60db61..0000000
--- a/contents/docs/getting-started/quick-start-guide/index.mdx
+++ /dev/null
@@ -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.
- ---
-
-
- ```
-
-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"
- ---
-
-
- ```
-
-- 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.
diff --git a/contents/docs/getting-started/tutor-tripay/index.mdx b/contents/docs/getting-started/tutor-tripay/index.mdx
new file mode 100644
index 0000000..ee5d49c
--- /dev/null
+++ b/contents/docs/getting-started/tutor-tripay/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Tutor Addon - Tripay
+description: Panduan penggunaan plugin Tutor Addon Tripay
+date: 12-04-2025
+---
+
+
diff --git a/contents/docs/getting-started/tutor-tripay/mendaftar-akun-tripay/index.mdx b/contents/docs/getting-started/tutor-tripay/mendaftar-akun-tripay/index.mdx
new file mode 100644
index 0000000..720cd92
--- /dev/null
+++ b/contents/docs/getting-started/tutor-tripay/mendaftar-akun-tripay/index.mdx
@@ -0,0 +1,5 @@
+---
+title : Mendaftar Akun Tripay
+description : Anda harus mendaftar akun pada layanan Tripay.
+date : 12-04-2025
+---
diff --git a/docu.json b/docu.json
index 960e081..4e768cf 100644
--- a/docu.json
+++ b/docu.json
@@ -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" }
+ }
]
}
]
diff --git a/postcss.config.js b/postcss.config.cjs
similarity index 100%
rename from postcss.config.js
rename to postcss.config.cjs
diff --git a/public/favicon.ico b/public/favicon.ico
index d3734ab..de8610b 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/images/docu.svg b/public/images/docu.svg
index 1a2a563..73173fd 100644
--- a/public/images/docu.svg
+++ b/public/images/docu.svg
@@ -1 +1,9 @@
-
\ No newline at end of file
+