gatsby-plugin-blogsearch

BlogSearch index building tool for Gatsby

🔥	This is a part of BlogSearch project. If you would like to know the overall concept, go to the parent directory.

1. Building a search index file

Installation

npm install gatsby-plugin-blogsearch

Configuration

🔥	Go to the "What’s in the index file" section of the main project. For more details on how to configure fields.

gatsby.config.js

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: https://github.com/kbumsik/blogsearch#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
              }
            }
          }
        }
        `,
        // 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 properties to index. The objects must contain the `ref`
        // field above (default: 'id'). This is required.
        normalizer: ({ data }) =>
          data.allMarkdownRemark.edges.map(({ node }, siteUrl) => {
            return {
              title: node.frontmatter.title,
              body: node.rawMarkdownBody
                      .replace(/[#`\[\]]+/g, '')
                      .replace(/\(.*\)/g, '')
                      .replace(/\s+/g, ' '),
              url: siteUrl + node.fields.slug,
              categories: (() => {
                const slug = node.fields.slug;
                return slug ? slug.substring(0, slug.indexOf('/')) : '';
              })(),
              tags: '',
            };
          }),
      },
    },
    ...
    Other Gatsby plugin options
    ...
  ],
  ...
  Rest of Gatsby options
  ...
};

2. Enabling the search engine in the webpage

You need to enable the search engine in the web page. Go to blogsearch Engine.

Again, if you would like to understand the concept of BlogSearch, go to the parent directory.