@docubook/create 2.5.0 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docubook/create",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "CLI to create DocuBook projects",
   "main": "src/index.js",
   "type": "module",

package/src/dist/app/docs/[[...slug]]/page.tsx

@@ -79,10 +79,10 @@ export default async function DocsPage(props: PageProps) {
   const tocs = await getDocsTocs(pathName)
 
   return (
-    <div className="flex w-full flex-1 px-0 pb-4 lg:px-8 lg:pb-8 h-[calc(100vh-4rem)]">
-      <div id="scroll-container" className="max-lg:scroll-p-16 bg-card dark:bg-card/20 border-muted-foreground/20 flex w-full h-full flex-col items-start rounded-xl border shadow-md backdrop-blur-sm lg:flex-row overflow-y-auto relative">
+    <div className="flex w-full flex-1 px-0 pb-4 lg:px-8 lg:pb-8 lg:h-[calc(100vh-4rem)]">
+      <div id="scroll-container" className="max-lg:scroll-p-54 bg-card dark:bg-card/20 border-muted-foreground/20 flex w-full flex-col items-start lg:h-full lg:rounded-xl rounded-b-3xl border shadow-md backdrop-blur-sm lg:flex-row lg:overflow-y-auto relative">
         <div className="flex-7 w-full min-w-0 px-4 py-4 lg:px-8 lg:py-8">
-          <MobToc tocs={tocs} />
+          <MobToc tocs={tocs} title={title} />
           <DocsBreadcrumb paths={slug} />
           <Typography>
             <h1 className="-mt-0.5! text-3xl">{title}</h1>

package/src/dist/components/DocSearch.tsx

@@ -1,26 +1,27 @@
-"use client";
+"use client"
 
-import React from "react";
-import { DocSearch } from "@docsearch/react";
+import { DocSearch } from "@docsearch/react"
+import { algoliaConfig } from "@/lib/search/algolia"
+import { cn } from "@/lib/utils"
 
-export default function DocSearchComponent() {
-  const appId = process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_APP_ID;
-  const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_API_KEY;
-  const indexName = process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_INDEX_NAME;
+interface AlgoliaSearchProps {
+  className?: string
+}
+
+export default function AlgoliaSearch({ className }: AlgoliaSearchProps) {
+  const { appId, apiKey, indexName } = algoliaConfig
 
   if (!appId || !apiKey || !indexName) {
-    console.error(
-      "DocSearch credentials are not set in the environment variables."
-    );
+    console.error("DocSearch credentials are not set in the environment variables.")
     return (
-      <button className="text-sm text-muted-foreground" disabled>
+      <button className="text-muted-foreground text-sm" disabled>
         Search... (misconfigured)
       </button>
-    );
+    )
   }
 
   return (
-    <div className="docsearch">
+    <div className={cn("docsearch", className)}>
       <DocSearch
         appId={appId}
         apiKey={apiKey}
@@ -28,5 +29,5 @@ export default function DocSearchComponent() {
         placeholder="Type something to search..."
       />
     </div>
-  );
-}
+  )
+}

package/src/dist/components/DocsSidebar.tsx

@@ -25,6 +25,7 @@ import {
 
 interface MobTocProps {
   tocs: TocItem[]
+  title?: string
 }
 
 const useClickOutside = (ref: React.RefObject<HTMLElement | null>, callback: () => void) => {
@@ -45,7 +46,7 @@ const useClickOutside = (ref: React.RefObject<HTMLElement | null>, callback: ()
   }, [handleClick])
 }
 
-export default function MobToc({ tocs }: MobTocProps) {
+export default function MobToc({ tocs, title }: MobTocProps) {
   const pathname = usePathname()
   const [isExpanded, setIsExpanded] = React.useState(false)
   const tocRef = useRef<HTMLDivElement>(null)
@@ -57,8 +58,12 @@ export default function MobToc({ tocs }: MobTocProps) {
   // Only show on /docs pages
   const isDocsPage = useMemo(() => pathname?.startsWith("/docs"), [pathname])
 
-  // Get title from path segment (last part of URL)
-  const pageTitle = pathname?.split("/").filter(Boolean).pop() || ""
+  // Get title from active section if available, otherwise document title
+  const activeSection = useMemo(() => {
+    return tocs.find((toc) => toc.href.slice(1) === activeId)
+  }, [tocs, activeId])
+
+  const displayTitle = activeSection?.text || title || "On this page"
 
   const [mounted, setMounted] = React.useState(false)
 
@@ -111,16 +116,24 @@ export default function MobToc({ tocs }: MobTocProps) {
         exit={{ y: -100, opacity: 0 }}
         transition={{ duration: 0.2, ease: "easeInOut" }}
       >
-        <div className="bg-background/95 w-full border-b border-muted shadow-sm backdrop-blur-sm dark:border-foreground/10 dark:bg-background">
+        <div className="bg-background/95 border-muted dark:border-foreground/10 dark:bg-background w-full border-b shadow-sm backdrop-blur-sm">
           <div className="p-2">
             <div className="flex items-center gap-2">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0" aria-label="Navigation menu">
-                    <MoreVertical className="h-5 w-5 text-muted-foreground" />
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 shrink-0"
+                    aria-label="Navigation menu"
+                  >
+                    <MoreVertical className="text-muted-foreground h-5 w-5" />
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" className="flex flex-col gap-1 p-2 min-w-[160px]">
+                <DropdownMenuContent
+                  align="start"
+                  className="flex min-w-[160px] flex-col gap-1 p-2"
+                >
                   <NavMenu />
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -132,9 +145,7 @@ export default function MobToc({ tocs }: MobTocProps) {
                 aria-label={isExpanded ? "Collapse table of contents" : "Expand table of contents"}
               >
                 <div className="flex items-center gap-2">
-                  <span className="text-sm font-medium capitalize">
-                    {pageTitle || "On this page"}
-                  </span>
+                  <span className="text-sm font-medium capitalize">{displayTitle}</span>
                 </div>
                 {chevronIcon}
               </Button>
@@ -142,10 +153,10 @@ export default function MobToc({ tocs }: MobTocProps) {
               <Sheet>
                 <SheetTrigger asChild>
                   <Button variant="ghost" size="icon" className="hidden max-lg:flex">
-                    <PanelRight className="h-6 w-6 shrink-0 text-muted-foreground" />
+                    <PanelRight className="text-muted-foreground h-6 w-6 shrink-0" />
                   </Button>
                 </SheetTrigger>
-                <SheetContent className="w-full flex flex-col gap-4 px-0 lg:w-auto" side="right">
+                <SheetContent className="flex w-full flex-col gap-4 px-0 lg:w-auto" side="right">
                   <DialogTitle className="sr-only">Navigation Menu</DialogTitle>
                   <DialogDescription className="sr-only">
                     Main navigation menu with links to different sections

package/src/dist/components/SearchBox.tsx

@@ -3,32 +3,34 @@
 import { Dialog } from "@/components/ui/dialog"
 import { SearchTrigger } from "@/components/SearchTrigger"
 import { SearchModal } from "@/components/SearchModal"
-import DocSearchComponent from "@/components/DocSearch"
+import AlgoliaSearch from "@/components/DocSearch"
 import { useSearch } from "./SearchContext"
 import { DialogTrigger } from "@/components/ui/dialog"
+import { searchConfig } from "@/lib/search/config"
 
 interface SearchProps {
   /**
-   * Specify which search engine to use.
-   * @default 'default'
+   * Override the search type from config.
+   * If not provided, uses the config value.
    */
   type?: "default" | "algolia"
+  className?: string
 }
 
-export default function Search({ type = "default" }: SearchProps) {
+export default function Search({ type, className }: SearchProps) {
   const { isOpen, setIsOpen } = useSearch()
+  const searchType = type ?? searchConfig.type
 
-  if (type === "algolia") {
-    // Just render the component without passing any state props
-    return <DocSearchComponent />
+  if (searchType === "algolia") {
+    return <AlgoliaSearch className={className} />
   }
 
   // Logic for 'default' search
   return (
-    <div>
+    <div className={className}>
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
         <DialogTrigger asChild>
-          <SearchTrigger />
+          <SearchTrigger className={className} />
         </DialogTrigger>
         <SearchModal isOpen={isOpen} setIsOpen={setIsOpen} />
       </Dialog>

package/src/dist/components/SearchModal.tsx

@@ -1,12 +1,13 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState, useRef } from "react";
-import { ArrowUpIcon, ArrowDownIcon, CornerDownLeftIcon, FileTextIcon } from "lucide-react";
-import Anchor from "./anchor";
-import { advanceSearch, cn } from "@/lib/utils";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { page_routes } from "@/lib/routes";
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useEffect, useMemo, useState, useRef } from "react"
+import { ArrowUpIcon, ArrowDownIcon, CornerDownLeftIcon, FileTextIcon } from "lucide-react"
+import Anchor from "./anchor"
+import { cn } from "@/lib/utils"
+import { advanceSearch } from "@/lib/search/built-in"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { page_routes } from "@/lib/routes"
 import {
   DialogContent,
   DialogHeader,
@@ -14,63 +15,63 @@ import {
   DialogClose,
   DialogTitle,
   DialogDescription,
-} from "@/components/ui/dialog";
+} from "@/components/ui/dialog"
 
 type ContextInfo = {
-  icon: string;
-  description: string;
-  title?: string;
-};
+  icon: string
+  description: string
+  title?: string
+}
 
 type SearchResult = {
-  title: string;
-  href: string;
-  noLink?: boolean;
-  items?: undefined;
-  score?: number;
-  context?: ContextInfo;
-};
+  title: string
+  href: string
+  noLink?: boolean
+  items?: undefined
+  score?: number
+  context?: ContextInfo
+}
 
 const paddingMap = {
   1: "pl-2",
   2: "pl-4",
   3: "pl-10",
-} as const;
+} as const
 
 interface SearchModalProps {
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
+  isOpen: boolean
+  setIsOpen: (open: boolean) => void
 }
 
 export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
-  const router = useRouter();
-  const [searchedInput, setSearchedInput] = useState("");
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const router = useRouter()
+  const [searchedInput, setSearchedInput] = useState("")
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([])
 
   useEffect(() => {
     if (!isOpen) {
       // eslint-disable-next-line react-hooks/set-state-in-effect
-      setSearchedInput("");
+      setSearchedInput("")
     }
-  }, [isOpen]);
+  }, [isOpen])
 
   const filteredResults = useMemo<SearchResult[]>(() => {
-    const trimmedInput = searchedInput.trim();
+    const trimmedInput = searchedInput.trim()
 
     if (trimmedInput.length < 3) {
       return page_routes
-        .filter((route) => !route.href.endsWith('/'))
+        .filter((route) => !route.href.endsWith("/"))
         .slice(0, 6)
         .map((route: { title: string; href: string; noLink?: boolean; context?: ContextInfo }) => ({
           title: route.title,
           href: route.href,
           noLink: route.noLink,
           context: route.context,
-        }));
+        }))
     }
-    return advanceSearch(trimmedInput) as unknown as SearchResult[];
-  }, [searchedInput]);
+    return advanceSearch(trimmedInput) as unknown as SearchResult[]
+  }, [searchedInput])
 
   // useEffect(() => {
   //   setSelectedIndex(0);
