From e2b24ce19e3da82198516d89876fff0017889b6a Mon Sep 17 00:00:00 2001 From: Bot DocuBook Date: Tue, 5 Aug 2025 19:19:43 +0000 Subject: [PATCH] chore: Sync package version v1.15.0 --- app/layout.tsx | 1 + app/page.tsx | 2 +- components/DocSearch.tsx | 33 +++++ components/navbar.tsx | 2 +- components/search.tsx | 44 +++--- contents/docs/changelog/version-1/index.mdx | 23 +++ package.json | 6 +- styles/algolia.css | 156 ++++++++++++++++++++ 8 files changed, 244 insertions(+), 23 deletions(-) create mode 100644 components/DocSearch.tsx create mode 100644 styles/algolia.css diff --git a/app/layout.tsx b/app/layout.tsx index 2eb4c75..84c4731 100644 --- a/app/layout.tsx +++ b/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; diff --git a/app/page.tsx b/app/page.tsx index 008552e..356463b 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -25,7 +25,7 @@ export default function Home() { )} > - 🚀 New Version - Release v1.14.2 + 🚀 New Version - Release v1.15.0 diff --git a/components/DocSearch.tsx b/components/DocSearch.tsx new file mode 100644 index 0000000..58b1ad9 --- /dev/null +++ b/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 ( + + ); + } + + return ( +
+ +
+ ); +} \ No newline at end of file diff --git a/components/navbar.tsx b/components/navbar.tsx index 1613c31..38ae82b 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -26,7 +26,7 @@ export function Navbar() { - + diff --git a/components/search.tsx b/components/search.tsx index 119fe14..8a6a024 100644 --- a/components/search.tsx +++ b/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 ; // 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 ; } - // Render the default search components + // Logic for 'default' search return (
- + + +
diff --git a/contents/docs/changelog/version-1/index.mdx b/contents/docs/changelog/version-1/index.mdx index 0d3c033..b7337e4 100644 --- a/contents/docs/changelog/version-1/index.mdx +++ b/contents/docs/changelog/version-1/index.mdx @@ -8,6 +8,29 @@ 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. +
+### v 1.15.0 +
+ + + + - new DocSearch.tsx components + - add props type algolia + - add searchprops + - add algolia.css + + + + +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" +``` + +
### v 1.14.2
diff --git a/package.json b/package.json index a9b7c61..a1ec682 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "docubook", - "version": "1.14.2", + "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", diff --git a/styles/algolia.css b/styles/algolia.css new file mode 100644 index 0000000..877f36f --- /dev/null +++ b/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; + } +} \ No newline at end of file