add basic lunr search implementation

Author: jonnysmillie

gatsby-config.js

@@ -82,6 +82,47 @@ module.exports = {
         path: `${__dirname}/content/media`,
       },
     },
+    {
+      resolve: `gatsby-plugin-lunr`,
+      options: {
+        languages: [
+          // {
+          //   // ISO 639-1 language codes. See https://lunrjs.com/guides/language_support.html for details
+          //   name: 'en',
+          //   // A function for filtering nodes. () => true by default
+          //   filterNodes: node => node.frontmatter.lang === 'en',
+          //   // Add to index custom entries, that are not actually extracted from gatsby nodes
+          //   customEntries: [{ title: 'Pictures', content: 'awesome pictures', url: '/pictures' }],
+          // },
+          // {
+          //   name: 'fr',
+          //   filterNodes: node => node.frontmatter.lang === 'fr',
+          // },
+        ],
+        // Fields to index. If store === true value will be stored in index file.
+        // Attributes for custom indexing logic. See https://lunrjs.com/docs/lunr.Builder.html for details
+        fields: [
+          { name: 'title', store: true, attributes: { boost: 20 } },
+          { name: 'content' },
+          { name: 'url', store: true },
+        ],
+        // How to resolve each field's value for a supported node type
+        resolvers: {
+          // For any node of type MarkdownRemark, list how to resolve the fields' values
+          MarkdownRemark: {
+            title: node => node.frontmatter.title,
+            content: node => node.rawMarkdownBody,
+            url: node => node.fields.url,
+          },
+        },
+        //custom index file name, default is search_index.json
+        filename: 'search_index.json',
+        //custom options on fetch api call for search_ındex.json
+        fetchOptions: {
+          credentials: 'same-origin',
+        },
+      },
+    },
     /* work with images
        - need to be after sourcing images
        - docs: https://www.gatsbyjs.com/plugins/gatsby-plugin-image */

gatsby-node.js

@@ -17,3 +17,61 @@ exports.onCreateNode = props => {
     addPathFieldToMarkdown(props);
   }
 };
+
+const { GraphQLJSONObject } = require(`graphql-type-json`)
+const striptags = require(`striptags`)
+const lunr = require(`lunr`)
+
+exports.createResolvers = ({ cache, createResolvers }) => {
+  createResolvers({
+    Query: {
+      LunrIndex: {
+        type: GraphQLJSONObject,
+        resolve: (source, args, context, info) => {
+          const markdownNodes = context.nodeModel.getAllNodes({
+            type: `MarkdownRemark`,
+          })
+          const type = info.schema.getType(`MarkdownRemark`)
+          return createIndex(markdownNodes, type, cache)
+        },
+      },
+    },
+  })
+}
+const createIndex = async (markdownNodes, type, cache) => {
+  const cacheKey = `IndexLunr`
+  const cached = await cache.get(cacheKey)
+  if (cached) {
+    return cached
+  }
+  const documents = []
+  const store = {}
+  for (const node of markdownNodes) {
+    const {path} = node.fields
+    const title = node.frontmatter.title
+    const [html, excerpt] = await Promise.all([
+      type.getFields().html.resolve(node),
+      type.getFields().excerpt.resolve(node, { pruneLength: 40 }),
+    ])
+    documents.push({
+      path: node.fields.path,
+      title: node.frontmatter.title,
+      content: striptags(html),
+    })
+    store[path] = {
+      title,
+      excerpt,
+    }
+  }
+  const index = lunr(function() {
+    this.ref(`path`)
+    this.field(`title`)
+    this.field(`content`)
+    for (const doc of documents) {
+      this.add(doc)
+    }
+  })
+  const json = { index: index.toJSON(), store }
+  await cache.set(cacheKey, json)
+  return json
+}

src/components/site/Header.js

@@ -9,6 +9,7 @@ import Logo from '../site/Logo';
 import DocsButton from './DocsButton';
 import NavMain from './NavMain';
 import NavMobile from './NavMobile';
