From ea373428b5823b72c4b51cba38f8e832146247aa Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeux@fb.com>
Date: Mon, 7 Mar 2016 11:45:55 -0800
Subject: [PATCH] Introduce search

Powered by the awesome Algolia :)
---
 _layouts/default.html |  11 +++++++
 css/react.scss        |  69 +++++++++++++++++++++++++++++++++++++++++-
 img/search.png        | Bin 0 -> 1378 bytes
 3 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 img/search.png

diff --git a/_layouts/default.html b/_layouts/default.html
index d7398afe..f8fc0989 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -16,6 +16,7 @@
   <link rel="shortcut icon" href="/react/favicon.ico">
   <link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}{{ site.baseurl }}/feed.xml">
 
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
   <link rel="stylesheet" href="/react/css/syntax.css">
   <link rel="stylesheet" href="/react/css/codemirror.css">
   <link rel="stylesheet" href="/react/css/react.css">
@@ -28,6 +29,7 @@
   <script src="/react/js/es5-shim.min.js"></script>
   <script src="/react/js/es5-sham.min.js"></script>
   <![endif]-->
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
   <script src="/react/js/codemirror.js"></script>
   <script src="/react/js/javascript.js"></script>
   <script src="/react/js/react.js"></script>
@@ -50,6 +52,9 @@
           <li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>Support</a></li>
           <li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>Download</a></li>
           <li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>Blog</a></li>
+          <li>
+            <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
+          </li>
         </ul>
 
         <ul class="nav-site nav-site-external">
@@ -107,6 +112,12 @@
       js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
+
+    docsearch({
+      apiKey: '36221914cce388c46d0420343e0bb32e',
+      indexName: 'react',
+      inputSelector: '#algolia-doc-search'
+    });
   </script>
 </body>
 </html>
diff --git a/css/react.scss b/css/react.scss
index 28858d79..db11020b 100644
--- a/css/react.scss
+++ b/css/react.scss
@@ -129,7 +129,7 @@ h1, h2, h3, h4, h5, h6 {
       margin: 0;
     }
 
-    a {
+    li > a {
       box-sizing: content-box;
       padding: 0 10px;
       line-height: $navHeight;
@@ -856,3 +856,70 @@ div[data-twttr-id] iframe {
 .three-column > ul:first-child {
   margin-left: 20px;
 }
+
+
+/* Algolia Doc Search */
+
+@media screen and (max-width: 960px) {
+  #algolia-doc-search {
+    display: none;
+  }
+}
+
+input#algolia-doc-search {
+  background: transparent url('/react/img/search.png') no-repeat 10px center;
+  background-size: 16px 16px;
+
+  margin-left: 10px;
+  padding: 0 10px;
+  padding-left: 35px;
+  height: 30px;
+  margin-top: 10px;
+  font-size: 16px;
+  line-height: 20px;
+  background-color: #333;
+  border-radius: 4px;
+  color: white;
+  outline: none;
+  width: 170px;
+
+  transition: width .2s ease;
+}
+
+input#algolia-doc-search:focus {
+  width: 240px;
+}
+
+.algolia-autocomplete .aa-dropdown-menu {
+  margin-left: -110px;
+  margin-top: -4px;
+}
+
+.algolia-autocomplete {
+  vertical-align: top;
+  height: 53px;
+}
+
+.algolia-docsearch-suggestion {
+  border-bottom-color: #c05b4d;
+}
+
+.algolia-docsearch-suggestion--category-header {
+  background-color: #cc7a6f;
+}
+
+.algolia-docsearch-suggestion--highlight {
+  color: #c05b4d;
+}
+
+.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
+  background-color: #c05b4d;
+}
+
+.aa-cursor .algolia-docsearch-suggestion--content {
+  color: #c05b4d;
+}
+
+.aa-cursor .algolia-docsearch-suggestion {
+  background: #f1f3f5;
+}
diff --git a/img/search.png b/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