@@ -78,39 +79,39 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
 
   useEffect(() => {
     const handleNavigation = (event: KeyboardEvent) => {
-      if (!isOpen || filteredResults.length === 0) return;
+      if (!isOpen || filteredResults.length === 0) return
 
       if (event.key === "ArrowDown") {
-        event.preventDefault();
-        setSelectedIndex((prev) => (prev + 1) % filteredResults.length);
+        event.preventDefault()
+        setSelectedIndex((prev) => (prev + 1) % filteredResults.length)
       } else if (event.key === "ArrowUp") {
-        event.preventDefault();
-        setSelectedIndex((prev) => (prev - 1 + filteredResults.length) % filteredResults.length);
+        event.preventDefault()
+        setSelectedIndex((prev) => (prev - 1 + filteredResults.length) % filteredResults.length)
       } else if (event.key === "Enter") {
-        event.preventDefault();
-        const selectedItem = filteredResults[selectedIndex];
+        event.preventDefault()
+        const selectedItem = filteredResults[selectedIndex]
         if (selectedItem) {
-          router.push(`/docs${selectedItem.href}`);
-          setIsOpen(false);
+          router.push(`/docs${selectedItem.href}`)
+          setIsOpen(false)
         }
       }
-    };
+    }
 
-    window.addEventListener("keydown", handleNavigation);
-    return () => window.removeEventListener("keydown", handleNavigation);
-  }, [isOpen, filteredResults, selectedIndex, router, setIsOpen]);
+    window.addEventListener("keydown", handleNavigation)
+    return () => window.removeEventListener("keydown", handleNavigation)
+  }, [isOpen, filteredResults, selectedIndex, router, setIsOpen])
 
   useEffect(() => {
     if (itemRefs.current[selectedIndex]) {
       itemRefs.current[selectedIndex]?.scrollIntoView({
         behavior: "smooth",
         block: "nearest",
-      });
+      })
     }
