Demonstração ao vivo
Utilitário para atualizações de índice Algolia do lado do servidor, além de um componente de pesquisa do lado do cliente para aplicativos Svelte. Adiciona apenas uma única dependência:
algoliasearch
algoliasearch/lite
(13 KB). Existem 3 etapas para configurar svelte-algolia
:
npm install --dev svelte-algolia
Crie um objeto algoliaConfig
:
import 'dotenv/config' // optional
async function loadPokedex ( ) {
const json = await import ( 'pokedex.json' )
return json . default . map ( ( el ) => ( { ... el , id : el . someUniqAttribute } ) )
}
const algoliaConfig = {
appId : process . env . VITE_ALGOLIA_APP_ID ,
// don't prefix admin key with VITE_ else it would get exposed to client-side code
apiKey : process . env . ALGOLIA_ADMIN_KEY ,
indices : [
{ name : `Pokedex` , getData : loadPokedex } ,
{ name : `Hitchhiker's Guide` , getData : guideLoader } ,
] ,
settings : {
attributesToHighlight : [ `name` ] ,
} ,
}
Espera-se que a função getData
retorne um array de objetos contendo os dados que você deseja indexar (um catálogo de produtos, postagens de blog, páginas de documentação, pokémons ou qualquer outra coisa). Cada objeto na matriz de dados deve ter uma chave chamada id
, _id
ou objectID
para Algolia reconhecê-lo e sobrescrever os dados existentes quando apropriado.
O objeto settings se aplica a todos os índices. Você também pode passar um objeto de configurações para cada índice individualmente, substituindo o geral.
Passe sua configuração para indexAlgolia
:
import { indexAlgolia } from 'svelte-algolia/server-side'
indexAlgolia ( algoliaConfig )
Você pode chamar esta função sempre que desejar atualizar seus índices, por exemplo, em svelte.config.js
ou em src/hooks.ts
(como faz este site de demonstração). Normalmente, você incluiria isso em todas as versões de produção do seu aplicativo.
const defaultConfig = {
verbosity : 1 , // 0, 1 or 2 for no/some/lots of logging
partialUpdates : false , // if true, figures out diffs between existing
// items and new ones and only uploads changes, otherwise, completely
// overwrites each index on every call to indexAlgolia()
matchFields : [ ] , // (only used when partialUpdates is true) keys of fields to check
// for whether an item has changed; could e.g. be a timestamp, hash or an ID that's
// updated every time the item has changed; if not provided, items are checked for
// deep-equality to discover changes which can become slow for thousands of items
settings : { } , // an object of Algolia index settings that applies to all indices
// see https://algolia.com/doc/api-reference/settings-api-parameters for available options
// can be overridden for individual indices by passing a settings object as part of the indices array:
// indices = [{ name: `pokedex`, ..., settings: { foo: `bar` }}],
}
Para usar este pacote como parte de um processo de construção (por exemplo, em um aplicativo SvelteKit), basta chamar indexAlgolia
em sua configuração de construção:
// svelte.config.js
// only update Algolia indices on production builds (saves API quota)
if ( process . env [ 'NODE_ENV' ] === `production` ) {
const { indexAlgolia } = await import ( `svelte-algolia/server-side` )
const algoliaConfig = {
// see above
}
indexAlgolia ( algoliaConfig )
}
<Search />
precisa do ID e da chave de pesquisa do seu aplicativo Algolia para acessar seus índices de pesquisa, bem como um mapeamento dos nomes dos índices para o componente Svelte correspondente que deve renderizar resultados de pesquisa provenientes desse índice. Cada componente de hit recebe um objeto hit
como suporte com todos os atributos armazenados no índice Algolia.
< script >
import Search from ' svelte-algolia '
import PokemonHit from ' $site/PokemonHit.svelte '
const appId = ' 0OJ5UL9OJX '
const searchKey = ' 63f563566cdd6de606e2bb0fdc291994 '
// in a real app you'd get your credentials like this:
const appId = import .meta.env.VITE_ALGOLIA_APP_ID
const searchKey = import .meta.env.VITE_ALGOLIA_SEARCH_KEY
</ script >
< header >
< nav >{ ... }</ nav >
< Search
{ appId }
{ searchKey }
indices ={{ Pokedex : PokemonHit }}
placeholder = " Search Pokedex " />
</ header >
Por exemplo, o componente PokemonHit.svelte
no site de demonstração se parece com isto:
< script >
export let hit
</ script >
< h2 >{ @html hit . name }</ h2 >
< div >
< ul >
< li >Type: { @html hit . type . join ( ` , ` )}</ li >
< li >Height: { @html hit . height }</ li >
< li >Weight: { @html hit . weight }</ li >
< li >Weaknesses: { @html hit . weaknesses . join ( ` , ` )}</ li >
</ ul >
< img src ={ hit . img } alt ={ hit . nameOrig } />
</ div >
< style >
/* highlights text matching the search string */
:global( em ) {
color : darkcyan ;
line-height : 1.2 em ;
border-radius : 3 pt ;
font-style : normal ;
}
div {
display : flex ;
justify-content : space-between ;
}
</ style >
Substrings em atributos que correspondem à string de pesquisa atual serão agrupados em <em>
, que precisam que a tag {@html ...}
seja renderizada corretamente, mas podem então ser estilizados para destacar por que um determinado resultado corresponde à string de pesquisa atual. O valor original (ou seja, sem tags <em>
) de cada atributo destacado está disponível como hit.[attr]Orig
. Veja hit.nameOrig
acima.
Lista completa de adereços/variáveis vinculáveis para este componente:
appId: string
ID do aplicativo Algolia
ariaLabel: string = `Search`
Diz à tecnologia assistiva como anunciar o elemento de entrada ao usuário.
hasFocus: boolean = false
Booleano vinculável que indica se a entrada de texto ou o painel de resultados está atualmente em foco.
indices: Record < string , typeof SvelteComponent > | [ string , typeof SvelteComponent ] [ ]
Mapeamento de objeto com o nome de cada índice que o componente Search
deve acessar para encontrar os resultados da pesquisa para o componente Svelte que deve renderizar esses resultados.
input: HTMLInputElement | null = null
Identificador para o nó DOM.
loadingMsg: string = `Searching...`
String a ser exibida no painel de resultados enquanto os resultados da Pesquisa estão sendo buscados.
noResultMsg = ( query : string ) : string => `No results for ' ${ query } '`
Função que retorna a string a ser exibida quando a pesquisa não retorna resultados.
placeholder: string = `Search`
Espaço reservado mostrado na entrada de texto antes do usuário começar a digitar.
query: string = ``
Valor atual do nó DOM.
resultCounter = ( hits : SearchHit [ ] ) : string =>
hits . length > 0 ? `<span>Results: ${ hits . length } <span>` : ``
Função que retorna uma string que será exibida ao lado do nome de cada índice para mostrar quantos resultados foram encontrados naquele índice. Retorne uma string vazia para não mostrar nada.
searchKey: string
Chave de API somente de pesquisa
Search.svelte
escuta eventos on:close
em cada componente de hit que ele renderiza e definirá hasFocus
como false
para se fechar quando recebido. Você pode usar isso, por exemplo, para fechar a interface de pesquisa quando o usuário clica em um link em um dos resultados da pesquisa e navega para uma página diferente do seu site:
< script >
import { createEventDispatcher } from ' svelte '
export let hit
const dispatch = createEventDispatcher ()
</ script >
< h3 >
< a href ={ hit . slug } on:click ={() => dispatch ( ` close ` )}>{ @html hit . title }</ a >
</ h3 >
< p >{ @html hit . body }</ p >
Ele também emite um evento focus
sempre que o usuário clica no ícone de pesquisa e o foco insere a entrada de texto.
< Search on:focus ={() => console . log ( " Let's search! " )} />
Search.svelte
oferece as seguintes variáveis CSS listadas aqui com seus padrões (se houver) que podem ser passados diretamente como adereços:
button
color: var(--search-icon-color)
h2
color: var(--search-heading-color)
input
background: var(--search-input-bg)
color: var(--search-input-color)
font-size: var(--search-input-font-size, 1em)
input::placeholder
color: var(--search-input-color)
input.hasFocus + button
color: var(--search-input-color)
div.results
background-color: var(--search-hits-bg-color, white)
box-shadow: var(--search-hits-shadow, 0 0 2pt black)
Por exemplo:
< Search
indices ={{ Pages : SearchHit , Posts : SearchHit }}
{ appId }
{ searchKey }
-- hitsBgColor = " var(--search-body-bg) "
-- inputColor = " var(--search-text-color) "
-- iconColor = " var(--search-link-color) "
/>
O elemento de nível superior é um aside
da classe svelte-algolia
. Portanto, você também pode estilizar toda a árvore DOM abaixo dela, definindo estilos globais como
: global (aside.svelte-algolia input button svg) {
/* this would target the search icon */
}
: global (aside.svelte-algolia div.results section h2) {
/* this would target the heading shown above the list of results for each index */
}
Alguns sites que usam svelte-algolia
em produção:
studenten-bilden-schueler.de
[código]afara.foundation
[código]ocean-artup.eu
[código] Usando svelte-algolia
você mesmo? Envie um PR para adicionar seu site aqui!
PRs são bem-vindos, mas é melhor abrir uma questão primeiro para discutir as mudanças.
O ID do aplicativo e a chave de pesquisa .env
foram confirmados intencionalmente para que você possa clonar este repositório e trabalhar nele sem precisar criar seu próprio índice primeiro. Para testar suas alterações em um servidor de desenvolvimento executado localmente, use
git clone https://github.com/janosh/svelte-algolia
cd svelte-algolia
sed -i.bak ' s/name: `Pokedex`/name: `Pokedex Clone`/ ' svelte.config.js
npm install
npm run dev
Observe o comando sed
que altera o nome do índice em site/svelte.config.js
de 'Pokedex'
para 'Pokedex Clone'
para que você não bagunce acidentalmente o índice de pesquisa deste site de demonstração durante o desenvolvimento.