@docubook/create 1.12.0 → 1.13.5

package/src/dist/contents/docs/getting-started/theme-colors/freshlime/index.mdx

@@ -0,0 +1,164 @@
+---
+title: Fresh Lime
+description: A fresh and vibrant freshlime-themed color scheme that's easy on the eyes while maintaining excellent readability.
+date: 2025-05-30
+---
+
+## Styles
+
+DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.
+
+<Note type="note" title="note">
+  You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
+</Note>
+
+<Tabs defaultValue="globals" className="pt-5 pb-1">
+  <TabsList>
+    <TabsTrigger value="globals">globals.css</TabsTrigger>
+    <TabsTrigger value="syntax">syntax.css</TabsTrigger>
+  </TabsList>
+  <TabsContent value="globals">
+    ```css:globals.css
+    /* Fresh Lime Theme */
+@layer base {
+    :root {
+        --background: 85 45% 98%;
+        --foreground: 85 30% 10%;
+        --card: 0 0% 100%;
+        --card-foreground: 85 30% 10%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 85 30% 10%;
+        --primary: 85 70% 45%;
+        --primary-foreground: 0 0% 100%;
+        --secondary: 85 40% 90%;
+        --secondary-foreground: 85 30% 10%;
+        --muted: 85 30% 92%;
+        --muted-foreground: 85 15% 45%;
+        --accent: 85 60% 40%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 60%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 85 25% 88%;
+        --input: 85 25% 88%;
+        --ring: 85 70% 45%;
+        --radius: 0.5rem;
+        --chart-1: 85 70% 45%;
+        --chart-2: 85 60% 40%;
+        --chart-3: 85 80% 40%;
+        --chart-4: 85 85% 35%;
+        --chart-5: 85 90% 30%;
+        --line-number-color: rgba(0, 0, 0, 0.05);
+    }
+
+    .dark {
+        --background: 85 20% 8%;
+        --foreground: 85 30% 96%;
+        --card: 85 20% 10%;
+        --card-foreground: 85 30% 96%;
+        --popover: 85 20% 10%;
+        --popover-foreground: 85 30% 96%;
+        --primary: 85 75% 55%;
+        --primary-foreground: 85 20% 8%;
+        --secondary: 85 25% 18%;
+        --secondary-foreground: 85 30% 96%;
+        --muted: 85 20% 20%;
+        --muted-foreground: 85 20% 70%;
+        --accent: 85 70% 50%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 65%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 85 25% 22%;
+        --input: 85 25% 22%;
+        --ring: 85 75% 55%;
+        --chart-1: 85 75% 55%;
+        --chart-2: 85 70% 50%;
+        --chart-3: 85 80% 45%;
+        --chart-4: 85 85% 40%;
+        --chart-5: 85 90% 35%;
+        --line-number-color: rgba(255, 255, 255, 0.1);
+    }
+}
+```
+</TabsContent>
+
+  <TabsContent value="syntax">
+    ```css:syntax.css
+/* Fresh Lime Theme - Syntax Highlighting */
+
+/* Light Mode */
+.keyword {
+  color: hsl(85 70% 30%); /* Dark lime green */
+}
+
+.function {
+  color: hsl(85 65% 35%); /* Slightly lighter lime */
+}
+
+.punctuation {
+  color: hsl(85 15% 50%); /* Muted green-gray */
+}
+
+.comment {
+  color: hsl(85 15% 50%); /* Muted green-gray */
+  font-style: italic;
+}
+
+.string,
+.constant,
+.annotation,
+.boolean,
+.number {
+  color: hsl(85 50% 35%); /* Medium lime green */
+}
+
+.tag {
+  color: hsl(85 70% 25%); /* Darker lime */
+}
+
+.attr-name {
+  color: hsl(85 60% 35%); /* Lime green */
+}
+
+.attr-value {
+  color: hsl(85 70% 30%); /* Dark lime green */
+}
+
+/* Dark Mode */
+.dark .keyword {
+  color: hsl(85 75% 65%); /* Bright lime */
+}
+
+.dark .function {
+  color: hsl(85 75% 60%); /* Slightly less bright lime */
+}
+
+.dark .string,
+.dark .constant,
+.dark .annotation,
+.dark .boolean,
+.dark .number {
+  color: hsl(85 60% 70%); /* Light lime */
+}
+
+.dark .tag {
+  color: hsl(85 70% 70%); /* Bright lime */
+}
+
+.dark .attr-name {
+  color: hsl(85 65% 70%); /* Light lime */
+}
+
+.dark .attr-value {
+  color: hsl(85 75% 65%); /* Bright lime */
+}
+
+.dark .comment {
+  color: hsl(85 15% 60%); /* Light gray-green */
+}
+
+.dark .punctuation {
+  color: hsl(85 20% 70%); /* Light gray-green */
+}
+```
+</TabsContent>
+</Tabs>

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

