mirror of
https://github.com/quartz-community/search.git
synced 2026-07-22 02:50:25 +00:00
No description
4cfc4b2110
- Fix highlight() trim bug: slice tokenized text array, correct window math - Fix memory leak: use event delegation instead of per-element listeners - Fix XSS: escape content with escapeHTML before innerHTML insertion - Add multi-tag search (#tag1 #tag2 query) with AND filtering - Add tag autocomplete dropdown with keyboard navigation - Add inline ghost text for selected tag suggestion - Add configurable result ordering via fieldPriority option - Add scroll-to-highlight in preview panel - Add ARIA attributes (listbox, option, aria-expanded, aria-label) - Add error handling in fetchContent (try/catch, !res.ok check) - Add 150ms debounce on preview updates - Add index initialization guard for tag dropdown - Use parallel index filling (Promise.all) - Remove debug console.log statements - Restore button refocus after hiding search - Use CSS custom property for z-index management - Add max-height constraint for mobile results - Update all 6 locales with ellipsis placeholder and tag search strings - Export SearchField type |
||
|---|---|---|
| .github/workflows | ||
| dist | ||
| src | ||
| test | ||
| types | ||
| .eslintrc.json | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.build.json | ||
| tsconfig.json | ||
| tsup.config.ts | ||
| vitest.config.ts | ||
@quartz-community/search
The Search component for Quartz - full-text search with FlexSearch integration.
Features
- 🔍 Full-Text Search - Search across all your content instantly
- ⚡ Fast Indexing - Uses FlexSearch for high-performance search
- 📱 Mobile Responsive - Works great on all devices
- 🎯 Search Preview - Optional content preview panel
- 🌐 Multi-Language - Supports 30+ locales
- ⌨️ Keyboard Shortcuts -
Ctrl/Cmd + Kto open,Escapeto close - 🏷️ Tag Search - Search by tags with special syntax
Installation
npx quartz plugin add github:quartz-community/search
Usage
plugins:
- source: github:quartz-community/search
enabled: true
layout:
position: left
priority: 20
group: toolbar
groupOptions:
grow: true
For advanced use cases, you can override in TypeScript:
import * as ExternalPlugin from "./.quartz/plugins";
ExternalPlugin.Search({
enablePreview: true,
placeholder: "Search for something",
title: "Search",
});
Configuration Options
interface SearchOptions {
/** Enable content preview panel */
enablePreview?: boolean;
/** Custom placeholder text */
placeholder?: string;
/** Custom title for the search button */
title?: string;
}
Default Behavior
By default, the search component:
- Displays as a button with a search icon
- Opens a fullscreen search modal when clicked
- Shows up to 8 search results
- Enables content preview on desktop (can be disabled)
- Supports keyboard navigation (arrow keys, Enter, Escape)
- Uses FlexSearch from CDN for indexing
How It Works
The Search component:
- Loads FlexSearch library from CDN when initialized
- Fetches content data via the
fetchDataglobal (resolvescontentIndex.jsonwith the correct base path) - Builds a search index from your content
- Performs real-time search as you type
- Shows results with optional content preview
[!info] Search requires the
ContentIndexemitter plugin to be present in your Quartz configuration.
Keyboard Shortcuts
Ctrl/Cmd + K- Open/Close searchEscape- Close searchArrow Up/Down- Navigate resultsEnter- Open selected result
Development
This is a first-party Quartz community plugin. It serves as both:
- A production-ready Search component
- A reference implementation for building Quartz community plugins
To build locally:
npm install
npm run build
The prepare script automatically builds during installation.
Documentation
See the Quartz documentation for more information.
License
MIT