@docubook/create 2.4.0 → 2.5.1

package/src/dist/components/ui/toggle.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -18,7 +18,7 @@ const toggleVariants = cva(
       size: {
         default: "h-9 px-2 min-w-9",
         sm: "h-8 px-1.5 min-w-8",
-        xs: "h-7 px-1 min-w-7",
+        xs: "h-6 px-1.5 min-w-6",
         lg: "h-10 px-2.5 min-w-10",
       },
     },
@@ -32,7 +32,7 @@ const toggleVariants = cva(
 const Toggle = React.forwardRef<
   React.ElementRef<typeof TogglePrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+  VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
   <TogglePrimitive.Root
     ref={ref}

package/src/dist/docs/components/accordion-group.mdx

@@ -1,10 +1,11 @@
 ---
-title : Accordion Group
+title: Accordion Group
 description: for writing multiple accordions and grouping them together
-date : 10-08-2025
+date: 10-08-2025
 ---
 
-An accordion is like a button that opens and closes information. To avoid clutter, long information can be hidden first and then revealed when clicked.
+An accordion is like a button that opens and closes information. To avoid clutter, long information
+can be hidden first and then revealed when clicked.
 
 <Note type="note" title="Note">
   Group related accordions together using `<AccordionGroup>`. This creates a cohesive section of accordions that can be individually expanded or collapsed.
@@ -18,10 +19,11 @@ An accordion is like a button that opens and closes information. To avoid clutte
 </Accordion>
 
 <Accordion title="With icon props" icon="MousePointerClick">
-    This accordion includes a [Lucide Icon](https://lucide.dev/icons/) because the `icon` prop is provided.
+  This accordion includes a [Lucide Icon](https://lucide.dev/icons/) because the `icon` prop is
+  provided.
 </Accordion>
 
-<Accordion title="Expanded by Default" defaultOpen>
+<Accordion title="With Code Block">
     You can put other components inside Accordions.
 ```jsx:helloword.jsx
 class HelloWorld {
@@ -45,7 +47,7 @@ public static void main(String[] args) {
     This accordion includes a Lucide icon because the `icon` prop is provided.
 </Accordion>
 
-<Accordion title="Expanded by Default" defaultOpen>
+<Accordion title="With Code Block">
     You can put other components inside Accordions.
 ```jsx:helloword.jsx
 class HelloWorld {
@@ -60,9 +62,8 @@ public static void main(String[] args) {
 
 ## 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. |
-| `icon` | string | undefined | Optional. Adds a Lucide icon before the title in the accordion header. |
+| 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. |
+| `icon`     | string    | undefined | Optional. Adds a Lucide icon before the title in the accordion header.                                        |

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

@@ -4,9 +4,7 @@ description: A component used to create collapsible content that can be hidden a
 date: 22-12-2024
 ---
 
-## Preview
-
-### Basic Usage
+## Basic Usage
 
 ```plaintext
 <Accordion title="Click to expand">
@@ -17,13 +15,14 @@ date: 22-12-2024
 Render as :
 
 <Accordion title="Click to expand">
-    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.
+  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
+## With Icon
 
 ````plaintext
-<Accordion title="Code Block" defaultOpen={true} icon="Code">
+<Accordion title="Code Block" icon="Code">
     ```javascript:main.js showLineNumbers {3-4}
     function isRocketAboutToCrash() {
         // Check if the rocket is stable
@@ -37,7 +36,7 @@ Render as :
 
 Render as :
 
-<Accordion title="Code Block" defaultOpen={true} icon="Code">
+<Accordion title="Code Block" icon="Code">
     ```javascript:main.js showLineNumbers {3-4}
     function isRocketAboutToCrash() {
         // Check if the rocket is stable
@@ -50,10 +49,8 @@ Render as :
 
 ## 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. |
-| `icon` | string | undefined | Optional. Adds a Lucide icon before the title in the accordion header. |
-
+| 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. |
+| `icon`     | string    | undefined | Optional. Adds a Lucide icon before the title in the accordion header.                                        |

package/src/dist/docu.json

@@ -1,5 +1,8 @@
 {
   "$schema": "https://docubook.pro/docu.schema.json",
+  "search": {
+    "type": "default"
+  },
   "meta": {
     "baseURL": "https://docubook.pro",
     "title": "DocuBook",

package/src/dist/hooks/useActiveSection.ts

@@ -1,68 +1,80 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
-import { TocItem } from '@/lib/toc';
+"use client"
+
+import { useState, useCallback, useEffect, useRef } from "react"
+import { TocItem } from "@/lib/toc"
 
 export function useActiveSection(tocs: TocItem[]) {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const observerRef = useRef<IntersectionObserver | null>(null);
-  const clickedIdRef = useRef<string | null>(null);
+  const [activeId, setActiveId] = useState<string | null>(null)
+  const observerRef = useRef<IntersectionObserver | null>(null)
+  const clickedIdRef = useRef<string | null>(null)
+
+  const activeIdRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    activeIdRef.current = activeId
+  }, [activeId])
 
   // Handle intersection observer for active section
   useEffect(() => {
-    if (typeof document === 'undefined' || !tocs.length) return;
+    if (typeof document === "undefined" || !tocs.length) return
 
     const handleIntersect = (entries: IntersectionObserverEntry[]) => {
-      if (clickedIdRef.current) return;
+      if (clickedIdRef.current) return
 
-      const visibleEntries = entries.filter(entry => entry.isIntersecting);
-      if (!visibleEntries.length) return;
+      const visibleEntries = entries.filter((entry) => entry.isIntersecting)
+      if (!visibleEntries.length) return
 
       // Find the most visible entry
       const mostVisibleEntry = visibleEntries.reduce((prev, current) => {
-        return current.intersectionRatio > prev.intersectionRatio ? current : prev;
-      }, visibleEntries[0]);
+        return current.intersectionRatio > prev.intersectionRatio ? current : prev
+      }, visibleEntries[0])
 
-      const newActiveId = mostVisibleEntry.target.id;
-      if (newActiveId !== activeId) {
-        setActiveId(newActiveId);
+      const newActiveId = mostVisibleEntry.target.id
+      if (newActiveId !== activeIdRef.current) {
+        setActiveId(newActiveId)
       }
-    };
+    }
+
+    // Determine the scroll root: #scroll-container is only used on desktop (lg)
+    const isDesktop = window.innerWidth >= 1024
+    const container = isDesktop ? document.getElementById("scroll-container") : null
 
     // Initialize intersection observer
     observerRef.current = new IntersectionObserver(handleIntersect, {
-      root: null,
-      rootMargin: '0px 0px -80% 0px',
-      threshold: 0.1,
-    });
+      root: container,
+      rootMargin: isDesktop ? "0px 0px -60% 0px" : "-160px 0px -60% 0px",
+      threshold: 0,
+    })
 
     // Observe all headings
-    tocs.forEach(toc => {
-      const element = document.getElementById(toc.href.slice(1));
+    tocs.forEach((toc) => {
+      const element = document.getElementById(toc.href.slice(1))
       if (element) {
-        observerRef.current?.observe(element);
+        observerRef.current?.observe(element)
       }
-    });
+    })
 
     // Cleanup
     return () => {
-      observerRef.current?.disconnect();
-    };
-  }, [tocs, activeId]);
+      observerRef.current?.disconnect()
+    }
+  }, [tocs]) // Only depend on tocs, handle activeId via ref
 
   const handleLinkClick = useCallback((id: string) => {
-    clickedIdRef.current = id;
-    setActiveId(id);
+    clickedIdRef.current = id
+    setActiveId(id)
 
     // Reset clicked state after scroll completes
     const timer = setTimeout(() => {
-      clickedIdRef.current = null;
-    }, 1000);
+      clickedIdRef.current = null
+    }, 1000)
 
-    return () => clearTimeout(timer);
-  }, []);
+    return () => clearTimeout(timer)
+  }, [])
 
   return {
     activeId,
     setActiveId,
     handleLinkClick,
-  };
+  }
 }

package/src/dist/hooks/useScrollPosition.ts

@@ -1,29 +1,31 @@
-import { useState, useCallback, useEffect } from 'react';
+"use client"
+
+import { useState, useCallback, useEffect } from "react"
 
 export function useScrollPosition(threshold = 0.5) {
-  const [isScrolled, setIsScrolled] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false)
 
   const handleScroll = useCallback(() => {
-    if (typeof window === 'undefined') return;
+    if (typeof window === "undefined") return
 
-    const scrollPosition = window.scrollY;
-    const viewportHeight = window.innerHeight;
-    const shouldBeSticky = scrollPosition > viewportHeight * threshold;
+    const scrollPosition = window.scrollY
+    const viewportHeight = window.innerHeight
+    const shouldBeSticky = scrollPosition > viewportHeight * threshold
 
-    setIsScrolled(prev => shouldBeSticky !== prev ? shouldBeSticky : prev);
-  }, [threshold]);
+    setIsScrolled((prev) => (shouldBeSticky !== prev ? shouldBeSticky : prev))
+  }, [threshold])
 
   // Add scroll event listener
   useEffect(() => {
     // Initial check
     // eslint-disable-next-line react-hooks/set-state-in-effect
-    handleScroll();
+    handleScroll()
 
-    window.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener("scroll", handleScroll, { passive: true })
     return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [handleScroll]);
+      window.removeEventListener("scroll", handleScroll)
+    }
+  }, [handleScroll])
 
-  return isScrolled;
+  return isScrolled
 }

package/src/dist/lib/search/algolia.ts

@@ -0,0 +1,5 @@
+export const algoliaConfig = {
+  appId: process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_APP_ID,
+  apiKey: process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_API_KEY,
+  indexName: process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_INDEX_NAME,
+}

package/src/dist/lib/search/built-in.ts

@@ -0,0 +1,43 @@
+import { ROUTES, type EachRoute } from "../routes"
+
+export type SearchResult = {
+  title: string
+  href: string
+  noLink?: boolean
+  items?: undefined
+  score?: number
+}
+
+function helperSearch(
+  query: string,
+  node: EachRoute,
+  prefix: string,
+  currenLevel: number,
+  maxLevel?: number
+) {
+  const res: EachRoute[] = []
+  let parentHas = false
+
+  const nextLink = `${prefix}${node.href}`
+  if (!node.noLink && node.title.toLowerCase().includes(query.toLowerCase())) {
+    res.push({ ...node, items: undefined, href: nextLink })
+    parentHas = true
+  }
+  const goNext = maxLevel ? currenLevel < maxLevel : true
+  if (goNext)
+    node.items?.forEach((item) => {
+      const innerRes = helperSearch(query, item, nextLink, currenLevel + 1, maxLevel)
+      if (!!innerRes.length && !parentHas && !node.noLink) {
+        res.push({ ...node, items: undefined, href: nextLink })
+        parentHas = true
+      }
+      res.push(...innerRes)
+    })
+  return res
+}
+
+export function advanceSearch(query: string) {
+  return ROUTES.map((node) =>
+    helperSearch(query, node, "", 1, query.length == 0 ? 2 : undefined)
+  ).flat()
+}

package/src/dist/lib/search/config.ts

@@ -0,0 +1,7 @@
+import docuConfig from "@/docu.json"
+
+export type SearchType = "default" | "algolia"
+
+export const searchConfig = {
+  type: (docuConfig.search?.type as SearchType) ?? "default",
+}

package/src/dist/lib/toc.ts

@@ -6,4 +6,5 @@ export interface TocItem {
 
 export interface MobTocProps {
   tocs: TocItem[];
+  title?: string;
 }

package/src/dist/lib/utils.ts

@@ -1,80 +1,39 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-import { EachRoute, ROUTES } from "./routes";
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-export function helperSearch(
-  query: string,
-  node: EachRoute,
-  prefix: string,
-  currenLevel: number,
-  maxLevel?: number
-) {
-  const res: EachRoute[] = [];
-  let parentHas = false;
-
-  const nextLink = `${prefix}${node.href}`;
-  if (!node.noLink && node.title.toLowerCase().includes(query.toLowerCase())) {
-    res.push({ ...node, items: undefined, href: nextLink });
-    parentHas = true;
-  }
-  const goNext = maxLevel ? currenLevel < maxLevel : true;
-  if (goNext)
-    node.items?.forEach((item) => {
-      const innerRes = helperSearch(
-        query,
-        item,
-        nextLink,
-        currenLevel + 1,
-        maxLevel
-      );
-      if (!!innerRes.length && !parentHas && !node.noLink) {
-        res.push({ ...node, items: undefined, href: nextLink });
-        parentHas = true;
-      }
-      res.push(...innerRes);
-    });
-  return res;
-}
-
-export function advanceSearch(query: string) {
-  return ROUTES.map((node) =>
-    helperSearch(query, node, "", 1, query.length == 0 ? 2 : undefined)
-  ).flat();
+  return twMerge(clsx(inputs))
 }
 
 // Thursday, May 23, 2024
 export function formatDate(dateStr: string): string {
-  const [day, month, year] = dateStr.split("-").map(Number);
-  const date = new Date(year, month - 1, day);
+  const [day, month, year] = dateStr.split("-").map(Number)
+  const date = new Date(year, month - 1, day)
 
   const options: Intl.DateTimeFormatOptions = {
     weekday: "long",
     year: "numeric",
     month: "long",
     day: "numeric",
-  };
+  }
 
-  return date.toLocaleDateString("en-US", options);
+  return date.toLocaleDateString("en-US", options)
 }
 
 //  May 23, 2024
 export function formatDate2(dateStr: string): string {
-  const [day, month, year] = dateStr.split("-").map(Number);
-  const date = new Date(year, month - 1, day);
+  const [day, month, year] = dateStr.split("-").map(Number)
+  const date = new Date(year, month - 1, day)
 
   const options: Intl.DateTimeFormatOptions = {
     month: "short",
     day: "numeric",
     year: "numeric",
-  };
-  return date.toLocaleDateString("en-US", options);
+  }
+  return date.toLocaleDateString("en-US", options)
 }
 
 export function stringToDate(date: string) {
-  const [day, month, year] = date.split("-").map(Number);
-  return new Date(year, month - 1, day);
+  const [day, month, year] = date.split("-").map(Number)
+  return new Date(year, month - 1, day)
 }

package/src/dist/package.json

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

package/src/dist/styles/algolia.css

@@ -1,14 +1,3 @@
-/*
-================================================================================
- DocSearch Component Styling (Refactored Version)
-================================================================================
-*/
-
-/* -- 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(--muted-foreground));
@@ -18,47 +7,43 @@
   --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) */
+
+  /* Hit (Search Result) */
   --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;
-  
+
   /* Keys */
   --docsearch-key-gradient: none;
   --docsearch-key-shadow: none;
   --docsearch-key-pressed-shadow: none;
-  
+
   /* Footer */
   --docsearch-footer-height: 44px;
   --docsearch-footer-background: hsl(var(--background));
   --docsearch-footer-shadow: none;
 }
 
-/* -- 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));
   border: 1px solid hsl(var(--border));
   border-radius: 9999px;
-  width: 160px;
-  height: 40px;
+  width: 250px;
+  height: 35px;
   color: hsl(var(--muted-foreground));
   transition: width 0.3s ease;
   margin: 0;
@@ -71,8 +56,8 @@
 
 .docsearch .DocSearch-Search-Icon {
   color: var(--docsearch-muted-color);
-  width: 1rem;
-  height: 1rem;
+  width: 1.2rem;
+  height: 1.2rem;
 }
 
 .docsearch .DocSearch-Button-Placeholder {
@@ -85,7 +70,7 @@
 
 .docsearch .DocSearch-Button-Key {
   background: var(--docsearch-primary-color);
-  color: var(--docsearch-logo-color); /* Menggunakan variabel yg relevan */
+  color: var(--docsearch-logo-color);
   border-radius: 6px;
   font-size: 14px;
   font-weight: 500;
@@ -96,10 +81,6 @@
   top: 0;
 }
 
-/* -- 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);
 }
@@ -117,7 +98,6 @@
   border-top: 1px solid hsl(var(--border));
 }
 
-/* Gaya untuk tombol keyboard di footer */
 .DocSearch-Footer--commands kbd {
   background-color: hsl(var(--secondary));
   border: 1px solid hsl(var(--border));
@@ -130,7 +110,6 @@
   justify-content: center;
 }
 
-/* Menghilangkan gaya default dari ikon di dalam tombol footer */
 .DocSearch-Commands-Key {
   background: none;
   color: hsl(var(--muted-foreground));
@@ -143,9 +122,6 @@
   border-radius: 6px;
 }
 
-/* -- LANGKAH 4: Gaya Responsif --
-  Tidak ada perubahan, hanya mempertahankan fungsionalitas mobile.
-*/
 @media (max-width: 768px) {
   .docsearch .DocSearch-Button {
     width: 40px;
@@ -155,6 +131,7 @@
     background: none;
     border: none;
   }
+
   .docsearch .DocSearch-Button-Placeholder,
   .docsearch .DocSearch-Button-Key {
     display: none;