Merge pull request #32 from commitd/cf-21-search

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
 
@@ -47,14 +48,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: {},
+    },
+  ],
 };
 ```
 
@@ -66,6 +67,16 @@ gatsby develop
 
 Visit `http://localhost:8000/` to view the site.
 
+Full text search is provided, but you MUST clean first to reindex the content:
+
+```bash
+gatsby clean
+# Then:
+gatsby build
+# Or
+gatbsy develop
+```
+
 For full instructions see the [live demo](https://committed.software/theme).
 
 ## 🤖 SEO friendly

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,12 +35,31 @@ module.exports = ({
       },
       print
     ),
+    search,
   },
   plugins: [
     `gatsby-plugin-typescript`,
     `gatsby-plugin-material-ui`,
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-sharp`,
+    {
+      resolve: `@gatsby-contrib/gatsby-plugin-elasticlunr-search`,
+      options: {
+        // 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,
+            description: (node) => node.metaDescription,
+            // TODO: This is the full raw body, including front matter
+            content: (node) => node.rawBody,
+            slug: (node) => node.slug,
+          },
+        },
+        // TODO: Optional filter here, which would be useful for drafts?
+      },
+    },
     {
       resolve: `gatsby-plugin-layout`,
       options: {

theme/gatsby-node.js

@@ -20,65 +20,68 @@ exports.sourceNodes = ({ actions, schema }) => {
       fields: {
         id: { type: `ID!` },
         slug: {
-          type: 'String!'
+          type: 'String!',
         },
         title: {
-          type: 'String!'
+          type: 'String!',
         },
         metaTitle: {
-          type: 'String!'
+          type: 'String!',
         },
         metaDescription: {
-          type: 'String!'
+          type: 'String!',
         },
         order: {
-          type: 'String!'
+          type: 'String!',
         },
         tableOfContents: {
           type: 'Json!',
           resolve(source, args, context, info) {
             const type = info.schema.getType(`Mdx`)
             const mdxNode = context.nodeModel.getNodeById({
-              id: source.parent
+              id: source.parent,
             })
             const resolver = type.getFields()['tableOfContents'].resolve
             return resolver(mdxNode, {}, context, {
-              fieldName: 'tableOfContents'
+              fieldName: 'tableOfContents',
             })
-          }
+          },
         },
         body: {
           type: 'String!',
           resolve(source, args, context, info) {
             const type = info.schema.getType(`Mdx`)
             const mdxNode = context.nodeModel.getNodeById({
-              id: source.parent
+              id: source.parent,
             })
             const resolver = type.getFields()['body'].resolve
             return resolver(mdxNode, {}, context, {
-              fieldName: 'body'
+              fieldName: 'body',
             })
-          }
-        }
+          },
+        },
+        rawBody: {
+          type: 'String!',
+        },
       },
-      interfaces: [`Node`]
+      interfaces: [`Node`],
     }),
     schema.buildObjectType({
       name: `Menu`,
       fields: {
         id: { type: `ID!` },
         data: {
-          type: 'Json!'
-        }
+          type: 'Json!',
+        },
       },
-      interfaces: [`Node`]
-    })
+      interfaces: [`Node`],
+    }),
   ])
 }
 
 exports.createPages = async (
   { actions, graphql, reporter, createContentDigest },
-  options
+  { sidebar, search = true }
 ) => {
   const { createPage, createNode } = actions
   return new Promise((resolve, reject) => {
@@ -98,16 +101,13 @@ exports.createPages = async (
             }
           }
         `
-      ).then(result => {
+      ).then((result) => {
         if (result.errors) {
           reporter.panicOnBuild(`Error while running GraphQL query.`)
           return
         }
 
-        const treeData = calculateTreeData(
-          options.sidebar,
-          result.data.allDocs.edges
-        )
+        const treeData = calculateTreeData(sidebar, result.data.allDocs.edges)
 
         const data = flattenTree(treeData)
 
@@ -135,8 +135,8 @@ exports.createPages = async (
               current: item,
               id: item.id,
               previous,
-              next
-            }
+              next,
+            },
           })
         })
 
@@ -145,12 +145,23 @@ exports.createPages = async (
           component: path.resolve(`${__dirname}/src/layout/print.tsx`),
           context: {
             layout: 'print',
-            data
-          }
+            data,
+          },
         })
 
+        if (search) {
+          createPage({
+            path: '/search',
+            component: path.resolve(`${__dirname}/src/layout/search.tsx`),
+            context: {
+              layout: 'docs',
+              data,
+            },
+          })
+        }
+
         const fieldData = {
-          data: treeData
+          data: treeData,
         }
 
         createNode({
@@ -162,8 +173,8 @@ exports.createPages = async (
             type: `Menu`,
             content: JSON.stringify(fieldData),
             description: `Menu`,
-            contentDigest: createContentDigest(fieldData)
-          }
+            contentDigest: createContentDigest(fieldData),
+          },
         })
       })
     )
@@ -189,7 +200,7 @@ exports.onCreateNode = ({
   getNode,
   createNodeId,
   createContentDigest,
-  reporter
+  reporter,
 }) => {
   const { createNode, createParentChildLink } = actions
   if (node.internal.type === `Mdx`) {
@@ -213,7 +224,8 @@ exports.onCreateNode = ({
         metaTitle: node.frontmatter.metaTitle || title,
         metaDescription: node.frontmatter.metaDescription || '',
         order: node.frontmatter.order || title,
-        tableOfContents: node.tableOfContents
+        tableOfContents: node.tableOfContents,
+        rawBody: node.rawBody,
       }
 
       createNode({
@@ -226,13 +238,23 @@ exports.onCreateNode = ({
           type: `Docs`,
           content: JSON.stringify(fieldData),
           description: `Documentation`,
-          contentDigest: createContentDigest(fieldData)
-        }
+          contentDigest: createContentDigest(fieldData),
+        },
       })
       createParentChildLink({
         parent: parent,
-        child: node
+        child: node,
       })
     }
   }
 }
+
+exports.createSchemaCustomization = ({ actions }) => {
+  const { createTypes } = actions
+  const typeDefs = `
+    type AuthorJson implements Node {
+      joinedAt: Date
+    }
+  `
+  createTypes(typeDefs)
+}

theme/package.json

@@ -36,6 +36,7 @@
     "@material-ui/icons": "^4.9.1",
     "@mdx-js/mdx": "^1.6.1",
     "@mdx-js/react": "^1.6.1",
+    "@gatsby-contrib/gatsby-plugin-elasticlunr-search": "^2.3.0",
     "gatsby-plugin-layout": "^1.3.0",
     "gatsby-plugin-material-ui": "^2.1.8",
     "gatsby-plugin-mdx": "^1.2.4",