Search Plugin for Gatsby
Gatsby plugin for full text search implementation based on FlexSearch.js client-side index, heavily inspired in the gatsby-plugin-lunr.
Getting Started
Install gatsby-plugin-flexsearch
npm install --save gatsby-plugin-flexsearch
Add gatsby-plugin-flexsearch
configuration to the gatsby-config.js
as following:
moduleexports = plugins: resolve: 'gatsby-plugin-flexsearch' options: languages: 'en' type: 'MarkdownRemark' fields: name: 'title' indexed: true resolver: 'frontmatter.title' attributes: encode: 'balance' tokenize: 'strict' threshold: 6 depth: 3 store: true name: 'description' indexed: true resolver: 'frontmatter.description' attributes: encode: 'balance' tokenize: 'strict' threshold: 6 depth: 3 store: false name: 'url' indexed: false resolver: 'fields.slug' store: true
Implementing Search in Your Web UI
The search data will be available on the client side via window.__FLEXSEARCH__
that is an object with the following fields:
index
- a flexsearch index instancestore
- object where the key is a gatsby node ID and value is a collection of field values.
// Search component state = query: '' results: { const ResultList = { if thisstateresultslength > 0 return thisstateresults else if thisstatequerylength > 2 return 'No results for ' + thisstatequery else if thisstateresultslength === 0 && thisstatequerylength > 0 return 'Please insert at least 3 characters' else return '' } return <div className=thispropsclassNames> <input className="search__input" type="text" onChange=thissearch placeholder='Search' /> <div className="search__list"> <ResultList /> </div> </div> } { var index = window__FLEXSEARCH__enindex var store = window__FLEXSEARCH__enstore if !query || !index return else var results = Object results = Array var nodes = store return nodes } { const query = eventtargetvalue if thisstatequerylength > 2 const results = this this else this }