From 39183e6dc89e5e9dec80999c7eec728f724caa9e Mon Sep 17 00:00:00 2001
From: Steven Hicks <steven.j.hicks@gmail.com>
Date: Fri, 21 Feb 2020 14:12:24 -0600
Subject: [PATCH] Rough implementation of algolia-based search box

---
 packages/palette-docs/gatsby-config.js          | 11 +++++++++++
 packages/palette-docs/gatsby-ssr.js             | 17 +++++++++++++++++
 packages/palette-docs/package.json              |  1 +
 .../src/components/Sidebar/SearchBox.tsx        | 15 +++++++++++++++
 .../src/components/Sidebar/index.tsx            |  2 ++
 yarn.lock                                       |  7 +++++++
 6 files changed, 53 insertions(+)
 create mode 100644 packages/palette-docs/src/components/Sidebar/SearchBox.tsx

diff --git a/packages/palette-docs/gatsby-config.js b/packages/palette-docs/gatsby-config.js
index 378e33a54..4025c482b 100644
--- a/packages/palette-docs/gatsby-config.js
+++ b/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`
+      },
+    },
   ],
 }
diff --git a/packages/palette-docs/gatsby-ssr.js b/packages/palette-docs/gatsby-ssr.js
index 331d84fbd..781100420 100644
--- a/packages/palette-docs/gatsby-ssr.js
+++ b/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"}`,
+      }}
+    />,
+  ])
+}
diff --git a/packages/palette-docs/package.json b/packages/palette-docs/package.json
index 2d6f9735c..92d6fb8cd 100644
--- a/packages/palette-docs/package.json
+++ b/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",
diff --git a/packages/palette-docs/src/components/Sidebar/SearchBox.tsx b/packages/palette-docs/src/components/Sidebar/SearchBox.tsx
new file mode 100644
index 000000000..2ae2f0f78
--- /dev/null
+++ b/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" />
+}
diff --git a/packages/palette-docs/src/components/Sidebar/index.tsx b/packages/palette-docs/src/components/Sidebar/index.tsx
index 639ddd7b2..2f679f1a0 100644
--- a/packages/palette-docs/src/components/Sidebar/index.tsx
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 2d2691c19..17fe8d66b 100644
--- a/yarn.lock
+++ b/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"