@docubook/create 1.9.0 → 1.11.2

package/src/dist/components/navbar.tsx

@@ -0,0 +1,87 @@
+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
+
+export function Navbar() {
+
+  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="flex items-center gap-6">
+            <div className="hidden lg: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">
+              <NavMenu />
+            </div>
+            <Separator className="hidden lg:flex my-4 h-9" orientation="vertical" />
+            <Search />
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export function Logo() {
+    const { navbar } = docuConfig; // Extract navbar from JSON
+
+    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>
+    );
+}
+
+export function NavMenu({ isSheet = false }) {
+  const { navbar } = docuConfig; // Extract navbar from JSON
+
+  return (
+    <>
+      {navbar?.menu?.map((item) => {
+        const isExternal = item.href.startsWith("http");
+
+        const Comp = (
+          <Anchor
+            key={`${item.title}-${item.href}`}
+            activeClassName="!text-primary md:font-semibold font-medium"
+            absolute
+            className="flex items-center gap-1 dark:text-stone-300/85 text-stone-800"
+            href={item.href}
+            target={isExternal ? "_blank" : undefined}
+            rel={isExternal ? "noopener noreferrer" : undefined}
+          >
+            {item.title}
+            {isExternal && <ArrowUpRight className="w-4 h-4 text-muted-foreground" />}
+          </Anchor>
+        );
+        return isSheet ? (
+          <SheetClose key={item.title + item.href} asChild>
+            {Comp}
+          </SheetClose>
+        ) : (
+          Comp
+        );
+      })}
+    </>
+  );
+}

package/src/dist/components/pagination.tsx

