@docubook/create 2.4.0 → 2.5.0

package/package.json

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

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

@@ -1,46 +1,42 @@
-import { notFound } from "next/navigation";
-import { getDocsForSlug, getDocsTocs } from "@/lib/markdown";
-import DocsBreadcrumb from "@/components/docs-breadcrumb";
-import Pagination from "@/components/pagination";
-import Toc from "@/components/toc";
-import { Typography } from "@/components/typography";
-import EditThisPage from "@/components/edit-on-github";
-import { formatDate2 } from "@/lib/utils";
-import docuConfig from "@/docu.json";
-import MobToc from "@/components/mob-toc";
+import { notFound } from "next/navigation"
+import { getDocsForSlug, getDocsTocs } from "@/lib/markdown"
+import DocsBreadcrumb from "@/components/DocsBreadcrumb"
+import Pagination from "@/components/pagination"
+import Toc from "@/components/toc"
+import { Typography } from "@/components/typography"
+import EditThisPage from "@/components/EditWithGithub"
+import { formatDate2 } from "@/lib/utils"
+import docuConfig from "@/docu.json"
+import MobToc from "@/components/DocsSidebar"
 
-const { meta } = docuConfig;
+const { meta } = docuConfig
 
 type PageProps = {
   params: Promise<{
-    slug: string[];
-  }>;
-};
+    slug: string[]
+  }>
+}
 
 // Function to generate metadata dynamically
 export async function generateMetadata(props: PageProps) {
-  const params = await props.params;
+  const params = await props.params
 
-  const {
-    slug = []
-  } = params;
+  const { slug = [] } = params
 
-  const pathName = slug.join("/");
-  const res = await getDocsForSlug(pathName);
+  const pathName = slug.join("/")
+  const res = await getDocsForSlug(pathName)
 
   if (!res) {
     return {
       title: "Page Not Found",
       description: "The requested page was not found.",
-    };
+    }
   }
 
-  const { title, description, image } = res.frontmatter;
+  const { title, description, image } = res.frontmatter
 
   // Absolute URL for og:image
-  const ogImage = image
-    ? `${meta.baseURL}/images/${image}`
-    : `${meta.baseURL}/images/og-image.png`;
+  const ogImage = image ? `${meta.baseURL}/images/${image}` : `${meta.baseURL}/images/og-image.png`
 
   return {
     title: `${title}`,
@@ -65,49 +61,49 @@ export async function generateMetadata(props: PageProps) {
       description,
       images: [ogImage],
     },
-  };
+  }
 }
 
 export default async function DocsPage(props: PageProps) {
-  const params = await props.params;
+  const params = await props.params
 
-  const {
-    slug = []
-  } = params;
+  const { slug = [] } = params
 
-  const pathName = slug.join("/");
-  const res = await getDocsForSlug(pathName);
+  const pathName = slug.join("/")
+  const res = await getDocsForSlug(pathName)
 
-  if (!res) notFound();
+  if (!res) notFound()
 
-  const { title, description, image: _image, date } = res.frontmatter;
-  const filePath = res.filePath;
-  const tocs = await getDocsTocs(pathName);
+  const { title, description, image: _image, date } = res.frontmatter
+  const filePath = res.filePath
+  const tocs = await getDocsTocs(pathName)
 
   return (
-    <div className="flex items-start gap-10">
-      <div className="flex-[4.5] pt-5">
-        <MobToc tocs={tocs} />
-        <DocsBreadcrumb paths={slug} />
-        <Typography>
-          <h1 className="text-3xl -mt-0.5!">{title}</h1>
-          <p className="-mt-4 text-muted-foreground text-[16.5px]">{description}</p>
-          <div>{res.content}</div>
-          <div
-            className={`my-8 flex items-center border-b-2 border-dashed border-x-muted-foreground ${docuConfig.repository?.editLink ? "justify-between" : "justify-end"
-              }`}
-          >
-            {docuConfig.repository?.editLink && <EditThisPage filePath={filePath} />}
-            {date && (
-              <p className="text-[13px] text-muted-foreground">
-                Published on {formatDate2(date)}
-              </p>
-            )}
-          </div>
-          <Pagination pathname={pathName} />
-        </Typography>
+    <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-7 w-full min-w-0 px-4 py-4 lg:px-8 lg:py-8">
+          <MobToc tocs={tocs} />
+          <DocsBreadcrumb paths={slug} />
+          <Typography>
+            <h1 className="-mt-0.5! text-3xl">{title}</h1>
+            <p className="text-muted-foreground -mt-4 text-[16.5px]">{description}</p>
+            <div>{res.content}</div>
+            <div
+              className={`border-x-muted-foreground my-8 flex items-center border-b-2 border-dashed ${docuConfig.repository?.editLink ? "justify-between" : "justify-end"
+                }`}
+            >
+              {docuConfig.repository?.editLink && <EditThisPage filePath={filePath} />}
+              {date && (
+                <p className="text-muted-foreground text-[13px]">
+                  Published on {formatDate2(date)}
+                </p>
+              )}
+            </div>
+            <Pagination pathname={pathName} />
+          </Typography>
+        </div>
+        <Toc tocs={tocs} />
       </div>
-      <Toc path={pathName} />
     </div>
-  );
+  )
 }

