VelinSearch 1.2.0

Offline-, Fuzzy-Suche fuer Dokumentation und Inhalte mit gruppierten Treffern, Tastaturnavigation und hervorgehobenen Treffern. English: VelinSearch

Reifegrad

Dokumentiert als stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) ist getrennt und je nach Bereich als beta / foundation markiert.

Wann sinnvoll

Offline-Fuzzy-Suche fuer Docs oder App-Inhalte ueber @birdapi/velinstyle/search.
Indizes mit velinstyle search index bauen.

Wann nicht

Suche nicht als Ersatz fuer serverseitige Volltextsuche bei sehr grossen Indizes behandeln.
URL-Sanitisierung bei eigenen Result-Providern nicht auslassen.

Ueberblick

Autocomplete ab 2 Zeichen
Kategorien: docs, components, api, examples
Fuzzy-Tippfehler-Toleranz (z. B. modla -> velin-modal)
Kein Seiten-Reload - Live-Ergebnispanel
Optionaler registerSearchProvider()-Hook fuer App-Inhalte

Web Component

<link rel="stylesheet" href="velinstyle.min.css">
<script type="module" src="velin-search.js"></script>

<velin-search
  index="/dist/search-index.json"
  categories="docs,components,api,examples"
  min-chars="2"
  fuzzy="0.2"
  placeholder="Search…">
</velin-search>

Deklarative Bindung:

<input velin-search-input data-search-index="../search-index.json">
<div velin-search-results></div>

JavaScript API

import { velinSearch, createSearch, registerSearchProvider } from '@birdapi/velinstyle/search';

await velinSearch.loadIndex('/search-index.json');

const search = createSearch({ worker: true, workerUrl: new URL('./search.worker.js', import.meta.url).href });
await search.loadIndex('/search-index.json');
const { results, groups } = await search.query('tokens', {
  minChars: 2,
  fuzzy: 0.2,
  categories: ['docs', 'components'],
  limit: 12,
});

Index bauen

# Framework-Repo
npx velinstyle search index --out dist/search-index.json

# Beim Doc-Generate enthalten
npm run docs:generate

Quellen: generiertes Markdown (Components, Tokens, Utilities, CLI), Sample-HTML, cli-manifest.json.

Schema: examples/search-index.schema.json im Framework-Paket.

Eigene Provider

registerSearchProvider('cms', async () => {
  const res = await fetch('/api/search-docs.json');
  return res.json();
});
await velinSearch.refreshProviders();

Diese Dokumentationsseite

Das Header-Feld #docSearch verwendet docs/doc-search.js (ES-Modul) und importiert core/search aus dem benachbarten velinstyle-Repo. Den kombinierten Index neu bauen:

python tools/build-search-index.py
python tools/sync-sidebar.py