From e49d8f3313b4a727e7cdde7e0f1eb97e4536fee9 Mon Sep 17 00:00:00 2001
From: Mike Allanson <michael.allanson@gmail.com>
Date: Fri, 5 Jan 2018 20:51:31 +0000
Subject: [PATCH] Add search form to site header

---
 www/src/components/navigation.js  | 24 +++++----
 www/src/components/search-form.js | 90 +++++++++++++++++++++++++++++++
 www/src/html.js                   |  2 +
 www/static/search.svg             |  4 ++
 4 files changed, 110 insertions(+), 10 deletions(-)
 create mode 100644 www/src/components/search-form.js
 create mode 100644 www/static/search.svg

diff --git a/www/src/components/navigation.js b/www/src/components/navigation.js
index 1b9acf8ef3867..8526453d65285 100644
--- a/www/src/components/navigation.js
+++ b/www/src/components/navigation.js
@@ -3,6 +3,7 @@ import Link from "gatsby-link"
 import GithubIcon from "react-icons/lib/go/mark-github"
 import TwitterIcon from "react-icons/lib/fa/twitter"
 
+import SearchForm from '../components/search-form'
 import DiscordIcon from "../components/discord"
 import logo from "../gatsby-negative.svg"
 import typography, { rhythm, scale } from "../utils/typography"
@@ -117,8 +118,9 @@ export default ({ pathname }) => {
         <Link
           to="/"
           css={{
+            alignItems: `center`,
             color: `inherit`,
-            display: `inline-block`,
+            display: `flex`,
             textDecoration: `none`,
             marginRight: rhythm(0.5),
           }}
@@ -126,21 +128,21 @@ export default ({ pathname }) => {
           <img
             src={logo}
             css={{
-              display: `inline-block`,
               height: rhythm(1.2),
               width: rhythm(1.2),
               margin: 0,
               marginRight: rhythm(2 / 4),
-              verticalAlign: `middle`,
             }}
             alt=""
           />
           <h1
             css={{
               ...scale(2 / 5),
-              display: `inline-block`,
               margin: 0,
-              verticalAlign: `middle`,
+              display: `none`,
+              [presets.Mobile]: {
+                display: `block`,
+              },
             }}
           >
             Gatsby
@@ -150,10 +152,13 @@ export default ({ pathname }) => {
           css={{
             display: `none`,
             [presets.Tablet]: {
-              display: `block`,
+              display: `flex`,
               margin: 0,
               padding: 0,
               listStyle: `none`,
+              flexGrow: 1,
+              overflowX: `auto`,
+              maskImage: `linear-gradient(to right, transparent, white 20px, white 90%, transparent)`,
             },
           }}
         >
@@ -165,12 +170,11 @@ export default ({ pathname }) => {
         </ul>
         <div
           css={{
-            marginLeft: isHomepage ? rhythm(1 / 2) : `auto`,
-            [presets.Phablet]: {
-              marginLeft: isHomepage ? `auto` : `auto`,
-            },
+            display: `flex`,
+            marginLeft: `auto`,
           }}
         >
+          {!isHomepage && <SearchForm key="SearchForm" styles={{ ...navItemStyles }}/>}
           <a
             href="https://github.com/gatsbyjs/gatsby"
             title="GitHub"
diff --git a/www/src/components/search-form.js b/www/src/components/search-form.js
new file mode 100644
index 0000000000000..f226b42475e6c
--- /dev/null
+++ b/www/src/components/search-form.js
@@ -0,0 +1,90 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import { rhythm } from "../utils/typography"
+import presets from "../utils/presets"
+
+class SearchForm extends Component {
+  constructor() {
+    super()
+    this.state = { enabled: true }
+  }
+
+  componentDidMount() {
+    if (
+      typeof window === `undefined` || // eslint-disable-line no-undef
+      typeof window.docsearch === `undefined` // eslint-disable-line no-undef
+    ) {
+      console.warn(`Search has failed to load and now is being disabled`)
+      this.setState({ enabled: false })
+      return
+    }
+
+    // eslint-disable-next-line no-undef
+    window.docsearch({
+      apiKey: `71af1f9c4bd947f0252e17051df13f9c`,
+      indexName: `gatsbyjs`,
+      inputSelector: `#doc-search`,
+      debug: true,
+    })
+  }
+
+  render() {
+    const { enabled } = this.state
+    const { styles } = this.props.styles
+    return enabled ? (
+      <form
+        css={{
+          ...styles,
+          display: `flex`,
+          flex: `0 0 auto`,
+          flexDirection: `row`,
+          alignItems: `center`,
+          marginLeft: rhythm(1 / 2),
+          marginBottom: 0,
+        }}
+      >
+        <input
+          id="doc-search"
+          css={{
+            appearance: `none`,
+            background: `transparent`,
+            border: 0,
+            color: presets.brand,
+            paddingTop: rhythm(1 / 8),
+            paddingRight: rhythm(1 / 4),
+            paddingBottom: rhythm(1 / 8),
+            paddingLeft: rhythm(1),
+            backgroundImage: `url(/search.svg)`,
+            backgroundSize: `16px 16px`,
+            backgroundRepeat: `no-repeat`,
+            backgroundPositionY: `center`,
+            backgroundPositionX: `5px`,
+            overflow: `hidden`,
+            width: rhythm(1),
+            transition: `width 0.2s ease`,
+
+            ":focus": {
+              outline: 0,
+              backgroundColor: presets.brandLighter,
+              borderRadius: presets.radiusLg,
+              width: rhythm(5),
+            },
+
+            [presets.Desktop]: {
+              width: rhythm(5),
+            },
+          }}
+          type="search"
+          placeholder="Search docs"
+          aria-label="Search docs"
+        />
+      </form>
+    ) : null
+  }
+}
+
+SearchForm.propTypes = {
+  styles: PropTypes.object,
+}
+
+export default SearchForm
diff --git a/www/src/html.js b/www/src/html.js
index 752f6ce65e626..8b4bc465bd974 100644
--- a/www/src/html.js
+++ b/www/src/html.js
@@ -72,6 +72,8 @@ export default class HTML extends React.Component {
             href={`/safari-pinned-tab.svg`}
             color="#5bbad5"
           />
+          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
+          <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
           {css}
         </head>
         <body {...this.props.bodyAttributes}>
diff --git a/www/static/search.svg b/www/static/search.svg
new file mode 100644
index 0000000000000..b9faa8c07133e
--- /dev/null
+++ b/www/static/search.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" fill="#9D7CBF">
+  <!-- Based on the 'search' icon in https://github.com/ionic-team/ionicons -->
+  <g><path d="m34.8 30.2c0.3 0.3 0.3 0.8 0 1.1l-3.4 3.5c-0.1 0.1-0.4 0.2-0.6 0.2s-0.4-0.1-0.6-0.2l-6.5-6.8c-2 1.2-4.1 1.8-6.3 1.8-6.8 0-12.4-5.5-12.4-12.4s5.6-12.4 12.4-12.4 12.4 5.5 12.4 12.4c0 2.1-0.6 4.2-1.7 6.1z m-17.4-20.4c-4.1 0-7.6 3.4-7.6 7.6s3.5 7.6 7.6 7.6 7.5-3.4 7.5-7.6-3.3-7.6-7.5-7.6z"/></g>
+</svg>