package/src/dist/app/docs/layout.tsx

@@ -1,4 +1,6 @@
 import { Leftbar } from "@/components/leftbar";
+import DocsNavbar from "@/components/DocsNavbar";
+import "@/styles/override.css";
 
 export default function DocsLayout({
   children,
@@ -6,10 +8,15 @@ export default function DocsLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="flex items-start gap-8">
-      <Leftbar key="leftbar" />
-      <div className="flex-[5.25] px-1">
-        {children}
+    <div className="docs-layout flex flex-col min-h-screen w-full">
+      <div className="flex flex-1 items-start w-full">
+        <Leftbar key="leftbar" />
+        <main className="flex-1 min-w-0 dark:bg-background/50 min-h-screen flex flex-col">
+          <DocsNavbar />
+          <div className="flex-1 w-full">
+            {children}
+          </div>
+        </main>
       </div>
     </div>
   );

package/src/dist/app/layout.tsx

@@ -1,13 +1,14 @@
 import type { Metadata } from "next";
-import { ThemeProvider } from "@/components/theme-provider";
+import { ThemeProvider } from "@/components/ThemeProvider";
 import { Navbar } from "@/components/navbar";
 import { GeistSans } from "geist/font/sans";
 import { GeistMono } from "geist/font/mono";
 import { Footer } from "@/components/footer";
+import { SearchProvider } from "@/components/SearchContext";
 import docuConfig from "@/docu.json";
 import "@docsearch/css";
 import "@/styles/algolia.css";
-import "@/styles/syntax.css";
+import "@/styles/override.css";
 import "@/styles/globals.css";
 
 const { meta } = docuConfig;
@@ -85,11 +86,13 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <Navbar />
-          <main className="sm:container mx-auto w-[90vw] h-auto scroll-smooth">
-            {children}
-          </main>
-          <Footer />
+          <SearchProvider>
+            <Navbar id="main-navbar" />
+            <main id="main-content" className="sm:container mx-auto w-[90vw] h-auto scroll-smooth">
+              {children}
+            </main>
+            <Footer id="main-footer" />
+          </SearchProvider>
         </ThemeProvider>
       </body>
     </html>

package/src/dist/app/page.tsx

@@ -11,7 +11,7 @@ export const metadata = getMetadata({
 
 export default function Home() {
   return (
-    <div className="flex flex-col items-center justify-center px-2 py-8 text-center sm:py-36">
+    <div className="flex flex-col items-center justify-center px-2 py-36 text-center">
       <div className="w-full max-w-[800px] pb-8">
         <h1 className="mb-4 text-2xl font-bold sm:text-5xl">DocuBook Starter Templates</h1>
         <p className="mb-8 sm:text-xl text-muted-foreground">

package/src/dist/components/{context-popover.tsx → ContextPopover.tsx}

@@ -8,6 +8,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Button } from "@/components/ui/button";
 import * as LucideIcons from "lucide-react";
 import { ChevronsUpDown, Check, type LucideIcon } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
 
 interface ContextPopoverProps {
   className?: string;
@@ -62,7 +63,7 @@ export default function ContextPopover({ className }: ContextPopoverProps) {
         <Button
           variant="ghost"
           className={cn(
-            "w-full max-w-[240px] cursor-pointer flex items-center justify-between font-semibold text-foreground px-0 pt-8",
+            "w-full cursor-pointer flex items-center justify-between font-semibold text-foreground px-2 py-4 border border-muted",
             "hover:bg-transparent hover:text-foreground",
             className
           )}
@@ -74,7 +75,7 @@ export default function ContextPopover({ className }: ContextPopoverProps) {
               </span>
             )}
             <span className="truncate text-sm">
-              {activeRoute?.context?.title || activeRoute?.title || 'Select context'}
+              {activeRoute?.context?.title || activeRoute?.title || <Skeleton className="h-3.5 w-24" />}
             </span>
           </div>
           <ChevronsUpDown className="h-4 w-4 text-foreground/50" />

package/src/dist/components/{docs-breadcrumb.tsx → DocsBreadcrumb.tsx}

@@ -10,7 +10,7 @@ import { Fragment } from "react";
 
 export default function DocsBreadcrumb({ paths }: { paths: string[] }) {
   return (
-    <div className="pb-5 max-lg:pt-12">
+    <div className="pb-5 max-lg:pt-6">
       <Breadcrumb>
         <BreadcrumbList>
           <BreadcrumbItem>

package/src/dist/components/DocsNavbar.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { ArrowUpRight } from "lucide-react";
+import GitHubButton from "@/components/Github";
+import Anchor from "@/components/anchor";
+import docuConfig from "@/docu.json";
+
+interface NavbarItem {
+  title: string;
+  href: string;
+}
+
+const { navbar } = docuConfig;
+
+export function DocsNavbar() {
+  // Show all nav items
+  const navItems = navbar?.menu || [];
+
+  return (
+    <div className="hidden lg:flex items-center justify-end gap-6 h-14 px-8 mt-2">
+      {/* Navigation Links */}
+      <div className="flex items-center gap-6 text-sm font-medium text-foreground/80">
+        {navItems.map((item: NavbarItem) => {
+          const isExternal = item.href.startsWith("http");
+          return (
+            <Anchor
+              key={`${item.title}-${item.href}`}
+              href={item.href}
+              absolute
+              activeClassName="text-primary dark:text-accent md:font-semibold font-medium"
+              className="flex items-center gap-1 hover:text-foreground transition-colors"
+              target={isExternal ? "_blank" : undefined}
+              rel={isExternal ? "noopener noreferrer" : undefined}
+            >
+              {item.title}
+              {isExternal && <ArrowUpRight className="w-3.5 h-3.5" />}
+            </Anchor>
+          );
+        })}
+        <GitHubButton />
+      </div>
+    </div>
+  );
+}
+
+export default DocsNavbar;

package/src/dist/components/DocsSidebar.tsx

@@ -0,0 +1,196 @@
+"use client"
+
+import { ChevronDown, ChevronUp, PanelRight, MoreVertical } from "lucide-react"
+import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTrigger } from "@/components/ui/sheet"
+import DocsMenu from "@/components/DocsMenu"
+import { ModeToggle } from "@/components/ThemeToggle"
+import { DialogTitle, DialogDescription } from "@/components/ui/dialog"
+import ContextPopover from "@/components/ContextPopover"
+import TocObserver from "./TocObserver"
+import * as React from "react"
+import { useRef, useMemo } from "react"
+import { usePathname } from "next/navigation"
+import { Button } from "./ui/button"
+import { motion, AnimatePresence } from "framer-motion"
+import { useActiveSection } from "@/hooks"
+import { TocItem } from "@/lib/toc"
+import Search from "@/components/SearchBox"
+import GitHubButton from "@/components/Github"
+import { NavMenu } from "@/components/navbar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+interface MobTocProps {
+  tocs: TocItem[]
+}
+
+const useClickOutside = (ref: React.RefObject<HTMLElement | null>, callback: () => void) => {
+  const handleClick = React.useCallback(
+    (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callback()
+      }
+    },
+    [ref, callback]
+  )
+
+  React.useEffect(() => {
+    document.addEventListener("mousedown", handleClick)
+    return () => {
+      document.removeEventListener("mousedown", handleClick)
+    }
+  }, [handleClick])
+}
+
+export default function MobToc({ tocs }: MobTocProps) {
+  const pathname = usePathname()
+  const [isExpanded, setIsExpanded] = React.useState(false)
+  const tocRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  // Use custom hooks
+  const { activeId, setActiveId } = useActiveSection(tocs)
+
+  // 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() || ""
+
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  // Toggle expanded state
+  const toggleExpanded = React.useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    setIsExpanded((prev) => !prev)
+  }, [])
+
+  // Close TOC when clicking outside
+  useClickOutside(tocRef, () => {
+    if (isExpanded) {
+      setIsExpanded(false)
+    }
+  })
+
+  // Handle body overflow when TOC is expanded
+  React.useEffect(() => {
+    if (isExpanded) {
+      document.body.style.overflow = "hidden"
+    } else {
+      document.body.style.overflow = ""
+    }
+
+    return () => {
+      document.body.style.overflow = ""
+    }
+  }, [isExpanded])
+
+  // Don't render anything if not on docs page
+  if (!isDocsPage || !mounted) return null
+
+  const chevronIcon = isExpanded ? (
+    <ChevronUp className="text-muted-foreground h-4 w-4 shrink-0" />
+  ) : (
+    <ChevronDown className="text-muted-foreground h-4 w-4 shrink-0" />
+  )
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        ref={tocRef}
+        className="sticky top-0 z-50 -mx-4 -mt-4 mb-4 lg:hidden"
+        initial={{ y: -100, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        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="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>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="flex flex-col gap-1 p-2 min-w-[160px]">
+                  <NavMenu />
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="-mx-1 h-auto flex-1 justify-between rounded-md px-2 py-2 hover:bg-transparent hover:text-inherit"
+                onClick={toggleExpanded}
+                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>
+                </div>
+                {chevronIcon}
+              </Button>
+              <Search />
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button variant="ghost" size="icon" className="hidden max-lg:flex">
+                    <PanelRight className="h-6 w-6 shrink-0 text-muted-foreground" />
+                  </Button>
+                </SheetTrigger>
+                <SheetContent className="w-full flex 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
+                  </DialogDescription>
+                  <SheetHeader>
+                    <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="mx-2 space-y-2 px-5">
+                      <ContextPopover />
+                      <DocsMenu isSheet />
+                    </div>
+                  </div>
+                </SheetContent>
+              </Sheet>
+            </div>
+
+            <AnimatePresence>
+              {isExpanded && (
+                <motion.div
+                  ref={contentRef}
+                  className="-mx-1 mt-2 max-h-[60vh] overflow-y-auto px-1 pb-2"
+                  initial={{ opacity: 0, height: 0 }}
+                  animate={{ opacity: 1, height: "auto" }}
+                  exit={{ opacity: 0, height: 0 }}
+                  transition={{ duration: 0.2, ease: "easeInOut" }}
+                >
+                  {tocs?.length ? (
+                    <TocObserver data={tocs} activeId={activeId} onActiveIdChange={setActiveId} />
+                  ) : (
+                    <p className="text-muted-foreground py-2 text-sm">No headings</p>
+                  )}
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  )
+}

package/src/dist/components/Github.tsx

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+import docuConfig from "@/docu.json";
+
+export default function GitHubButton() {
+  const { repository } = docuConfig;
+
+  return (
+    <Link
+      href={repository.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex items-center rounded-full p-1 text-sm font-medium text-muted-foreground border no-underline hover:bg-muted/50 transition-colors"
+      aria-label="View on GitHub"
+    >
+      <svg
+        height="16"
+        width="16"
+        viewBox="0 0 16 16"
+        aria-hidden="true"
+        className="fill-current"
+      >
+        <path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 005.47 7.59c.4.07.55-.17.55-.38v-1.32c-2.22.48-2.69-1.07-2.69-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.06-.49.06-.49.81.06 1.23.83 1.23.83.72 1.23 1.89.88 2.35.67.07-.52.28-.88.5-1.08-1.77-.2-3.64-.88-3.64-3.93 0-.87.31-1.58.82-2.14-.08-.2-.36-1.01.08-2.12 0 0 .67-.21 2.2.82a7.7 7.7 0 012.01-.27 7.7 7.7 0 012.01.27c1.53-1.03 2.2-.82 2.2-.82.44 1.11.16 1.92.08 2.12.51.56.82 1.27.82 2.14 0 3.06-1.87 3.73-3.65 3.93.29.25.54.73.54 1.48v2.2c0 .21.15.46.55.38A8 8 0 0016 8c0-4.42-3.58-8-8-8z" />
+      </svg>
+    </Link>
+  );
+}

package/src/dist/components/{scroll-to-top.tsx → ScrollToTop.tsx}

@@ -19,10 +19,14 @@ export function ScrollToTop({
   const [isVisible, setIsVisible] = useState(false);
 
   const checkScroll = useCallback(() => {
+    // Check local scroll container or document
+    const container = document.getElementById("scroll-container");
+    const scrollY = container ? container.scrollTop : window.scrollY;
+
     // Calculate 50% of viewport height
     const halfViewportHeight = window.innerHeight * 0.5;
     // Check if scrolled past half viewport height (plus any offset)
-    const scrolledPastHalfViewport = window.scrollY > (halfViewportHeight + offset);
+    const scrolledPastHalfViewport = scrollY > (halfViewportHeight + offset);
 
     // Only update state if it changes to prevent unnecessary re-renders
     if (scrolledPastHalfViewport !== isVisible) {
@@ -42,21 +46,24 @@ export function ScrollToTop({
       timeoutId = setTimeout(checkScroll, 100);
     };
 
-    window.addEventListener('scroll', handleScroll, { passive: true });
+    const container = document.getElementById("scroll-container") || window;
+    container.addEventListener('scroll', handleScroll, { passive: true });
 
     // Cleanup
     return () => {
-      window.removeEventListener('scroll', handleScroll);
+      container.removeEventListener('scroll', handleScroll);
       if (timeoutId) clearTimeout(timeoutId);
     };
   }, [checkScroll]);
 
   const scrollToTop = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    });
+    const container = document.getElementById("scroll-container");
+    if (container) {
+      container.scrollTo({ top: 0, behavior: 'smooth' });
+    } else {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
   }, []);
 
   if (!isVisible) return null;
@@ -75,11 +82,11 @@ export function ScrollToTop({
         onClick={scrollToTop}
         className={cn(
           "inline-flex items-center text-sm text-muted-foreground hover:text-foreground",
-          "transition-all duration-200 hover:translate-y-[-1px]"
+          "transition-all duration-200 hover:translate-y-px"
         )}
         aria-label="Scroll to top"
       >
-        {showIcon && <ArrowUpIcon className="mr-1 h-3.5 w-3.5 flex-shrink-0" />}
+        {showIcon && <ArrowUpIcon className="mr-1 h-3.5 w-3.5 shrink-0" />}
         <span>Scroll to Top</span>
       </Link>
     </div>

package/src/dist/components/SearchBox.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { Dialog } from "@/components/ui/dialog"
+import { SearchTrigger } from "@/components/SearchTrigger"
+import { SearchModal } from "@/components/SearchModal"
+import DocSearchComponent from "@/components/DocSearch"
+import { useSearch } from "./SearchContext"
+import { DialogTrigger } from "@/components/ui/dialog"
+
+interface SearchProps {
+  /**
+   * Specify which search engine to use.
+   * @default 'default'
+   */
+  type?: "default" | "algolia"
+}
+
+export default function Search({ type = "default" }: SearchProps) {
+  const { isOpen, setIsOpen } = useSearch()
+
+  if (type === "algolia") {
+    // Just render the component without passing any state props
+    return <DocSearchComponent />
+  }
+
+  // Logic for 'default' search
+  return (
+    <div>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogTrigger asChild>
+          <SearchTrigger />
+        </DialogTrigger>
+        <SearchModal isOpen={isOpen} setIsOpen={setIsOpen} />
+      </Dialog>
+    </div>
+  )
+}