Remove external algolia plugin and move functionality into a local pl…

…ugin
artsy · Feb 21, 2020 · c6a66b1 · c6a66b1
1 parent 39183e6
commit c6a66b1
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 33 deletions.
diff --git a/packages/palette-docs/gatsby-config.js b/packages/palette-docs/gatsby-config.js
@@ -78,14 +78,11 @@ module.exports = {
     "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"),
+      resolve: "gatsby-plugin-local-algolia-docsearch",
       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`
+        apiKey: "e4ea4437446d07b0549e0db7928d92d1",
+        indexName: "artsy_palette",
+        debug: false,
       },
     },
   ],

diff --git a/packages/palette-docs/gatsby-ssr.js b/packages/palette-docs/gatsby-ssr.js
@@ -1,5 +1,4 @@
 // @ts-check
-import React from "react"
 
 /**
  * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
@@ -9,19 +8,3 @@ import React from "react"
 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
@@ -80,7 +80,6 @@
     "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/plugins/gatsby-plugin-local-algolia-docsearch/gatsby-ssr.js b/packages/palette-docs/plugins/gatsby-plugin-local-algolia-docsearch/gatsby-ssr.js
@@ -0,0 +1,30 @@
+const React = require("react")
+
+exports.onRenderBody = (
+  { setHeadComponents, setPostBodyComponents },
+  { apiKey, indexName, debug = false }
+) => {
+  setHeadComponents([
+    <link
+      key="docsearch-css"
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
+    />,
+  ])
+
+  setPostBodyComponents([
+    <script
+      key="docsearch-js"
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
+    />,
+    <script
+      key="docsearch-settings"
+      type="text/javascript"
+      dangerouslySetInnerHTML={{
+        __html: `window.docsearchSettings = {
+          apiKey: "${apiKey}", indexName: "${indexName}", debug: ${debug}}`,
+      }}
+    />,
+  ])
+}
diff --git a/packages/palette-docs/plugins/gatsby-plugin-local-algolia-docsearch/index.js b/packages/palette-docs/plugins/gatsby-plugin-local-algolia-docsearch/index.js
@@ -0,0 +1 @@
+// noop
diff --git a/packages/palette-docs/plugins/gatsby-plugin-local-algolia-docsearch/package.json b/packages/palette-docs/plugins/gatsby-plugin-local-algolia-docsearch/package.json
@@ -0,0 +1,3 @@
+{
+  "name": "gatsby-plugin-local-algolia-docsearch"
+}
diff --git a/packages/palette-docs/src/components/Sidebar/SearchBox.tsx b/packages/palette-docs/src/components/Sidebar/SearchBox.tsx
@@ -3,12 +3,15 @@ import React, { useEffect } from "react"
 
 export function SearchBox() {
   useEffect(() => {
+    if (window.docsearchSettings === undefined) {
+      return
+    }
     console.log("doing the thing with ", window.docsearchSettings)
     docsearch({
       apiKey: window.docsearchSettings.apiKey,
       indexName: window.docsearchSettings.indexName,
       inputSelector: "#search",
-      debug: "false",
+      debug: window.docsearchSettings.indexName,
     })
   }, [])
   return <Input id="search" placeholder="Search docs" />

diff --git a/yarn.lock b/yarn.lock
@@ -10719,13 +10719,6 @@ 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"