factor out search to its own component

Author: leebyron

site/_core/DocsSidebar.js

@@ -8,12 +8,12 @@
 
 var React = require('react');
 
+var Search = require('./Search');
+
 var DocsSidebar = React.createClass({
   render: function() {
     return <div className="nav-docs">
-      <div className="algolia-search-wrapper">
-        <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
-      </div>
+      <Search />
       {getCategories(this.props.site).map((category) =>
         <div className="nav-docs-section" key={category.name}>
           <h3>{category.name}</h3>

site/_core/Search.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var React = require('react');
+
+var Search = React.createClass({
+  render: function() {
+    return <div className="algolia-search-wrapper">
+      <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
+      <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
+      <script dangerouslySetInnerHTML={{__html: `
+        docsearch({
+          apiKey: 'd103541f3e6041148aade2e746ed4d61',
+          indexName: 'graphql',
+          inputSelector: '#algolia-doc-search'
+        });
+      `}} />
+    </div>;
+  }
+});
+
+module.exports = Search;

site/_core/Site.js

@@ -50,15 +50,6 @@ var Site = React.createClass({
             ©2016 Facebook Inc.
           </footer>
 
-          <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'
-            });
-          `}} />
           <script dangerouslySetInnerHTML={{__html: `
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

site/_css/algolia.less

@@ -5,11 +5,10 @@
 div.algolia-search-wrapper {
   display: inline-block;
   vertical-align: top;
-  /*margin-left: 15px;*/
 }
 
 .algolia-autocomplete .aa-dropdown-menu {
-  /*margin-left: -110px;*/
+  .body-font();
   margin-top: -4px;
 }
 
@@ -27,12 +26,12 @@ input#algolia-doc-search {
   padding-left: 35px;
   margin-top: 9px;
   height: 30px;
-  .body-font(@color: white);
+  .headline-font(@size: 15px, @color: white);
   background-color: #555;
   border-radius: 4px;
   outline: none;
   border: none;
-  width: 170px;
+  width: 200px;
 }
 
 .algolia-autocomplete {

site/help/index.html.js

@@ -33,6 +33,10 @@ var Help = React.createClass({
             <p><a href="https://twitter.com/search?q=%23graphql" target="_blank"><strong>#graphql</strong> hash tag on Twitter</a> is used to keep up with the latest GraphQL news.</p>
 
             <p><center><a className="twitter-timeline" data-dnt="true" href="https://twitter.com/hashtag/graphql" data-widget-id="633776128688193537" data-chrome="nofooter noheader transparent">#graphql Tweets</a></center></p>
+            <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");
+            `}} />
+
           </div>
         </section>
 

site/index.html.js

@@ -3,6 +3,7 @@ var Site = require('./_core/Site');
 var SiteData = require('./_core/SiteData');
 var HeaderLinks = require('./_core/HeaderLinks');
 var Marked = require('./_core/Marked');
+var Search = require('./_core/Search');
 
 var index = React.createClass({
   render: function() {
@@ -13,9 +14,7 @@ var index = React.createClass({
 
             <header aria-hidden>
               <section>
-                <div className="algolia-search-wrapper">
-                  <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
-                </div>
+                <Search />
                 <HeaderLinks section={this.props.section} />
               </section>
             </header>