+import SearchForm from './SearchForm';
 import ThemeToggle from './ThemeToggle';
 
 const Header = ({ mode, header }) => {
@@ -63,6 +64,9 @@ const Header = ({ mode, header }) => {
               <NavMain header={header} isScrolled={isScrolled} />
             </div>
             <div className=" w-1/2 flex items-center justify-end">
+              <div>
+                <SearchForm />
+              </div>
               <div className="pl-8 pr-6">
                 <DocsButton />
               </div>

src/components/site/SearchForm.js

@@ -0,0 +1,53 @@
+/* src/components/search-form.js */
+import { navigate } from '@reach/router';
+import React, { useRef, useState } from 'react';
+
+import Icon from '../default/Icon';
+const SearchForm = ({ initialQuery = '' }) => {
+  // Create a piece of state, and initialize it to initialQuery
+  // query will hold the current value of the state,
+  // and setQuery will let us change it
+  const [query, setQuery] = useState(initialQuery);
+
+  // We need to get reference to the search input element
+  const inputEl = useRef(null);
+
+  // On input change use the current value of the input field (e.target.value)
+  // to update the state's query value
+  const handleChange = e => {
+    setQuery(e.target.value);
+  };
+
+  // When the form is submitted navigate to /search
+  // with a query q paramenter equal to the value within the input search
+  const handleSubmit = e => {
+    e.preventDefault();
+    // `inputEl.current` points to the mounted search input element
+    const q = inputEl.current.value;
+    navigate(`/search?q=${q}`);
+  };
+  return (
+    <form
+      role="search"
+      onSubmit={handleSubmit}
+      className="border-none flex h-full items-center justify-between p-2 cursor-text active:outline-none focus:outline-none"
+    >
+      <input
+        ref={inputEl}
+        id="search-input"
+        type="search"
+        value={query}
+        placeholder="Search Docs"
+        onChange={handleChange}
+        className="border-none mb-0 pr-4 text-sm text-substrateDark dark:text-white text-opacity-25 dark:text-opacity-9 border-none bg-substrateGray active:outline-none focus:outline-none ring-offset-transparent rounded"
+      />
+      <button
+        type="submit"
+        className="h-9 ml-2 flex items-center justify-center bg-substrateDark dark:bg-white  text-sm py-2 w-10 rounded focus:outline-none fill-current text-white dark:text-black"
+      >
+        <Icon name="search" width="18" className="h-9 fill-current dark:text-black text-white" />
+      </button>
+    </form>
+  );
+};
+export default SearchForm;

src/pages/search.js

@@ -0,0 +1,71 @@
+/* src/pages/search.js */
+import { graphql, Link } from 'gatsby';
+import { Index } from 'lunr';
+import React from 'react';
+
+import Layout from '../components/site/Layout';
+//import SearchForm from '../components/site/SearchForm';
+import SEO from '../components/site/SEO';
+
+// We can access the results of the page GraphQL query via the data props
+const SearchPage = ({ data, location }) => {
+  const siteTitle = data.site.siteMetadata.title;
+
+  // We can read what follows the ?q= here
+  // URLSearchParams provides a native way to get URL params
+  // location.search.slice(1) gets rid of the "?"
+  const params = new URLSearchParams(location.search.slice(1));
+  const q = params.get('q') || '';
+
+  // LunrIndex is available via page query
+  const { store } = data.LunrIndex;
+  // Lunr in action here
+  const index = Index.load(data.LunrIndex.index);
+  let results = [];
+  try {
+    // Search is a lunr method
+    results = index.search(q).map(({ ref }) => {
+      // Map search results to an array of {slug, title, excerpt} objects
+      return {
+        path: ref,
+        ...store[ref],
+      };
+    });
+  } catch (error) {
+    console.log(error);
+  }
+  return (
+    <Layout location={location} title={siteTitle}>
+      <SEO title="Search results" />
+      <div className="pt-5 w-8/12 block text-left mx-auto">
+        {q ? <h1>Search results for &quot;{q}&quot;</h1> : <h1>What are you looking for?</h1>}
+        {results.length ? (
+          results.map(result => {
+            return (
+              <article key={result.path}>
+                {console.log(result)}
+                <h2>
+                  <Link to={result.path}>{result.title || result.path}</Link>
+                </h2>
+                <p>{result.excerpt}</p>
+              </article>
+            );
+          })
+        ) : (
+          <p>Nothing found.</p>
+        )}
+      </div>
+    </Layout>
+  );
+};
+export default SearchPage;
+export const pageQuery = graphql`
+  query {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+    LunrIndex
+  }
+`;