@docubook/create 1.11.3 → 1.13.0

package/src/dist/contents/docs/getting-started/quick-start-guide/index.mdx

@@ -4,11 +4,11 @@ description: Get up and running with DocuBook in minutes with this comprehensive
 date: 20-05-2025
 ---
 
-Welcome to DocuBook! This guide will help you set up your documentation site quickly and efficiently.
+Welcome to DocuBook! This guide will help you set up and customize your documentation site efficiently.
 
 ## Prerequisites
 
-Before we begin, make sure you have the following installed:
+Before we begin, ensure you have the following installed:
 
 - [Git](https://git-scm.com/)
 - [Node.js 18+](https://nodejs.org/) or [Bun 1.0+](https://bun.sh/)
@@ -16,112 +16,130 @@ Before we begin, make sure you have the following installed:
 
 ## Installation
 
-<Note type="note" title="Note">
-  Follow the instructions on the [installation page](/docs/getting-started/installation) to install the required dependencies and set up your project.
+<Note type="note" title="Initial Setup">
+  Follow the [installation guide](/docs/getting-started/installation) to set up your project dependencies and configuration.
 </Note>
 
 ## Project Setup
 
-### Customize Branding
+### Configuration
 
 <Stepper>
-  <StepperItem title="Step 1: Add Favicon">
-    Place your favicon at `public/favicon.ico`
+  <StepperItem title="Add Favicon">
+    Place your favicon at `public/favicon.ico` for browser tab display.
   </StepperItem>
-  <StepperItem title="Step 2: Add Logo">
-    Place your logo at `public/images/docu.svg` (SVG format recommended)
+  <StepperItem title="Add Logo">
+    Add your logo at `public/images/docu.svg` (SVG format recommended for scalability).
   </StepperItem>
-  <StepperItem title="Step 3: Update Site Info">
-    Edit `docu.json` to update site name, description, and other settings
+  <StepperItem title="Update Site Information">
+    Customize your site's metadata in `docu.json`:
+    - Site title and description
+    - Navigation structure
+    - Default theme settings
   </StepperItem>
 </Stepper>
 
-## Creating Content
+## Content Management
 
 ### File Structure
 
-DocuBook uses the following structure:
+DocuBook organizes content in a hierarchical structure:
 
-````plaintext
+```plaintext
 contents/
-  docs/
-    getting-started/
-      quick-start-guide/  <-- You are here
+  docs/                    # Main documentation directory
+    getting-started/        # Section for getting started guides
+      quick-start-guide/    # Current guide
+        index.mdx           # Main content file
+    guides/                # Additional documentation sections
+      components/          # Component-specific documentation
         index.mdx
-    guides/
-      components/
-        index.mdx
-````
+```
 
-### Adding New Pages
+### Creating New Content
 
 <Stepper>
-  <StepperItem title="Step 1: Create a New Folder">
-    Create a new folder in `contents/docs/getting-started/` for your content section
+  <StepperItem title="1. Create Content Directory">
+    Organize your documentation by creating a new directory:
+    ```bash
+    mkdir -p contents/docs/your-section/your-topic
+    ```
+
+    Example for an API reference:
     ```bash
-    mkdir -p contents/docs/getting-started/your-page-title
+    mkdir -p contents/docs/api/authentication
     ```
   </StepperItem>
-  <StepperItem title="Step 2: Add MDX File">
-    Create an `index.mdx` file with frontmatter:
+
+  <StepperItem title="2. Create MDX Content">
+    Add an `index.mdx` file with frontmatter metadata:
     ````markdown
     ---
-    title: Your Page Title
-    description: Brief description of your page
-    date: 20-05-2025
+    title: Authentication
+    description: Learn how to implement user authentication
+    date: 2025-05-29
     ---
 
-    # Your Content Here
+    Your comprehensive guide to implementing authentication in your application.
+
+    ## Getting Started
 
-    Start writing your documentation using Markdown or MDX components.
+    Start by setting up your authentication provider...
     ````
   </StepperItem>
-  <StepperItem title="Step 3: Add to Navigation">
-    Update the navigation in `docu.json`:
-    ```json:docu.json showLineNumbers {8}
-{
+
+  <StepperItem title="3. Update Navigation">
+    Add your new section to the navigation in `docu.json`. Here's how to add the authentication section we created earlier:
+
+    ```json:docu.json showLineNumbers {4-16}
+    {
       "routes": [
+        // ... existing routes ...
         {
-        "title": "Getting Started",
-        "href": "/getting-started",
-        "noLink": true,
-            "items": [
-                { "title": "Your Page Title", "href": "/your-page-title" } // Add your page here separated by comma `,`
-            ]
+          "title": "API",
+          "href": "/api",
+          "noLink": true,
+          "context": {
+            "icon": "Code2",
+            "description": "API Reference and Integration",
+            "title": "API"
+          },
+          "items": [
+            { "title": "Authentication", "href": "/authentication" }
+          ]
         }
-    ]
-}
+      ]
+    }
     ```
+
+    This will add a new "API" section with an "Authentication" page under it. The `context` object defines how this section appears in the navigation, including its icon and description.
   </StepperItem>
 </Stepper>
 
-## Development
+## Development Workflow
+
+### Local Development
 
-Start the development server:
+Start the development server with live reload:
 
 ```bash
