@docubook/create 2.3.0 → 2.5.0

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

@@ -24,7 +24,7 @@ const FileComponent = ({ name }: FileProps) => {
       tabIndex={-1}
     >
       <FileIcon className={`
-        h-3.5 w-3.5 flex-shrink-0 transition-colors
+        h-3.5 w-3.5 shrink-0 transition-colors
         ${isHovered ? 'text-accent' : 'text-muted-foreground'}
       `} />
       <span className="font-mono text-sm text-foreground truncate">{name}</span>
@@ -61,7 +61,7 @@ const FolderComponent = ({ name, children }: FileProps) => {
         {hasChildren ? (
           <ChevronRight
             className={`
-              h-3.5 w-3.5 flex-shrink-0 transition-transform duration-200
+              h-3.5 w-3.5 shrink-0 transition-transform duration-200
               ${isOpen ? 'rotate-90' : ''}
               ${isHovered ? 'text-foreground/70' : 'text-muted-foreground'}
             `}
@@ -71,12 +71,12 @@ const FolderComponent = ({ name, children }: FileProps) => {
         )}
         {isOpen ? (
           <FolderOpen className={`
-            h-4 w-4 flex-shrink-0 transition-colors
+            h-4 w-4 shrink-0 transition-colors
             ${isHovered ? 'text-accent' : 'text-muted-foreground'}
           `} />
         ) : (
           <FolderIcon className={`
-            h-4 w-4 flex-shrink-0 transition-colors
+            h-4 w-4 shrink-0 transition-colors
             ${isHovered ? 'text-accent/80' : 'text-muted-foreground/80'}
           `} />
         )}

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

@@ -69,7 +69,7 @@ export default function Image({
                             initial={{ opacity: 0 }}
                             animate={{ opacity: 1 }}
                             exit={{ opacity: 0 }}
-                            className="fixed inset-0 z-[99999] flex items-center justify-center bg-black/90 backdrop-blur-md p-4 md:p-10 cursor-zoom-out"
+                            className="fixed inset-0 z-99999 flex items-center justify-center bg-black/90 backdrop-blur-md p-4 md:p-10 cursor-zoom-out"
                             onClick={() => setIsOpen(false)}
                         >
                             {/* Close Button */}

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

@@ -32,7 +32,7 @@ function Release({ version, title, date, children }: ReleaseProps) {
           </div>
         )}
       </div>
-      <h3 className="text-2xl font-bold text-foreground/90 mb-6 !mt-0">
+      <h3 className="text-2xl font-bold text-foreground/90 mb-6 mt-0!">
         {title}
       </h3>
       <div className="space-y-8">

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

@@ -19,7 +19,7 @@ const Tooltip: React.FC<TooltipProps> = ({ text, tip }) => {
         {text}
       </span>
       {visible && (
-        <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 bg-popover text-popover-foreground text-sm p-3 rounded-md shadow-lg border border-border/50 break-words text-left z-50">
+        <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 bg-popover text-popover-foreground text-sm p-3 rounded-md shadow-lg border border-border/50 wrap-break-word text-left z-50">
           {tip}
           <span className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-popover rotate-45 border-b border-r border-border/50 -z-10" />
         </span>

package/src/dist/components/navbar.tsx

@@ -1,87 +1,164 @@
-import { ArrowUpRight } from "lucide-react";
-import Link from "next/link";
-import Image from "next/image";
-import Search from "@/components/search";
-import Anchor from "@/components/anchor";
-import { SheetLeftbar } from "@/components/leftbar";
-import { SheetClose } from "@/components/ui/sheet";
-import { Separator } from "@/components/ui/separator";
-import docuConfig from "@/docu.json"; // Import JSON
+"use client"
 
-export function Navbar() {
+import { ArrowUpRight, ChevronDown, ChevronUp } from "lucide-react"
+import Link from "next/link"
+import Image from "next/image"
+import Search from "@/components/SearchBox"
+import Anchor from "@/components/anchor"
+import { Separator } from "@/components/ui/separator"
+import docuConfig from "@/docu.json"
+import GitHubButton from "@/components/Github"
+import { Button } from "@/components/ui/button"
+import { useState, useCallback } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import { ModeToggle } from "@/components/ThemeToggle"
+
+interface NavbarProps {
+  id?: string
+}
+
+export function Navbar({ id }: NavbarProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  const toggleMenu = useCallback(() => {
+    setIsMenuOpen((prev) => !prev)
+  }, [])
 
   return (
-    <nav className="sticky top-0 z-50 w-full h-16 border-b bg-background">
-      <div className="sm:container mx-auto w-[95vw] h-full flex items-center justify-between md:gap-2">
-        <div className="flex items-center gap-5">
-          <SheetLeftbar />
+    <div className="sticky top-0 z-50 w-full">
+      <nav id={id} className="bg-background h-16 w-full border-b">
+        <div className="mx-auto flex h-full w-[95vw] items-center justify-between sm:container md:gap-2">
           <div className="flex items-center gap-6">
-            <div className="hidden lg:flex">
+            <div className="flex">
               <Logo />
             </div>
           </div>
-        </div>
-        <div className="flex items-center gap-2">
-            <div className="items-center hidden gap-4 text-sm font-medium lg:flex text-muted-foreground">
+          <div className="flex items-center md:gap-2 gap-0 max-md:flex-row-reverse">
+            <div className="text-muted-foreground hidden items-center gap-4 text-sm font-medium md:flex">
               <NavMenu />
             </div>
-            <Separator className="hidden lg:flex my-4 h-9" orientation="vertical" />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={toggleMenu}
+              aria-label={isMenuOpen ? "Close navigation menu" : "Open navigation menu"}
+              aria-expanded={isMenuOpen}
+              className="flex items-center gap-1 px-2 text-sm font-medium md:hidden"
+            >
+              {isMenuOpen ? (
+                <ChevronUp className="h-6 w-6 text-muted-foreground" />
+              ) : (
+                <ChevronDown className="h-6 w-6 text-muted-foreground" />
+              )}
+            </Button>
+
+            <Separator className="my-4 hidden h-9 md:flex" orientation="vertical" />
             <Search />
+            <div className="hidden md:flex">
+              <GitHubButton />
+            </div>
+          </div>
         </div>
-      </div>
-    </nav>
-  );
+      </nav>
+
+      <AnimatePresence>
+        {isMenuOpen && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+            className="bg-background/95 w-full border-b shadow-sm backdrop-blur-sm md:hidden"
+          >
+            <div className="mx-auto w-[95vw] sm:container">
+              <ul className="flex flex-col py-2">
+                <NavMenuCollapsible onItemClick={() => setIsMenuOpen(false)} />
+              </ul>
+              <div className="flex items-center justify-between border-t px-1 py-3">
+                <GitHubButton />
+                <ModeToggle />
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
 }
 
 export function Logo() {
-    const { navbar } = docuConfig; // Extract navbar from JSON
+  const { navbar } = docuConfig
 
-    return (
-      <Link href="/" className="flex items-center gap-1.5">
-        <div className="relative w-8 h-8">
-          <Image
-            src={navbar.logo.src}
-            alt={navbar.logo.alt}
-            fill
-            sizes="32px"
-            className="object-contain"
-          />
-        </div>
-        <h2 className="font-bold font-code text-md">{navbar.logoText}</h2>
-      </Link>
-    );
+  return (
+    <Link href="/" className="flex items-center gap-1.5">
+      <div className="relative h-8 w-8">
+        <Image
+          src={navbar.logo.src}
+          alt={navbar.logo.alt}
+          fill
+          sizes="32px"
+          className="object-contain"
+        />
+      </div>
+      <h2 className="font-code dark:text-accent text-primary text-lg font-bold">
+        {navbar.logoText}
+      </h2>
+    </Link>
+  )
 }
 
-export function NavMenu({ isSheet = false }) {
-  const { navbar } = docuConfig; // Extract navbar from JSON
+// Desktop NavMenu — horizontal list
+export function NavMenu() {
+  const { navbar } = docuConfig
 
   return (
     <>
       {navbar?.menu?.map((item) => {
-        const isExternal = item.href.startsWith("http");
-
-        const Comp = (
+        const isExternal = item.href.startsWith("http")
+        return (
           <Anchor
             key={`${item.title}-${item.href}`}
             activeClassName="text-primary dark:text-accent md:font-semibold font-medium"
             absolute
-            className="flex items-center gap-1 text-foreground/80 hover:text-foreground transition-colors"
+            className="text-foreground/80 hover:text-foreground flex items-center gap-1 transition-colors"
             href={item.href}
             target={isExternal ? "_blank" : undefined}
             rel={isExternal ? "noopener noreferrer" : undefined}
           >
             {item.title}
-            {isExternal && <ArrowUpRight className="w-4 h-4 text-foreground/80" />}
+            {isExternal && <ArrowUpRight className="text-foreground/80 h-4 w-4" />}
           </Anchor>
-        );
-        return isSheet ? (
-          <SheetClose key={item.title + item.href} asChild>
-            {Comp}
-          </SheetClose>
-        ) : (
-          Comp
-        );
+        )
+      })}
+    </>
+  )
+}
+
+// Mobile Collapsible NavMenu — vertical list items
+function NavMenuCollapsible({ onItemClick }: { onItemClick: () => void }) {
+  const { navbar } = docuConfig
+
+  return (
+    <>
+      {navbar?.menu?.map((item) => {
+        const isExternal = item.href.startsWith("http")
+        return (
+          <li key={item.title + item.href}>
+            <Anchor
+              activeClassName="text-primary dark:text-accent font-semibold"
+              absolute
+              className="text-foreground/80 hover:text-foreground hover:bg-muted flex w-full items-center justify-between gap-2 rounded-md px-3 py-2.5 text-sm font-medium transition-colors"
+              href={item.href}
+              target={isExternal ? "_blank" : undefined}
+              rel={isExternal ? "noopener noreferrer" : undefined}
+              onClick={onItemClick}
+            >
+              {item.title}
+              {isExternal && <ArrowUpRight className="text-foreground/60 h-4 w-4 shrink-0" />}
+            </Anchor>
+          </li>
+        )
       })}
     </>
-  );
+  )
 }

package/src/dist/components/sublink.tsx

@@ -1,4 +1,4 @@
-import { EachRoute } from "@/lib/routes-config";
+import { EachRoute } from "@/lib/routes";
 import Anchor from "./anchor";
 import {
   Collapsible,

package/src/dist/components/toc.tsx

@@ -1,27 +1,29 @@
-import { getDocsTocs } from "@/lib/markdown";
-import TocObserver from "./toc-observer";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { ListIcon } from "lucide-react";
-import Sponsor from "./Sponsor";
+"use client"
 
+import TocObserver from "./TocObserver"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { ListIcon } from "lucide-react"
+import Sponsor from "./Sponsor"
+import { useActiveSection } from "@/hooks"
+import { TocItem } from "@/lib/toc"
 
-export default async function Toc({ path }: { path: string }) {
-  const tocs = await getDocsTocs(path);
+export default function Toc({ tocs }: { tocs: TocItem[] }) {
+  const { activeId, setActiveId } = useActiveSection(tocs)
 
   return (
-    <div className="lg:flex hidden toc flex-[1.5] min-w-[238px] py-5 sticky top-16 h-[calc(100vh-4rem)]">
-      <div className="flex flex-col h-full w-full px-2 gap-2 mb-auto">
+    <div className="toc flex-3 sticky top-4 hidden h-[calc(100vh-8rem)] min-w-[238px] self-start lg:flex lg:p-8">
+      <div className="mb-auto flex h-full w-full flex-col gap-2 px-2">
         <div className="flex items-center gap-2">
-          <ListIcon className="w-4 h-4" />
-          <h3 className="font-medium text-sm">On this page</h3>
+          <ListIcon className="h-4 w-4" />
+          <h3 className="text-sm font-medium">On this page</h3>
         </div>
-        <div className="flex-shrink-0 min-h-0 max-h-[calc(70vh-4rem)]">
+        <div className="max-h-[calc(70vh-2rem)] min-h-0 shrink-0">
           <ScrollArea className="h-full">
-            <TocObserver data={tocs} />
+            <TocObserver data={tocs} activeId={activeId} onActiveIdChange={setActiveId} />
           </ScrollArea>
         </div>
         <Sponsor />
       </div>
     </div>
-  );
+  )
 }

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-20 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 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">
       {children}
     </div>
   );