@docubook/create 1.16.0 → 2.0.0-beta.1

package/package.json

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

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

@@ -12,13 +12,19 @@ import MobToc from "@/components/mob-toc";
 const { meta } = docuConfig;
 
 type PageProps = {
-  params: {
+  params: Promise<{
     slug: string[];
-  };
+  }>;
 };
 
 // Function to generate metadata dynamically
-export async function generateMetadata({ params: { slug = [] } }: PageProps) {
+export async function generateMetadata(props: PageProps) {
+  const params = await props.params;
+
+  const {
+    slug = []
+  } = params;
+
   const pathName = slug.join("/");
   const res = await getDocsForSlug(pathName);
 
@@ -62,7 +68,13 @@ export async function generateMetadata({ params: { slug = [] } }: PageProps) {
   };
 }
 
-export default async function DocsPage({ params: { slug = [] } }: PageProps) {
+export default async function DocsPage(props: PageProps) {
+  const params = await props.params;
+
+  const {
+    slug = []
+  } = params;
+
   const pathName = slug.join("/");
   const res = await getDocsForSlug(pathName);
 

package/src/dist/app/layout.tsx

@@ -6,6 +6,9 @@ import { GeistMono } from "geist/font/mono";
 import { Footer } from "@/components/footer";
 import docuConfig from "@/docu.json";
 import { Toaster } from "@/components/ui/sonner";
+import "@docsearch/css";
+import "@/styles/algolia.css";
+import "@/styles/syntax.css";
 import "@/styles/globals.css";
 
 const { meta } = docuConfig;

package/src/dist/app/page.tsx

@@ -25,21 +25,21 @@ export default function Home() {
             )}
           >
             <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-100 hover:duration-300 hover:dark:text-neutral-200">
-              <span>🚀 New Version - Release v1.16.0</span>
+              <span>🚀 Release v2.0.0-beta.1</span>
               <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
             </AnimatedShinyText>
           </div>
         </div>
       </Link>
-    <div className="w-full max-w-[800px] pb-8">
+      <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">
-            Get started by editing app/page.tsx . Save and see your changes instantly.{' '}
-            <Link className="text-primary underline" href="https://www.docubook.pro/docs/getting-started/introduction" target="_blank">
+          Get started by editing app/page.tsx . Save and see your changes instantly.{' '}
+          <Link className="text-primary underline" href="https://www.docubook.pro/docs/getting-started/introduction" target="_blank">
             Read Documentations
-            </Link>
+          </Link>
         </p>
-    </div>
+      </div>
       <div className="flex flex-row items-center gap-6 mb-10">
         <Link
           href={`/docs${page_routes[0].href}`}

package/src/dist/components/SearchModal.tsx

@@ -50,6 +50,7 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
 
   useEffect(() => {
     if (!isOpen) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setSearchedInput("");
     }
   }, [isOpen]);
@@ -71,9 +72,9 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
     return advanceSearch(trimmedInput) as unknown as SearchResult[];
   }, [searchedInput]);
 
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [filteredResults]);
+  // useEffect(() => {
+  //   setSelectedIndex(0);
+  // }, [filteredResults]);
 
   useEffect(() => {
     const handleNavigation = (event: KeyboardEvent) => {
@@ -114,10 +115,13 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
         <DialogTitle className="sr-only">Search Documentation</DialogTitle>
         <DialogDescription className="sr-only">Search through the documentation</DialogDescription>
       </DialogHeader>
-      
+
       <input
         value={searchedInput}
-        onChange={(e) => setSearchedInput(e.target.value)}
+        onChange={(e) => {
+          setSearchedInput(e.target.value);
+          setSelectedIndex(0);
+        }}
         placeholder="Type something to search..."
         autoFocus
         className="h-14 px-6 bg-transparent border-b text-[14px] outline-none w-full"
@@ -138,38 +142,38 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
             const isActive = index === selectedIndex;
 
             return (
-                <DialogClose key={item.href} asChild>
-                    <Anchor
-                    ref={(el) => {
-                        itemRefs.current[index] = el as HTMLDivElement | null;
-                      }}
+              <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={-1}
+                >
+                  <div
                     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
+                      "flex items-center w-full h-full py-3 gap-1.5 px-2 justify-between",
+                      level > 1 && "border-l pl-4"
                     )}
-                    href={`/docs${item.href}`}
-                    tabIndex={-1}
-                    >
-                    <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 className="flex items-center">
+                      <FileTextIcon className="h-[1.1rem] w-[1.1rem] mr-1" />
+                      <span>{item.title}</span>
                     </div>
-                    </Anchor>
-                </DialogClose>
+                    {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>
@@ -177,14 +181,14 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
       <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"/>
+            <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"/>
+            <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"/>
+            <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">

package/src/dist/components/context-popover.tsx

@@ -45,6 +45,7 @@ export default function ContextPopover({ className }: ContextPopoverProps) {
 
   useEffect(() => {
     if (pathname.startsWith("/docs")) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setActiveRoute(getActiveContextRoute(pathname));
     } else {
       setActiveRoute(undefined);
@@ -61,7 +62,7 @@ export default function ContextPopover({ className }: ContextPopoverProps) {
         <Button
           variant="ghost"
           className={cn(
-            "w-full max-w-[240px] flex items-center justify-between font-semibold text-foreground px-0 pt-8",
+            "w-full max-w-[240px] cursor-pointer flex items-center justify-between font-semibold text-foreground px-0 pt-8",
             "hover:bg-transparent hover:text-foreground",
             className
           )}

package/src/dist/components/contexts/theme-provider.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import * as React from "react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
-import { type ThemeProviderProps } from "next-themes/dist/types";
+import { type ThemeProviderProps } from "next-themes";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;

package/src/dist/components/leftbar.tsx

@@ -29,7 +29,7 @@ export function ToggleButton({
       <Button
         size="icon"
         variant="outline"
-        className="hover:bg-transparent hover:text-inherit border-none text-muted-foreground"
+        className="cursor-pointer hover:bg-transparent hover:text-inherit border-none text-muted-foreground"
         onClick={onToggle}
       >
         {collapsed ? (

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/contexts/AccordionContext'; 
+import { AccordionGroupContext } from '@/components/contexts/AccordionContext';
 
 type AccordionProps = {
     title: string;
@@ -27,7 +27,7 @@ const Accordion: React.FC<AccordionProps> = ({
     // The main wrapper div for the accordion.
     // All styling logic for the accordion container is handled here.
     return (
-        <div 
+        <div
             className={cn(
                 // Style for STANDALONE: full card with border & shadow
                 !isInGroup && "border rounded-lg shadow-sm",
@@ -38,16 +38,16 @@ const Accordion: React.FC<AccordionProps> = ({
             <button
                 type="button"
                 onClick={() => setIsOpen(!isOpen)}
-                className="flex items-center space-x-2 w-full px-4 h-12 transition-colors bg-muted/40 dark:bg-muted/20 hover:bg-muted/70 dark:hover:bg-muted/70"
+                className="flex items-center gap-2 w-full px-4 h-12 transition-colors bg-muted/40 dark:bg-muted/20 hover:bg-muted/70 dark:hover:bg-muted/70"
             >
                 <ChevronRight
                     className={cn(
-                        "w-4 h-4 text-muted-foreground transition-transform duration-200",
+                        "w-4 h-4 text-muted-foreground transition-transform duration-200 flex-shrink-0",
                         isOpen && "rotate-90"
                     )}
                 />
-                {Icon && <Icon className="text-foreground w-4 h-4"/> }
-                <h3 className="font-medium text-base text-foreground m-0">{title}</h3>
+                {Icon && <Icon className="text-foreground w-4 h-4 flex-shrink-0" />}
+                <h3 className="font-medium text-base text-foreground !m-0 leading-none">{title}</h3>
             </button>
 
             {isOpen && (

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

@@ -8,13 +8,21 @@ interface CardGroupProps {
 }
 
 const CardGroup: React.FC<CardGroupProps> = ({ children, cols = 2, className }) => {
-  const cardsArray = React.Children.toArray(children); // Pastikan children berupa array
+  const cardsArray = React.Children.toArray(children);
+
+  // Static grid column classes for Tailwind v4 compatibility
+  const gridColsClass = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+  }[cols] || "grid-cols-1 sm:grid-cols-2";
 
   return (
     <div
       className={clsx(
         "grid gap-4 text-foreground",
-        `grid-cols-1 sm:grid-cols-${cols}`,
+        gridColsClass,
         className
       )}
     >

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

@@ -100,8 +100,8 @@ export const Files = ({ children }: { children: ReactNode }) => {
   return (
     <div
       className="
-        rounded-xl border border-muted/50
-        bg-card/50 backdrop-blur-sm
+        rounded-xl border border-muted/20
+        bg-card/20 backdrop-blur-sm
         shadow-sm overflow-hidden
         transition-all duration-200
         hover:shadow-md hover:border-muted/60

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

@@ -4,13 +4,17 @@ import NextImage from "next/image";
 type Height = ComponentProps<typeof NextImage>["height"];
 type Width = ComponentProps<typeof NextImage>["width"];
 
+type ImageProps = Omit<ComponentProps<"img">, "src"> & {
+  src?: ComponentProps<typeof NextImage>["src"];
+};
+
 export default function Image({
   src,
   alt = "alt",
   width = 800,
   height = 350,
   ...props
-}: ComponentProps<"img">) {
+}: ImageProps) {
   if (!src) return null;
   return (
     <NextImage

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

@@ -1,19 +1,109 @@
-import { ComponentProps } from "react";
+import { type ComponentProps, type JSX } from "react";
 import Copy from "./CopyMdx";
+import {
+  SiJavascript,
+  SiTypescript,
+  SiReact,
+  SiPython,
+  SiGo,
+  SiPhp,
+  SiRuby,
+  SiSwift,
+  SiKotlin,
+  SiHtml5,
+  SiCss3,
+  SiSass,
+  SiPostgresql,
+  SiGraphql,
+  SiYaml,
+  SiToml,
+  SiDocker,
+  SiNginx,
+  SiGit,
+  SiGnubash,
+  SiMarkdown,
+} from "react-icons/si";
+import { FaJava, FaCode } from "react-icons/fa";
+import { TbJson } from "react-icons/tb";
+
+type PreProps = ComponentProps<"pre"> & {
+  raw?: string;
+  "data-title"?: string;
+};
+
+// Component to display an icon based on the programming language
+const LanguageIcon = ({ lang }: { lang: string }) => {
+  const iconProps = { className: "w-4 h-4" };
+  const languageToIconMap: Record<string, JSX.Element> = {
+    gitignore: <SiGit {...iconProps} />,
+    docker: <SiDocker {...iconProps} />,
+    dockerfile: <SiDocker {...iconProps} />,
+    nginx: <SiNginx {...iconProps} />,
+    sql: <SiPostgresql {...iconProps} />,
+    graphql: <SiGraphql {...iconProps} />,
+    yaml: <SiYaml {...iconProps} />,
+    yml: <SiYaml {...iconProps} />,
+    toml: <SiToml {...iconProps} />,
+    json: <TbJson {...iconProps} />,
+    md: <SiMarkdown {...iconProps} />,
+    markdown: <SiMarkdown {...iconProps} />,
+    bash: <SiGnubash {...iconProps} />,
+    sh: <SiGnubash {...iconProps} />,
+    shell: <SiGnubash {...iconProps} />,
+    swift: <SiSwift {...iconProps} />,
+    kotlin: <SiKotlin {...iconProps} />,
+    kt: <SiKotlin {...iconProps} />,
+    kts: <SiKotlin {...iconProps} />,
+    rb: <SiRuby {...iconProps} />,
+    ruby: <SiRuby {...iconProps} />,
+    php: <SiPhp {...iconProps} />,
+    go: <SiGo {...iconProps} />,
+    py: <SiPython {...iconProps} />,
+    python: <SiPython {...iconProps} />,
+    java: <FaJava {...iconProps} />,
+    tsx: <SiReact {...iconProps} />,
+    typescript: <SiTypescript {...iconProps} />,
+    ts: <SiTypescript {...iconProps} />,
+    jsx: <SiReact {...iconProps} />,
+    js: <SiJavascript {...iconProps} />,
+    javascript: <SiJavascript {...iconProps} />,
+    html: <SiHtml5 {...iconProps} />,
+    css: <SiCss3 {...iconProps} />,
+    scss: <SiSass {...iconProps} />,
+    sass: <SiSass {...iconProps} />,
+  };
+  return languageToIconMap[lang] || <FaCode {...iconProps} />;
+};
+
+// Function to extract the language from className
+function getLanguage(className: string = ""): string {
+  const match = className.match(/language-(\w+)/);
+  return match ? match[1] : "default";
+}
+
+export default function Pre({ children, raw, ...rest }: PreProps) {
+  const { "data-title": title, className, ...restProps } = rest;
+  const language = getLanguage(className);
+  const hasTitle = !!title;
 
-export default function Pre({
-  children,
-  raw,
-  ...rest
-}: ComponentProps<"pre"> & { raw?: string }) {
   return (
-    <div className="my-5 relative">
-      <div className="absolute top-3 right-2.5 z-10 sm:block hidden">
-        <Copy content={raw!} />
+    <div className="code-block-container">
+      <div className="code-block-actions">
+        {raw && <Copy content={raw} />}
       </div>
-      <div className="relative">
-        <pre {...rest}>{children}</pre>
+      {hasTitle && (
+        <div className="code-block-header">
+          <div className="flex items-center gap-2">
+            <LanguageIcon lang={language} />
+            <span>{title}</span>
+          </div>
+        </div>
+      )}
+      <div className="code-block-body">
+        <pre className={className} {...restProps}>
+          {children}
+        </pre>
       </div>
     </div>
   );
-}
+}

package/src/dist/components/mob-toc.tsx

@@ -14,7 +14,7 @@ interface MobTocProps {
   tocs: TocItem[];
 }
 
-const useClickOutside = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+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();

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

@@ -32,6 +32,7 @@ export function ScrollToTop({
 
   useEffect(() => {
     // Initial check
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     checkScroll();
 
     // Set up scroll listener with debounce for better performance

package/src/dist/components/sublink.tsx

@@ -44,6 +44,7 @@ export default function SubLink({
   // Auto-expand if current path is a child of this item
   useEffect(() => {
     if (items && (path.startsWith(fullHref) && path !== fullHref)) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setIsOpen(true);
     }
   }, [path, fullHref, items]);

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

@@ -1,68 +1,69 @@
 "use client";
 
 import * as React from "react";
-import { Moon, Sun, Monitor } from "lucide-react";
+import { Moon, Sun } 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");
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
 
-  // Pastikan toggle tetap di posisi yang benar setelah reload
+  // Untuk menghindari hydration mismatch
   React.useEffect(() => {
-    if (theme) {
-      setSelectedTheme(theme);
+    setMounted(true);
+  }, []);
+
+  // 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>
+    );
+  }
+
+  // Tentukan theme yang aktif: gunakan resolvedTheme untuk menampilkan ikon yang sesuai
+  // jika theme === "system", resolvedTheme akan menjadi "light" atau "dark" sesuai device
+  const activeTheme = theme === "system" || !theme ? resolvedTheme : theme;
+
+  const handleToggle = () => {
+    // Toggle antara light dan dark
+    // Jika sekarang light, ganti ke dark, dan sebaliknya
+    if (activeTheme === "light") {
+      setTheme("dark");
     } else {
-      setSelectedTheme("system"); // Default ke system jika undefined
+      setTheme("light");
     }
-  }, [theme]);
+  };
 
   return (
     <ToggleGroup
       type="single"
-      value={selectedTheme}
-      onValueChange={(value) => {
-        if (value) {
-          setTheme(value);
-          setSelectedTheme(value);
-        }
-      }}
+      value={activeTheme}
+      onValueChange={handleToggle}
       className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-1 transition-all"
     >
       <ToggleGroupItem
         value="light"
         size="sm"
         aria-label="Light Mode"
-        className={`rounded-full p-1 transition-all ${
-          selectedTheme === "light"
-            ? "bg-primary text-primary-foreground"
-            : "bg-transparent hover:bg-muted/50"
-        }`}
+        className={`rounded-full p-1 transition-all ${activeTheme === "light"
+          ? "bg-primary text-primary-foreground"
+          : "bg-transparent hover:bg-muted/50"
+          }`}
       >
         <Sun className="h-4 w-4" />
       </ToggleGroupItem>
-      <ToggleGroupItem
-        value="system"
-        size="sm"
-        aria-label="System Mode"
-        className={`rounded-full p-1 transition-all ${
-          selectedTheme === "system"
-            ? "bg-primary text-primary-foreground"
-            : "bg-transparent hover:bg-muted/50"
-        }`}
-      >
-        <Monitor className="h-4 w-4" />
-      </ToggleGroupItem>
       <ToggleGroupItem
         value="dark"
         size="sm"
         aria-label="Dark Mode"
-        className={`rounded-full p-1 transition-all ${
-          selectedTheme === "dark"
-            ? "bg-primary text-primary-foreground"
-            : "bg-transparent hover:bg-muted/50"
-        }`}
+        className={`rounded-full p-1 transition-all ${activeTheme === "dark"
+          ? "bg-primary text-primary-foreground"
+          : "bg-transparent hover:bg-muted/50"
+          }`}
       >
         <Moon className="h-4 w-4" />
       </ToggleGroupItem>

package/src/dist/eslint.config.mjs

@@ -0,0 +1,35 @@
+import { defineConfig } from "eslint/config";
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import nextTypescript from "eslint-config-next/typescript";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default defineConfig([{
+    extends: [
+        ...nextCoreWebVitals,
+        ...nextTypescript,
+        ...compat.extends("plugin:@typescript-eslint/recommended")
+    ],
+
+    rules: {
+        "@typescript-eslint/no-explicit-any": "warn",
+
+        "@typescript-eslint/no-unused-vars": ["warn", {
+            argsIgnorePattern: "^_",
+            varsIgnorePattern: "^_",
+            caughtErrorsIgnorePattern: "^_",
+        }],
+
+        "@typescript-eslint/no-empty-object-type": "off",
+    },
+}]);