svelte algolia
v0.3.2
Demostración en vivo
Utilidad para actualizaciones del índice Algolia del lado del servidor más un componente de búsqueda del lado del cliente para aplicaciones Svelte. Solo agrega una única dependencia:
algoliasearchalgoliasearch/lite (13 KB). Hay 3 pasos para configurar svelte-algolia :
npm install --dev svelte-algolia Cree un 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` ] ,
} ,
} Se espera que la función getData devuelva una serie de objetos que contengan los datos que desea indexar (un catálogo de productos, publicaciones de blog, páginas de documentación, pokémons o lo que sea). Cada objeto en la matriz de datos debe tener una clave denominada id , _id u objectID para que Algolia lo reconozca y sobrescriba los datos existentes cuando corresponda.
El objeto de configuración se aplica a todos los índices. También puede pasar un objeto de configuración a cada índice individualmente, lo que anula el general.
Pase su configuración a indexAlgolia :
import { indexAlgolia } from 'svelte-algolia/server-side'
indexAlgolia ( algoliaConfig ) Puede llamar a esta función donde quiera que desee actualizar sus índices, por ejemplo, en svelte.config.js o en src/hooks.ts (como lo hace este sitio de demostración). Normalmente, incluirías esto en cada versión de producción de tu aplicación.
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 paquete como parte de un proceso de compilación (por ejemplo, en una aplicación SvelteKit), simplemente llame indexAlgolia en su configuración de compilación:
// 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 /> necesita el ID y la clave de búsqueda de su aplicación Algolia para acceder a sus índices de búsqueda, así como una asignación de los nombres de los índices al componente Svelte correspondiente que debería generar resultados de búsqueda provenientes de ese índice. Cada componente de hit recibe un objeto hit como accesorio con todos los atributos almacenados en el índice de 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 ejemplo, el componente PokemonHit.svelte en el sitio de demostración tiene este aspecto:
< 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 > Las subcadenas de los atributos que coincidan con la cadena de búsqueda actual se incluirán en <em> que necesita que la etiqueta {@html ...} se represente correctamente, pero luego se les puede aplicar un estilo para resaltar por qué un resultado en particular coincide con la cadena de búsqueda actual. El valor original (es decir, sin etiquetas <em> ) de cada atributo resaltado está disponible como hit.[attr]Orig . Consulte hit.nameOrig arriba.
Lista completa de accesorios/variables vinculables para este componente:
appId: stringID de la aplicación Algolia
ariaLabel: string = `Search`Le dice a la tecnología de asistencia cómo anunciar el elemento de entrada al usuario.
hasFocus: boolean = falseBooleano vinculable que indica si el panel de entrada de texto o de resultados tiene actualmente el foco.
indices: Record < string , typeof SvelteComponent > | [ string , typeof SvelteComponent ] [ ] Objeto que asigna el nombre de cada índice al que debe acceder el componente Search para encontrar resultados de búsqueda al componente Svelte que debe representar esos resultados.
input: HTMLInputElement | null = nullIdentificador del nodo DOM.
loadingMsg: string = `Searching...`Cadena que se mostrará en el panel de resultados mientras se obtienen los resultados de la búsqueda.
noResultMsg = ( query : string ) : string => `No results for ' ${ query } '`Función que devuelve la cadena que se mostrará cuando la búsqueda no arrojó resultados.
placeholder: string = `Search`Marcador de posición que se muestra en la entrada de texto antes de que el usuario comience a escribir.
query: string = ``Valor actual del nodo DOM.
resultCounter = ( hits : SearchHit [ ] ) : string =>
hits . length > 0 ? `<span>Results: ${ hits . length } <span>` : ``Función que devuelve una cadena que se mostrará junto al nombre de cada índice para mostrar cuántos resultados se encontraron en ese índice. Devuelve una cadena vacía para no mostrar nada.
searchKey: stringClave API de solo búsqueda
Search.svelte escucha los eventos on:close en cada componente visitado que representa y establecerá hasFocus en false para cerrarse cuando lo reciba. Puede utilizar esto, por ejemplo, para cerrar la interfaz de búsqueda cuando el usuario hace clic en un enlace en uno de los resultados de búsqueda y navega a una página diferente en su sitio:
< 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 > También emite un evento focus cada vez que el usuario hace clic en el ícono de búsqueda y el enfoque ingresa la entrada de texto.
< Search on:focus ={() => console . log ( " Let's search! " )} /> Search.svelte ofrece las siguientes variables CSS enumeradas aquí con sus valores predeterminados (si los hay) que se pueden pasar directamente como accesorios:
buttoncolor: var(--search-icon-color)h2color: var(--search-heading-color)inputbackground: var(--search-input-bg)color: var(--search-input-color)font-size: var(--search-input-font-size, 1em)input::placeholdercolor: var(--search-input-color)input.hasFocus + buttoncolor: var(--search-input-color)div.resultsbackground-color: var(--search-hits-bg-color, white)box-shadow: var(--search-hits-shadow, 0 0 2pt black)Por ejemplo:
< Search
indices ={{ Pages : SearchHit , Posts : SearchHit }}
{ appId }
{ searchKey }
-- hitsBgColor = " var(--search-body-bg) "
-- inputColor = " var(--search-text-color) "
-- iconColor = " var(--search-link-color) "
/> El elemento de nivel superior es un aside con clase svelte-algolia . Por lo tanto, también puede diseñar todo el árbol DOM debajo de él definiendo estilos globales 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 */
} Algunos sitios que utilizan svelte-algolia en producción:
studenten-bilden-schueler.de [código]afara.foundation [código]ocean-artup.eu [código] ¿Usas svelte-algolia tú mismo? ¡Envíe un PR para agregar su sitio aquí!
Los RP son bienvenidos, pero es mejor abrir un problema primero para discutir los cambios.
El ID de la aplicación y la clave de búsqueda .env se confirmaron intencionalmente para que puedas clonar este repositorio y trabajar en él sin tener que crear tu propio índice primero. Para probar sus cambios en un servidor de desarrollo que se ejecuta 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 Tenga en cuenta el comando sed que cambia el nombre del índice en site/svelte.config.js de 'Pokedex' a 'Pokedex Clone' para que no estropee accidentalmente el índice de búsqueda de este sitio de demostración durante el desarrollo.