-  }, [selectedIndex]);
+  }, [selectedIndex])
 
   return (
-    <DialogContent className="p-0 max-w-[650px] sm:top-[38%] top-[45%] rounded-md!">
+    <DialogContent className="rounded-md! top-[45%] max-w-[650px] p-0 sm:top-[38%]">
       <DialogHeader>
         <DialogTitle className="sr-only">Search Documentation</DialogTitle>
         <DialogDescription className="sr-only">Search through the documentation</DialogDescription>
@@ -119,36 +120,35 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
       <input
         value={searchedInput}
         onChange={(e) => {
-          setSearchedInput(e.target.value);
-          setSelectedIndex(0);
+          setSearchedInput(e.target.value)
+          setSelectedIndex(0)
         }}
         placeholder="Type something to search..."
         autoFocus
-        className="h-14 px-6 bg-transparent border-b text-[14px] outline-none w-full"
+        className="h-14 w-full border-b bg-transparent px-6 text-[14px] outline-none"
         aria-label="Search documentation"
       />
 
       {filteredResults.length == 0 && searchedInput && (
         <p className="text-muted-foreground mx-auto mt-2 text-sm">
-          No results found for{" "}
-          <span className="text-primary">{`"${searchedInput}"`}</span>
+          No results found for <span className="text-primary">{`"${searchedInput}"`}</span>
         </p>
       )}
       <ScrollArea className="max-h-[400px] overflow-y-auto">
-        <div className="flex flex-col items-start overflow-y-auto sm:px-2 px-1 pb-4">
+        <div className="flex flex-col items-start overflow-y-auto px-1 pb-4 sm:px-2">
           {filteredResults.map((item, index) => {
-            const level = (item.href.split("/").slice(1).length - 1) as keyof typeof paddingMap;
-            const paddingClass = paddingMap[level] || 'pl-2';
-            const isActive = index === selectedIndex;
+            const level = (item.href.split("/").slice(1).length - 1) as keyof typeof paddingMap
+            const paddingClass = paddingMap[level] || "pl-2"
+            const isActive = index === selectedIndex
 
             return (
               <DialogClose key={item.href} asChild>
                 <Anchor
                   ref={(el) => {
-                    itemRefs.current[index] = el as HTMLDivElement | null;
+                    itemRefs.current[index] = el as HTMLDivElement | null
                   }}
                   className={cn(
-                    "dark:hover:bg-accent/15 hover:bg-accent/10 w-full px-3 rounded-sm text-sm flex items-center gap-2.5",
+                    "dark:hover:bg-accent/15 hover:bg-accent/10 flex w-full items-center gap-2.5 rounded-sm px-3 text-sm",
                     isActive && "bg-primary/20 dark:bg-primary/30",
                     paddingClass
                   )}
@@ -157,46 +157,44 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
                 >
                   <div
                     className={cn(
-                      "flex items-center w-full h-full py-3 gap-1.5 px-2 justify-between",
+                      "flex h-full w-full items-center justify-between gap-1.5 px-2 py-3",
                       level > 1 && "border-l pl-4"
                     )}
                   >
                     <div className="flex items-center">
-                      <FileTextIcon className="h-[1.1rem] w-[1.1rem] mr-1" />
+                      <FileTextIcon className="mr-1 h-[1.1rem] w-[1.1rem]" />
                       <span>{item.title}</span>
                     </div>
                     {isActive && (
-                      <div className="hidden md:flex items-center text-xs text-muted-foreground">
+                      <div className="text-muted-foreground hidden items-center text-xs md:flex">
                         <span>Return</span>
-                        <CornerDownLeftIcon className="h-3 w-3 ml-1" />
+                        <CornerDownLeftIcon className="ml-1 h-3 w-3" />
                       </div>
                     )}
                   </div>
                 </Anchor>
               </DialogClose>
-            );
+            )
           })}
         </div>
       </ScrollArea>
