@docubook/create 1.15.0 → 1.15.2

package/src/dist/package.json

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

package/src/dist/styles/algolia.css

@@ -1,44 +1,67 @@
 /*
 ================================================================================
- DocSearch Component Styling (Themed Version)
- - This version uses the CSS variables defined in :root and .dark
-   to automatically adapt to your site's light and dark themes.
+ DocSearch Component Styling (Refactored Version)
 ================================================================================
 */
-.docsearch {
-  /* Map theme variables to DocSearch's internal variables */
+
+/* -- LANGKAH 1: Definisi Variabel Global --
+  Variabel tema DocSearch sekarang didefinisikan secara global di :root.
+  Ini menyederhanakan pewarisan tema dan memastikan konsistensi.
+  Mode gelap secara otomatis menimpa variabel ini karena .dark di globals.css.
+*/
+:root {
   --docsearch-primary-color: hsl(var(--primary));
-  --docsearch-text-color: hsl(var(--foreground));
-  --docsearch-container-background: hsla(var(--background) / 0.8); /* Use theme background with transparency */
-  --docsearch-modal-background: hsl(var(--card)); /* Modals should use card color */
-  --docsearch-modal-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --docsearch-searchbox-background: hsl(var(--secondary));
-  --docsearch-searchbox-focus-background: hsl(var(--secondary));
+  --docsearch-text-color: hsl(var(--muted-foreground));
+  --docsearch-spacing: 12px;
+  --docsearch-icon-stroke-width: 1.4;
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-muted-color: hsl(var(--muted-foreground));
+  --docsearch-container-background: rgba(0, 0, 0, 0.7);
+  --docsearch-logo-color: hsl(var(--primary-foreground));
+  
+  /* Modal */
+  --docsearch-modal-width: 560px;
+  --docsearch-modal-height: 600px;
+  --docsearch-modal-background: hsl(var(--background));
+  --docsearch-modal-shadow: 0 0 0 1px hsl(var(--border)), 0 8px 20px rgba(0, 0, 0, 0.2);
+  
+  /* SearchBox */
+  --docsearch-searchbox-height: 56px;
+  --docsearch-searchbox-background: hsl(var(--input));
+  --docsearch-searchbox-focus-background: hsl(var(--card));
+  --docsearch-searchbox-shadow: none;
+  
+  /* Hit (Hasil Pencarian) */
+  --docsearch-hit-height: 56px;
   --docsearch-hit-color: hsl(var(--foreground));
+  --docsearch-hit-active-color: hsl(var(--primary-foreground));
   --docsearch-hit-background: hsl(var(--card));
   --docsearch-hit-shadow: none;
-  --docsearch-hit-active-color: hsl(var(--primary-foreground));
-  --docsearch-selected-background: hsl(var(--secondary)); /* Use secondary for selection */
-  --docsearch-footer-background: hsl(var(--card));
-  --docsearch-footer-shadow: inset 0 1px 0 0 hsl(var(--border));
-  --docsearch-key-gradient: transparent;
+  
+  /* Keys */
+  --docsearch-key-gradient: none;
   --docsearch-key-shadow: none;
-  --docsearch-muted-color: hsl(var(--muted-foreground)); /* Use muted for less important text */
+  --docsearch-key-pressed-shadow: none;
+  
+  /* Footer */
+  --docsearch-footer-height: 44px;
+  --docsearch-footer-background: hsl(var(--background));
+  --docsearch-footer-shadow: none;
 }
 
-/*
- * =====================================
- * 1. Initial Search Button Styling
- * =====================================
- */
+/* -- LANGKAH 2: Gaya untuk Tombol Awal --
+  Gaya ini spesifik untuk tombol yang ada di Navbar, 
+  yang dibungkus oleh <div class="docsearch">.
+*/
 .docsearch .DocSearch-Button {
-  background-color: hsl(var(--secondary)); /* Use secondary for the button background */
-  border: 1px solid hsl(var(--border)); /* Use the standard border color */
-  border-radius: 9999px; /* Pill shape */
-  width: 160px; /* Lebar default untuk desktop */
+  background-color: hsl(var(--secondary));
+  border: 1px solid hsl(var(--border));
+  border-radius: 9999px;
+  width: 160px;
   height: 40px;
-  color: hsl(var(--muted-foreground)); /* Use muted text color for the placeholder */
-  transition: width 0.3s ease; /* Transisi untuk perubahan lebar */
+  color: hsl(var(--muted-foreground));
+  transition: width 0.3s ease;
+  margin: 0;
 }
 
 .docsearch .DocSearch-Button:hover {
@@ -46,21 +69,24 @@
   box-shadow: none;
 }
 
-/* Magnifying glass icon */
 .docsearch .DocSearch-Search-Icon {
-  color: hsl(var(--muted-foreground));
+  color: var(--docsearch-muted-color);
+  width: 1rem;
+  height: 1rem;
 }
 
-/* The 'Search' placeholder text */
 .docsearch .DocSearch-Button-Placeholder {
   font-style: normal;
+  margin-left: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--docsearch-muted-color);
 }
 
