@docubook/create 1.14.1 → 1.15.0

package/package.json

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

package/src/cli/program.js

@@ -12,15 +12,17 @@ export function initializeProgram(version) {
   program
     .version(version)
     .description("CLI to create a new DocuBook project")
-    // 1. Define optional argument here (handled below with .argument)
     .argument("[directory]", "The name of the project directory")
-    .action(async (directory) => { // 2. Capture argument in action function
+    .action(async (directory) => {
       try {
         displayIntro();
-        // 3. Pass the argument to the prompt function
-        const options = await collectUserInput(directory);
+        const userInput = await collectUserInput(directory);
 
-        await createProject(options);
+        // Pass all user input AND the DocuBook version to createProject
+        await createProject({
+          ...userInput,
+          docubookVersion: version, // Add DocuBook version here
+        });
       } catch (err) {
         log.error(err.message || "An unexpected error occurred.");
         process.exit(1);
@@ -28,4 +30,4 @@ export function initializeProgram(version) {
     });
 
   return program;
-}
+}

package/src/cli/promptHandler.js

@@ -16,7 +16,6 @@ export async function collectUserInput(cliProvidedDir) {
 
   const questions = [
     {
-      // Skip this question if directory name is provided
       type: cliProvidedDir ? null : "text",
       name: "directoryName",
       message: "What is your project named?",
@@ -50,18 +49,18 @@ export async function collectUserInput(cliProvidedDir) {
     },
   });
 
-  // Combine answers from CLI and from prompt
   answers = { ...answers, ...promptAnswers };
 
   // Validate the selected package manager
-  const version = getPackageManagerVersion(answers.packageManager);
-  if (!version) {
+  const pmVersion = getPackageManagerVersion(answers.packageManager);
+  if (!pmVersion) {
     throw new Error(`${chalk.bold(answers.packageManager)} is not installed on your system. Please install it to continue.`);
   }
 
+  // Return all answers, including the package manager version with a clear property name
   return {
     ...answers,
     directoryName: answers.directoryName.trim(),
-    version,
+    pmVersion,
   };
-}
+}

package/src/dist/app/layout.tsx

@@ -7,6 +7,7 @@ import { Footer } from "@/components/footer";
 import docuConfig from "@/docu.json";
 import { Toaster } from "@/components/ui/sonner";
 import "@/styles/globals.css";
+import "@/styles/algolia.css";
 
 const { meta } = docuConfig;
 

package/src/dist/app/page.tsx

@@ -25,7 +25,7 @@ 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.14.1</span>
+              <span>🚀 New Version - Release v1.15.0</span>
               <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
             </AnimatedShinyText>
           </div>

package/src/dist/components/DocSearch.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import React from "react";
+import { DocSearch } from "@docsearch/react";
+import "@docsearch/css";
+
+export default function DocSearchComponent() {
+  const appId = process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_APP_ID;
+  const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_API_KEY;
+  const indexName = process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_INDEX_NAME;
+
+  if (!appId || !apiKey || !indexName) {
+    console.error(
+      "DocSearch credentials are not set in the environment variables."
+    );
+    return (
+      <button className="text-sm text-muted-foreground" disabled>
+        Search... (misconfigured)
+      </button>
+    );
+  }
+
+  return (
+    <div className="docsearch">
+      <DocSearch
+        appId={appId}
+        apiKey={apiKey}
+        indexName={indexName}
+        placeholder="Type something to search..."
+      />
+    </div>
+  );
+}

package/src/dist/components/SearchModal.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState, useRef } from "react";
+import { ArrowUpIcon, ArrowDownIcon, CornerDownLeftIcon, FileTextIcon } from "lucide-react";
+import Anchor from "./anchor";
+import { advanceSearch, cn } from "@/lib/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { page_routes } from "@/lib/routes-config";
+import {
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogClose,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+
+type ContextInfo = {
+  icon: string;
+  description: string;
+  title?: string;
+};
+
+type SearchResult = {
+  title: string;
+  href: string;
+  noLink?: boolean;
+  items?: undefined;
+  score?: number;
+  context?: ContextInfo;
+};
+
+const paddingMap = {
+  1: "pl-2",
+  2: "pl-4",
+  3: "pl-10",
+} as const;
+
+interface SearchModalProps {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+}
+
+export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
+  const router = useRouter();
+  const [searchedInput, setSearchedInput] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchedInput("");
+    }
+  }, [isOpen]);
+
+  const filteredResults = useMemo<SearchResult[]>(() => {
+    const trimmedInput = searchedInput.trim();
+
+    if (trimmedInput.length < 3) {
+      return page_routes
+        .filter((route) => !route.href.endsWith('/'))
+        .slice(0, 6)
+        .map((route: { title: string; href: string; noLink?: boolean; context?: ContextInfo }) => ({
+          title: route.title,
+          href: route.href,
+          noLink: route.noLink,
+          context: route.context,
+        }));
+    }
+    return advanceSearch(trimmedInput) as unknown as SearchResult[];
+  }, [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);
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setSelectedIndex((prev) => (prev - 1 + filteredResults.length) % filteredResults.length);
+      } else 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, setIsOpen]);
+
+  useEffect(() => {
+    if (itemRefs.current[selectedIndex]) {
+      itemRefs.current[selectedIndex]?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+    }
+  }, [selectedIndex]);
+
+  return (
+    <DialogContent className="p-0 max-w-[650px] sm:top-[38%] top-[45%] !rounded-md">
+      <DialogHeader>
+        <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)}
+        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] || 'pl-2';
+            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={-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>
+                    </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>
+  );
+}

