Merge pull request #5027 from skevy/algolia

[Website] Adding Algolia Doc Search

website/core/AlgoliaDocSearch.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule AlgoliaDocSearch
+ */
+
+var AlgoliaDocSearch = React.createClass({
+  render: function() {
+    return (
+      <div className="algolia-search-wrapper">
+        <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
+      </div>
+    );
+  }
+});
+
+module.exports = AlgoliaDocSearch;

website/core/HeaderLinks.js

@@ -10,6 +10,7 @@
  */
 
 var React = require('React');
+var AlgoliaDocSearch = require('AlgoliaDocSearch');
 
 var HeaderLinks = React.createClass({
   linksInternal: [
@@ -44,6 +45,9 @@ var HeaderLinks = React.createClass({
         <ul className="nav-site nav-site-internal">
           {this.makeLinks(this.linksInternal)}
         </ul>
+
+        <AlgoliaDocSearch />
+
         <ul className="nav-site nav-site-external">
           {this.makeLinks(this.linksExternal)}
         </ul>

website/core/Site.js

@@ -29,6 +29,8 @@ var Site = React.createClass({
           <meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2" />
           <meta property="og:description" content="A framework for building native apps using React" />
 
+          <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
+
           <link rel="shortcut icon" href="/react-native/img/favicon.png?2" />
           <link rel="stylesheet" href="/react-native/css/react-native.css" />
 
@@ -68,6 +70,7 @@ var Site = React.createClass({
             ){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
             fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
           `}} />
+          <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
           <script src="/react-native/js/scripts.js" />
         </body>
       </html>

website/src/react-native/css/react-native.css

@@ -1222,3 +1222,97 @@ div[data-twttr-id] iframe {
   }
 }
 
+/** Algolia Doc Search **/
+
+
+div.algolia-search-wrapper {
+  display: inline-block;
+  vertical-align: top;
+  margin-left: 15px;
+}
+
+@media screen and (max-width: 960px) {
+  div.algolia-search-wrapper {
+    display: none;
+  }
+}
+
+input#algolia-doc-search {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+  background: transparent url('/react-native/img/search.png') no-repeat left center;
+  background-size: 16px 16px;
+
+  padding-left: 30px;
+  font-size: 16px;
+  line-height: 20px;
+  background-color: #3B3738;
+  border-bottom: solid 3px #3B3738;
+  color: white;
+  outline: none;
+  width: 130px;
+  height: 53px;
+
+  transition: border-color .2s ease, width .2s ease;
+  -webkit-transition: border-color .2s ease, width .2s ease;
+  -moz-transition: border-color .2s ease, width .2s ease;
+  -o-transition: border-color .2s ease, width .2s ease;
+}
+
+input#algolia-doc-search:focus {
+  border-color: #05A5D1;
+  width: 240px;
+}
+
+@media screen and (max-width: 1085px) {
+  input#algolia-doc-search:focus {
+    width: 178px;
+  }
+}
+
+.algolia-autocomplete {
+  vertical-align: top;
+  height: 53px;
+
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+/* Bottom border of each suggestion */
+.algolia-docsearch-suggestion {
+  border-bottom-color: #05A5D1;
+}
+/* Main category headers */
+.algolia-docsearch-suggestion--category-header {
+  background-color: #3B3738;
+}
+/* Highlighted search terms */
+.algolia-docsearch-suggestion--highlight {
+  color: #05A5D1;
+}
+/* Highligted search terms in the main category headers */
+.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight  {
+  background-color: #05A5D1;
+}
+/* Currently selected suggestion */
+.aa-cursor .algolia-docsearch-suggestion--content {
+  color: #05A5D1;
+}
+.aa-cursor .algolia-docsearch-suggestion {
+  background: hsl(198, 100%, 96%);
+}
+
+/* For bigger screens, when displaying results in two columns */
+@media (min-width: 768px) {
+  /* Bottom border of each suggestion */
+  .algolia-docsearch-suggestion {
+    border-bottom-color: hsl(198, 100%, 94%);
+  }
+  /* Left column, with secondary category header */
+  .algolia-docsearch-suggestion--subcategory-column {
+    border-right-color: hsl(198, 100%, 94%);
+    background-color: hsl(198, 100%, 96%);
+    color: #3B3738;
+  }
+}

website/src/react-native/js/scripts.js

@@ -8,6 +8,8 @@
 
   function init() {
     var backdrop = document.querySelector('.modal-backdrop');
+    if (!backdrop) return;
+
     var modalButtonOpenList = document.querySelectorAll('.modal-button-open');
     var modalButtonClose = document.querySelector('.modal-button-close');
 
@@ -22,6 +24,8 @@
 
   function showModal(e) {
     var backdrop = document.querySelector('.modal-backdrop');
+    if (!backdrop) return;
+
     var modal = document.querySelector('.modal');
 
     backdrop.classList.add('modal-open');
@@ -30,10 +34,19 @@
 
   function hideModal(e) {
     var backdrop = document.querySelector('.modal-backdrop');
+    if (!backdrop) return;
+
     var modal = document.querySelector('.modal');
 
     backdrop.classList.remove('modal-open');
     modal.classList.remove('modal-open');
   }
 
+  // Algolia
+  docsearch({
+    apiKey: 'e3d767b736584dbe6d4c35f7cf7d4633',
+    indexName: 'react-native',
+    inputSelector: '#algolia-doc-search'
+  });
+
 }());