catche search widget
v0.1.1
別名ctrl/cmd-kメニューまたはコマンドパレット
Catcheは、2つのステップでWebサイトにインスタント検索を追加するための低コードの方法を提供します！
<head>に提供されたコードスニペットを追加しますこのレポは、クライアント側ウィジェットのオープンソースコードが含まれています。
ウィジェットのテーマや自己ホストデータの使用に興味がある人については、以下のチュートリアルセクションをご覧ください。
貢献を歓迎します！
このウィジェットは、VUEとTypeScriptで構築されており、スタイリングにTailwindを使用しています。
CatcheはデータベースのホスティングにSupabaseを使用しますが、データを自己ホストするつもりであればそれを行う必要はありません - JSONファイルが必要です！
MiniSearchを検索に使用しますが、ファストファジーはハイライトに使用されます。
注 - チュートリアルフォルダーのindex.htmlファイルは、スクリプトにいくつかの要件があるため、そのまま開くことはできません。代わりに、ノードまたはPythonを介してローカルサーバーを実行します。
関連するファイルについては、チュートリアル/テーマを参照してください。
<script>要素のcatche-css属性を介してウィジェットをテーマにすることができます。これにより、.CSSファイルへのパスが表示されます。
< script catche-css =" PATH/TO/CSS " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >関連するCSS属性の例については、チュートリアル/theme/dark.cssを参照してください。
関連するファイルについては、チュートリアル/自己採用を参照してください。
.jsonファイルへのパスを取るはずの<script>要素のcatche-data属性を介して、.JSONファイルに保存された独自のデータを使用できます。
< script catche-data =" PATH/TO/JSON " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >.jsonファイルには、各オブジェクトが次の属性を持つWebページを表すオブジェクトの配列を含める必要があります。
id一意の文字列urlウェブページのURLtitle - ウェブページのタイトルtext - ウェブページのテキストウィジェットは、 titleとtext属性を検索します。
データ形式の例については、チュートリアル/selfhost/my-data.jsonを参照してください。
