Add a search page

Author: chrisflatley

theme/gatsby-node.js

@@ -148,8 +148,17 @@ exports.createPages = async (
           component: path.resolve(`${__dirname}/src/layout/print.tsx`),
           context: {
             layout: 'print',
-            data
-          }
+            data,
+          },
+        })
+
+        createPage({
+          path: '/search',
+          component: path.resolve(`${__dirname}/src/layout/search.tsx`),
+          context: {
+            layout: 'docs',
+            data,
+          },
         })
 
         const fieldData = {

theme/src/components/Header.tsx

@@ -1,15 +1,15 @@
+import { Box, Button, Flex, Heading, Icons, Logo } from '@committed/components'
+import { graphql, useStaticQuery } from 'gatsby'
 import React from 'react'
-import { useStaticQuery, graphql, navigate } from 'gatsby'
 import { ClearLink } from './Link'
-import { Box, Flex, Logo, Button, Heading, Icons } from '@committed/components'
 
 export const Header = () => {
   const {
     site: {
       siteMetadata: {
-        header: { title, helpUrl, logo, links }
-      }
-    }
+        header: { title, helpUrl, logo, links },
+      },
+    },
   } = useStaticQuery(
     graphql`
       query headerQuery {
@@ -50,14 +50,19 @@ export const Header = () => {
         </ClearLink>
       </Flex>
       {links
-        .filter(link => link.link !== '' && link.text !== '')
+        .filter((link) => link.link !== '' && link.text !== '')
         .map((link, key) => (
           <ClearLink key={key} href={link.link}>
             <Button color="inherit" variant="text">
               {link.text}
             </Button>
           </ClearLink>
         ))}
+      <ClearLink href="/search">
+        <Button color="inherit" variant="text">
+          <Icons.Search />
+        </Button>
+      </ClearLink>
       {helpUrl !== '' ? (
         <a href={helpUrl}>
           <Icons.Help />

theme/src/components/Search.tsx

@@ -0,0 +1,107 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  Form,
+  List,
+  ListItem,
+  TextField,
+  Typography,
+} from '@committed/components'
+import { Index } from 'elasticlunr'
+import React, {
+  FC,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { DocsContext } from './Layout'
+
+interface SearchProps {
+  index: any
+}
+
+// These are defined through gatsby-node.js in the elasticlunr config
+interface Result {
+  id: string
+  title: string
+  description?: string
+  body: string
+  slug: string
+}
+
+export const Search: FC<SearchProps> = (props: SearchProps) => {
+  const { navigate } = useContext(DocsContext)
+
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<Result[]>([])
+
+  const index = useMemo(() => {
+    return Index.load(props.index)
+  }, props.index)
+
+  const search = useCallback(() => {
+    // Consider: Should we stop if query.length < 3?
+
+    const r = index
+      // Expand allows for partial matches (mer matches mermaid)
+      .search(query, { expand: true })
+      // Map over each ID and return the full document
+      .map(({ ref }) => index.documentStore.getDoc(ref))
+
+    //  Consider: Should be limit number of results?
+    setResults(r)
+  }, [index, query, setResults])
+
+  // Consider: Search as you type - possible not a good idea for larger sites?
+  useEffect(() => search(), [query, search])
+
+  return (
+    <>
+      <Card>
+        <CardContent>
+          <Form display="flex" width={1} onSubmit={search}>
+            <TextField
+              flexGrow={1}
+              id="query-input"
+              label="Query"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+            <Button color="primary">Search</Button>
+          </Form>
+        </CardContent>
+      </Card>
+      {results.length === 0 && query !== '' && (
+        <Typography variant="body1" gutterBottom>
+          Sorry, no results found for "<i>{query}</i>"
+        </Typography>
+      )}
+      {results.length > 0 && (
+        <Card>
+          <CardContent>
+            <Typography variant="body1" gutterBottom>
+              Found {results.length} results for "<i>{query}</i>".
+            </Typography>
+            <List>
+              {results.map((r) => (
+                <ListItem
+                  key={r.id}
+                  button
+                  onClick={() => {
+                    navigate(r.slug)
+                  }}
+                >
+                  {r.title}
+                  {r.description && <small>: {r.description}</small>}
+                </ListItem>
+              ))}
+            </List>
+          </CardContent>
+        </Card>
+      )}
+    </>
+  )
+}

theme/src/layout/search.tsx

@@ -0,0 +1,19 @@
+import { graphql } from 'gatsby'
+import React from 'react'
+import { Search } from '../components/Search'
+import '../style/mermaid.css'
+
+export default ({ data }) => {
+  const {
+    siteSearchIndex: { index },
+  } = data
+  return <Search index={index} />
+}
+
+export const pageQuery = graphql`
+  query SearchIndexQuery {
+    siteSearchIndex {
+      index
+    }
+  }
+`