-      <DialogFooter className="md:flex md:justify-start hidden h-14 px-6 bg-transparent border-t text-[14px] outline-none">
+      <DialogFooter className="hidden h-14 border-t bg-transparent px-6 text-[14px] outline-none md:flex md:justify-start">
         <div className="flex items-center gap-2">
-          <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
-            <ArrowUpIcon className="w-3 h-3" />
+          <span className="dark:bg-accent/15 rounded border bg-slate-200 p-2">
+            <ArrowUpIcon className="h-3 w-3" />
           </span>
-          <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
-            <ArrowDownIcon className="w-3 h-3" />
+          <span className="dark:bg-accent/15 rounded border bg-slate-200 p-2">
+            <ArrowDownIcon className="h-3 w-3" />
           </span>
           <p className="text-muted-foreground">to navigate</p>
-          <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
-            <CornerDownLeftIcon className="w-3 h-3" />
+          <span className="dark:bg-accent/15 rounded border bg-slate-200 p-2">
+            <CornerDownLeftIcon className="h-3 w-3" />
           </span>
           <p className="text-muted-foreground">to select</p>
-          <span className="dark:bg-accent/15 bg-slate-200 border rounded px-2 py-1">
-            esc
-          </span>
+          <span className="dark:bg-accent/15 rounded border bg-slate-200 px-2 py-1">esc</span>
           <p className="text-muted-foreground">to close</p>
         </div>
       </DialogFooter>
     </DialogContent>