@@ -0,0 +1,9 @@
+---
+title : Theme Colors
+description : Color system used in DocuBook for styling UI elements
+date : 2025-05-20
+---
+
+DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.
+
+<Outlet path="getting-started/theme-colors" />

package/src/dist/contents/docs/getting-started/theme-colors/llms/index.mdx

@@ -0,0 +1,66 @@
+---
+title: Llms.txt - Generate Custom Theme
+description: Complete guide for creating and using AI-generated custom themes based on LLMS context.
+date: 2025-05-31
+---
+
+## Introduction
+This document explains how to create and implement custom color themes using AI with LLMS context. The context includes a consistent color palette for both light and dark modes, along with syntax highlighting colors for code.
+
+## Generate New Theme
+
+<Stepper>
+  <StepperItem title="Step 1: Access LLM for Color Generation">
+    Ensure you have access to a language model (LLM) that supports color palette generation
+  </StepperItem>
+  <StepperItem title="Step 2: Prepare Color Context">
+    Share the content of the [llms.txt](/llms.txt) file with the AI to provide the current color scheme context.
+  </StepperItem>
+  <StepperItem title="Step 3: Define Color Requirements">
+    Determine your preferred color scheme or theme requirements
+  </StepperItem>
+  <StepperItem title="Step 4: Generate New Theme">
+    Use the following prompt to request a new theme from the AI:
+
+    ```markdown
+    Create a new color theme based on the provided context with the following requirements:
+    1. Different primary color `#2281E3` - changes to your brand color
+    2. Maintain good contrast for accessibility
+    3. Include variants for both light and dark modes
+    4. Keep the same structure as the provided context
+    ```
+  </StepperItem>
+</Stepper>
+
+## Implementation
+After receiving the new color palette:
+
+1. Copy the generated CSS code to your theme file
+2. Update CSS variables in `globals.css`
+3. Adjust syntax colors in `syntax.css` if needed
+4. Test the theme across different devices and display modes
+
+## Example Implementation
+```css
+:root {
+  --primary: 210 81% 56%;  /* Primary color */
+  --secondary: 210 30% 90%;  /* Secondary color */
+  /* ... and so on */
+}
+
+.dark {
+  --primary: 210 100% 65%;  /* Dark mode primary color */
+  /* ... and so on */
+}
+```
+
+## Tips and Recommendations
+- Always test color contrast to ensure accessibility
+- Maintain consistency with existing themes
+- Use tools like [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) to verify contrast ratios
+- Keep backups of previous theme versions before making major changes
+
+## Troubleshooting
+- If colors don't change, ensure CSS variables are properly imported
+- Check CSS selector specificity if styles conflict
+- Verify dark/light mode toggling is working correctly

package/src/dist/docu.json

@@ -61,35 +61,68 @@
       "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": "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": "Customize", "href": "/customize" },
-        { "title": "Changelog", "href": "/changelog" }
+        {
+            "title": "Theme Colors",
+            "href": "/theme-colors",
+            "items": [
+                { "title": "Default", "href": "/default" },
+                { "title": "Fresh Lime", "href": "/freshlime" },
+                { "title": "Coffee", "href": "/coffee" },
+                { "title": "llms.txt", "href": "/llms" }
+            ]
+        }
+      ]
+    },
+    {
+      "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": "Release",
+      "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/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.12.0",
+  "version": "1.13.5",
   "private": true,
   "scripts": {
     "dev": "next dev",

package/src/dist/styles/globals.css

@@ -3,65 +3,64 @@
 @tailwind utilities;
 
 @import url("../styles/syntax.css");
-@import url("../styles/editor.css");
 
-/* ocean */
+/* Modern Blue Theme */
 @layer base {
     :root {
-        --background: 210 60% 97%; /* Lighter sky blue */
-        --foreground: 220 30% 10%; /* Deep navy */
-        --card: 210 50% 99%; /* Almost white blue */
-        --card-foreground: 220 30% 10%;
-        --popover: 210 50% 99%;
-        --popover-foreground: 220 30% 10%;
-        --primary: 220 85% 55%; /* Vibrant azure blue */
-        --primary-foreground: 210 60% 97%;
-        --secondary: 220 40% 80%; /* Softer sky blue */
-        --secondary-foreground: 220 30% 10%;
-        --muted: 220 40% 80%;
-        --muted-foreground: 220 30% 30%; /* Deeper steel blue */
-        --accent: 200 75% 38%; /* Stronger ocean blue */
-        --accent-foreground: 0 0% 100%; /* Pure white */
-        --destructive: 0 70% 50%; /* More vivid red */
-        --destructive-foreground: 220 30% 95%; /* Lightened foreground */
-        --border: 220 20% 85%; /* Slightly darker grey-blue */
-        --input: 220 20% 85%;
-        --ring: 220 50% 50%; /* More noticeable blue ring */
+        --background: 210 40% 98%;
+        --foreground: 220 30% 15%;
+        --card: 0 0% 100%;
+        --card-foreground: 220 30% 15%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 220 30% 15%;
+        --primary: 210 81% 56%; /* #2281E3 */
+        --primary-foreground: 0 0% 100%;
+        --secondary: 210 30% 90%;
+        --secondary-foreground: 220 30% 15%;
+        --muted: 210 20% 92%;
+        --muted-foreground: 220 15% 50%;
+        --accent: 200 100% 40%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 60%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 210 20% 85%;
+        --input: 210 20% 85%;
+        --ring: 210 81% 56%;
         --radius: 0.5rem;
-        --chart-1: 210 65% 45%; /* Classic blue */
-        --chart-2: 220 45% 60%; /* Softer sky */
-        --chart-3: 220 75% 45%; /* Azure blue */
-        --chart-4: 200 65% 50%; /* Ocean blue */
-        --chart-5: 240 35% 35%; /* Deeper teal */
+        --chart-1: 210 81% 56%;
+        --chart-2: 200 100% 40%;
+        --chart-3: 220 76% 60%;
+        --chart-4: 190 90% 50%;
+        --chart-5: 230 86% 45%;
         --line-number-color: rgba(0, 0, 0, 0.05);
     }
 
     .dark {
-        --background: 220 20% 8%; /* Deeper midnight navy */
-        --foreground: 220 85% 92%; /* Brighter sky blue */
-        --card: 220 20% 10%; /* Slightly darker midnight */
-        --card-foreground: 220 85% 92%;
-        --popover: 220 20% 10%;
-        --popover-foreground: 220 85% 92%;
-        --primary: 210 75% 65%; /* Softer but bright blue */
-        --primary-foreground: 220 20% 8%;
-        --secondary: 220 35% 12%; /* Darker steel blue */
-        --secondary-foreground: 220 85% 92%;
-        --muted: 220 35% 12%;
-        --muted-foreground: 210 25% 80%; /* Pale navy */
-        --accent: 220 85% 55%; /* Vibrant azure blue */
-        --accent-foreground: 220 85% 92%;
-        --destructive: 0 75% 50%; /* More noticeable red */
-        --destructive-foreground: 220 85% 92%;
-        --border: 220 35% 12%; /* Darker steel blue */
-        --input: 220 35% 12%;
-        --ring: 220 65% 55%; /* Vivid blue ring */
-        --chart-1: 210 65% 45%; /* Classic blue */
-        --chart-2: 220 45% 60%; /* Softer sky */
-        --chart-3: 220 75% 45%; /* Azure blue */
-        --chart-4: 200 65% 50%; /* Ocean blue */
-        --chart-5: 240 35% 35%; /* Deeper teal */
-        --line-number-color: rgba(255, 255, 255, 0.05);
+        --background: 220 25% 10%;
+        --foreground: 210 30% 96%;
+        --card: 220 25% 15%;
+        --card-foreground: 210 30% 96%;
+        --popover: 220 25% 15%;
+        --popover-foreground: 210 30% 96%;
+        --primary: 210 100% 65%;
+        --primary-foreground: 220 25% 10%;
+        --secondary: 215 25% 20%;
+        --secondary-foreground: 210 30% 96%;
+        --muted: 215 20% 25%;
+        --muted-foreground: 215 20% 65%;
+        --accent: 200 100% 60%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 70%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 215 20% 25%;
+        --input: 215 20% 25%;
+        --ring: 210 100% 65%;
+        --chart-1: 210 100% 65%;
+        --chart-2: 200 100% 60%;
+        --chart-3: 220 90% 70%;
+        --chart-4: 190 100% 65%;
+        --chart-5: 230 90% 60%;
+        --line-number-color: rgba(255, 255, 255, 0.1);
     }
 }
 
@@ -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/styles/syntax.css

@@ -1,23 +1,20 @@
-/* ocean */
+/* Modern Blue Theme */
 /* Light Mode */
 .keyword {
-  color: #2563eb;
-  /* Vibrant Blue */
+  color: #1d4ed8; /* Darker blue for better contrast */
 }
 
 .function {
-  color: #0284c7;
-  /* Deep Sky Blue */
+  color: #0369a1; /* Deep blue */
 }
 
 .punctuation {
-  color: #475569;
-  /* Cool Slate Gray */
+  color: #4b5563; /* Slate gray */
 }
 
 .comment {
-  color: #64748b;
-  /* Muted Slate */
+  color: #6b7280; /* Muted gray */
+  font-style: italic;
 }
 
 .string,
@@ -25,34 +22,28 @@
 .annotation,
 .boolean,
 .number {
-  color: #0369a1;
-  /* Dark Cyan */
+  color: #0d9488; /* Teal for better distinction */
 }
 
 .tag {
-  color: #1e40af;
-  /* Indigo */
+  color: #1d4ed8; /* Matching keyword color */
 }
 
 .attr-name {
-  color: #0ea5e9;
-  /* Light Sky Blue */
+  color: #0284c7; /* Sky blue */
 }
 
 .attr-value {
-  color: #2563eb;
-  /* Bright Blue */
+  color: #2563eb; /* Primary blue */
 }
 
 /* Dark Mode */
 .dark .keyword {
-  color: #93c5fd;
-  /* Soft Blue */
+  color: #60a5fa; /* Soft blue */
 }
 
 .dark .function {
-  color: #38bdf8;
-  /* Sky Blue */
+  color: #38bdf8; /* Sky blue */
 }
 
 .dark .string,
@@ -60,23 +51,27 @@
 .dark .annotation,
 .dark .boolean,
 .dark .number {
-  color: #60a5fa;
-  /* Light Blue */
+  color: #2dd4bf; /* Teal */
 }
 
 .dark .tag {
-  color: #3b82f6;
-  /* Bold Blue */
+  color: #60a5fa; /* Matching keyword color */
 }
 
 .dark .attr-name {
-  color: #67e8f9;
-  /* Aqua */
+  color: #7dd3fc; /* Lighter blue */
 }
 
 .dark .attr-value {
-  color: #93c5fd;
-  /* Frosty Blue */
+  color: #3b82f6; /* Brighter blue */
+}
+
+.dark .comment {
+  color: #9ca3af; /* Lighter gray for dark mode */
+}
+
+.dark .punctuation {
+  color: #9ca3af; /* Lighter gray for dark mode */
 }
 
 .youtube {

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,