@docubook/create 1.14.2 → 1.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docubook/create",
-  "version": "1.14.2",
+  "version": "1.15.1",
   "description": "CLI to create DocuBook projects",
   "main": "src/index.js",
   "type": "module",
@@ -26,5 +26,6 @@
     "figlet": "^1.8.0",
     "ora": "^8.1.0",
     "prompts": "^2.4.2"
-  }
+  },
+  "packageManager": "yarn@4.9.2+sha512.1fc009bc09d13cfd0e19efa44cbfc2b9cf6ca61482725eb35bbc5e257e093ebf4130db6dfe15d604ff4b79efd8e1e8e99b25fa7d0a6197c9f9826358d4d65c3c"
 }

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.2</span>
+              <span>🚀 New Version - Release v1.15.1</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,32 @@
+"use client";
+
+import React from "react";
+import { DocSearch } from "@docsearch/react";
+
+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/search.tsx

@@ -4,11 +4,12 @@ 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";
 
-// Define props for the Search component
 interface SearchProps {
   /**
-   * Specify the type of search engine to use.
+   * Specify which search engine to use.
    * @default 'default'
    */
   type?: "default" | "algolia";
@@ -17,33 +18,36 @@ interface SearchProps {
 export default function Search({ type = "default" }: SearchProps) {
   const [isOpen, setIsOpen] = useState(false);
 
-  // Effect to handle keyboard shortcut (Cmd/Ctrl + K)
+  // The useEffect below is ONLY for the 'default' type, which is correct.
+  // DocSearch handles its own keyboard shortcut.
   useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.ctrlKey || event.metaKey) && event.key === "k") {
-        event.preventDefault();
-        setIsOpen((open) => !open);
-      }
-    };
+    if (type === 'default') {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if ((event.ctrlKey || event.metaKey) && event.key === "k") {
+          event.preventDefault();
+          setIsOpen((open) => !open);
+        }
+      };
 
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, []);
+      window.addEventListener("keydown", handleKeyDown);
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [type]);
 
-  // Here you can add logic for different search types if needed in the future
   if (type === "algolia") {
-    // return <AlgoliaSearchComponent />; // Example for future implementation
-    console.warn("Tipe pencarian 'algolia' belum diimplementasikan.");
-    // For now, we will fall back to the default search implementation
+    // Just render the component without passing any state props
+    return <DocSearchComponent />;
   }
 
