@docubook/create 2.4.0 → 2.5.1

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 className="min-w-[250px] max-w-[250px]" />
+      </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="text-muted-foreground h-6 w-6 shrink-0" />
         </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/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 "@/components/AccordionContext";
+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 '@/components/AccordionContext';
+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} />,
   };