-/* Styling for the '⌘K' keys */
 .docsearch .DocSearch-Button-Key {
-  background: hsl(var(--primary)); /* Use primary color for the key background */
+  background: var(--docsearch-primary-color);
+  color: var(--docsearch-logo-color); /* Menggunakan variabel yg relevan */
   border-radius: 6px;
-  color: hsl(var(--primary-foreground)); /* Use primary-foreground for the key text */
   font-size: 14px;
   font-weight: 500;
   height: 24px;
@@ -70,85 +96,65 @@
   top: 0;
 }
 
-
-/*
- * =====================================
- * 2. Modal and Results Styling
- * =====================================
- */
-
-/* Main modal window */
-.docsearch .DocSearch-Modal {
+/* -- LANGKAH 3: Gaya untuk Modal dan Isinya --
+  Gaya ini menargetkan elemen-elemen modal yang dirender terpisah.
+  Karena variabel sudah global, kita hanya perlu menata elemennya.
+*/
+.DocSearch-Container .DocSearch-Modal {
   backdrop-filter: blur(8px);
 }
 
-.docsearch .DocSearch-Container {
-  box-shadow: var(--docsearch-modal-shadow);
-}
-
-/* Search input form */
-.docsearch .DocSearch-Form {
+.DocSearch-Form {
   border: 1px solid hsl(var(--border));
-  box-shadow: none;
   background-color: transparent;
 }
 
-/* The 'Return' and 'Esc' hints */
-.docsearch .DocSearch-Reset-Icon,
-.docsearch .DocSearch-Cancel {
-  color: hsl(var(--muted-foreground));
-}
-
-/* Style for each search result item */
-.docsearch .DocSearch-Hit a {
-  border-radius: 4px;
+.DocSearch-Input {
+  font-size: 15px !important;
 }
 
-/* Selected search result */
-.docsearch .DocSearch-Hit[aria-selected="true"] a {
-  background: var(--docsearch-selected-background); /* Highlight color for selected item */
+.DocSearch-Footer {
+  border-top: 1px solid hsl(var(--border));
 }
 
-/* Hide category headers if not needed */
-.docsearch .DocSearch-Hit-source {
-  display: none;
+/* Gaya untuk tombol keyboard di footer */
+.DocSearch-Footer--commands kbd {
+  background-color: hsl(var(--secondary));
+  border: 1px solid hsl(var(--border));
+  border-bottom-width: 2px;
+  border-radius: 6px;
+  color: var(--docsearch-muted-color);
+  padding: 4px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-/* Icon next to each result title */
-.docsearch .DocSearch-Hit-icon {
+/* Menghilangkan gaya default dari ikon di dalam tombol footer */
+.DocSearch-Commands-Key {
+  background: none;
   color: hsl(var(--muted-foreground));
-}
-
-/* Footer instructions ('to navigate', 'to select', etc.) */
-.docsearch .DocSearch-Footer {
-  border-top: 1px solid hsl(var(--border));
-}
-
-.docsearch .DocSearch-Footer--commands kbd {
-  background: hsl(var(--muted)); /* Use muted for the background of keyboard hints */
   border: 1px solid hsl(var(--border));
-  border-radius: 4px;
-  color: hsl(var(--muted-foreground));
+  box-shadow: none;
+  padding: 2px 4px;
+  margin-right: 0.4em;
+  height: 20px;
+  width: 32px;
+  border-radius: 6px;
 }
 
-/*
- * =====================================
- * 3. Responsive Styling (Mobile)
- * =====================================
- */
+/* -- LANGKAH 4: Gaya Responsif --
+  Tidak ada perubahan, hanya mempertahankan fungsionalitas mobile.
+*/
 @media (max-width: 768px) {
-  /* Aturan ini akan aktif pada layar 768px ke bawah */
-
   .docsearch .DocSearch-Button {
-    width: 40px; /* Mengubah lebar tombol menjadi seukuran ikon */
-    height: 40px; /* Memastikan tinggi tetap sama */
-    padding: 0; /* Menghapus padding agar ikon bisa di tengah */
-    justify-content: center; /* Memusatkan ikon di dalam tombol */
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    justify-content: center;
     background: none;
     border: none;
   }
-
-  /* Menyembunyikan teks "Search..." dan shortcut keyboard */
   .docsearch .DocSearch-Button-Placeholder,
   .docsearch .DocSearch-Button-Key {
     display: none;

package/src/dist/styles/globals.css

@@ -1,9 +1,11 @@
+@import "@docsearch/css";
+@import "./algolia.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import url("../styles/syntax.css");
-
+@import url("./syntax.css");
 /* Modern Blue Theme */
 @layer base {
     :root {
@@ -136,4 +138,4 @@ pre>code {
         background-position: 0% 0%;
       }
     }
-  }
+  }

package/src/dist/contents/docs/components/accordion/index.mdx

@@ -1,86 +0,0 @@
----
-title: Accordion
-description: A component used to create collapsible content that can be hidden and shown again.
-date: 22-12-2024
----
-
-## Preview
-
-### Basic Usage
-
-<Accordion title="Click to expand" defaultOpen={true}>
-    This is a simple accordion component that can be toggled by clicking the header. The content can include any valid React nodes, including text, components, and markdown.
-</Accordion>
-
-### With Code Block
-
-<Accordion title="Code Example" className="mt-4">
-    ```javascript:utils.js showLineNumbers
-    // Example of using the Accordion component
-    import Accordion from '@/components/markdown/AccordionMdx';
-
-    function Example() {
-        return (
-            <Accordion title="Click to see code">
-                <pre>
-                    {`function greet() {\n    console.log('Hello, world!');\n}`}
-                </pre>
-            </Accordion>
-        );
-    }
-    ```
-</Accordion>
-
-### With Markdown Content
-
-<Accordion title="Markdown Example" className="mt-4">
-    ## This is a markdown heading
-
-    - List item 1
-    - List item 2
-    - List item 3
-
-    You can include **bold** and *italic* text, [links](#), and other markdown elements.
-</Accordion>
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | string | - | **Required**. The text displayed in the accordion header. |
-| `children` | ReactNode | null | The content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components. |
-| `defaultOpen` | boolean | false | When true, the accordion will be expanded by default. |
-| `className` | string | undefined | Additional CSS classes to apply to the accordion container. |
-
-## Output Markdown
-
-<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>

package/src/dist/contents/docs/components/button/index.mdx

@@ -1,40 +0,0 @@
----
-title: Button
-description: A component used to create buttons that can be used to trigger actions or navigate to other pages.
-date: 14-12-2024
----
-
-## Preview
-
-<Button
-  text="Learn More"
-  href="https://learn.example.com"
-  icon="MoveUpRight"
-  size="md"
-  target="_blank"
-  variation="primary"
-/>
-
-## Props
-
-| Prop        | Type     | Default     | Description                                  |
-| ----------- | -------- | ----------- | -------------------------------------------- |
-| `text`      | string   | undefined   | The button text                              |
-| `href`      | string   | **required**| The URL to navigate to                       |
-| `icon`      | string   | undefined   | Lucide icon name (e.g. "MoveUpRight")       |
-| `size`      | string   | "md"        | Button size: `"sm"`, `"md"`, or `"lg"`      |
-| `target`    | string   | undefined   | Link target (e.g. "_blank")                 |
-| `variation` | string   | "primary"   | Button style: `"primary"`, `"accent"`, or `"outline"` |
-
-## Output Markdown
-
-```markdown
-<Button
-  text="Learn More"
-  href="https://learn.example.com"
-  icon="MoveUpRight"
-  size="md"
-  target="_blank"
-  variation="primary"
-/>
-```

package/src/dist/contents/docs/components/card/index.mdx

@@ -1,68 +0,0 @@
----
-title: Cards
-description: A component used to create cards that can be used to display content in a compact and organized way.
-date: 20-02-2025
----
-
-## Example
-
-### Card with Link and icon
-
-<Card title="Click on me" icon="Link" href="/docs/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   | null    | 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  | undefined    | horizontal layout for card. |
-
-## Output Markdown
-
-<Tabs defaultValue="link" className="pt-5 pb-1">
-  <TabsList>
-    <TabsTrigger value="link">Link & Icon</TabsTrigger>
-    <TabsTrigger value="horizontal">Horizontal</TabsTrigger>
-    <TabsTrigger value="simple">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>

package/src/dist/contents/docs/components/card-group/index.mdx

@@ -1,47 +0,0 @@
----
-title: Card Group
-description: A component used to create card groups that can be used to display multiple cards in a compact and organized way.
-date: 20-02-2025
----
-
-## 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                                |
-
-## Output Markdown
-
-```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>
-```

package/src/dist/contents/docs/components/code-block/index.mdx

@@ -1,39 +0,0 @@
----
-title: Code Block
-description: A component used to display code snippets with optional line numbering and line highlighting.
-date: 14-12-2024
----
-
-## 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}`.
-
-## Output Markdown
-
-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.

package/src/dist/contents/docs/components/custom/index.mdx

@@ -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.