package/src/dist/components/SearchTrigger.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { CommandIcon, SearchIcon } from "lucide-react";
+import { DialogTrigger } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+
+export function SearchTrigger() {
+  return (
+    <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-muted-foreground" />
+          </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-muted-foreground" />
+            <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"
+              readOnly // This input is for display only
+            />
+            <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>
+  );
+}

package/src/dist/components/search.tsx

@@ -1,246 +1,55 @@
 "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";
-import { page_routes } from "@/lib/routes-config";
-
-// Define the ContextInfo type to match the one in routes-config
-type ContextInfo = {
-  icon: string;
-  description: string;
-  title?: string;
-};
-
-type SearchResult = {
-  title: string;
-  href: string;
-  noLink?: boolean;
-  items?: undefined;
-  score?: number;
-  context?: ContextInfo;
-};
+import { useState, useEffect } from "react";
+import { Dialog } from "@/components/ui/dialog";
+import { SearchTrigger } from "@/components/SearchTrigger";
+import { SearchModal } from "@/components/SearchModal";
+import DocSearchComponent from "@/components/DocSearch";
+import { DialogTrigger } from "@radix-ui/react-dialog";
+
+interface SearchProps {
+  /**
+   * Specify which search engine to use.
+   * @default 'default'
+   */
+  type?: "default" | "algolia";
+}
 
-export default function Search() {
-  const router = useRouter();
-  const [searchedInput, setSearchedInput] = useState("");
+export default function Search({ type = "default" }: SearchProps) {
   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<SearchResult[]>(() => {
-    const trimmedInput = searchedInput.trim();
-
-    // If search input is empty or less than 3 characters, show initial suggestions
-    if (trimmedInput.length < 3) {
-      return page_routes
-        .filter((route: { href: string }) => !route.href.endsWith('/')) // Filter out directory routes
-        .slice(0, 6) // Limit to 6 posts
-        .map((route: { title: string; href: string; noLink?: boolean; context?: ContextInfo }) => ({
-          title: route.title,
-          href: route.href,
-          noLink: route.noLink,
-          context: route.context
-        }));
-    }
-
-    // For search with 3 or more characters, use the advance search
-    return advanceSearch(trimmedInput) as unknown as SearchResult[];
-  }, [searchedInput]);
 
+  // The useEffect below is ONLY for the 'default' type, which is correct.
+  // DocSearch handles its own keyboard shortcut.
   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);
+    if (type === 'default') {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if ((event.ctrlKey || event.metaKey) && event.key === "k") {
+          event.preventDefault();
+          setIsOpen((open) => !open);
         }
-      }
-    };
+      };
 
-    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",
-      });
+      window.addEventListener("keydown", handleKeyDown);
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown);
+      };
     }
-  }, [selectedIndex]);
+  }, [type]);
+
+  if (type === "algolia") {
+    // Just render the component without passing any state props
+    return <DocSearchComponent />;
+  }
 
+  // Logic for 'default' search
   return (
     <div>
-      <Dialog
-        open={isOpen}
-        onOpenChange={(open) => {
-          if (!open) setSearchedInput("");
-          setIsOpen(open);
-        }}
-      >
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
         <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-muted-foreground" />
-              </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-muted-foreground" />
-                <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>
+          <SearchTrigger />
         </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>
+        <SearchModal isOpen={isOpen} setIsOpen={setIsOpen} />
       </Dialog>
     </div>
   );