-  );
-}
+  )
+}

package/src/dist/components/SearchTrigger.tsx

@@ -1,31 +1,36 @@
-"use client";
+"use client"
 
-import { CommandIcon, SearchIcon } from "lucide-react";
-import { DialogTrigger } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
+import { CommandIcon, SearchIcon } from "lucide-react"
+import { DialogTrigger } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
 
-export function SearchTrigger() {
+interface SearchTriggerProps {
+  className?: string
+}
+
+export function SearchTrigger({ className }: SearchTriggerProps) {
   return (
     <DialogTrigger asChild>
-      <div className="relative flex-1 cursor-pointer">
+      <div className={cn("relative flex-1 cursor-pointer", className)}>
         <div className="flex items-center">
-          <div className="lg:hidden block p-2 -ml-2">
-            <SearchIcon className="h-6 w-6 text-muted-foreground" />
+          <div className="-ml-2 block p-2 lg:hidden">
+            <SearchIcon className="text-muted-foreground h-6 w-6" />
           </div>
-          <div className="hidden lg:block w-full">
-            <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-6 w-6 text-muted-foreground" />
+          <div className="hidden w-full lg:block">
+            <SearchIcon className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
             <Input
-              className="w-full rounded-full dark:bg-background/95 bg-background border h-9 pl-10 pr-0 sm:pr-4 text-sm shadow-sm overflow-ellipsis"
+              className="dark:bg-background/95 bg-background h-9 w-full overflow-ellipsis rounded-full border pl-10 pr-0 text-sm shadow-sm sm:pr-4"
               placeholder="Search"
               readOnly // This input is for display only
             />
-            <div className="flex absolute top-1/2 -translate-y-1/2 right-2 text-xs font-medium font-mono items-center gap-0.5 dark:bg-accent bg-accent text-white px-2 py-0.5 rounded-full">
-              <CommandIcon className="w-3 h-3" />
+            <div className="dark:bg-accent bg-accent absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-0.5 rounded-full px-2 py-0.5 font-mono text-xs font-medium text-white">
+              <CommandIcon className="h-3 w-3" />
               <span>K</span>
             </div>
           </div>
         </div>
       </div>
     </DialogTrigger>
-  );
-}
+  )
+}