-  // Render the default search components
+  // Logic for 'default' search
   return (
     <div>
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <SearchTrigger />
+        <DialogTrigger asChild>
+          <SearchTrigger />
+        </DialogTrigger>
         <SearchModal isOpen={isOpen} setIsOpen={setIsOpen} />
       </Dialog>
     </div>

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

@@ -8,6 +8,35 @@ 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.1
+</div>
+
+<Release version="1.15.1" 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"
+```
+
+in the navbar component, add a prop to the class
+
+```
+Change <Search /> to <Search type="algolia" />
+```
+</Note>
+
 <div className="sr-only">
 ### v 1.14.2
 </div>

package/src/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docubook",
-  "version": "1.14.2",
+  "version": "1.15.1",
   "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,162 @@
+/*
+================================================================================
+ DocSearch Component Styling (Refactored Version)
+================================================================================
+*/
+
+/* -- LANGKAH 1: Definisi Variabel Global --
+  Variabel tema DocSearch sekarang didefinisikan secara global di :root.
+  Ini menyederhanakan pewarisan tema dan memastikan konsistensi.
+  Mode gelap secara otomatis menimpa variabel ini karena .dark di globals.css.
+*/
+:root {
+  --docsearch-primary-color: hsl(var(--primary));
+  --docsearch-text-color: hsl(var(--muted-foreground));
+  --docsearch-spacing: 12px;
+  --docsearch-icon-stroke-width: 1.4;
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-muted-color: hsl(var(--muted-foreground));
+  --docsearch-container-background: rgba(0, 0, 0, 0.7);
+  --docsearch-logo-color: hsl(var(--primary-foreground));
+  
+  /* Modal */
+  --docsearch-modal-width: 560px;
+  --docsearch-modal-height: 600px;
+  --docsearch-modal-background: hsl(var(--background));
+  --docsearch-modal-shadow: 0 0 0 1px hsl(var(--border)), 0 8px 20px rgba(0, 0, 0, 0.2);
+  
+  /* SearchBox */
+  --docsearch-searchbox-height: 56px;
+  --docsearch-searchbox-background: hsl(var(--input));
+  --docsearch-searchbox-focus-background: hsl(var(--card));
+  --docsearch-searchbox-shadow: none;
+  
+  /* Hit (Hasil Pencarian) */
+  --docsearch-hit-height: 56px;
+  --docsearch-hit-color: hsl(var(--foreground));
+  --docsearch-hit-active-color: hsl(var(--primary-foreground));
+  --docsearch-hit-background: hsl(var(--card));
+  --docsearch-hit-shadow: none;
+  
+  /* Keys */
+  --docsearch-key-gradient: none;
+  --docsearch-key-shadow: none;
+  --docsearch-key-pressed-shadow: none;
+  
+  /* Footer */
+  --docsearch-footer-height: 44px;
+  --docsearch-footer-background: hsl(var(--background));
+  --docsearch-footer-shadow: none;
+}
+
+/* -- LANGKAH 2: Gaya untuk Tombol Awal --
+  Gaya ini spesifik untuk tombol yang ada di Navbar, 
+  yang dibungkus oleh <div class="docsearch">.
+*/
+.docsearch .DocSearch-Button {
+  background-color: hsl(var(--secondary));
+  border: 1px solid hsl(var(--border));
+  border-radius: 9999px;
+  width: 160px;
+  height: 40px;
+  color: hsl(var(--muted-foreground));
+  transition: width 0.3s ease;
+  margin: 0;
+}
+
+.docsearch .DocSearch-Button:hover {
+  border-color: var(--docsearch-primary-color);
+  box-shadow: none;
+}
+
+.docsearch .DocSearch-Search-Icon {
+  color: var(--docsearch-muted-color);
+  width: 1rem;
+  height: 1rem;
+}
+
+.docsearch .DocSearch-Button-Placeholder {
+  font-style: normal;
+  margin-left: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--docsearch-muted-color);
+}
+
+.docsearch .DocSearch-Button-Key {
+  background: var(--docsearch-primary-color);
+  color: var(--docsearch-logo-color); /* Menggunakan variabel yg relevan */
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  height: 24px;
+  padding: 0 6px;
+  border: none;
+  box-shadow: none;
+  top: 0;
+}
+
+/* -- LANGKAH 3: Gaya untuk Modal dan Isinya --
+  Gaya ini menargetkan elemen-elemen modal yang dirender terpisah.
+  Karena variabel sudah global, kita hanya perlu menata elemennya.
+*/
+.DocSearch-Container .DocSearch-Modal {
+  backdrop-filter: blur(8px);
+}
+
+.DocSearch-Form {
+  border: 1px solid hsl(var(--border));
+  background-color: transparent;
+}
+
+.DocSearch-Input {
+  font-size: 15px !important;
+}
+
+.DocSearch-Footer {
+  border-top: 1px solid hsl(var(--border));
+}
+
+/* Gaya untuk tombol keyboard di footer */
+.DocSearch-Footer--commands kbd {
+  background-color: hsl(var(--secondary));
+  border: 1px solid hsl(var(--border));
+  border-bottom-width: 2px;
+  border-radius: 6px;
+  color: var(--docsearch-muted-color);
+  padding: 4px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Menghilangkan gaya default dari ikon di dalam tombol footer */
+.DocSearch-Commands-Key {
+  background: none;
+  color: hsl(var(--muted-foreground));
+  border: 1px solid hsl(var(--border));
+  box-shadow: none;
+  padding: 2px 4px;
+  margin-right: 0.4em;
+  height: 20px;
+  width: 32px;
+  border-radius: 6px;
+}
+
+/* -- LANGKAH 4: Gaya Responsif --
+  Tidak ada perubahan, hanya mempertahankan fungsionalitas mobile.
+*/
+@media (max-width: 768px) {
+  .docsearch .DocSearch-Button {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    justify-content: center;
+    background: none;
+    border: none;
+  }
+  .docsearch .DocSearch-Button-Placeholder,
+  .docsearch .DocSearch-Button-Key {
+    display: none;
+  }
+}

package/src/dist/styles/globals.css

@@ -1,9 +1,11 @@
+@import "@docsearch/css";
+@import "./algolia.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import url("../styles/syntax.css");
-
+@import url("./syntax.css");
 /* Modern Blue Theme */
 @layer base {
     :root {
@@ -136,4 +138,4 @@ pre>code {
         background-position: 0% 0%;
       }
     }
-  }
+  }