Make search optional

Tried to just to optionally remove the plugin, page and components but gatsby would still fail the
search query, even though the page wasn't created anywhere.

So have changed the indexed fields to empty if off, then the schema still gets
updated and the query works.

Also made the text field get focus and updtes the docs

Author: stuarthendren

README.md

@@ -26,6 +26,7 @@ A theme for writing documentation sites in Markdown.
 - emojis using :shortcodes:
 - SEO friendly
 - Fully customizable
+- 🔍 Search
 
 ## 🔗 Live Demo and Instructions
 
@@ -66,7 +67,7 @@ gatsby develop
 
 Visit `http://localhost:8000/` to view the site.
 
-Full text search is provided, but you MUST before a clean first to reindex the content:
+Full text search is provided, but you MUST clean first to reindex the content:
 
 ```bash
 gatsby clean

example/docs/instructions.md

@@ -23,14 +23,14 @@ module.exports = {
     title: "Title",
     author: "Author",
     description: "Description",
-    siteUrl: "https://your.site.url"
+    siteUrl: "https://your.site.url",
   },
   plugins: [
     {
       resolve: `@committed/gatsby-theme-docs`,
-      options: {}
-    }
-  ]
+      options: {},
+    },
+  ],
 };
 ```
 
@@ -68,6 +68,10 @@ You can also navigate with the keyboard using `left` and `right` arrows for prev
 An additional page on `/print` is provided in order to print (or print to pdf) the docs.
 Use keyboard shortcut `shift+p` to navigate to the print page (then `cmd+p` to print), `esc` to go back home.
 
+## Search
+
+Search is added by default but can be turned off in the config by setting search `false`.
+
 ## Configuration
 
 Options can be supplied to configure the docs.
@@ -106,7 +110,9 @@ module.exports = {
         print: {
           classification: null
           reference: "https://committed.software/docs"
-        }
+        },
+        // can omit search when true, as true is the default
+        search: false
       }
     }
   ]

example/gatsby-config.js

@@ -1,6 +1,6 @@
 const { NODE_ENV } = process.env;
 
-const pathPrefix = env => {
+const pathPrefix = (env) => {
   return env === "production" ? "/docs" : "";
 };
 
@@ -11,7 +11,7 @@ module.exports = {
     author: "Committed",
     description: "Documentation built with mdx.",
     siteUrl: "https://committed.software/docs",
-    docsLocation: "https://github.com/commitd/docs-starter/tree/master/content"
+    docsLocation: "https://github.com/commitd/docs-starter/tree/master/content",
   },
   plugins: [
     {
@@ -24,21 +24,21 @@ module.exports = {
           helpUrl: "",
           links: [
             { text: "example", link: "/example1" },
-            { text: "mdx", link: "/example2" }
-          ]
+            { text: "mdx", link: "/example2" },
+          ],
         },
         sidebar: {
           ignoreIndex: false,
-          links: [{ text: "Example", link: "https://committed.io" }]
+          links: [{ text: "Example", link: "https://committed.io" }],
         },
         checkLinks: {
-          exceptions: ["/broken"]
+          exceptions: ["/broken"],
         },
         print: {
           classification: "OFFICIAL",
-          reference: "https://committed.software/docs"
-        }
-      }
+          reference: "https://committed.software/docs",
+        },
+      },
     },
     {
       resolve: `gatsby-plugin-manifest`,
@@ -49,11 +49,11 @@ module.exports = {
         background_color: `#3E3E3E`,
         theme_color: `#FFBB00`,
         display: `browser`,
-        icon: `${__dirname}/Avatar.png` // This path is relative to the root of the site.
-      }
-    }
+        icon: `${__dirname}/Avatar.png`, // This path is relative to the root of the site.
+      },
+    },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,
-  ]
+  ],
 };

theme/gatsby-config.js