-}
-
-const paddingMap = {
-  1: "pl-2",
-  2: "pl-4",
-  3: "pl-10",
-} as const;
+}

package/src/dist/contents/docs/changelog/version-1/index.mdx

@@ -8,6 +8,45 @@ date: 02-08-2025
   This changelog contains a list of all the changes made to the DocuBook template. It will be updated with each new release and will include information about new features, bug fixes, and other improvements.
 </Note>
 
+<div className="sr-only">
+### v 1.15.0
+</div>
+
+<Release version="1.15.0" date="2025-08-06" title="Algolia DocSearch for better search result">
+  <Changes type="added">
+    - new DocSearch.tsx components
+    - add props type algolia
+    - add searchprops
+    - add algolia.css
+  </Changes>
+</Release>
+
+<Note type="warning" title="environment">
+To use Algolia DocSearch, you need to configure the following environment variables:
+
+```plaintext
+NEXT_PUBLIC_ALGOLIA_DOCSEARCH_APP_ID="your_app_id"
+NEXT_PUBLIC_ALGOLIA_DOCSEARCH_API_KEY="your_api_key"
+NEXT_PUBLIC_ALGOLIA_DOCSEARCH_INDEX_NAME="your_index_name"
+```
+</Note>
+
+<div className="sr-only">
+### v 1.14.2
+</div>
+
+<Release version="1.14.2" date="2025-08-05" title="Refactor & Fix: Decouple Search Component and Resolve Type Errors">
+  <Changes type="added">
+    - Refactor Search component into three distinct components: Search, SearchTrigger, and SearchModal for better maintainability and scalability.
+    - New SearchTrigger components
+    - New SearchModal components
+  </Changes>
+  <Changes type="fixed">
+    - Resolve TypeScript error for missing 'noLink' property on the 'Page' type after refactoring.
+    - Fix TypeScript error for missing 'context' property by providing a complete inline type annotation in the SearchModal component.
+  </Changes>
+</Release>
+
 <div className="sr-only">
 ### v 1.14.0
 </div>

package/src/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docubook",
-  "version": "1.14.1",
+  "version": "1.15.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@docsearch/css": "3",
+    "@docsearch/react": "^3.9.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-collapsible": "^1.1.0",
@@ -21,12 +23,14 @@
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toggle": "^1.1.2",
     "@radix-ui/react-toggle-group": "^1.1.2",
+    "algoliasearch": "^5.35.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
     "framer-motion": "^12.4.1",
     "geist": "^1.3.1",
     "gray-matter": "^4.0.3",
+    "install": "^0.13.0",
     "lucide-react": "^0.511.0",
     "next": "^14.2.6",
     "next-mdx-remote": "^5.0.0",

package/src/dist/styles/algolia.css

