diff --git a/packages/palette-docs/gatsby-config.js b/packages/palette-docs/gatsby-config.js
index 378e33a54..956994ce5 100644
--- 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
new file mode 100644
index 000000000..2c4530007
--- /dev/null
+++ 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([
+ ,
+ ])
+
+ setPostBodyComponents([
+ ,
+ ,
+ ])
+}
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
new file mode 100644
index 000000000..172f1ae6a
--- /dev/null
+++ 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
new file mode 100644
index 000000000..ad6cc6506
--- /dev/null
+++ 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
new file mode 100644
index 000000000..dd8038602
--- /dev/null
+++ 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
+}
diff --git a/packages/palette-docs/src/components/Sidebar/algolia.css b/packages/palette-docs/src/components/Sidebar/algolia.css
new file mode 100644
index 000000000..5e8c1449b
--- /dev/null
+++ 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
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 => {
Palette
+