Introduce search

site/_core/HeaderLinks.js

@@ -9,30 +9,46 @@
 var React = require('react');
 
 var HeaderLinks = React.createClass({
-  links: [
+  linksInternal: [
     {section: 'docs', text: 'Docs', href: '/docs/getting-started/' },
     {section: 'blog', text: 'Blog', href: '/blog/' },
     {section: 'help', text: 'Help', href: '/help/' },
     {section: 'code', text: 'Code', href: '/code/' },
+  ],
+  linksExternal: [
     {section: 'spec', text: 'Spec', href: 'http://facebook.github.io/graphql/' },
   ],
 
+  renderLinks: function(links) {
+    return links.map(function(link) {
+      return (
+        <li key={link.section}>
+          <a
+            href={link.href}
+            target={link.href.slice(0, 4) === 'http' ? '_blank' : null}
+            className={link.section === this.props.section ? 'active' : ''}>
+            {link.text}
+          </a>
+        </li>
+      );
+    }, this);
+  },
+
   render: function() {
     return (
-      <ul className="nav-site">
-        {this.links.map(function(link) {
-          return (
-            <li key={link.section}>
-              <a
-                href={link.href}
-                target={link.href.slice(0, 4) === 'http' ? '_blank' : null}
-                className={link.section === this.props.section ? 'active' : ''}>
-                {link.text}
-              </a>
-            </li>
-          );
-        }, this)}
-      </ul>
+      <div className="nav-site-wrapper">
+        <ul className="nav-site nav-site-internal">
+          {this.renderLinks(this.linksInternal)}
+        </ul>
+
+        <div className="algolia-search-wrapper">
+          <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
+        </div>
+
+        <ul className="nav-site nav-site-external">
+          {this.renderLinks(this.linksExternal)}
+        </ul>
+      </div>
     );
   }
 });

site/_core/Site.js

@@ -25,6 +25,7 @@ var Site = React.createClass({
           <meta property="og:url" content="http://graphql.org/" />
           <meta property="og:description" content={SiteData.description} />
 
+          <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
           <link rel="shortcut icon" href={'/img/favicon.png'} />
           <link rel="stylesheet" href={'/css/graphql.css'} />
 
@@ -53,8 +54,14 @@ var Site = React.createClass({
 
           <div id="fb-root" />
 
+          <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
           <script dangerouslySetInnerHTML={{__html: `
             !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
+            docsearch({
+              apiKey: 'd103541f3e6041148aade2e746ed4d61',
+              indexName: 'graphql',
+              inputSelector: '#algolia-doc-search'
+            });
           `}} />
         </body>
       </html>

site/css/graphql.css

@@ -219,7 +219,15 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   text-decoration: none;
 }
 
-.nav-main .nav-site {
+.nav-main .nav-site-wrapper {
+  display: inline;
+}
+
+.nav-main .nav-site-internal {
+  margin: 0 0 0 20px;
+}
+
+.nav-main .nav-site-external {
   float: right;
   margin: 0;
 }
@@ -1970,3 +1978,69 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
+
+/** Algolia Doc Search **/
+
+div.algolia-search-wrapper {
+  display: inline-block;
+  vertical-align: top;
+  margin-left: 15px;
+}
+
+.algolia-autocomplete .aa-dropdown-menu {
+  margin-left: -110px;
+  margin-top: -4px;
+}
+
+@media screen and (max-width: 960px) {
+  div.algolia-search-wrapper {
+    display: none;
+  }
+}
+
+input#algolia-doc-search {
+  background: transparent url(https://github.com/'../img/search.png') no-repeat 10px center;
+  background-size: 16px 16px;
+
+  padding: 0 10px;
+  padding-left: 35px;
+  margin-top: 12px;
+  height: 30px;
+  font-size: 16px;
+  line-height: 20px;
+  background-color: #555;
+  border-radius: 4px;
+  color: white;
+  outline: none;
+  border: none;
+  width: 170px;
+}
+
+.algolia-autocomplete {
+  vertical-align: top;
+  height: 53px;
+}
+
+.algolia-docsearch-suggestion--category-header {
+  background-color: #B51780;
+}
+.algolia-docsearch-suggestion--highlight {
+  color: #E535AB;
+}
+.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight  {
+  background-color: #E535AB;
+}
+.aa-cursor .algolia-docsearch-suggestion--content {
+  color: #E535AB;
+}
+.aa-cursor .algolia-docsearch-suggestion {
+  background: #FEF6FB;
+}
+.algolia-docsearch-suggestion {
+  border-bottom-color: #FEF6FB;
+}
+.algolia-docsearch-suggestion--subcategory-column {
+  border-right-color: #FEF6FB;
+  background-color: #FEF6FB;
+  color: #E535AB;
+}