@@ -0,0 +1,156 @@
+/*
+================================================================================
+ DocSearch Component Styling (Themed Version)
+ - This version uses the CSS variables defined in :root and .dark
+   to automatically adapt to your site's light and dark themes.
+================================================================================
+*/
+.docsearch {
+  /* Map theme variables to DocSearch's internal variables */
+  --docsearch-primary-color: hsl(var(--primary));
+  --docsearch-text-color: hsl(var(--foreground));
+  --docsearch-container-background: hsla(var(--background) / 0.8); /* Use theme background with transparency */
+  --docsearch-modal-background: hsl(var(--card)); /* Modals should use card color */
+  --docsearch-modal-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --docsearch-searchbox-background: hsl(var(--secondary));
+  --docsearch-searchbox-focus-background: hsl(var(--secondary));
+  --docsearch-hit-color: hsl(var(--foreground));
+  --docsearch-hit-background: hsl(var(--card));
+  --docsearch-hit-shadow: none;
+  --docsearch-hit-active-color: hsl(var(--primary-foreground));
+  --docsearch-selected-background: hsl(var(--secondary)); /* Use secondary for selection */
+  --docsearch-footer-background: hsl(var(--card));
+  --docsearch-footer-shadow: inset 0 1px 0 0 hsl(var(--border));
+  --docsearch-key-gradient: transparent;
+  --docsearch-key-shadow: none;
+  --docsearch-muted-color: hsl(var(--muted-foreground)); /* Use muted for less important text */
+}
+
+/*
+ * =====================================
+ * 1. Initial Search Button Styling
+ * =====================================
+ */
+.docsearch .DocSearch-Button {
+  background-color: hsl(var(--secondary)); /* Use secondary for the button background */
+  border: 1px solid hsl(var(--border)); /* Use the standard border color */
+  border-radius: 9999px; /* Pill shape */
+  width: 160px; /* Lebar default untuk desktop */
+  height: 40px;
+  color: hsl(var(--muted-foreground)); /* Use muted text color for the placeholder */
+  transition: width 0.3s ease; /* Transisi untuk perubahan lebar */
+}
+
+.docsearch .DocSearch-Button:hover {
+  border-color: var(--docsearch-primary-color);
+  box-shadow: none;
+}
+
+/* Magnifying glass icon */
+.docsearch .DocSearch-Search-Icon {
+  color: hsl(var(--muted-foreground));
+}
+
+/* The 'Search' placeholder text */
+.docsearch .DocSearch-Button-Placeholder {
+  font-style: normal;
+}
+
+/* Styling for the '⌘K' keys */
+.docsearch .DocSearch-Button-Key {
+  background: hsl(var(--primary)); /* Use primary color for the key background */
+  border-radius: 6px;
+  color: hsl(var(--primary-foreground)); /* Use primary-foreground for the key text */
+  font-size: 14px;
+  font-weight: 500;
+  height: 24px;
+  padding: 0 6px;
+  border: none;
+  box-shadow: none;
+  top: 0;
+}
+
+
+/*
+ * =====================================
+ * 2. Modal and Results Styling
+ * =====================================
+ */
+
+/* Main modal window */
+.docsearch .DocSearch-Modal {
+  backdrop-filter: blur(8px);
+}
+
+.docsearch .DocSearch-Container {
+  box-shadow: var(--docsearch-modal-shadow);
+}
+
+/* Search input form */
+.docsearch .DocSearch-Form {
+  border: 1px solid hsl(var(--border));
+  box-shadow: none;
+  background-color: transparent;
+}
+
+/* The 'Return' and 'Esc' hints */
+.docsearch .DocSearch-Reset-Icon,
+.docsearch .DocSearch-Cancel {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Style for each search result item */
+.docsearch .DocSearch-Hit a {
+  border-radius: 4px;
+}
+
+/* Selected search result */
+.docsearch .DocSearch-Hit[aria-selected="true"] a {
+  background: var(--docsearch-selected-background); /* Highlight color for selected item */
+}
+
+/* Hide category headers if not needed */
+.docsearch .DocSearch-Hit-source {
+  display: none;
+}
+
+/* Icon next to each result title */
+.docsearch .DocSearch-Hit-icon {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Footer instructions ('to navigate', 'to select', etc.) */
+.docsearch .DocSearch-Footer {
+  border-top: 1px solid hsl(var(--border));
+}
+
+.docsearch .DocSearch-Footer--commands kbd {
+  background: hsl(var(--muted)); /* Use muted for the background of keyboard hints */
+  border: 1px solid hsl(var(--border));
+  border-radius: 4px;
+  color: hsl(var(--muted-foreground));
+}
+
+/*
+ * =====================================
+ * 3. Responsive Styling (Mobile)
+ * =====================================
+ */
+@media (max-width: 768px) {
+  /* Aturan ini akan aktif pada layar 768px ke bawah */
+
+  .docsearch .DocSearch-Button {
+    width: 40px; /* Mengubah lebar tombol menjadi seukuran ikon */
+    height: 40px; /* Memastikan tinggi tetap sama */
+    padding: 0; /* Menghapus padding agar ikon bisa di tengah */
+    justify-content: center; /* Memusatkan ikon di dalam tombol */
+    background: none;
+    border: none;
+  }
+
+  /* Menyembunyikan teks "Search..." dan shortcut keyboard */
+  .docsearch .DocSearch-Button-Placeholder,
+  .docsearch .DocSearch-Button-Key {
+    display: none;
+  }
+}

package/src/installer/projectInstaller.js

@@ -12,16 +12,16 @@ import { displayManualSteps, simulateInstallation, displayNextSteps } from "../u
  * Creates a new DocuBook project.
  * @param {Object} options - Installation options.
  */
-export async function createProject({ directoryName, packageManager, version, installNow }) {
+export async function createProject({ directoryName, packageManager, pmVersion, docubookVersion, installNow }) {
   const projectPath = path.resolve(process.cwd(), directoryName);
 
   if (fs.existsSync(projectPath)) {
     throw new Error(`Directory "${directoryName}" already exists.`);
   }
 
-  log.info(`Creating a new DocuBook project in ${chalk.cyan(projectPath)}...`);
+  log.info(`Creating a new DocuBook project in ${chalk.green(projectPath)}...`);
 
-  const spinner = ora("Setting up project files...").start();
+  const spinner = ora("Creating project files...").start();
 
   try {
     // 1. Create project directory and copy template files
@@ -29,25 +29,27 @@ export async function createProject({ directoryName, packageManager, version, in
     const __dirname = path.dirname(__filename);
     const templatePath = path.join(__dirname, "../dist");
     copyDirectoryRecursive(templatePath, projectPath);
-    spinner.succeed("Project files created.");
 
     // 2. Configure package manager specific settings
-    spinner.start("Configuring package manager...");
+    spinner.text = "Configuring package manager...";
     configurePackageManager(packageManager, projectPath);
-    spinner.succeed("Package manager configured.");
 
     // 3. Update package.json
-    spinner.start("Updating package.json...");
+    spinner.text = "Updating package.json...";
     const pkgPath = path.join(projectPath, "package.json");
     if (fs.existsSync(pkgPath)) {
       const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
       pkg.name = directoryName; // Set project name
-      pkg.packageManager = `${packageManager}@${version}`;
+      // Use the package manager version here
+      pkg.packageManager = `${packageManager}@${pmVersion}`;
       fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
     }
-    spinner.succeed("package.json updated.");
 
-    log.success(`DocuBook project ready to go!`);
+    // Combine all success messages into one dynamic line
+    // Use the docubookVersion for the success message
+    spinner.succeed(
+      chalk.green(`Successfully installed DocuBook - v${docubookVersion} with ${packageManager}`)
+    );
 
     if (installNow) {
       await installDependencies(directoryName, packageManager, projectPath);
@@ -97,7 +99,7 @@ function copyDirectoryRecursive(source, destination) {
  */
 async function installDependencies(directoryName, packageManager, projectPath) {
   log.info("Installing dependencies...");
-  const installSpinner = ora(`Running ${chalk.cyan(`${packageManager} install`)}...`).start();
+  const installSpinner = ora(`Running ${chalk.green(`${packageManager} install`)}...`).start();
 
   try {
     execSync(`${packageManager} install`, { cwd: projectPath, stdio: "ignore" });
@@ -107,4 +109,4 @@ async function installDependencies(directoryName, packageManager, projectPath) {
     displayManualSteps(directoryName, packageManager);
     throw new Error("Dependency installation failed.");
   }
-}
+}

package/src/utils/display.js

@@ -16,7 +16,7 @@ export function displayIntro() {
 export async function simulateInstallation() {
   const bar = new cliProgress.SingleBar(
     {
-      format: `Finishing setup... ${chalk.cyan("{bar}")} | {percentage}%`,
+      format: `Finishing setup... ${chalk.greenBright("{bar}")} | {percentage}%`,
       barCompleteChar: "\u2588",
       barIncompleteChar: "\u2591",
       hideCursor: true,
@@ -42,9 +42,9 @@ export function displayManualSteps(projectDirectory, packageManager) {
   const steps = `
   ${chalk.yellow("Automatic installation failed.")} Please finish setup manually:
 
-  1. ${chalk.cyan(`cd ${projectDirectory}`)}
-  2. ${chalk.cyan(`${packageManager} install`)}
-  3. ${chalk.cyan(`${packageManager} run dev`)}
+  1. ${chalk.blueBright(`cd ${projectDirectory}`)}
+  2. ${chalk.blueBright(`${packageManager} install`)}
+  3. ${chalk.blueBright(`${packageManager} run dev`)}
   `;
   console.log(
     boxen(steps, {
@@ -67,8 +67,8 @@ export function displayNextSteps(directoryName, packageManager) {
   const steps = `
   ${chalk.bold("Next steps:")}
 
-  1. ${chalk.cyan(`cd ${directoryName}`)}
-  2. ${chalk.cyan(`${packageManager} run dev`)}
+  1. ${chalk.blueBright(`cd ${directoryName}`)}
+  2. ${chalk.blueBright(`${packageManager} run dev`)}
   `;
 
   console.log(