@@ -6,6 +6,7 @@ module.exports = ({
   sidebar,
   print,
   checkLinks = {},
+  search = true,
 }) => ({
   siteMetadata: {
     title: 'Docs',
@@ -34,17 +35,19 @@ module.exports = ({
       },
       print
     ),
+    search,
   },
   plugins: [
     `gatsby-plugin-typescript`,
     `gatsby-plugin-material-ui`,
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-sharp`,
-    // Add search
     {
       resolve: `@gatsby-contrib/gatsby-plugin-elasticlunr-search`,
       options: {
-        fields: [`title`, `description`, `content`],
+        // don't index anything if search is off
+        // this retains schema entries but stops the effort.
+        fields: search ? [`title`, `description`, `content`] : [],
         resolvers: {
           Docs: {
             title: (node) => node.title,

theme/gatsby-node.js

@@ -81,7 +81,7 @@ exports.sourceNodes = ({ actions, schema }) => {
 
 exports.createPages = async (
   { actions, graphql, reporter, createContentDigest },
-  options
+  { sidebar, search = true }
 ) => {
   const { createPage, createNode } = actions
   return new Promise((resolve, reject) => {
@@ -107,10 +107,7 @@ exports.createPages = async (
           return
         }
 
-        const treeData = calculateTreeData(
-          options.sidebar,
-          result.data.allDocs.edges
-        )
+        const treeData = calculateTreeData(sidebar, result.data.allDocs.edges)
 
         const data = flattenTree(treeData)
 
@@ -152,14 +149,16 @@ exports.createPages = async (
           },
         })
 
-        createPage({
-          path: '/search',
-          component: path.resolve(`${__dirname}/src/layout/search.tsx`),
-          context: {
-            layout: 'docs',
-            data,
-          },
-        })
+        if (search) {
+          createPage({
+            path: '/search',
+            component: path.resolve(`${__dirname}/src/layout/search.tsx`),
+            context: {
+              layout: 'docs',
+              data,
+            },
+          })
+        }
 
         const fieldData = {
           data: treeData,
@@ -249,3 +248,13 @@ exports.onCreateNode = ({
     }
   }
 }
+
+exports.createSchemaCustomization = ({ actions }) => {
+  const { createTypes } = actions
+  const typeDefs = `
+    type AuthorJson implements Node {
+      joinedAt: Date
+    }
+  `
+  createTypes(typeDefs)
+}

theme/src/components/Header.tsx

@@ -8,6 +8,7 @@ export const Header = () => {
     site: {
       siteMetadata: {
         header: { title, helpUrl, logo, links },
+        search,
       },
     },
   } = useStaticQuery(
@@ -27,6 +28,7 @@ export const Header = () => {
                 text
               }
             }
+            search
           }
         }
       }
@@ -58,11 +60,13 @@ export const Header = () => {
             </Button>
           </ClearLink>
         ))}
-      <ClearLink href="/search">
-        <Button color="inherit" variant="text">
-          <Icons.Search />
-        </Button>
-      </ClearLink>
+      {search ? (
+        <ClearLink href="/search">
+          <Button color="inherit" variant="text">
+            <Icons.Search />
+          </Button>
+        </ClearLink>
+      ) : null}
       {helpUrl !== '' ? (
         <a href={helpUrl}>
           <Icons.Help />

theme/src/components/Layout.tsx

@@ -12,7 +12,7 @@ import { PreviousNext } from './PreviousNext'
 import { SEO, SEOProps } from './SEO'
 import { Sidebar } from './Sidebar'
 
-export interface LayoutProps extends SEOProps {
+export interface LayoutProps extends Omit<SEOProps, 'title'> {
   id: string
   pageContext: PageContext
   location: any
@@ -39,9 +39,9 @@ export const Layout = ({
   useHotkeys('shift+home', () => navigate('/'))
   useHotkeys('shift+p', () => navigate('/print'))
 
-  const navigateTo = url => {
+  const navigateTo = (url) => {
     navigate(url, {
-      state: collapsed
+      state: collapsed,
     })
   }
 
@@ -51,20 +51,20 @@ export const Layout = ({
         pathname: location.pathname,
         navigate: navigateTo,
         collapsed,
-        setCollapsed
+        setCollapsed,
       }}
     >
       <ThemeProvider
         fonts={{
           display: {
             fontFamily:
               'Dosis, "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif',
-            fontWeight: 700
+            fontWeight: 700,
           },
           text: {
             fontFamily:
-              'Lato, -apple-system, BlinkMacSystemFont, "San Francisco", Roboto,  "Segoe UI", "Helvetica Neue"'
-          }
+              'Lato, -apple-system, BlinkMacSystemFont, "San Francisco", Roboto,  "Segoe UI", "Helvetica Neue"',
+          },
         }}
       >
         {pageContext.current && pageContext.current.title && (
@@ -73,7 +73,7 @@ export const Layout = ({
         <Root
           style={{ minHeight: '100vh' }}
           config={{
-            collapsible: false
+            collapsible: false,
           }}
         >
           <LayoutHeader>
@@ -83,7 +83,7 @@ export const Layout = ({
             header={
               // you can provide fixed header inside nav
               // change null to some react element
-              ctx => null
+              (ctx) => null
             }
           >
             <Sidebar location={location} current={id} />

theme/src/components/Search.tsx

@@ -69,6 +69,7 @@ export const Search: FC<SearchProps> = (props: SearchProps) => {
               label="Query"
               value={query}
               onChange={(e) => setQuery(e.target.value)}
+              autoFocus
             />
             <Button color="primary">Search</Button>
           </Form>

theme/src/layout/search.tsx

@@ -1,19 +1,17 @@
-import { graphql } from 'gatsby'
+import { StaticQuery, 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
-    }
-  }
-`
+export default () => (
+  <StaticQuery
+    query={graphql`
+      query SearchIndexQuery {
+        siteSearchIndex {
+          index
+        }
+      }
+    `}
+    render={({ siteSearchIndex: { index } }) => <Search index={index} />}
+  />
+)