package/src/dist/components/leftbar.tsx

@@ -20,7 +20,7 @@ export function Leftbar() {
       </div>
 
       <div className="flex shrink-0 items-center gap-2 px-4 pb-4">
-        <Search />
+        <Search className="min-w-[250px] max-w-[250px]" />
       </div>
 
       {/* Scrollable Navigation */}
@@ -44,7 +44,7 @@ export function SheetLeftbar() {
     <Sheet>
       <SheetTrigger asChild>
         <Button variant="ghost" size="icon" className="hidden max-md:flex">
-          <PanelRight className="h-6 w-6 shrink-0 text-muted-foreground" />
+          <PanelRight className="text-muted-foreground h-6 w-6 shrink-0" />
         </Button>
       </SheetTrigger>
       <SheetContent className="flex flex-col gap-4 px-0" side="right">

package/src/dist/components/markdown/AccordionContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, useState, useId } from "react"
+
+type AccordionGroupContextType = {
+  inGroup: boolean
+  groupId: string
+  openTitle: string | null
+  setOpenTitle: (title: string | null) => void
+}
+
+export const AccordionGroupContext = createContext<AccordionGroupContextType | null>(null)
+
+export function AccordionGroupProvider({ children }: { children: React.ReactNode }) {
+  const [openTitle, setOpenTitle] = useState<string | null>(null)
+  const groupId = useId()
+
+  return (
+    <AccordionGroupContext.Provider value={{ inGroup: true, groupId, openTitle, setOpenTitle }}>
+      {children}
+    </AccordionGroupContext.Provider>
+  )
+}

package/src/dist/components/markdown/AccordionGroupMdx.tsx

@@ -1,31 +1,20 @@
 "use client"
 
-import React, { ReactNode } from "react";
-import clsx from "clsx";
-import { AccordionGroupContext } from "@/lib/accordion-context";
+import React, { ReactNode } from "react"
+import clsx from "clsx"
+import { AccordionGroupProvider } from "@/components/markdown/AccordionContext"
 
 interface AccordionGroupProps {
-  children: ReactNode;
-  className?: string;
+  children: ReactNode
+  className?: string
 }
 
 const AccordionGroup: React.FC<AccordionGroupProps> = ({ children, className }) => {
-
   return (
-    // Wrap all children with the AccordionGroupContext.Provider
-    // so that any nested accordions know they are inside a group.
-    // This enables group-specific behavior in child components.
-    <AccordionGroupContext.Provider value={{ inGroup: true }}>
-      <div
-        className={clsx(
-          "border rounded-lg overflow-hidden",
-          className
-        )}
-      >
-        {children}
-      </div>
-    </AccordionGroupContext.Provider>
-  );
-};
+    <AccordionGroupProvider>
+      <div className={clsx("overflow-hidden rounded-lg border", className)}>{children}</div>
+    </AccordionGroupProvider>
+  )
+}
 
-export default AccordionGroup;
+export default AccordionGroup

package/src/dist/components/markdown/AccordionMdx.tsx

@@ -1,62 +1,61 @@
-"use client";
+"use client"
 
