meilisearch docsearch

meilisearch-docsearch

Um componente de pesquisa rápida para meilisearch, inspirado em algolia/docsearch.

Capturas de tela

luz	escuro

Uso por meio de NPM (recomendado)

Instalação

yarn add meilisearch-docsearch
# or
npm install meilisearch-docsearch
# or
pnpm add meilisearch-docsearch

JavaScript

Para começar, você precisa de um contêiner para o componente DocSearch entrar. Se ainda não tiver um, você pode inserir um em sua marcação:

 < div id =" docsearch " > </ div >

Em seguida, insira DocSearch nele chamando a função docsearch e fornecendo o contêiner. Pode ser um seletor CSS ou um Elemento.

Certifique-se de fornecer um container (por exemplo, um div ), não um input . DocSearch gera uma caixa de pesquisa totalmente acessível para você.

 import { docsearch } from "meilisearch-docsearch" ;
import "meilisearch-docsearch/css" ;

docsearch ( {
  container : "#docsearch" ,
  host : "YOUR_HOST_URL" ,
  apiKey : "YOUR_SEARCH_API_KEY" ,
  indexUid : "YOUR_INDEX_UID" ,
} ) ;

Estilo

Todos os estilos estão incluídos no pacote como:

• Um arquivo grande:

  •  import "meilisearch-docsearch/css" ;

• Arquivos pequenos individuais:

  •  import "meilisearch-docsearch/css/variables" ; 

  •  import "meilisearch-docsearch/css/button" ; 

  •  import "meilisearch-docsearch/css/modal" ; 

Sólido JS

Se você estiver usando solid-js , poderá importar o componente DocSearch diretamente, o que gera uma caixa de pesquisa totalmente acessível para você.

 import { DocSearch } from "meilisearch-docsearch/solid" ;
import "meilisearch-docsearch/css" ;

function App ( ) {
  return (
    < DocSearch
      host = "YOUR_HOST_URL"
      apiKey = "YOUR_SEARCH_API_KEY"
      indexUid = "YOUR_INDEX_UID"
    / >
  ) ;
}

export default App ;

Uso por meio de CDN

O pacote também contém um pacote de navegador e os estilos necessários que podem ser obtidos por meio de um CDN como unpkg.com:

1. adicione um contêiner

    < div id =" docsearch " > </ div >

2. importe o pacote js borwser e inicialize o componente

    < script src =" https://unpkg.com/meilisearch-docsearch@latest/dist/index.global.js " > </ script >
   < script >
     const { docsearch } = window . __docsearch_meilisearch__ ;
     docsearch ( {
       container : "#docsearch" ,
       host : "YOUR_HOST_URL" ,
       apiKey : "YOUR_SEARCH_API_KEY" ,
       indexUid : "YOUR_INDEX_UID" ,
     } ) ;
   </ script >

   alternativamente, você pode importar o módulo ESM ao usar <script type="module">

    < script type =" module " async >
     import { docsearch } from "https://unpkg.com/meilisearch-docsearch@latest/dist/index.bundled.esm.js" ;
     docsearch ( {
       container : "#docsearch" ,
       host : "YOUR_HOST_URL" ,
       apiKey : "YOUR_SEARCH_API_KEY" ,
       indexUid : "YOUR_INDEX_UID" ,
     } ) ;
   </ script >

3. importar estilos

    < link
     rel =" stylesheet "
     href =" https://unpkg.com/meilisearch-docsearch@latest/dist/index.css "
   />

Reconhecimento

Este projeto é inspirado em algolia/docsearch e meilisearch/docs-searchbar.js

LICENÇA

MIT ou MIT/Apache 2.0, quando aplicável.