hugo lyra

Hugo-Lyra

Hugo es un fantástico generador de sitios estáticos y, como la mayoría de ellos, no es capaz de implementar de forma nativa un motor de búsqueda dinámico como estamos acostumbrados a usar en plataformas del lado del servidor más tradicionales, con capacidades de consulta más o menos avanzadas.

Este proyecto pretende solucionar este problema integrando el motor de búsqueda Lyra con Hugo.

Funciona analizando los archivos content/**/*.md en texto sin formato y usándolo para generar un índice Lyra, que se convertirá en un activo estático que puede publicar junto con los otros archivos de Hugo public dist.

Este proyecto también ofrece una biblioteca javascript del lado del cliente para consumir fácilmente el índice de su sitio web Hugo; Puedes verlo en acción en mi blog personal aquí y aquí para la implementación. Puede saltar a la sección de clientes para obtener más detalles.

El analizador puede analizar solo archivos Markdown, y los elementos iniciales estándar, matrices como etiquetas y categorías están implosionadas y separadas por espacios.

Definición del esquema :

 const hugoDb = create ( {
  schema : {
    title : "string" ,
    body : "string" ,
    uri : "string" ,
    meta : {
      date : "string" ,
      description : "string" ,
      tags : "string" ,
      categories : "string" ,
      keywords : "string" ,
      summary : "string" ,
    } ,
  } ,
  defaultLanguage : "english" ,
} ) ; 

Lado del cliente

Necesita importar la biblioteca desde la CDN:

 < script src = https://unpkg.com/hugo-lyra@latest/dist/browser/hugo-lyra.js > </ script >

O mejor usando Hugo Pipes en tu plantilla base:

 { { $script : = resources . GetRemote https : //unpkg.com/hugo-lyra@latest/dist/browser/hugo-lyra.js | minify | fingerprint }}
< script src = "{{ $script.RelPermalink }}" integrity = "{{ $script.Data.Integrity }}" > < / script >

El código del cliente incluye el código del índice de búsqueda de Lyra para garantizar que el índice generado sea compatible en el lado del cliente y del servidor; no es necesario importarlo por separado . La limitación de este enfoque es que no se puede cambiar la versión de Lyra.

Una vez creado una instancia, encontrará un nuevo objeto global en la window.HugoLyra Objeto global HugoLyra que puede utilizar para implementar su motor de búsqueda.

Depende de usted cómo lo utilizará para adaptarlo mejor a sus necesidades; A continuación puede encontrar una implementación sencilla y sin formato de JavaScript que puede utilizar como punto de partida:

 ( async ( ) => {
  try {
    const params = new URLSearchParams ( window . location . search ) ;
    const query = params . get ( "q" ) ;
    if ( query ) {
      const db = await HugoLyra . fetchDb ( `/hugo-lyra-english.json` ) ;
      const res = await HugoLyra . search ( db , { term : query , properties : "*" } ) ;
      document . getElementById ( "search-input" ) . setAttribute ( "value" , res . options . term ) ;
      let resultList = "" ;
      const searchResults = document . getElementById ( "results" ) ;
      if ( res ?. search ?. count ) {
        for ( const hit of res . search . hits ) {
          const doc = hit . document ;
          resultList += "<li>" ;
          resultList += '<span class="date">' + doc . meta . date + "</span>" ;
          resultList += '<a class="title" href="' + doc . uri + '">' + doc . title + "</a>" ;
          resultList += "</li>" ;
        }
      }
      searchResults . innerHTML = resultList . length ? resultList : "No results found" ;
    }
  } catch ( e ) {
    console . error ( e ) ;
  }
} ) ( ) ;

Este código es parte de mi blog; Puedes profundizar más aquí.

Lado del servidor

npm i paolomainardi/hugo-lyra

yarn add paolomainardi/hugo-lyra

Uso

Hugo-Lyra es fácil de usar.

Una vez instalado, puedes integrarlo en tu package.json en la sección de scripts de esta manera:

 "scripts" : {
  "index" : " hugo-lyra "
}

De forma predeterminada, Hugo-Lyra leerá su directorio content y generará el índice de Lyra en public/hugo-lyra-english.msp .

Puede modificar algunas configuraciones (como entrada, salida, idioma, formato, etc.) pasando argumentos de entrada a la CLI; Puedes ver todas las opciones ejecutando:

npx hugo-lyra -h

Por supuesto, puedes regenerar el índice mediante programación simplemente ejecutando:

npx hugo-lyra

> CONSEJO: Si lo ejecuta con DEBUG=hugo-lyra npx hugo lyra , puede obtener ganancias

> de registros de depuración adicionales.

Por ejemplo, suponiendo que queremos:

• Generar el índice en formato JSON

• Guárdalo en dist/search

• Analizar content/posts

El comando será: npx --yes hugo-lyra --content content/posts --indexFormat json --indexFilePath output/search

CONSEJO: Si lo ejecuta con DEBUG=hugo-lyra npx hugo lyra , puede obtener ganancias

Cómo utilizar la API hugo-lyra

Hugo-Lyra incluye módulos ES, CommonJS.

En la mayoría de los casos, importe o solicite paolomainardi/hugo-lyra y su entorno elegirá la compilación más adecuada.

A veces, es posible que necesite importar o solicitar archivos específicos (como tipos). Las siguientes compilaciones están incluidas en el paquete Lyra:

Puedes usarlo desde Javascript/Typecript:

Mecanografiado

 import { cwd } from "process" ;
import { generateIndex } from "hugo-lyra" ;
import { LyraOptions } from "hugo-lyra/dist/esm/types" ;

( async ( ) => {
  const res = await generateIndex ( "./content" , < LyraOptions > {
  indexFilePath : cwd ( ) ,
} );

console.log(res);

} ) ( ) ;

JavaScript

 const { cwd } = require ( "process" ) ;
const { generateIndex } = require ( "hugo-lyra" ) ;

( async ( ) => {
  const res = await generateIndex ( "./content" , {
    indexFilePath : process . cwd ( ) ,
  } ) ;
  console . log ( res ) ;
} ) ( ) ;