Merge pull request #9

chore: bump version to 1.15.1 and update changelog
- Update version in package.json and related files to 1.15.1
- Remove unused CSS imports from layout and DocSearch components
- Refactor algolia.css for improved styling and responsiveness
- Update release notes in changelog for version 1.15.1

app/layout.tsx

@@ -7,7 +7,6 @@ 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;
 

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.15.0</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>

components/DocSearch.tsx

@@ -2,7 +2,6 @@
 
 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;

contents/docs/changelog/version-1/index.mdx

@@ -9,10 +9,10 @@ date: 02-08-2025
 </Note>
 
 <div className="sr-only">
-### v 1.15.0
+### v 1.15.1
 </div>
 
-<Release version="1.15.0" date="2025-08-06" title="Algolia DocSearch for better search result">
+<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
@@ -29,6 +29,12 @@ 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">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docubook",
-  "version": "1.15.0",
+  "version": "1.15.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

styles/algolia.css

@@ -1,44 +1,67 @@
 /*
 ================================================================================
- DocSearch Component Styling (Themed Version)
+ DocSearch Component Styling (Refactored 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 */
+/* -- 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(--foreground));
+  --docsearch-text-color: hsl(var(--muted-foreground));
-  --docsearch-container-background: hsla(var(--background) / 0.8); /* Use theme background with transparency */
+  --docsearch-spacing: 12px;
-  --docsearch-modal-background: hsl(var(--card)); /* Modals should use card color */
+  --docsearch-icon-stroke-width: 1.4;
-  --docsearch-modal-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-searchbox-background: hsl(var(--secondary));
+  --docsearch-muted-color: hsl(var(--muted-foreground));
-  --docsearch-searchbox-focus-background: hsl(var(--secondary));
+  --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;
-  --docsearch-hit-active-color: hsl(var(--primary-foreground));
+  
-  --docsearch-selected-background: hsl(var(--secondary)); /* Use secondary for selection */
+  /* Keys */
-  --docsearch-footer-background: hsl(var(--card));
+  --docsearch-key-gradient: none;
-  --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 */
+  --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, 
- * 1. Initial Search Button Styling
+  yang dibungkus oleh <div class="docsearch">.
- * =====================================
+*/
- */
 .docsearch .DocSearch-Button {
-  background-color: hsl(var(--secondary)); /* Use secondary for the button background */
+  background-color: hsl(var(--secondary));
-  border: 1px solid hsl(var(--border)); /* Use the standard border color */
+  border: 1px solid hsl(var(--border));
-  border-radius: 9999px; /* Pill shape */
+  border-radius: 9999px;
-  width: 160px; /* Lebar default untuk desktop */
+  width: 160px;
   height: 40px;
-  color: hsl(var(--muted-foreground)); /* Use muted text color for the placeholder */
+  color: hsl(var(--muted-foreground));
-  transition: width 0.3s ease; /* Transisi untuk perubahan lebar */
+  transition: width 0.3s ease;
+  margin: 0;
 }
 
 .docsearch .DocSearch-Button:hover {
@@ -46,21 +69,24 @@
   box-shadow: none;
 }
 
-/* Magnifying glass icon */
 .docsearch .DocSearch-Search-Icon {
-  color: hsl(var(--muted-foreground));
+  color: var(--docsearch-muted-color);
+  width: 1rem;
+  height: 1rem;
 }
 
-/* The 'Search' placeholder text */
 .docsearch .DocSearch-Button-Placeholder {
   font-style: normal;
+  margin-left: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--docsearch-muted-color);
 }
 
-/* Styling for the '⌘K' keys */
 .docsearch .DocSearch-Button-Key {
-  background: hsl(var(--primary)); /* Use primary color for the key background */
+  background: var(--docsearch-primary-color);
+  color: var(--docsearch-logo-color); /* Menggunakan variabel yg relevan */
   border-radius: 6px;
-  color: hsl(var(--primary-foreground)); /* Use primary-foreground for the key text */
   font-size: 14px;
   font-weight: 500;
   height: 24px;
@@ -70,85 +96,65 @@
   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.
- * 2. Modal and Results Styling
+*/
- * =====================================
+.DocSearch-Container .DocSearch-Modal {
- */
-
-/* Main modal window */
-.docsearch .DocSearch-Modal {
   backdrop-filter: blur(8px);
 }
 
-.docsearch .DocSearch-Container {
+.DocSearch-Form {
-  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-Input {
-.docsearch .DocSearch-Reset-Icon,
+  font-size: 15px !important;
-.docsearch .DocSearch-Cancel {
-  color: hsl(var(--muted-foreground));
 }
 
-/* Style for each search result item */
+.DocSearch-Footer {
-.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 {
+/* Gaya untuk tombol keyboard di footer */
-  background: hsl(var(--muted)); /* Use muted for the background of keyboard hints */
+.DocSearch-Footer--commands kbd {
+  background-color: hsl(var(--secondary));
   border: 1px solid hsl(var(--border));
-  border-radius: 4px;
+  border-bottom-width: 2px;
-  color: hsl(var(--muted-foreground));
+  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 {
- * 3. Responsive Styling (Mobile)
+  background: none;
- * =====================================
+  color: hsl(var(--muted-foreground));
- */
+  border: 1px solid hsl(var(--border));
-@media (max-width: 768px) {
+  box-shadow: none;
-  /* Aturan ini akan aktif pada layar 768px ke bawah */
+  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; /* Mengubah lebar tombol menjadi seukuran ikon */
+    width: 40px;
-    height: 40px; /* Memastikan tinggi tetap sama */
+    height: 40px;
-    padding: 0; /* Menghapus padding agar ikon bisa di tengah */
+    padding: 0;
-    justify-content: center; /* Memusatkan ikon di dalam tombol */
+    justify-content: center;
     background: none;
     border: none;
   }
-
-  /* Menyembunyikan teks "Search..." dan shortcut keyboard */
   .docsearch .DocSearch-Button-Placeholder,
   .docsearch .DocSearch-Button-Key {
     display: none;

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%;
       }
     }
-  }
+  }