Search Plugin for Gatsby
Gatsby plugin for full text search implementation based on Lunr.js client-side index. It supports multilanguage search. Search index is placed into the /public folder during build time and has to be downloaded on client side on run time.
Getting Started
Install gatsby-plugin-lunr
npm install --save gatsby-plugin-lunr
or
yarn add gatsby-plugin-lunr
Add gatsby-plugin-lunr
configuration to the gatsby-config.js
as following:
moduleexports = plugins: resolve: `gatsby-plugin-lunr` options: languages: // ISO 639-1 language codes. See https://lunrjs.com/guides/language_support.html for details name: 'en' // A function for filtering nodes. () => true by default nodefrontmatterlang === 'en' // Add to index custom entries, that are not actually extracted from gatsby nodes customEntries: title: 'Pictures' content: 'awesome pictures' url: '/pictures' name: 'fr' nodefrontmatterlang === 'fr' // Fields to index. If store === true value will be stored in index file. // Attributes for custom indexing logic. See https://lunrjs.com/docs/lunr.Builder.html for details fields: name: 'title' store: true attributes: boost: 20 name: 'content' name: 'url' store: true // How to resolve each field's value for a supported node type resolvers: // For any node of type MarkdownRemark, list how to resolve the fields' values MarkdownRemark: nodefrontmattertitle noderawMarkdownBody nodefieldsurl //custom index file name, default is search_index.json filename: 'search_index.json' //custom options on fetch api call for search_ındex.json fetchOptions: credentials: 'same-origin'
Using plugins
const myPlugin = { // removing stemmer builderpipeline buildersearchPipeline // or similarity tuning builder builder}
Pass it to the gatsby-config.js
:
...
languages: [
{
name: 'en',
...
plugins: [myPlugin]
}
]
...
Implementing Search in Your Web UI
The search data will be available on the client side via window.__LUNR__
that is an object with the following fields:
index
- a lunr index instancestore
- object where the key is a gatsby node ID and value is a collection of field values.
// Search component { superprops thisstate = query: `` results: } { return <div> <input type="text" value=thisstatequery onChange=thissearch /> <ul>thisstateresults</ul> </div> } { if !query || !window__LUNR__ return const lunrIndex = window__LUNR__thispropslng; const results = lunrIndexindex // you can customize your search , see https://lunrjs.com/guides/searching.html return results } { const query = eventtargetvalue const results = this this }
Sample code and example on implementing search within gatsby starter project could be found in the article at: https://medium.com/humanseelabs/gatsby-v2-with-a-multi-language-search-plugin-ffc5e04f73bc