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: :informationsource: :important-caption: :heavyexclamation_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].