¿Qué es un diccionario sin motor de búsqueda o ummm la función de búsqueda?

Durante la implementación del diccionario base, creé estos formularios de búsqueda estáticos (uno en la página de inicio y el otro en la barra de navegación utilizada en el diseño de palabras) en preparación para esta función en particular.

Solo necesitaba retomarlo desde allí mismo y hacerlo funcionar, trabajo fácil, si tan solo fuera cierto.

Algo del pasado

Es importante reiterar que mi plan inicial era construir jergons.dev con Nextra, ya que admití en el compromiso inicial que:

...Nextra (este era de hecho mi caballero de armadura brillante, estaba buscando construir con Nextra).

Soy un fanático de React ⚛️, muy aficionado a Next.js; Nextra es un marco web centrado en contenido que se basa en Next.js. Así que supongo que puedes entender por qué Nextra sonaba como ese caballero. Durante mi exploración inicial de Nextra, una característica me llamó la atención; la búsqueda de texto completo: se me hizo agua la boca con este (debo confesar).

La función fue impulsada por flexsearch, una biblioteca de búsqueda de texto completo sin profundidad; Oh, chico, soy un gran admirador de las dependencias ligeras y bajas o nulas. Profundicé en cómo Nextra usa esto para indexar contenido en el momento de la compilación para la búsqueda; fue interesante.

¿¡Entonces!?

Me encontré pirateando con flexsearch durante mi primer encuentro con Astro; A medida que seguí el tutorial de creación de un blog de Astro Doc, fui un paso más allá para implementar una función de búsqueda muy fácilmente.

Entonces, la experiencia de esta implementación; Pasé al motor de búsqueda jergons.dev.

El motor de búsqueda

La tarea era bastante simple, necesitaba...

• Obtenga acceso o llámelo referencia a todos los archivos dentro del directorio de palabras del diccionario; en este punto era el directorio src/pages/word
• Obtenga el contenido de estos archivos indexado con flexsearch
• Ingrese el formulario de búsqueda y ¡boom?

¡Parece muy fácil! Quizás para la indexación de búsqueda y la búsqueda real, lo fue; pero hubo muchas cosas que fueron necesarias para llegar allí.

Integrando la primera "Isla" en jergons.dev

Astro, de forma predeterminada, adopta un enfoque centrado en el servidor, lo que significa que construye el HTML/CSS de su sitio en el servidor eliminando todo el javascript (JS) del lado del cliente automáticamente (a menos que indique lo contrario). Eliminar todos los JS garantiza una mejora del rendimiento, pero Sin JS significa que no hay interactividad; Pero si quieres interactividad, Astro Island es una de las opciones. ¡Necesito la interactividad para el motor de búsqueda, así que es Island!

¿¡Pero qué es una "isla"!?

Diré simplemente que una isla es una pieza interactiva aislada de un componente en una página web, cuyo HTML/CSS se representa en el lado del servidor y/pero su JavaScript del lado del cliente también está (hidratado) incluido con él. NO eliminado.

Di una charla sobre Island en TILConf'24. Échale un vistazo para obtener más información.

La oferta de Astro

Astro ofreció soporte para integrar Islands de inmediato con mi biblioteca de UI favorita (sí, lo adivinaste, React) de muchas otras. Esto me permitió convertir mis formularios de búsqueda estáticos en algo funcional.

Cosas que hice

• Comencé agregando el módulo de integración (@astrojs/react) para la isla que necesitaba integrar; hecho bastante fácilmente con el comando npx astro add reaccionar
• Transfirí todos los formularios de búsqueda estáticos a un solo componente de React (estos son dos formularios de diferentes tamaños); configuró el componente para renderizarlos en el tamaño requerido según los accesorios dados.
• También implementé algunos subcomponentes que solo se consumen localmente en el mismo componente de búsqueda, estos son...
  • El SearchDialog - componente principal donde se realiza la operación de búsqueda
  • El componente SearchResult, etc...
• Implementé algunos atajos de teclado y combinaciones de teclas personalizados que permiten interacciones con el componente de búsqueda (me gustaría llamar a esto "Isla de búsqueda" de ahora en adelante), estos son...
  • CTRL K o ⌘K para iniciar la búsqueda
  • ESC para cerrar la búsqueda
  • ...y botones de navegación básicos necesarios para navegar dentro de los resultados de búsqueda
• También agregué algunos ganchos personalizados para permitir una navegación fluida en el funcionamiento de la isla de búsqueda, estos son...
  • useLockBody: un gancho que desactiva el desplazamiento una vez que se abre el cuadro de diálogo de búsqueda
  • useRouter: un gancho que hice como envoltorio alrededor de algunos métodos de ubicación de ventana, haciéndolos sentir como las bibliotecas de enrutador conocidas en React, este es un gancho que consumí particularmente en el controlador de clic del botón ENTRAR en la combinación de teclas del botón de navegación en el componente de resultados de búsqueda. en la isla de búsqueda.
  • y useIsMacOS, que verifica si una máquina es MacOS para determinar el texto de descripción apropiado para representar en el activador del formulario de búsqueda; es decir, CTRL K o ⌘K