+# Using npm
 npm run dev
-# or
+
+# Or using Bun
 bun dev
 ```
 
-Visit [http://localhost:3000](http://localhost:3000) to see your site.
+Access your site at [http://localhost:3000](http://localhost:3000)
 
-## Building for Production
+### Building for Production
 
-When you're ready to deploy:
+When ready to deploy:
 
 ```bash
+# Build the production version
 npm run build
+
+# Start the production server
 npm start
 ```
-
-## Need Help?
-
-<Note type="info">
-  Check out the [Components Guide](/docs/getting-started/components) to learn about all available components.
-</Note>
-
-<Note type="warning">
-  Make sure to commit your changes to version control before deploying.
-</Note>

package/src/dist/docu.json

@@ -14,11 +14,6 @@
     "footer": {
       "copyright": "DocuBook",
       "social": [
-        {
-            "name": "Gitlab",
-            "url": "https://gitlab.com/mywildancloud",
-            "iconName": "GitlabIcon"
-        },
         {
             "name": "Instagram",
             "url": "https://www.instagram.com/wildan.nrs",
@@ -66,34 +61,58 @@
       "title": "Getting Started",
       "href": "/getting-started",
       "noLink": true,
+      "context": {
+        "icon": "Book",
+        "description": "Set up your Documentation",
+        "title": "Guides"
+      },
       "items": [
         { "title": "Introduction", "href": "/introduction" },
         { "title": "Installation", "href": "/installation" },
         { "title": "Quick Start Guide", "href": "/quick-start-guide" },
         { "title": "Project Structure", "href": "/project-structure" },
-        {
-          "title": "Components",
-          "href": "/components",
-          "items": [
-            { "title": "Accordion", "href": "/accordion" },
-            { "title": "Button", "href": "/button" },
-            { "title": "Card", "href": "/card" },
-            { "title": "Card Group", "href": "/card-group" },
-            { "title": "Code Block", "href": "/code-block" },
-            { "title": "Image", "href": "/image" },
-            { "title": "Keyboard", "href": "/keyboard" },
-            { "title": "Link", "href": "/link" },
-            { "title": "Note", "href": "/note" },
-            { "title": "Release Note", "href": "/release-note" },
-            { "title": "Stepper", "href": "/stepper" },
-            { "title": "Tabs", "href": "/tabs" },
-            { "title": "Tooltips", "href": "/tooltips" },
-            { "title": "Youtube", "href": "/youtube" },
-            { "title": "Custom", "href": "/custom" }
-          ]
-        },
-        { "title": "Customize", "href": "/customize" },
-        { "title": "Changelog", "href": "/changelog" }
+        { "title": "Customize", "href": "/customize" }
+      ]
+    },
+    {
+      "title": "Components",
+      "href": "/components",
+      "noLink": true,
+      "context": {
+        "icon": "Layers",
+        "description": "Write with Markdown",
+        "title": "Markdown"
+      },
+      "items": [
+        { "title": "Accordion", "href": "/accordion" },
+        { "title": "Button", "href": "/button" },
+        { "title": "Card", "href": "/card" },
+        { "title": "Card Group", "href": "/card-group" },
+        { "title": "Code Block", "href": "/code-block" },
+        { "title": "File Tree", "href": "/file-tree" },
+        { "title": "Image", "href": "/image" },
+        { "title": "Keyboard", "href": "/keyboard" },
+        { "title": "Link", "href": "/link" },
+        { "title": "Note", "href": "/note" },
+        { "title": "Release Note", "href": "/release-note" },
+        { "title": "Stepper", "href": "/stepper" },
+        { "title": "Tabs", "href": "/tabs" },
+        { "title": "Tooltips", "href": "/tooltips" },
+        { "title": "Youtube", "href": "/youtube" },
+        { "title": "Custom", "href": "/custom" }
+      ]
+    },
+    {
+      "title": "Changelog",
+      "href": "/changelog",
+      "noLink": true,
+      "context": {
+        "icon": "History",
+        "description": "Updates and changes",
+        "title": "Changelog"
+      },
+      "items": [
+        { "title": "Version 1.0+", "href": "/version-1" }
       ]
     }
   ]

package/src/dist/lib/markdown.ts

@@ -26,6 +26,7 @@ import Accordion from "@/components/markdown/AccordionMdx";
 import CardGroup from "@/components/markdown/CardGroupMdx";
 import Kbd from "@/components/markdown/KeyboardMdx";
 import { Release, Changes } from "@/components/markdown/ReleaseMdx";
+import { File, Files, Folder } from "@/components/markdown/FileTreeMdx";
 
 // add custom components
 const components = {
@@ -47,8 +48,13 @@ const components = {
   Accordion,
   CardGroup,
   Kbd,
+  // Release Note Components
   Release,
   Changes,
+  // File Tree Components
+  File,
+  Files,
+  Folder,
 };
 
 // can be used for other pages like blogs, Guides etc
@@ -181,64 +187,3 @@ const postProcess = () => (tree: any) => {
     }
   });
 };
-
-// export type Author = {
-//   avatar?: string;
-//   handle: string;
-//   username: string;
-//   handleUrl: string;
-// };
-
-// Blog related types and functions have been removed
-/*
-export type BlogMdxFrontmatter = BaseMdxFrontmatter & {
-  date: string;
-  authors: Author[];
-  cover: string;
-};
-
-export async function getAllBlogStaticPaths() {
-  try {
-    const blogFolder = path.join(process.cwd(), "/contents/blogs/");
-    const res = await fs.readdir(blogFolder);
-    return res.map((file) => file.split(".")[0]);
-  } catch (err) {
-    console.log(err);
-    return [];
-  }
-}
-
-export async function getAllBlogs() {
-  const blogFolder = path.join(process.cwd(), "/contents/blogs/");
-  const files = await fs.readdir(blogFolder);
-  const uncheckedRes = await Promise.all(
-    files.map(async (file) => {
-      try {
-        const filepath = path.join(process.cwd(), `/contents/blogs/${file}`);
-        const rawMdx = await fs.readFile(filepath, "utf-8");
-        return {
-          ...justGetFrontmatterFromMD<BlogMdxFrontmatter>(rawMdx),
-          slug: file.split(".")[0],
-        };
-      } catch (err) {
-        console.log(err);
-        return null;
-      }
-    })
-  );
-  return uncheckedRes.filter((it) => !!it) as (BlogMdxFrontmatter & {
-    slug: string;
-  })[];
-}
-
-export async function getBlogForSlug(slug: string) {
-  try {
-    const blogFile = path.join(process.cwd(), "/contents/blogs/", `${slug}.mdx`);
-    const rawMdx = await fs.readFile(blogFile, "utf-8");
-    return await parseMdx<BlogMdxFrontmatter>(rawMdx);
-  } catch (err) {
-    console.log(err);
-    return null;
-  }
-}
-*/

package/src/dist/lib/routes-config.ts

@@ -1,9 +1,16 @@
 import docuConfig from "@/docu.json"; // Import JSON file
 
+export type ContextInfo = {
+  icon: string;
+  description: string;
+  title?: string;
+};
+
 export type EachRoute = {
   title: string;
   href: string;
-  noLink?: boolean; // Sekarang mendukung boolean
+  noLink?: boolean;
+  context?: ContextInfo;
   items?: EachRoute[];
 };
 

package/src/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docubook",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

package/src/dist/styles/globals.css

@@ -3,7 +3,6 @@
 @tailwind utilities;
 
 @import url("../styles/syntax.css");
-@import url("../styles/editor.css");
 
 /* ocean */
 @layer base {
@@ -119,22 +118,6 @@ pre>code {
   background-color: transparent !important;
 }
 
-.line-clamp-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 @layer utilities {
     .animate-shine {
       --animate-shine: shine var(--duration) infinite linear;

package/src/dist/tailwind.config.ts

@@ -9,7 +9,6 @@ const config = {
     "./src/**/*.{ts,tsx}",
   ],
   prefix: "",
-  safelist: ["line-clamp-3","line-clam-2"],
   theme: {
   	container: {
   		center: true,

package/src/dist/contents/docs/getting-started/components/index.mdx

@@ -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" />

package/src/dist/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

package/src/dist/styles/editor.css

@@ -1,57 +0,0 @@
-/* GitHub-style editor customizations */
-.editor-container {
-  @apply relative font-mono text-sm leading-relaxed;
-  height: 100%;
-  min-height: 600px;
-}
-
-.editor-textarea {
-  @apply w-full h-full min-h-[600px] p-4 pl-14 bg-background resize-none focus:outline-none;
-  line-height: 1.5rem;
-  tab-size: 2;
-  counter-reset: line;
-}
-
-/* Line numbers */
-.editor-line-numbers {
-  @apply absolute left-0 top-0 bottom-0 w-10 bg-muted/30 border-r select-none;
-  padding: 1rem 0;
-  overflow: hidden;
-}
-
-.editor-line-numbers-content {
-  @apply text-right pr-2 text-muted-foreground/70;
-  font-size: 13px;
-  line-height: 1.5rem;
-}
-
-.editor-line-numbers-content > div {
-  height: 1.5rem;
-}
-
-.editor-line-numbers-content > div::before {
-  content: attr(data-line-number);
-  display: block;
-}
-
-/* Selection styling */
-.editor-textarea::selection {
-  @apply bg-primary/20;
-}
-
-.dark .editor-textarea::selection {
-  @apply bg-primary/30;
-}
-
-/* Scrollbar styling */
-.editor-textarea::-webkit-scrollbar {
-  @apply w-2;
-}
-
-.editor-textarea::-webkit-scrollbar-track {
-  @apply bg-transparent;
-}
-
-.editor-textarea::-webkit-scrollbar-thumb {
-  @apply bg-muted-foreground/20 rounded-full hover:bg-muted-foreground/30;
-}