From cc1bad54ea83d9e8b7df8ca74f120c007c152c2c Mon Sep 17 00:00:00 2001
From: Adam Miskiewicz <adam.skevy@mac.com>
Date: Tue, 29 Dec 2015 12:43:40 -0500
Subject: [PATCH] [Website] First pass at Algolia Doc Search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It’s not yet responsive :(
---
 website/core/AlgoliaDocSearch.js              |  22 ++++
 website/core/HeaderLinks.js                   |   4 +
 website/core/Site.js                          |   3 +
 website/src/react-native/css/react-native.css |  94 ++++++++++++++++++
 website/src/react-native/img/search.png       | Bin 0 -> 1378 bytes
 website/src/react-native/js/scripts.js        |   7 ++
 6 files changed, 130 insertions(+)
 create mode 100644 website/core/AlgoliaDocSearch.js
 create mode 100644 website/src/react-native/img/search.png

diff --git a/website/core/AlgoliaDocSearch.js b/website/core/AlgoliaDocSearch.js
new file mode 100644
index 000000000..b65e7e303
--- /dev/null
+++ b/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;
diff --git a/website/core/HeaderLinks.js b/website/core/HeaderLinks.js
index c70b3c92d..afee22f24 100644
--- a/website/core/HeaderLinks.js
+++ b/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>
diff --git a/website/core/Site.js b/website/core/Site.js
index e855a9666..eface427c 100644
--- a/website/core/Site.js
+++ b/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>
diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
index e9d22d1b4..a08f351d6 100644
--- a/website/src/react-native/css/react-native.css
+++ b/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;
+  }
+}
diff --git a/website/src/react-native/img/search.png b/website/src/react-native/img/search.png
new file mode 100644
index 0000000000000000000000000000000000000000..222fb660dae6c3cb2bba7502f64e61dd84ce1044
GIT binary patch
literal 1378
zcmaJ>U2NM_6!uD&{je4~33Y=?Gp<BCLE@j-j$@jZBzD@cC2P}Ag5Y7UeUn)A-|U+v
z?FMLVCzwDCAx%iU08;tW#Dvgbl?GzGY)lhEec-2b5*utt>;(av#=`_$r%Bg`G0XNn
z_xOD0eCOPAe0VrJ*tYrp%@~HYrH7;(TDSSn#sGR>tj7LE%XTOi;HX`MRmBBZT(idk
zo;H;d$N@#0+IJ50Vc1=N>iGgJWOj?HZH5%zCR8&WgvPMGftsVJ69D4lprl(d;`dWu
z5V)?zh$p!Wm2r}wtPf4QV01d0SEnb`s74I*<9#&|IWPfK@S15@o>+?!b-yB#eKkqo
zbrU!dBUVTiGQ)V%b^*?X_@GMh5j+wN(Oe|LMjpW#isncvOopi-6Bb!YWEs415h$9g
z6~&yCYQ#dj7*U4M5lOOIt%j=MknNU8IvS0V6hksh5LpDhDGMsKpyhQpJxIV)UEP7Y
zZQ;I0W!$d77=f6sq+mLk%&KF{YZMBVjI1dRNrx!XH2u8l)*j4(TQqKK?d7K&K<0pF
zS6mgHN3pvJMzy<hpr)awuG%>j*Qn>IsU$Ff2`uO#QgodWVlM7+b##D=A=zrh|C*L!
zM5Ur@BG1WuI7;yXpG?uTl!)^(BMCwzDaVrumWuend<ScRNE6Z!mZfA~-~=|#M;Mxx
zxdfF!urN*235ie8$tE^!c~G%b;0N`w`Ymkuj#x420tMP`-nNZqs|=TIXnSSb!IQ~)
zYv8>ZMb#}|xzj(*24CRnlR!(kwu#q|L)34>B9Rg#AsnX#E{tf)oFKDQN}>c>ilQZs
zvR}b!Ys%KlzJX=_7fT{Cnkqsa8lcgqaRW9aL-%_{G!(0ZiW1a7QK=Y^=r0*lPFYuN
z%j+ZkJ~VU$s7otYa*fBjdQIatEzvai;_4Wp&FUZn3r(+!#?*ef`(F%O7f4I-eC@{*
zV~cHb_?GoOPV1o48d+Gr*mWi4%)N4YBf39tTiCQPeQB0$2`)ZFo+<qF@b!@s@7_zF
zIU2fK89y@FQkYo0*4i<!Y1{I;xshG%Bb^7S?*%iPeZ6!4KMx9tp&J{PX0IGLGL}1k
z;8^gpk3V_!(T=Y3H$MFCt>V(5$>Z|L7q>1SdV79r{*9T=vq3ZPtM?w{z8SdhtM2j-
z=b~TV{PIHAGkeFLn|<oFYu2;9A3Tu(zg)gF|LtE(^Ghs_-}Cd)9ix9-UcbA4$M$_X
zKJ(lAk3T?kJb!G6Z~4d#JjQH*FKO*hyS?o@7mSl*(x<273-5R@9Ijp8b8uMOHF)*S
an?0wot7ijSdU&wk|LdjYtaLoFcjiC2nav0Q

literal 0
HcmV?d00001

diff --git a/website/src/react-native/js/scripts.js b/website/src/react-native/js/scripts.js
index 9bed77965..8e3d9d440 100644
--- a/website/src/react-native/js/scripts.js
+++ b/website/src/react-native/js/scripts.js
@@ -42,4 +42,11 @@
     modal.classList.remove('modal-open');
   }
 
+  // Algolia
+  docsearch({
+    apiKey: 'e3d767b736584dbe6d4c35f7cf7d4633',
+    indexName: 'react-native',
+    inputSelector: '#algolia-doc-search'
+  });
+
 }());