@@ -0,0 +1,49 @@
+import { getPreviousNext } from "@/lib/markdown";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import Link from "next/link";
+import { buttonVariants } from "@/components/ui/button";
+
+export default function Pagination({ pathname }: { pathname: string }) {
+  const res = getPreviousNext(pathname);
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 flex-grow sm:py-10 py-7 gap-3">
+      <div>
+        {res.prev && (
+          <Link
+            className={buttonVariants({
+              variant: "outline",
+              className:
+                "no-underline w-full flex flex-col pl-3 !py-8 !items-start",
+            })}
+            href={`/docs${res.prev.href}`}
+          >
+            <span className="flex items-center text-xs">
+              <ChevronLeftIcon className="w-[1rem] h-[1rem] mr-1" />
+              Previous
+            </span>
+            <span className="mt-1 ml-1">{res.prev.title}</span>
+          </Link>
+        )}
+      </div>
+      <div>
+        {res.next && (
+          <Link
+            className={buttonVariants({
+              variant: "outline",
+              className:
+                "no-underline w-full flex flex-col pr-3 !py-8 !items-end",
+            })}
+            href={`/docs${res.next.href}`}
+          >
+            <span className="flex items-center text-xs">
+              Next
+              <ChevronRightIcon className="w-[1rem] h-[1rem] ml-1" />
+            </span>
+            <span className="mt-1 mr-1">{res.next.title}</span>
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/dist/components/scroll-to-top.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { ArrowUpIcon } from "lucide-react";
+import { useEffect, useState, useCallback } from "react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+interface ScrollToTopProps {
+  className?: string;
+  showIcon?: boolean;
+  offset?: number; // Optional offset in pixels from the trigger point
+}
+
+export function ScrollToTop({
+  className,
+  showIcon = true,
+  offset = 0
+}: ScrollToTopProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const checkScroll = useCallback(() => {
+    // 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);
+
+    // Only update state if it changes to prevent unnecessary re-renders
+    if (scrolledPastHalfViewport !== isVisible) {
+      setIsVisible(scrolledPastHalfViewport);
+    }
+  }, [isVisible, offset]);
+
+  useEffect(() => {
+    // Initial check
+    checkScroll();
+
+    // Set up scroll listener with debounce for better performance
+    let timeoutId: NodeJS.Timeout;
+    const handleScroll = () => {
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(checkScroll, 100);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [checkScroll]);
+
+  const scrollToTop = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  }, []);
+
+  if (!isVisible) return null;
+
+  return (
+    <div
+      className={cn(
+        "mt-4 pt-4 border-t border-stone-200 dark:border-stone-800",
+        "transition-opacity duration-300",
+        isVisible ? 'opacity-100' : 'opacity-0',
+        className
+      )}
+    >
+      <Link
+        href="#"
+        onClick={scrollToTop}
+        className={cn(
+          "inline-flex items-center text-sm text-muted-foreground hover:text-foreground",
+          "transition-all duration-200 hover:translate-y-[-1px]"
+        )}
+        aria-label="Scroll to top"
+      >
+        {showIcon && <ArrowUpIcon className="mr-1 h-3.5 w-3.5 flex-shrink-0" />}
+        <span>Scroll to Top</span>
+      </Link>
+    </div>
+  );
+}

package/src/dist/components/search.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState, useRef } from "react";
+import { ArrowUpIcon, ArrowDownIcon, CommandIcon, FileTextIcon, SearchIcon, CornerDownLeftIcon } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTrigger,
+  DialogClose,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import Anchor from "./anchor";
+import { advanceSearch, cn } from "@/lib/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+export default function Search() {
+  const router = useRouter();
+  const [searchedInput, setSearchedInput] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "k") {
+        event.preventDefault();
+        setIsOpen(true);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  const filteredResults = useMemo(
+    () => advanceSearch(searchedInput.trim()),
+    [searchedInput]
+  );
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [filteredResults]);
+
+  useEffect(() => {
+    const handleNavigation = (event: KeyboardEvent) => {
+      if (!isOpen || filteredResults.length === 0) return;
+
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setSelectedIndex((prev) => (prev + 1) % filteredResults.length);
+      }
+
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setSelectedIndex((prev) => (prev - 1 + filteredResults.length) % filteredResults.length);
+      }
+
+      if (event.key === "Enter") {
+        event.preventDefault();
+        const selectedItem = filteredResults[selectedIndex];
+        if (selectedItem) {
+          router.push(`/docs${selectedItem.href}`);
+          setIsOpen(false);
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleNavigation);
+    return () => {
+      window.removeEventListener("keydown", handleNavigation);
+    };
+  }, [isOpen, filteredResults, selectedIndex, router]);
+
+    useEffect(() => {
+    if (itemRefs.current[selectedIndex]) {
+      itemRefs.current[selectedIndex]?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+    }
+  }, [selectedIndex]);
+
+  return (
+    <div>
+      <Dialog
+        open={isOpen}
+        onOpenChange={(open) => {
+          if (!open) setSearchedInput("");
+          setIsOpen(open);
+        }}
+      >
+        <DialogTrigger asChild>
+          <div className="relative flex-1 cursor-pointer max-w-[140px]">
+            <div className="flex items-center">
+              <div className="md:hidden p-2 -ml-2">
+                <SearchIcon className="h-5 w-5 text-stone-500 dark:text-stone-400" />
+              </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-stone-500 dark:text-stone-400" />
+                <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"
+                  type="search"
+                />
+                <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" />
+                  <span>K</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </DialogTrigger>
+        <DialogContent className="p-0 max-w-[650px] sm:top-[38%] top-[45%] !rounded-md">
+          <DialogHeader>
+            <DialogTitle className="sr-only">Search Documentation</DialogTitle>
+          </DialogHeader>
+            <DialogDescription className="sr-only">
+              Search through the documentation
+            </DialogDescription>
+            <input
+              value={searchedInput}
+              onChange={(e) => setSearchedInput(e.target.value)}
+              placeholder="Type something to search..."
+              autoFocus
+              className="h-14 px-6 bg-transparent border-b text-[14px] outline-none w-full"
+              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>
+            </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">
+              {filteredResults.map((item, index) => {
+                const level = (item.href.split("/").slice(1).length - 1) as keyof typeof paddingMap;
+                const paddingClass = paddingMap[level];
+                const isActive = index === selectedIndex;
+
+                return (
+                    <DialogClose key={item.href} asChild>
+                        <Anchor
+                        ref={(el) => {
+                            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",
+                            isActive && "bg-primary/20 dark:bg-primary/30",
+                            paddingClass
+                        )}
+                        href={`/docs${item.href}`}
+                        tabIndex={0}
+                        >
+                        <div
+                            className={cn(
+                            "flex items-center w-full h-full py-3 gap-1.5 px-2 justify-between",
+                            level > 1 && "border-l pl-4"
+                            )}
+                        >
+                            <div className="flex items-center">
+                              <FileTextIcon className="h-[1.1rem] w-[1.1rem] mr-1" />
+                              <span>{item.title}</span>
+                            </div>
+                            {isActive && (
+                              <div className="hidden md:flex items-center text-xs text-muted-foreground">
+                                <span>Return</span>
+                                <CornerDownLeftIcon className="h-3 w-3 ml-1" />
+                              </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">
+            <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>
+              <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
+                <ArrowDownIcon className="w-3 h-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>
+              <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>
+              <p className="text-muted-foreground">to close</p>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+const paddingMap = {
+  1: "pl-2",
+  2: "pl-4",
+  3: "pl-10",
+} as const;

package/src/dist/components/sublink.tsx

@@ -0,0 +1,133 @@
+import { EachRoute } from "@/lib/routes-config";
+import Anchor from "./anchor";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { SheetClose } from "@/components/ui/sheet";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useEffect, useState, useMemo } from "react";
+import { usePathname } from "next/navigation";
+
+interface SubLinkProps extends EachRoute {
+  level: number;
+  isSheet: boolean;
+  parentHref?: string;
+}
+
+export default function SubLink({
+  title,
+  href,
+  items,
+  noLink,
+  level,
+  isSheet,
+  parentHref = "",
+}: SubLinkProps) {
+  const path = usePathname();
+  const [isOpen, setIsOpen] = useState(level === 0);
+
+  // Full path including parent's href
+  const fullHref = `${parentHref}${href}`;
+
+  // Check if current path exactly matches this link's href
+  const isExactActive = useMemo(() => path === fullHref, [path, fullHref]);
+
+  // Check if any child is active (for parent items)
+  const hasActiveChild = useMemo(() => {
+    if (!items) return false;
+    return items.some(item => {
+      const childHref = `${fullHref}${item.href}`;
+      return path.startsWith(childHref) && path !== fullHref;
+    });
+  }, [items, path, fullHref]);
+
+  // Auto-expand if current path is a child of this item
+  useEffect(() => {
+    if (items && (path.startsWith(fullHref) && path !== fullHref)) {
+      setIsOpen(true);
+    }
+  }, [path, fullHref, items]);
+
+  // Only apply active styles if it's an exact match and not a parent with active children
+  const Comp = useMemo(() => (
+    <Anchor
+      activeClassName={!hasActiveChild ? "text-primary font-medium" : ""}
+      href={fullHref}
+      className={cn(
+        hasActiveChild && "font-medium text-foreground"
+      )}
+    >
+      {title}
+    </Anchor>
+  ), [title, fullHref, hasActiveChild]);
+
+  const titleOrLink = !noLink ? (
+    isSheet ? (
+      <SheetClose asChild>{Comp}</SheetClose>
+    ) : (
+      Comp
+    )
+  ) : (
+    <h4 className={cn(
+      "font-medium sm:text-sm",
+      hasActiveChild ? "text-foreground" : "text-primary"
+    )}>
+      {title}
+    </h4>
+  );
+
+  if (!items) {
+    return <div className="flex flex-col">{titleOrLink}</div>;
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-1 w-full")}>
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <CollapsibleTrigger
+          className="w-full pr-5 text-left"
+          aria-expanded={isOpen}
+          aria-controls={`collapsible-${fullHref.replace(/[^a-zA-Z0-9]/g, '-')}`}
+        >
+          <div className="flex items-center justify-between w-full">
+            {titleOrLink}
+            <span className="ml-2">
+              {!isOpen ? (
+                <ChevronRight className="h-[0.9rem] w-[0.9rem]" aria-hidden="true" />
+              ) : (
+                <ChevronDown className="h-[0.9rem] w-[0.9rem]" aria-hidden="true" />
+              )}
+            </span>
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent
+          id={`collapsible-${fullHref.replace(/[^a-zA-Z0-9]/g, '-')}`}
+          className={cn(
+            "overflow-hidden transition-all duration-200 ease-in-out",
+            isOpen ? "animate-collapsible-down" : "animate-collapsible-up"
+          )}
+        >
+          <div
+            className={cn(
+              "flex flex-col items-start sm:text-sm dark:text-stone-300/85 text-stone-800 ml-0.5 mt-2.5 gap-3",
+              level > 0 && "pl-4 border-l ml-1.5"
+            )}
+          >
+            {items?.map((innerLink) => (
+              <SubLink
+                key={`${fullHref}${innerLink.href}`}
+                {...innerLink}
+                href={innerLink.href}
+                level={level + 1}
+                isSheet={isSheet}
+                parentHref={fullHref}
+              />
+            ))}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}

package/src/dist/components/theme-toggle.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun, Monitor } from "lucide-react";
+import { useTheme } from "next-themes";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+export function ModeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [selectedTheme, setSelectedTheme] = React.useState<string>("system");
+
+  // Pastikan toggle tetap di posisi yang benar setelah reload
+  React.useEffect(() => {
+    if (theme) {
+      setSelectedTheme(theme);
+    } else {
+      setSelectedTheme("system"); // Default ke system jika undefined
+    }
+  }, [theme]);
+
+  return (
+    <ToggleGroup
+      type="single"
+      value={selectedTheme}
+      onValueChange={(value) => {
+        if (value) {
+          setTheme(value);
+          setSelectedTheme(value);
+        }
+      }}
+      className="flex items-center gap-1 rounded-full border border-gray-300 dark:border-gray-700 p-1 transition-all"
+    >
+      <ToggleGroupItem
+        value="light"
+        size="sm"
+        aria-label="Light Mode"
+        className={`rounded-full p-1 transition-all ${
+          selectedTheme === "light"
+            ? "bg-blue-500 text-white"
+            : "bg-transparent"
+        }`}
+      >
+        <Sun className={`h-4 w-4 ${selectedTheme === "light" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value="system"
+        size="sm"
+        aria-label="System Mode"
+        className={`rounded-full p-1 transition-all ${
+          selectedTheme === "system"
+            ? "bg-blue-500 text-white"
+            : "bg-transparent"
+        }`}
+      >
+        <Monitor className={`h-4 w-4 ${selectedTheme === "system" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value="dark"
+        size="sm"
+        aria-label="Dark Mode"
+        className={`rounded-full p-1 transition-all ${
+          selectedTheme === "dark"
+            ? "bg-blue-500 text-white"
+            : "bg-transparent"
+        }`}
+      >
+        <Moon className={`h-4 w-4 ${selectedTheme === "dark" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+}