catche search widget
v0.1.1
Aka um menu Ctrl/CMD-K ou uma paleta de comando
Catche fornece uma maneira de baixo código de adicionar pesquisa instantânea ao seu site em duas etapas!
<head> do seu siteEste repo contém o código de código aberto para o widget do lado do cliente.
Para aqueles que estão interessados em ter o widget ou usar dados auto-hospedados, consulte a seção Tutoriais abaixo.
Contribuições Bem -vindo!
Este widget é construído com Vue e TypeScript e usa o Tailwind para estilo.
O Catche usa o Supabase para nossa hospedagem de banco de dados, mas você não precisa fazer isso se pretende auto -hospedar seus dados - basta precisar de um arquivo json!
Utilizamos o Minissearch para pesquisa, enquanto o Fast-Fuzzy é usado para destaque.
NOTA - Os arquivos index.html nas pastas do tutorial não podem ser abertos como está, devido a vários requisitos nos scripts. Em vez disso, execute um servidor local via nó ou python.
Consulte Tutoriais/Tema para arquivos relevantes.
Você pode tema o widget através do atributo catche-css no elemento <script> , que deve seguir o caminho para o arquivo .css.
< script catche-css =" PATH/TO/CSS " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >Consulte Tutoriais/Tema/Dark.css para um exemplo dos atributos CSS relevantes.
Consulte Tutoriais/Autohost para obter arquivos relevantes.
Você pode usar seus próprios dados salvos em um arquivo .json, através do atributo catche-data no elemento <script> , que deve seguir o caminho para o arquivo .json.
< script catche-data =" PATH/TO/JSON " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >O arquivo .json deve conter uma variedade de objetos, onde cada objeto representa uma página da web com os seguintes atributos:
id - string exclusivaurl - URL da página da webtitle - Título da Página da Webtext - texto da página da web O widget pesquisará o title e os atributos text .
Consulte os tutoriais/autohost/my-data.json para um exemplo do formato de dados.
