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].