Merge pull request #642 from pepopowitz/algolia-search

Incorporate Algolia-based search
artsy · Feb 24, 2020 · 8d24d65 · 8d24d65
2 parents 163a68f + 3ca4a58
commit 8d24d65
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 0 deletions.
diff --git a/packages/palette-docs/gatsby-config.js b/packages/palette-docs/gatsby-config.js
@@ -77,5 +77,13 @@ module.exports = {
     "gatsby-plugin-styled-components",
     "gatsby-plugin-typescript",
     "gatsby-plugin-sitemap",
+    {
+      resolve: "gatsby-plugin-local-algolia-docsearch",
+      options: {
+        apiKey: "e4ea4437446d07b0549e0db7928d92d1",
+        indexName: "artsy_palette",
+        debug: false,
+      },
+    },
   ],
 }
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
@@ -0,0 +1,25 @@
+import { Input } from "@artsy/palette"
+import React, { useEffect } from "react"
+import "./algolia.css"
+
+declare global {
+  interface Window {
+    docsearch: any
+    docsearchSettings: any
+  }
+}
+
+export function SearchBox() {
+  useEffect(() => {
+    if (window.docsearchSettings === undefined) {
+      return
+    }
+    window.docsearch({
+      apiKey: window.docsearchSettings.apiKey,
+      indexName: window.docsearchSettings.indexName,
+      inputSelector: "#search",
+      debug: window.docsearchSettings.indexName,
+    })
+  }, [])
+  return <Input id="search" placeholder="Search docs" />
+}
diff --git a/packages/palette-docs/src/components/Sidebar/algolia.css b/packages/palette-docs/src/components/Sidebar/algolia.css
@@ -0,0 +1,63 @@
+/* Main overlay */
+.algolia-autocomplete .ds-dropdown-menu {
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
+}
+
+/* Category links */
+.algolia-autocomplete .ds-dropdown-menu .ds-suggestions a {
+  text-decoration: none;
+}
+.algolia-autocomplete .ds-dropdown-menu .ds-suggestions a:hover {
+  text-decoration: underline;
+}
+
+/* Main category (eg. Getting Started) */
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+  border-bottom: 1px solid #e5e5e5;
+  font-size: 1.2em;
+}
+
+/* Category (eg. Downloads) */
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+  color: #666;
+}
+
+/* Title (eg. Bootstrap CDN) */
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
+  font-weight: bold;
+  color: #000;
+}
+
+/* Description (eg. Bootstrap currently works...) */
+.algolia-autocomplete .algolia-docsearch-suggestion--text {
+  color: #000;
+}
+
+/* Highlighted text */
+.algolia-autocomplete
+  .algolia-docsearch-suggestion--category-header
+  .algolia-docsearch-suggestion--category-header-lvl0
+  .algolia-docsearch-suggestion--highlight,
+.algolia-autocomplete
+  .algolia-docsearch-suggestion--category-header
+  .algolia-docsearch-suggestion--category-header-lvl1
+  .algolia-docsearch-suggestion--highlight,
+.algolia-autocomplete
+  .algolia-docsearch-suggestion--text
+  .algolia-docsearch-suggestion--highlight {
+  color: #6e1eff;
+  box-shadow: inset 0 -2px 0 0 #6e1eff;
+}
+
+/* Selected descriptions */
+.algolia-autocomplete
+  .ds-dropdown-menu
+  .ds-suggestion.ds-cursor
+  .algolia-docsearch-suggestion.suggestion-layout-simple,
+.algolia-autocomplete
+  .ds-dropdown-menu
+  .ds-suggestion.ds-cursor
+  .algolia-docsearch-suggestion:not(.suggestion-layout-simple)
+  .algolia-docsearch-suggestion--content {
+  background-color: #f8f8f8;
+}
diff --git 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>