dwindown/woonoow-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Sync package version v1.15.1

Browse Source
This commit is contained in:
Bot DocuBook
2025-08-06 02:48:41 +00:00
parent ec826479b0
commit 0ea393442e
7 changed files with 114 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/layout.tsx
View File

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

2
app/page.tsx
View File

@@ -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"> <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" /> <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
</AnimatedShinyText> </AnimatedShinyText>
</div> </div>

1
components/DocSearch.tsx
View File

@@ -2,7 +2,6 @@
import React from "react"; import React from "react";
import { DocSearch } from "@docsearch/react"; import { DocSearch } from "@docsearch/react";
import "@docsearch/css";
export default function DocSearchComponent() { export default function DocSearchComponent() {
const appId = process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_APP_ID; const appId = process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_APP_ID;

10
contents/docs/changelog/version-1/index.mdx
View File

@@ -9,10 +9,10 @@ date: 02-08-2025
</Note> </Note>
<div className="sr-only"> <div className="sr-only">
### v 1.15.0 ### v 1.15.1
</div> </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"> <Changes type="added">
- new DocSearch.tsx components - new DocSearch.tsx components
- add props type algolia - 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_API_KEY="your_api_key"
NEXT_PUBLIC_ALGOLIA_DOCSEARCH_INDEX_NAME="your_index_name" 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> </Note>
<div className="sr-only"> <div className="sr-only">

2
package.json
View File

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

192
styles/algolia.css
View File

@@ -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-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-color: hsl(var(--foreground));
--docsearch-hit-active-color: hsl(var(--primary-foreground));
--docsearch-hit-background: hsl(var(--card)); --docsearch-hit-background: hsl(var(--card));
--docsearch-hit-shadow: none; --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-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 { .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; 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 { .docsearch .DocSearch-Button:hover {
@@ -46,21 +69,24 @@
box-shadow: none; box-shadow: none;
} }
/* Magnifying glass icon */
.docsearch .DocSearch-Search-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 { .docsearch .DocSearch-Button-Placeholder {
font-style: normal; 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 { .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; border-radius: 6px;
color: hsl(var(--primary-foreground)); /* Use primary-foreground for the key text */
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
height: 24px; height: 24px;
@@ -70,85 +96,65 @@
top: 0; 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); 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)); border: 1px solid hsl(var(--border));
box-shadow: none;
background-color: transparent; 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)); 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: 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 { .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; background: none;
border: none; border: none;
} }
/* Menyembunyikan teks "Search..." dan shortcut keyboard */
.docsearch .DocSearch-Button-Placeholder, .docsearch .DocSearch-Button-Placeholder,
.docsearch .DocSearch-Button-Key { .docsearch .DocSearch-Button-Key {
display: none; display: none;

6
styles/globals.css
View File

@@ -1,9 +1,11 @@
@import "@docsearch/css";
@import "./algolia.css";
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@import url("../styles/syntax.css"); @import url("./syntax.css");
/* Modern Blue Theme */ /* Modern Blue Theme */
@layer base { @layer base {
:root { :root {