SHIP IT FASTER

The average enterprise on Netlify ships 140 times per week. Where does your team rank?

ContactSign Up
Community Plugin
View plugin on GitHub

BlogSearch index building tool for Gatsby

// Asciidoc references // Documentation: https://asciidoctor.org/docs/user-manual/ // Quick reference: https://asciidoctor.org/docs/asciidoc-syntax-quick-reference/ // Asciidoc vs Markdown: https://asciidoctor.org/docs/user-manual/#comparison-by-example // GitHub Flavored Asciidoc (GFA): https://gist.github.com/dcode/0cfbf2699a1fe9b46ff04c41721dda74

:project-version: 0.0.3 :rootdir: https://github.com/kbumsik/blogsearch

ifdef::env-github[] // Emoji :tip-caption: :bulb: :note-caption: :information_source: :important-caption: :heavy_exclamation_mark: :caution-caption: :fire: :warning-caption: :warning: // URL :imagesdir: https://gist.githubusercontent.com/path/to/gist/revision/dir/with/all/images endif::[]

CAUTION: This is a part of link:{rootdir}[BlogSearch project]. If you would like to know the overall concept, go to link:{rootdir}[the parent directory].

1. Building a search index file

Installation

[source,shell] npm install gatsby-plugin-blogsearch

Configuration

CAUTION: Go to link:{rootdir}#whats-in-the-index[the “What’s in the index file” section of the main project]. For more details on how to configure fields.

.gatsby.config.js [source,javascript,options=“nowrap”,subs=“verbatim,attributes”]

module.exports = { … other Gatsby options …

plugins: [ { resolve: ‘gatsby-plugin-blogsearch’, options: { // Generated blogsearch database file. output: ‘reactjs.org.gatsby-example.db.wasm’, // fields configurations // See: {rootdir}#whats-in-the-index fields: { title: { enabled: true, indexed: true, hasContent: true, }, body: { enabled: true, indexed: true, hasContent: true, }, url: { enabled: true, indexed: true, hasContent: true, }, categories: { enabled: true, indexed: true, hasContent: true, }, tags: { enabled: true, indexed: true, hasContent: true, }, }, // GraphQL query used to fetch all data for the search index. This is // required. query: { allMarkdownRemark { edges { node { fields { slug } frontmatter { title } rawMarkdownBody # excerpt # html } } } site { siteMetadata { siteUrl } } } , // Function used to map the result from the GraphQL query. This should // return an array of items to index in the form of flat objects // containing field properties to index. normalizer: ({ data }) => data.allMarkdownRemark.edges.map(({ node }) => { const slug = (node.fields.slug.charAt(0) !== ’/’ ? ’/’ : ”) + node.fields.slug; return { title: node.frontmatter.title, body: node.rawMarkdownBody .replace(/[#`[]]+/g, ”) .replace(/(.*)/g, ”) .replace(/\s+/g, ’ ’), url: data.site.siteMetadata.siteUrl + slug, categories: slug !== ’/’ ? slug.substring(1, slug.indexOf(’/’, 1)) : ”, tags: ”, }; }), }, }, … Other Gatsby plugin options … ], … Rest of Gatsby options … };

Example project

Go to demo

2. Enabling the search engine in the webpage

You need to enable the search engine in the web page. Go to link:../blogsearch[blogsearch Engine].

Again, if you would like to understand the concept of BlogSearch, go to link:{rootdir}/[the parent directory].

© 2023 Gatsby, Inc.