gatsby-plugin-blogsearch v0.0.2

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-indexthe "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:../blogsearchblogsearch Engine.

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