• Agregué el módulo imperativo - flexsearch;
• Recuperé el acceso a los archivos, el directorio de palabras usando la función Astro.glob() muy fácilmente (lástima que no pude hablar de lo poderosa que es esta función; qué contento estoy de que existiera lista para usar en Astro y cuánta facilidad trajo al flujo de poner en funcionamiento este motor de búsqueda) y conectó la matriz de objetos de palabras devueltas en un estado de $dictionary (tal vez debería llamar a esto una tienda) impulsado por nanostore (otra cosa hermosa ahí mismo)
• Este $diccionario se indexa con flexsearch, preparándolos para búsquedas posteriores.

Otra característica imprescindible: las búsquedas recientes.

Esta es otra característica imperativa de la que debo hablar; Esta función realiza un seguimiento de los elementos buscados y los almacena en el almacenamiento local para conservarlos durante la recarga de la página; Estos elementos buscados en la tienda se muestran en una lista en la página de inicio del diccionario.

También fue necesaria la integración como isla, además de mantener el valor en un estado de $recentSearches impulsado por nanotiendas.

Mi implementación de esta función no es exactamente perfecta, y aquí hay una lista de algunos problemas que necesitaban solución (al momento de escribir este artículo) para avanzar un paso más en esa ruta (aunque nunca podremos alcanzar la perfección, SÍ). con seguridad)

• Agregar componente de carga a la isla de búsquedas recientes: https://github.com/devjargons/jargons.dev/issues/31
• Error: La operación de búsqueda realizada con el formulario de búsqueda en la barra de navegación sobrescribe el almacenamiento local - https://github.com/devjargons/jargons.dev/issues/10
• Mejora: Editor de Word - Funciones de segunda iteración - https://github.com/devjargons/jargons.dev/issues/9

las relaciones públicas

Esta es una lectura larga, deseo que sea breve... Aquí está el PR

hazaña: implementar motor de búsqueda de diccionario #5

balbuceo publicado el 25 de marzo de 2024

Esta solicitud de extracción implementa la funcionalidad de búsqueda en el proyecto de diccionario. Utiliza la integración @astro/react para impulsar las islas junto con nanostore para la gestión estatal y flexsearch como biblioteca de búsqueda de texto.

Cambios realizados

• Se agregó la siguiente integración de astrojs y la biblioteca requerida para la búsqueda de texto
  • @astrojs/reaccionar
  • @nanostores/reaccionar
  • búsqueda flexible
• Se implementó la isla de búsqueda (un componente de reacción) dentro de donde se implementan otros subcomponentes para uso interno.
  • Se implementó el componente SearchTrigger que representa un campo de búsqueda de dos tamaños diferentes y se usa en dos lugares diferentes de la página web...
    • tamaño md: utilizado en la página principal de la aplicación web
    • tamaño sm: utilizado en la sección de navegación del diseño de palabras del diccionario
  • Se implementó el componente SearchDialog, que se muestra solo cuando se hace clic en SearchTrigger
  • Se implementó el componente SearchInfo, que se muestra como marcador de posición predeterminado cuando no se ha ingresado ningún término de búsqueda en el campo del formulario
  • Se implementó el componente SearchResult, que muestra resultados de búsqueda o un mensaje para resultados de búsqueda no encontrados
  • Combinaciones de teclas implementadas dentro de la isla de búsqueda para permitir la siguiente operación con los atajos de teclado indicados
    • CTRL K o ⌘K para abrir el cuadro de diálogo de búsqueda sin hacer clic en el indicador de búsqueda
    • ArrowUp, ArrowDown y Enter para permitir la navegación en la lista de resultados de búsqueda
    • ESC para permitir el cierre del diálogo de búsqueda
  • Se agregaron los ganchos personalizados para el consumo en la isla de búsqueda.
    • useIsMacOS: compruebe si el usuario actual está navegando por la aplicación web con una máquina MacOS; esto se utiliza para determinar el corto apropiado para representar en el activador de búsqueda; es decir, CTRL K o ⌘K
    • useLockBody: se utiliza para desactivar el desplazamiento de la ventana gráfica actual cuando se abre el cuadro de diálogo de búsqueda
    • useRouter: (en lugar de agregar reaccionar-router a los departamentos), este gancho se ajusta a window.location y usa el objeto de asignación como push; utilizado principalmente en el componente SearchResult para dirigirse a la página de resultados seleccionada/en la que se hizo clic
  • Se implementó la indexación de búsqueda en la isla de búsqueda con el método de documento de flexsearch como opción preferida.
    • Se agregó una nueva tienda de búsqueda para administrar los estados relacionados con la búsqueda con nanostores y la integración @nanostores/react
    • Se agregaron los siguientes valores y acciones de la tienda
      • $isSearchOpen: estado global para gestionar el estado de SearchDialog
      • $recentSearches: estado para realizar un seguimiento de las palabras buscadas recientemente; funciona en colaboración con localStorage para conservar su valor incluso después de recargar la pestaña
      • $addToRecentSearchesFn: una acción de tienda que agrega un nuevo artículo al valor de tienda de $recentSearches
• Se agregó una tienda de $dictionary para administrar todas las entradas del diccionario; mantenerlo accesible para el cliente y usarlo como valor para searchIndex en la isla de búsqueda
  • Valor calculado para el almacén del diccionario lo antes posible desde el diseño/base con el método Astro.glob() que indexa todo el directorio del diccionario
• Se agregó la isla RecentSearches que lee el valor de la tienda $recentSearches y lo muestra en la página de inicio

Presentación de pantalla

Demo completa

screencast-bpconcjcammlapcogcnnelfmaeghhagj-2024.03.25-13_32_30.webm

?

Ver en GitHub