Incorporate Algolia-based search

packages/palette-docs/gatsby-config.js

@@ -77,5 +77,16 @@ module.exports = {
     "gatsby-plugin-styled-components",
     "gatsby-plugin-typescript",
     "gatsby-plugin-sitemap",
+    {
+      // Currently this plugin is only being used to hook up the script & css, so the options don't matter a whole lot.
+      //  We could probably just implement the few bits that work for our scenario instead.
+      resolve: `gatsby-plugin-algolia-docsearch`, //require.resolve("./gatsby-algolia-search.js"),
+      options: {
+        apiKey: "it-doesnt-matter-not-using-it", // required
+        indexName: "it-doesnt-matter-not-using-it", // required
+        inputSelector: ".it-doesnt-matter-not-using-it", // required
+        debug: true, // (bool)Optional. Default `false`
+      },
+    },
   ],
 }

packages/palette-docs/gatsby-ssr.js

@@ -1,4 +1,5 @@
 // @ts-check
+import React from "react"
 
 /**
  * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
@@ -8,3 +9,19 @@
 import { Boot } from "./src/Boot"
 
 export const wrapRootElement = Boot
+
+export function onRenderBody(
+  { setHeadComponents, setPostBodyComponents },
+  { apiKey, indexName, inputSelector, debug = false }
+) {
+  setPostBodyComponents([
+    <script
+      key="plugin-docsearch-initiate"
+      type="text/javascript"
+      dangerouslySetInnerHTML={{
+        // I figure I can pull these values from gatsby-config.js somehow.
+        __html: `window.docsearchSettings = {apiKey: "e4ea4437446d07b0549e0db7928d92d1", indexName: "artsy_palette"}`,
+      }}
+    />,
+  ])
+}

packages/palette-docs/package.json

@@ -80,6 +80,7 @@
     "gatsby": "2.3.34",
     "gatsby-image": "^2.0.20",
     "gatsby-mdx": "^0.3.4",
+    "gatsby-plugin-algolia-docsearch": "^1.0.5",
     "gatsby-plugin-catch-links": "^2.0.10",
     "gatsby-plugin-force-trailing-slashes": "^1.0.4",
     "gatsby-plugin-manifest": "^2.0.9",

packages/palette-docs/src/components/Sidebar/SearchBox.tsx

@@ -0,0 +1,15 @@
+import { Input } from "@artsy/palette"
+import React, { useEffect } from "react"
+
+export function SearchBox() {
+  useEffect(() => {
+    console.log("doing the thing with ", window.docsearchSettings)
+    docsearch({
+      apiKey: window.docsearchSettings.apiKey,
+      indexName: window.docsearchSettings.indexName,
+      inputSelector: "#search",
+      debug: "false",
+    })
+  }, [])
+  return <Input id="search" placeholder="Search docs" />
+}

packages/palette-docs/src/components/Sidebar/index.tsx

@@ -4,6 +4,7 @@ import styled from "styled-components"
 import { NavTree } from "./NavTree"
 
 import { ArtsyMarkBlackIcon, Box, Sans, Serif } from "@artsy/palette"
+import { SearchBox } from "./SearchBox"
 
 export const Sidebar = _props => {
   return (
@@ -12,6 +13,7 @@ export const Sidebar = _props => {
         <Serif size="4">Palette</Serif>
       </Link>
 
+      <SearchBox />
       <Box mt={2} mb={4}>
         <NavTree />
       </Box>

yarn.lock

@@ -10719,6 +10719,13 @@ gatsby-mdx@^0.3.4:
     unist-util-remove "^1.0.1"
     unist-util-visit "^1.4.0"
 
+gatsby-plugin-algolia-docsearch@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-algolia-docsearch/-/gatsby-plugin-algolia-docsearch-1.0.5.tgz#d6dea17deda8c8bf9ac8cd3e1fb8f6bf6591db01"
+  integrity sha512-2oylL3ioy22Cu24zP8SpanK09SlP8i3p1j9CQ2rTXJgdNmsK2QhqymaLOGBvzGDMpPRn1qJszlNz/EUNAHafjg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+
 gatsby-plugin-catch-links@^2.0.10:
   version "2.0.13"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-2.0.13.tgz#b49bb1e2383881cffca86a428348a7afdb6c3dd4"