-import { ReactNode, useState, useContext } from 'react';
-import { ChevronRight } from 'lucide-react';
-import * as Icons from "lucide-react";
-import { cn } from '@/lib/utils';
-import { AccordionGroupContext } from '@/lib/accordion-context';
+import { ReactNode, useContext, useState } from "react"
+import { ChevronRight } from "lucide-react"
+import * as Icons from "lucide-react"
+import { cn } from "@/lib/utils"
+import { AccordionGroupContext } from "@/components/markdown/AccordionContext"
 
 type AccordionProps = {
-    title: string;
-    children?: ReactNode;
-    defaultOpen?: boolean;
-    icon?: keyof typeof Icons;
-};
-
-const Accordion: React.FC<AccordionProps> = ({
-    title,
-    children,
-    defaultOpen = false,
-    icon,
-}: AccordionProps) => {
-    const groupContext = useContext(AccordionGroupContext);
-    const isInGroup = groupContext?.inGroup === true;
-    const [isOpen, setIsOpen] = useState(defaultOpen);
-    const Icon = icon ? (Icons[icon] as React.FC<{ className?: string }>) : null;
-
-    // The main wrapper div for the accordion.
-    // All styling logic for the accordion container is handled here.
-    return (
-        <div
-            className={cn(
-                // Style for STANDALONE: full card with border & shadow
-                !isInGroup && "border rounded-lg shadow-sm",
-                // Style for IN GROUP: only a bottom border separator
-                isInGroup && "border-b last:border-b-0 border-border"
-            )}
-        >
-            <button
-                type="button"
-                onClick={() => setIsOpen(!isOpen)}
-                className="flex items-center gap-2 w-full px-4 py-3 transition-colors bg-muted/40 dark:bg-muted/20 hover:bg-muted/70 dark:hover:bg-muted/70 cursor-pointer text-start"
-            >
-                <ChevronRight
-                    className={cn(
-                        "w-4 h-4 text-muted-foreground transition-transform duration-200 shrink-0",
-                        isOpen && "rotate-90"
-                    )}
-                />
-                {Icon && <Icon className="text-foreground w-4 h-4 shrink-0" />}
-                <h3 className="font-medium text-base text-foreground m-0!">{title}</h3>
-            </button>
-
-            {isOpen && (
-                <div className="px-4 py-3 dark:bg-muted/10 bg-muted/15">
-                    {children}
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default Accordion;
+  title: string
+  children?: ReactNode
+  icon?: keyof typeof Icons
+}
+
+const Accordion: React.FC<AccordionProps> = ({ title, children, icon }: AccordionProps) => {
+  const groupContext = useContext(AccordionGroupContext)
+  const isInGroup = groupContext?.inGroup === true
+  const groupOpen = groupContext?.openTitle === title
+  const setGroupOpen = groupContext?.setOpenTitle
+  const [localOpen, setLocalOpen] = useState(false)
+
+  const isOpen = isInGroup ? groupOpen : localOpen
+
+  const handleToggle = () => {
+    if (isInGroup && setGroupOpen) {
+      setGroupOpen(groupOpen ? null : title)
+    } else {
+      setLocalOpen(!localOpen)
+    }
+  }
+
+  const Icon = icon ? (Icons[icon] as React.FC<{ className?: string }>) : null
+
+  return (
+    <div
+      className={cn(
+        !isInGroup && "rounded-lg border shadow-sm",
+        isInGroup && "border-border border-b last:border-b-0"
+      )}
+    >
+      <button
+        type="button"
+        onClick={handleToggle}
+        className="bg-muted/40 dark:bg-muted/20 hover:bg-muted/70 dark:hover:bg-muted/70 flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-start transition-colors"
+      >
+        <ChevronRight
+          className={cn(
+            "text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200",
+            isOpen && "rotate-90"
+          )}
+        />
+        {Icon && <Icon className="text-foreground h-4 w-4 shrink-0" />}
+        <h3 className="text-foreground m-0! text-base font-medium">{title}</h3>
+      </button>
+
+      {isOpen && <div className="dark:bg-muted/10 bg-muted/15 px-4 py-3">{children}</div>}
+    </div>
+  )
+}
+
+export default Accordion

package/src/dist/components/markdown/PreMdx.tsx

@@ -11,7 +11,7 @@ import {
   SiSwift,
   SiKotlin,
   SiHtml5,
-  SiCss3,
+  SiCss,
   SiSass,
   SiPostgresql,
   SiGraphql,
@@ -68,7 +68,7 @@ const LanguageIcon = ({ lang }: { lang: string }) => {
     js: <SiJavascript {...iconProps} />,
     javascript: <SiJavascript {...iconProps} />,
     html: <SiHtml5 {...iconProps} />,
-    css: <SiCss3 {...iconProps} />,
+    css: <SiCss {...iconProps} />,
     scss: <SiSass {...iconProps} />,
     sass: <SiSass {...iconProps} />,
   };

package/src/dist/components/navbar.tsx

@@ -33,7 +33,7 @@ export function Navbar({ id }: NavbarProps) {
               <Logo />
             </div>
           </div>
-          <div className="flex items-center md:gap-2 gap-0 max-md:flex-row-reverse">
+          <div className="flex items-center gap-0 max-md:flex-row-reverse md:gap-2">
             <div className="text-muted-foreground hidden items-center gap-4 text-sm font-medium md:flex">
               <NavMenu />
             </div>
@@ -46,9 +46,9 @@ export function Navbar({ id }: NavbarProps) {
               className="flex items-center gap-1 px-2 text-sm font-medium md:hidden"
             >
               {isMenuOpen ? (
-                <ChevronUp className="h-6 w-6 text-muted-foreground" />
+                <ChevronUp className="text-muted-foreground h-6 w-6" />
               ) : (
-                <ChevronDown className="h-6 w-6 text-muted-foreground" />
+                <ChevronDown className="text-muted-foreground h-6 w-6" />
               )}
             </Button>
 

package/src/dist/components/typography.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from "react";
 
 export function Typography({ children }: PropsWithChildren) {
   return (
-    <div className="prose prose-zinc dark:prose-invert prose-code:font-code dark:prose-code:bg-stone-900/25 prose-code:bg-stone-50 prose-pre:bg-background prose-headings:scroll-m-4 w-[85vw] sm:w-full sm:mx-auto prose-code:text-sm prose-code:leading-6 dark:prose-code:text-white prose-code:text-stone-800 prose-code:p-1 prose-code:rounded-md prose-code:border pt-2 min-w-full! prose-img:rounded-md prose-img:border prose-code:before:content-none prose-code:after:content-none prose-code:px-1.5 prose-code:overflow-x-auto max-w-[500px]! prose-img:my-3 prose-h2:my-4 prose-h2:mt-8">
+    <div className="prose prose-zinc dark:prose-invert prose-code:font-code dark:prose-code:bg-stone-900/25 prose-code:bg-stone-50 prose-pre:bg-background max-lg:prose-headings:scroll-mt-54 prose-headings:scroll-mt-4 w-[85vw] sm:w-full sm:mx-auto prose-code:text-sm prose-code:leading-6 dark:prose-code:text-white prose-code:text-stone-800 prose-code:p-1 prose-code:rounded-md prose-code:border pt-2 min-w-full! prose-img:rounded-md prose-img:border prose-code:before:content-none prose-code:after:content-none prose-code:px-1.5 prose-code:overflow-x-auto max-w-[500px]! prose-img:my-3 prose-h2:my-4 prose-h2:mt-8">
       {children}
     </div>
   );

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

@@ -8,6 +8,12 @@ export function useActiveSection(tocs: TocItem[]) {
   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
@@ -24,15 +30,19 @@ export function useActiveSection(tocs: TocItem[]) {
       }, visibleEntries[0])
 
       const newActiveId = mostVisibleEntry.target.id
-      if (newActiveId !== activeId) {
+      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: document.getElementById("scroll-container"),
-      rootMargin: "0px 0px -60% 0px",
+      root: container,
+      rootMargin: isDesktop ? "0px 0px -60% 0px" : "-160px 0px -60% 0px",
       threshold: 0,
     })
 
@@ -48,7 +58,7 @@ export function useActiveSection(tocs: TocItem[]) {
     return () => {
       observerRef.current?.disconnect()
     }
-  }, [tocs, activeId])
+  }, [tocs]) // Only depend on tocs, handle activeId via ref
 
   const handleLinkClick = useCallback((id: string) => {
     clickedIdRef.current = id

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.5.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));
@@ -31,7 +20,7 @@
   --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));
@@ -49,16 +38,12 @@
   --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: 260px;
-  height: 40px;
+  width: 250px;
+  height: 35px;
   color: hsl(var(--muted-foreground));
   transition: width 0.3s ease;
   margin: 0;
@@ -86,7 +71,6 @@
 .docsearch .DocSearch-Button-Key {
   background: var(--docsearch-primary-color);
   color: var(--docsearch-logo-color);
-  /* Menggunakan variabel yg relevan */
   border-radius: 6px;
   font-size: 14px;
   font-weight: 500;
@@ -97,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);
 }
@@ -118,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));
@@ -131,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));
@@ -144,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;

package/src/dist/lib/accordion-context.ts

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-// Create a context to check if a component is inside an accordion group
-export const AccordionGroupContext = createContext<{ inGroup: boolean } | null>(null);