@docubook/create 2.4.0 → 2.5.0

package/src/dist/components/SearchContext.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, useCallback } from "react";
+
+interface SearchContextType {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  toggle: () => void;
+}
+
+const SearchContext = createContext<SearchContextType | undefined>(undefined);
+
+export function SearchProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "k") {
+        event.preventDefault();
+        toggle();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [toggle]);
+
+  return (
+    <SearchContext.Provider value={{ isOpen, setIsOpen, toggle }}>
+      {children}
+    </SearchContext.Provider>
+  );
+}
+
+export function useSearch() {
+  const context = useContext(SearchContext);
+  if (!context) {
+    throw new Error("useSearch must be used within a SearchProvider");
+  }
+  return context;
+}

package/src/dist/components/SearchModal.tsx

@@ -110,7 +110,7 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
   }, [selectedIndex]);
 
   return (
-    <DialogContent className="p-0 max-w-[650px] sm:top-[38%] top-[45%] !rounded-md">
+    <DialogContent className="p-0 max-w-[650px] sm:top-[38%] top-[45%] rounded-md!">
       <DialogHeader>
         <DialogTitle className="sr-only">Search Documentation</DialogTitle>
         <DialogDescription className="sr-only">Search through the documentation</DialogDescription>

package/src/dist/components/SearchTrigger.tsx

@@ -7,13 +7,13 @@ import { Input } from "@/components/ui/input";
 export function SearchTrigger() {
   return (
     <DialogTrigger asChild>
-      <div className="relative flex-1 cursor-pointer max-w-[140px]">
+      <div className="relative flex-1 cursor-pointer">
         <div className="flex items-center">
-          <div className="md:hidden p-2 -ml-2">
-            <SearchIcon className="h-5 w-5 text-muted-foreground" />
+          <div className="lg:hidden block p-2 -ml-2">
+            <SearchIcon className="h-6 w-6 text-muted-foreground" />
           </div>
-          <div className="hidden md:block w-full">
-            <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <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" />
             <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"
               placeholder="Search"

package/src/dist/components/Sponsor.tsx

@@ -89,7 +89,7 @@ export function Sponsor() {
   // Safely get sponsor data with optional chaining and default values
   const sponsor = docuConfig?.sponsor || {};
   const item = sponsor?.item;
-  
+
   // Return null if required fields are missing
   if (!item?.url || !item?.image || !item?.title) {
     return null;
@@ -106,7 +106,7 @@ export function Sponsor() {
         rel="noopener noreferrer"
         className="flex flex-col justify-center gap-2 p-4 border rounded-lg hover:shadow transition-shadow"
       >
-        <div className="relative w-8 h-8 flex-shrink-0">
+        <div className="relative w-8 h-8 shrink-0">
           <Image
             src={item.image}
             alt={item.title}

package/src/dist/components/{theme-toggle.tsx → ThemeToggle.tsx}

@@ -17,9 +17,9 @@ export function ModeToggle() {
   // Jika belum mounted, jangan render apapun untuk menghindari mismatch
   if (!mounted) {
     return (
-      <div className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-1">
-        <div className="rounded-full p-1 w-8 h-8" />
-        <div className="rounded-full p-1 w-8 h-8" />
+      <div className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-0.5">
+        <div className="rounded-full p-0 w-1 h-1" />
+        <div className="rounded-full p-0 w-1 h-1" />
       </div>
     );
   }
@@ -43,29 +43,29 @@ export function ModeToggle() {
       type="single"
       value={activeTheme}
       onValueChange={handleToggle}
-      className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-1 transition-all"
+      className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-0.5 transition-all"
     >
       <ToggleGroupItem
         value="light"
-        size="sm"
+        size="xs"
         aria-label="Light Mode"
-        className={`rounded-full cursor-pointer p-1 transition-all ${activeTheme === "light"
+        className={`rounded-full cursor-pointer p-0.5 transition-all ${activeTheme === "light"
           ? "bg-primary text-primary-foreground"
           : "bg-transparent hover:bg-muted/50"
           }`}
       >
-        <Sun className="h-4 w-4" />
+        <Sun className="h-0.5 w-0.5" />
       </ToggleGroupItem>
       <ToggleGroupItem
         value="dark"
-        size="sm"
+        size="xs"
         aria-label="Dark Mode"
-        className={`rounded-full cursor-pointer p-1 transition-all ${activeTheme === "dark"
+        className={`rounded-full cursor-pointer p-0.5 transition-all ${activeTheme === "dark"
           ? "bg-primary text-primary-foreground"
           : "bg-transparent hover:bg-muted/50"
           }`}
       >
-        <Moon className="h-4 w-4" />
+        <Moon className="h-0.5 w-0.5" />
       </ToggleGroupItem>
     </ToggleGroup>
   );

package/src/dist/components/TocObserver.tsx

@@ -0,0 +1,197 @@
+"use client"
+
+import clsx from "clsx"
+import Link from "next/link"
+import { useState, useRef, useEffect, useCallback } from "react"
+import { motion } from "framer-motion"
+import { ScrollToTop } from "./ScrollToTop"
+import { TocItem } from "@/lib/toc"
+
+interface TocObserverProps {
+  data: TocItem[]
+  activeId?: string | null
+  onActiveIdChange?: (id: string | null) => void
+}
+
+export default function TocObserver({
+  data,
+  activeId: externalActiveId,
+  onActiveIdChange,
+}: TocObserverProps) {
+  const itemRefs = useRef<Map<string, HTMLAnchorElement>>(new Map())
+
+  const activeId = externalActiveId ?? null
+
+  const handleLinkClick = useCallback(
+    (id: string) => {
+      onActiveIdChange?.(id)
+    },
+    [onActiveIdChange]
+  )
+
+  // Function to check if an item has children
+  const hasChildren = (currentId: string, currentLevel: number) => {
+    const currentIndex = data.findIndex((item) => item.href.slice(1) === currentId)
+    if (currentIndex === -1 || currentIndex === data.length - 1) return false
+
+    const nextItem = data[currentIndex + 1]
+    return nextItem.level > currentLevel
+  }
+
+  // Calculate scroll progress for the active section
+  const [scrollProgress, setScrollProgress] = useState(0)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!activeId) return
+
+      const activeElement = document.getElementById(activeId)
+      if (!activeElement) return
+
+      const rect = activeElement.getBoundingClientRect()
+      const windowHeight = window.innerHeight
+      const elementTop = rect.top
+      const elementHeight = rect.height
+
+      // Calculate how much of the element is visible
+      let progress = 0
+      if (elementTop < windowHeight) {
+        progress = Math.min(1, (windowHeight - elementTop) / (windowHeight + elementHeight))
+      }
+
+      setScrollProgress(progress)
+    }
+
+    const container = document.getElementById("scroll-container") || window
+
+    container.addEventListener("scroll", handleScroll, { passive: true })
+
+    // Initial calculation
+    handleScroll()
+
+    return () => container.removeEventListener("scroll", handleScroll)
+  }, [activeId])
+
+  return (
+    <div className="relative">
+      <div className="text-foreground/70 hover:text-foreground relative text-sm transition-colors">
+        <div className="flex flex-col gap-0">
+          {data.map(({ href, level, text }, index) => {
+            const id = href.slice(1)
+            const isActive = activeId === id
+            const indent = level > 1 ? (level - 1) * 20 : 0
+            // Prefix with underscore to indicate intentionally unused
+            const _isParent = hasChildren(id, level)
+            const _isLastInLevel = index === data.length - 1 || data[index + 1].level <= level
+
+            return (
+              <div key={href} className="relative">
+                {/* Simple L-shaped connector */}
+                {level > 1 && (
+                  <div
+                    className={clsx("absolute top-0 h-full w-6", {
+                      "left-[6px]": indent === 20, // Level 2
+                      "left-[22px]": indent === 40, // Level 3
+                      "left-[38px]": indent === 60, // Level 4
+                    })}
+                  >
+                    {/* Vertical line */}
+                    <div
+                      className={clsx(
+                        "absolute left-0 top-0 h-full w-px",
+                        isActive
+                          ? "bg-primary/20 dark:bg-primary/30"
+                          : "bg-border/50 dark:bg-border/50"
+                      )}
+                    >
+                      {isActive && (
+                        <motion.div
+                          className="bg-primary absolute left-0 top-0 h-full w-full origin-top"
+                          initial={{ scaleY: 0 }}
+                          animate={{ scaleY: scrollProgress }}
+                          transition={{ duration: 0.3 }}
+                        />
+                      )}
+                    </div>
+
+                    {/* Horizontal line */}
+                    <div
+                      className={clsx(
+                        "absolute left-0 top-1/2 h-px w-6",
+                        isActive
+                          ? "bg-primary/20 dark:bg-primary/30"
+                          : "bg-border/50 dark:bg-border/50"
+                      )}
+                    >
+                      {isActive && (
+                        <motion.div
+                          className="bg-primary dark:bg-accent absolute left-0 top-0 h-full w-full origin-left"
+                          initial={{ scaleX: 0 }}
+                          animate={{ scaleX: scrollProgress }}
+                          transition={{ duration: 0.3, delay: 0.1 }}
+                        />
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                <Link
+                  href={href}
+                  onClick={() => handleLinkClick(id)}
+                  className={clsx("relative flex items-center py-2 transition-colors", {
+                    "text-primary dark:text-primary font-medium": isActive,
+                    "text-muted-foreground hover:text-foreground dark:hover:text-foreground/90":
+                      !isActive,
+                  })}
+                  style={{
+                    paddingLeft: `${indent}px`,
+                    marginLeft: level > 1 ? "12px" : "0",
+                  }}
+                  ref={(el) => {
+                    const map = itemRefs.current
+                    if (el) {
+                      map.set(id, el)
+                    } else {
+                      map.delete(id)
+                    }
+                  }}
+                >
+                  {/* Circle indicator */}
+                  <div className="relative flex h-4 w-4 shrink-0 items-center justify-center">
+                    <div
+                      className={clsx(
+                        "relative z-10 h-1.5 w-1.5 rounded-full transition-all duration-300",
+                        {
+                          "bg-primary dark:bg-primary/90 scale-100": isActive,
+                          "bg-muted-foreground/30 dark:bg-muted-foreground/30 group-hover:bg-primary/50 dark:group-hover:bg-primary/50 scale-75 group-hover:scale-100":
+                            !isActive,
+                        }
+                      )}
+                    >
+                      {isActive && (
+                        <motion.div
+                          className="bg-primary/20 dark:bg-primary/30 absolute inset-0 rounded-full"
+                          initial={{ scale: 1 }}
+                          animate={{ scale: 1.8 }}
+                          transition={{
+                            duration: 2,
+                            repeat: Infinity,
+                            repeatType: "reverse",
+                          }}
+                        />
+                      )}
+                    </div>
+                  </div>
+
+                  <span className="truncate text-sm">{text}</span>
+                </Link>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+      {/* Add scroll to top link at the bottom of TOC */}
+      <ScrollToTop className="mt-6" />
+    </div>
+  )
+}

package/src/dist/components/footer.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { ModeToggle } from "@/components/theme-toggle";
+import { ModeToggle } from "@/components/ThemeToggle";
 import docuData from "@/docu.json";
 import * as LucideIcons from "lucide-react";
 
@@ -20,21 +20,25 @@ const docuConfig = docuData as {
   footer: FooterConfig;
 };
 
-export function Footer() {
+interface FooterProps {
+  id?: string;
+}
+
+export function Footer({ id }: FooterProps) {
   const { footer } = docuConfig;
   return (
-    <footer className="w-full py-8 border-t bg-background">
+    <footer id={id} className="w-full py-8 border-t bg-background">
       <div className="container flex flex-col lg:flex-row items-center justify-between text-sm">
         <div className="flex flex-col items-center lg:items-start justify-start gap-4 w-full lg:w-3/5 text-center lg:text-left">
-            <p className="text-muted-foreground">
-                Copyright © {new Date().getFullYear()} {footer.copyright} - <MadeWith />
-            </p>
-            <div className="flex items-center justify-center lg:justify-start gap-6 mt-2 w-full">
-                <FooterButtons />
-            </div>
+          <p className="text-muted-foreground">
+            Copyright © {new Date().getFullYear()} {footer.copyright} - <MadeWith />
+          </p>
+          <div className="flex items-center justify-center lg:justify-start gap-6 mt-2 w-full">
+            <FooterButtons />
+          </div>
         </div>
         <div className="hidden lg:flex items-center justify-end lg:w-2/5">
-            <ModeToggle />
+          <ModeToggle />
         </div>
       </div>
     </footer>
@@ -79,9 +83,9 @@ export function MadeWith() {
       <span className="text-muted-foreground">Made with </span>
       <span className="text-primary">
         <Link href="https://www.docubook.pro" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 text-muted-foreground">
-            DocuBook
+          DocuBook
         </Link>
-        </span>
+      </span>
     </>
   );
 }

package/src/dist/components/leftbar.tsx

@@ -1,101 +1,73 @@
 "use client"
-import { useState } from "react";
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetTrigger,
-} from "@/components/ui/sheet";
-import { Logo, NavMenu } from "@/components/navbar";
-import { Button } from "@/components/ui/button";
-import { LayoutGrid, PanelLeftClose, PanelLeftOpen } from "lucide-react";
-import { DialogTitle, DialogDescription } from "@/components/ui/dialog";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import DocsMenu from "@/components/docs-menu";
-import { ModeToggle } from "@/components/theme-toggle";
-import ContextPopover from "@/components/context-popover";
+import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTrigger } from "@/components/ui/sheet"
+import { Logo, NavMenu } from "@/components/navbar"
+import { Button } from "@/components/ui/button"
+import { PanelRight } from "lucide-react"
+import { DialogTitle, DialogDescription } from "@/components/ui/dialog"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import DocsMenu from "@/components/DocsMenu"
+import { ModeToggle } from "@/components/ThemeToggle"
+import ContextPopover from "@/components/ContextPopover"
+import Search from "@/components/SearchBox"
+import GitHubButton from "@/components/Github"
 
-// Toggle Button Component
-export function ToggleButton({
-  collapsed,
-  onToggle
-}: {
-  collapsed: boolean,
-  onToggle: () => void
-}) {
+export function Leftbar() {
   return (
-    <div className="absolute top-0 right-0 py-6 z-10 -mt-4">
-      <Button
-        size="icon"
-        variant="outline"
-        className="cursor-pointer hover:bg-transparent hover:text-inherit border-none text-muted-foreground"
-        onClick={onToggle}
-      >
-        {collapsed ? (
-          <PanelLeftOpen size={18} />
-        ) : (
-          <PanelLeftClose size={18} />
-        )}
-      </Button>
-    </div>
-  )
-}
+    <aside className="sticky top-0 hidden h-screen w-[280px] shrink-0 flex-col lg:flex">
+      {/* Logo */}
+      <div className="flex h-14 shrink-0 items-center px-5">
+        <Logo />
+      </div>
 
-export function Leftbar() {
-  const [collapsed, setCollapsed] = useState(false);
-  const toggleCollapse = () => setCollapsed(prev => !prev);
+      <div className="flex shrink-0 items-center gap-2 px-4 pb-4">
+        <Search />
+      </div>
 
-  return (
-    <aside
-      className={`sticky lg:flex hidden top-16 h-[calc(100vh-4rem)] border-r bg-background transition-all duration-300
-      ${collapsed ? "w-[24px]" : "w-[280px]"} flex flex-col pr-2`}
-    >
-      <ToggleButton collapsed={collapsed} onToggle={toggleCollapse} />
-      {/* Scrollable Content */}
-      <ScrollArea className="flex-1 px-0.5 pb-4">
-        {!collapsed && (
-          <div className="space-y-2">
-            <ContextPopover />
-            <DocsMenu />
-          </div>
-        )}
+      {/* Scrollable Navigation */}
+      <ScrollArea className="flex-1 px-4">
+        <div className="space-y-2">
+          <ContextPopover />
+          <DocsMenu />
+        </div>
       </ScrollArea>
+
+      {/* Bottom: Theme Toggle */}
+      <div className="flex px-4 py-3">
+        <ModeToggle />
+      </div>
     </aside>
-  );
+  )
 }
 
 export function SheetLeftbar() {
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <Button variant="ghost" size="icon" className="max-lg:flex hidden">
-          <LayoutGrid />
+        <Button variant="ghost" size="icon" className="hidden max-md:flex">
+          <PanelRight className="h-6 w-6 shrink-0 text-muted-foreground" />
         </Button>
       </SheetTrigger>
-      <SheetContent className="flex flex-col gap-4 px-0" side="left">
+      <SheetContent className="flex flex-col gap-4 px-0" side="right">
         <DialogTitle className="sr-only">Navigation Menu</DialogTitle>
         <DialogDescription className="sr-only">
           Main navigation menu with links to different sections
         </DialogDescription>
         <SheetHeader>
-          <SheetClose className="px-5" asChild>
-            <span className="px-2"><Logo /></span>
+          <SheetClose className="px-4" asChild>
+            <div className="flex items-center justify-between">
+              <GitHubButton />
+              <div className="mr-8">
+                <ModeToggle />
+              </div>
+            </div>
           </SheetClose>
         </SheetHeader>
         <div className="flex flex-col gap-4 overflow-y-auto">
-          <div className="flex flex-col gap-2.5 mt-3 mx-2 px-5">
-            <NavMenu isSheet />
-          </div>
-          <div className="mx-2 px-5 space-y-2">
-            <ContextPopover />
-            <DocsMenu isSheet />
-          </div>
-          <div className="flex w-2/4 px-5">
-            <ModeToggle />
+          <div className="mx-2 mt-3 flex flex-col gap-2.5 px-5">
+            <NavMenu />
           </div>
         </div>
       </SheetContent>
     </Sheet>
-  );
+  )
 }

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

@@ -2,7 +2,7 @@
 
 import React, { ReactNode } from "react";
 import clsx from "clsx";
-import { AccordionGroupContext } from "@/components/AccordionContext";
+import { AccordionGroupContext } from "@/lib/accordion-context";
 
 interface AccordionGroupProps {
   children: ReactNode;

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

@@ -4,7 +4,7 @@ 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 '@/components/AccordionContext';
+import { AccordionGroupContext } from '@/lib/accordion-context';
 
 type AccordionProps = {
     title: string;