catche search widget
v0.1.1
AKA un menu CTRL / CMD-K ou une palette de commandes
Catche fournit un moyen à faible code d'ajouter une recherche instantanée à votre site Web en deux étapes!
<head> de votre site WebCe dépôt contient le code open-source pour le widget côté client.
Pour ceux qui sont intéressés à thème leur widget ou à utiliser des données auto-hébergées, consultez la section Tutoriels ci-dessous.
Les contributions sont la bienvenue!
Ce widget est construit avec Vue et TypeScript et utilise le vent arrière pour le style.
Catche utilise Supabase pour notre hébergement de base de données, mais vous n'avez pas besoin de le faire si vous avez l'intention d'auto-héberger vos données - vous avez juste besoin d'un fichier JSON!
Nous utilisons MiniSearch pour la recherche, tandis que Fast-Fuzzy est utilisé pour la mise en évidence.
Remarque - Les fichiers index.html dans les dossiers du didacticiel ne peuvent pas être ouverts tels quels, en raison de plusieurs exigences dans les scripts. Au lieu de cela, exécutez un serveur local via Node ou Python.
Voir tutoriels / thème pour les fichiers pertinents.
Vous pouvez thème le widget via l'attribut catche-css dans l'élément <script> , qui devrait emprunter le chemin du fichier .css.
< script catche-css =" PATH/TO/CSS " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >Voir les tutoriels / thème / sombre.css pour un exemple des attributs CSS pertinents.
Voir les tutoriels / auto-hôte pour les fichiers pertinents.
Vous pouvez utiliser vos propres données enregistrées dans un fichier .json, via l'attribut catche-data dans l'élément <script> , qui devrait emprunter le chemin vers le fichier .json.
< script catche-data =" PATH/TO/JSON " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >Le fichier .json doit contenir un tableau d'objets, où chaque objet représente une page Web avec les attributs suivants:
id - chaîne uniqueurl - URL de la page Webtitle - Titre de la page Webtext - texte de la page Web Le widget recherchera les attributs title et text .
Voir Tutorials / SelfHost / My-Data.json pour un exemple du format de données.
