diff --git a/packages/palette-docs/src/components/Sidebar/SearchBox.tsx b/packages/palette-docs/src/components/Sidebar/SearchBox.tsx index e68feb66b..dd8038602 100644 --- a/packages/palette-docs/src/components/Sidebar/SearchBox.tsx +++ b/packages/palette-docs/src/components/Sidebar/SearchBox.tsx @@ -1,13 +1,20 @@ 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 } - console.log("doing the thing with ", window.docsearchSettings) - docsearch({ + window.docsearch({ apiKey: window.docsearchSettings.apiKey, indexName: window.docsearchSettings.indexName, inputSelector: "#search", 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..ce5042993 --- /dev/null +++ b/packages/palette-docs/src/components/Sidebar/algolia.css @@ -0,0 +1,57 @@ +.algolia-autocomplete .ds-dropdown-menu { + box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15); +} +.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 description (eg. Bootstrap currently works...) */ +.algolia-autocomplete .algolia-docsearch-suggestion--text { + color: #000; +} +/* Highlighted text */ +.algolia-autocomplete .algolia-docsearch-suggestion--highlight { + color: #6e1eff; +} + +.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 { + box-shadow: inset 0 -2px 0 0 #6e1eff; +} +.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; +}