Feature/search

.all-contributorsrc

@@ -354,7 +354,10 @@
       "profile": "https://github.com/motleydev",
       "contributions": [
         "design",
-        "translation"
+        "translation",
+        "code",
+        "doc",
+        "review"
       ]
     },
     {
@@ -385,6 +388,15 @@
         "review",
         "translation"
       ]
+    },
+    {
+      "login": "RIanDeLaCruz",
+      "name": "Ian De La Cruz",
+      "avatar_url": "https://avatars5.githubusercontent.com/u/7766185?v=4",
+      "profile": "https://github.com/RIanDeLaCruz",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

.babelrc.js

@@ -21,5 +21,6 @@ module.exports = {
     'transform-class-properties',
     'inline-react-svg',
     './other/babel-plugin-l10n-loader',
+    'babel-macros',
   ].filter(Boolean),
 }

README.md

@@ -16,7 +16,7 @@
 
 [![Build Status][build-badge]][build]
 [![Code Coverage][coverage-badge]][coverage]
-[![All Contributors](https://img.shields.io/badge/all_contributors-40-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-41-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs]
 [![Code of Conduct][coc-badge]][coc]
 [![Watch on GitHub][github-watch-badge]][github-watch]
@@ -38,7 +38,7 @@ Thanks goes to these people ([emoji key][emojis]):
 | [<img src="https://avatars2.githubusercontent.com/u/11202705?v=3" width="100px;"/><br /><sub>Dan Seethaler</sub>](https://github.com/danseethaler)<br />[💡](#example-danseethaler "Examples") | [<img src="https://avatars2.githubusercontent.com/u/250426?v=3" width="100px;"/><br /><sub>Yuan Chuan</sub>](http://yuanchuan.name)<br />[👀](#review-yuanchuan "Reviewed Pull Requests") | [<img src="https://avatars3.githubusercontent.com/u/2041385?v=3" width="100px;"/><br /><sub>Phil Plückthun</sub>](https://twitter.com/_philpl)<br />[👀](#review-philpl "Reviewed Pull Requests") | [<img src="https://avatars3.githubusercontent.com/u/7849259?v=3" width="100px;"/><br /><sub>Hsin-chieh Yeh</sub>](https://github.com/HsinChiehYeh)<br />[👀](#review-HsinChiehYeh "Reviewed Pull Requests") | [<img src="https://avatars3.githubusercontent.com/u/16327281?v=3" width="100px;"/><br /><sub>Bernard Lin</sub>](https://github.com/bernard-lin)<br />[👀](#review-bernard-lin "Reviewed Pull Requests") | [<img src="https://avatars1.githubusercontent.com/u/1909957?v=3" width="100px;"/><br /><sub>Maxime Laforet</sub>](http://macx.im)<br />[👀](#review-Macxim "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/2954511?v=3" width="100px;"/><br /><sub>Etienne Talbot</sub>](https://github.com/etiennetalbot)<br />[👀](#review-etiennetalbot "Reviewed Pull Requests") |
 | [<img src="https://avatars1.githubusercontent.com/u/873419?v=3" width="100px;"/><br /><sub>Karl Groves</sub>](http://www.karlgroves.com)<br />[👀](#review-karlgroves "Reviewed Pull Requests") | [<img src="https://avatars1.githubusercontent.com/u/946645?v=3" width="100px;"/><br /><sub>Antonio Laguna</sub>](https://www.funcion13.com)<br />[👀](#review-Belelros "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/2142817?v=3" width="100px;"/><br /><sub>Simon Lydell</sub>](https://github.com/lydell)<br />[👀](#review-lydell "Reviewed Pull Requests") | [<img src="https://avatars1.githubusercontent.com/u/2387037?v=3" width="100px;"/><br /><sub>Anujan Panchadcharam</sub>](https://github.com/Anujan)<br />[👀](#review-Anujan "Reviewed Pull Requests") | [<img src="https://avatars3.githubusercontent.com/u/2036823?v=3" width="100px;"/><br /><sub>Carl Rosell</sub>](https://github.com/CarlRosell)<br />[💻](https://github.com/kentcdodds/glamorous-website/commits?author=CarlRosell "Code") | [<img src="https://avatars1.githubusercontent.com/u/4111526?v=3" width="100px;"/><br /><sub>Aaron Olson</sub>](https://github.com/aarondolson)<br />[📖](https://github.com/kentcdodds/glamorous-website/commits?author=aarondolson "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/8309423?v=3" width="100px;"/><br /><sub>Christian Gill</sub>](https://gillchristian.xyz)<br />[💻](https://github.com/kentcdodds/glamorous-website/commits?author=gillchristian "Code") |
 | [<img src="https://avatars2.githubusercontent.com/u/7799266?v=3" width="100px;"/><br /><sub>Jon Major</sub>](http://jonmajorc.com)<br />[🎨](#design-jonmajorc "Design") | [<img src="https://avatars2.githubusercontent.com/u/2084833?v=3" width="100px;"/><br /><sub>Hozefa</sub>](https://github.com/hozefaj)<br />[💻](https://github.com/kentcdodds/glamorous-website/commits?author=hozefaj "Code") [👀](#review-hozefaj "Reviewed Pull Requests") | [<img src="https://avatars2.githubusercontent.com/u/18056710?v=3" width="100px;"/><br /><sub>Audora Chalker</sub>](http://audora.me)<br />[📖](https://github.com/kentcdodds/glamorous-website/commits?author=audoralc "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/2993997?v=3" width="100px;"/><br /><sub>Josh Robertson</sub>](http://codepen.io/hossman)<br />[📖](https://github.com/kentcdodds/glamorous-website/commits?author=Hossman333 "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/82070?v=3" width="100px;"/><br /><sub>Alessandro Arnodo</sub>](http://alessandro.arnodo.net)<br />[👀](#review-vesparny "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/7034094?v=3" width="100px;"/><br /><sub>Aviv Rosental</sub>](https://github.com/avivr)<br />[👀](#review-avivr "Reviewed Pull Requests") | [<img src="https://avatars3.githubusercontent.com/u/656630?v=3" width="100px;"/><br /><sub>Atticus White</sub>](https://atticuswhite.com)<br />[👀](#review-ajwhite "Reviewed Pull Requests") |
-| [<img src="https://avatars2.githubusercontent.com/u/16336071?v=3" width="100px;"/><br /><sub>Nitin Tulswani</sub>](https://nitintulswani.surge.sh/)<br />[💡](#example-nitin42 "Examples") | [<img src="https://avatars1.githubusercontent.com/u/1203804?v=3" width="100px;"/><br /><sub>Jesse</sub>](https://github.com/motleydev)<br />[🎨](#design-motleydev "Design") [🌍](#translation-motleydev "Translation") | [<img src="https://avatars0.githubusercontent.com/u/6382544?v=3" width="100px;"/><br /><sub>Marc Apfelbaum</sub>](https://leafpub.org)<br />[🌍](#translation-karsasmus "Translation") [👀](#review-karsasmus "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/35398?v=3" width="100px;"/><br /><sub>Kai Richard König</sub>](http://kairichardkoenig.de)<br />[👀](#review-kairichard "Reviewed Pull Requests") | [<img src="https://avatars3.githubusercontent.com/u/8615251?v=3" width="100px;"/><br /><sub>Moe Sattler</sub>](https://github.com/MoeSattler)<br />[👀](#review-MoeSattler "Reviewed Pull Requests") [🌍](#translation-MoeSattler "Translation") |
+| [<img src="https://avatars2.githubusercontent.com/u/16336071?v=3" width="100px;"/><br /><sub>Nitin Tulswani</sub>](https://nitintulswani.surge.sh/)<br />[💡](#example-nitin42 "Examples") | [<img src="https://avatars1.githubusercontent.com/u/1203804?v=3" width="100px;"/><br /><sub>Jesse</sub>](https://github.com/motleydev)<br />[🎨](#design-motleydev "Design") [🌍](#translation-motleydev "Translation") [💻](https://github.com/kentcdodds/glamorous-website/commits?author=motleydev "Code") [📖](https://github.com/kentcdodds/glamorous-website/commits?author=motleydev "Documentation") [👀](#review-motleydev "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/6382544?v=3" width="100px;"/><br /><sub>Marc Apfelbaum</sub>](https://leafpub.org)<br />[🌍](#translation-karsasmus "Translation") [👀](#review-karsasmus "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/35398?v=3" width="100px;"/><br /><sub>Kai Richard König</sub>](http://kairichardkoenig.de)<br />[👀](#review-kairichard "Reviewed Pull Requests") | [<img src="https://avatars3.githubusercontent.com/u/8615251?v=3" width="100px;"/><br /><sub>Moe Sattler</sub>](https://github.com/MoeSattler)<br />[👀](#review-MoeSattler "Reviewed Pull Requests") [🌍](#translation-MoeSattler "Translation") | [<img src="https://avatars5.githubusercontent.com/u/7766185?v=4" width="100px;"/><br /><sub>Ian De La Cruz</sub>](https://github.com/RIanDeLaCruz)<br />[💻](https://github.com/kentcdodds/glamorous-website/commits?author=RIanDeLaCruz "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

components/algolia-config.js

@@ -0,0 +1,42 @@
+import preval from 'preval.macro'
+import React from 'react'
+import InlineScript from './inline-script'
+
+export default AlgoliaConfig
+
+function AlgoliaConfig() {
+  return (
+    <div>
+      <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css"
+      />
+      <script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js" />
+      <InlineScript fn={algoliaSettings} />
+    </div>
+  )
+}
+
+function algoliaSettings() {
+  // eslint-disable-next-line no-var
+  var algoliaFacetFilters = preval`
+    const lang = require('./utils/locale')
+    const {fallbackLocale} = require('../config.json')
+    if (lang === fallbackLocale) {
+      module.exports = []
+    } else {
+      module.exports = [\`language:\${lang}\`]
+    }
+  `
+
+  // eslint-disable-next-line no-undef
+  docsearch({
+    apiKey: 'b5cb8dd730a01fb05e75f21396760fb8',
+    indexName: 'glamorous',
+    inputSelector: '.algolia_searchbox',
+    algoliaOptions: {
+      facetFilters: algoliaFacetFilters,
+    },
+    debug: false,
+  })
+}

components/content/nav.md

@@ -6,4 +6,5 @@ advanced: 'Advanced'
 examples: 'Examples'
 integrations: 'Integrations'
 api: 'API'
+search: 'Search…'
 ---

components/nav.js

@@ -1,3 +1,4 @@
+import preval from 'preval.macro'
 import React from 'react'
 import glamorous from 'glamorous'
 import {Anchor} from '../components/styled-links'
@@ -7,6 +8,14 @@ import LocaleChooser from './locale-chooser'
 import MenuSVG from './svgs/menu.svg'
 import content from './content/nav.md'
 
+const base64SearchSVG = preval`
+  const fs = require('fs')
+  const path = require('path')
+  const svgString = fs.readFileSync(path.join(__dirname, 'svgs/search.svg'), 'utf8')
+  const base64String = new Buffer(svgString).toString('base64')
+  module.exports = base64String
+`
+
 // eslint-disable-next-line complexity
 const Navbar = glamorous.nav(({top, theme: {mediaQueries}}) => ({
   width: '100%',
@@ -29,6 +38,42 @@ const Navbar = glamorous.nav(({top, theme: {mediaQueries}}) => ({
     flexDirection: 'column',
   },
 }))
+const SearchBox = glamorous.input('algolia_searchbox', (props, {colors}) => ({
+  width: 130,
+  borderRadius: 50,
+  paddingTop: 4,
+  paddingBottom: 4,
+  paddingLeft: 30,
+  paddingRight: 10,
+  fontFamily: 'inherit',
+  fontSize: '0.75em',
+  lineHeight: '12px',
+  // Icons made by Madebyoliver from www.flaticon.com is licensed by CC 3.0 BY
+  // http://www.flaticon.com/authors/madebyoliver
+  backgroundImage: `url("data:image/svg+xml;base64,${base64SearchSVG}")`,
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: '5px center',
+  backgroundSize: 'auto 80%',
+  border: `1px solid ${colors.primaryMed}`,
+  transition: 'width 0.2s',
+  transitionTimingFunction: 'cubic-bezier(0.075, 0.485, 0.605, 1.085)',
+  color: colors.darkGray,
+  ':focus': {
+    width: 220,
+    outline: 'none',
+    borderColor: `${colors.primaryMed}`,
+  },
+  ':valid': {
+    maxWidth: 220,
+    minWidth: 100,
+  },
+}))
+SearchBox.defaultProps = {
+  type: 'text',
+  pattern: '.*',
+  required: true,
+  placeholder: content.search,
+}
 
 const NavToggle = glamorous.a((props, {colors, mediaQueries}) => ({
   fill: colors.primaryMed,
@@ -79,7 +124,7 @@ const List = glamorous.ul(
     margin: '0 auto',
     paddingLeft: top ? null : 0,
     height: 'auto',
-    overflow: 'hidden',
+    overflow: 'visible',
     backgroundColor: colors.white,
     padding: 0,
     [mediaQueries.largeUp]: {
@@ -148,6 +193,9 @@ class Nav extends React.Component {
           <ListItemAnchor href="/api">
             {content.api}
           </ListItemAnchor>
+          <ListItem>
+            <SearchBox />
+          </ListItem>
           <ListItem>
             <LocaleChooser top={top} />
           </ListItem>

components/utils/locale.js

@@ -0,0 +1,7 @@
+const {supportedLocales, fallbackLocale} = require('../../config.json')
+
+let {LOCALE: lang} = process.env
+if (!supportedLocales.includes(lang)) {
+  lang = fallbackLocale
+}
+module.exports = lang

package.json

@@ -45,6 +45,7 @@
     "await-url": "^0.3.0",
     "babel-eslint": "^7.2.3",
     "babel-jest": "^20.0.3",
+    "babel-macros": "^0.5.1",
     "babel-plugin-glamorous-displayname": "1.1.3",
     "babel-plugin-inline-react-svg": "^0.4.0",
     "babel-plugin-tester": "^3.2.0",
@@ -78,6 +79,7 @@
     "opt-cli": "^1.5.1",
     "path-exists": "^3.0.0",
     "prettier-eslint-cli": "^4.0.2",
+    "preval.macro": "^1.0.1",
     "react-test-renderer": "^15.5.4",
     "url-regex": "^4.1.0"
   },

pages/_document/index.js

@@ -3,6 +3,7 @@ import Document, {Head, Main, NextScript} from 'next/document'
 import {renderStatic} from 'glamor/server'
 import GoogleAnalytics from '../../components/google-analytics'
 import ConsoleGreet from '../../components/console-greet'
+import AlgoliaConfig from '../../components/algolia-config'
 import content from './content/index.md'
 
 export default class MyDocument extends Document {
@@ -41,6 +42,7 @@ export default class MyDocument extends Document {
           <NextScript />
           <GoogleAnalytics />
           <ConsoleGreet />
+          <AlgoliaConfig />
         </body>
       </html>
     )