Add Algolia docsearch to site.

Author: Daniel15

site/jekyll/Gemfile

@@ -6,3 +6,5 @@ gem 'bourbon', '~>3'
 
 # For markdown header cleanup
 gem 'sanitize'
+
+gem 'wdm', '~> 0.1.0' if Gem.win_platform?

site/jekyll/Gemfile.lock

@@ -12,7 +12,8 @@ GEM
       highline (~> 1.6.11)
     crass (1.0.2)
     fast-stemmer (1.0.2)
-    ffi (1.9.17-x64-mingw32)
+    ffi (1.9.18)
+    ffi (1.9.18-x64-mingw32)
     highline (1.6.21)
     hike (1.2.3)
     jekyll (1.5.1)
@@ -40,7 +41,9 @@ GEM
     maruku (0.7.0)
     mini_portile2 (2.1.0)
     multi_json (1.12.1)
-    nokogiri (1.7.0.1-x64-mingw32)
+    nokogiri (1.7.1)
+      mini_portile2 (~> 2.1.0)
+    nokogiri (1.7.1-x64-mingw32)
       mini_portile2 (~> 2.1.0)
     nokogumbo (1.4.10)
       nokogiri
@@ -80,6 +83,7 @@ GEM
     yajl-ruby (1.1.0)
 
 PLATFORMS
+  ruby
   x64-mingw32
 
 DEPENDENCIES

site/jekyll/_assets/stylesheets/react.scss

@@ -17,7 +17,28 @@ $columnGutter: 40px;
 $twoColumnWidth: 2 * $columnWidth + $columnGutter;
 $navHeight: 50px;
 
+// Breakpoints
+$bp-large: 960px;
+$bp-medium: 640px;
+$bp-small: 480px;
 
+@mixin bp-small {
+  @media (max-width: $bp-small) {
+    @content;
+  }
+}
+
+@mixin bp-medium {
+  @media (max-width: $bp-medium) {
+    @content;
+  }
+}
+
+@mixin bp-large {
+  @media (max-width: $bp-large) {
+    @content;
+  }
+}
 
 // basic reset
 * {
@@ -764,3 +785,47 @@ div[data-twttr-id] iframe {
 .three-column > ul:first-child {
   margin-left: 20px;
 }
+
+/* Algolia Doc Search */
+
+input#algolia-doc-search {
+  background: transparent url('../img/search.png') no-repeat 10px center;
+  background-size: 16px 16px;
+
+  position: relative;
+  vertical-align: top;
+  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;
+
+  &:focus {
+    width: 240px;
+  }
+
+  @include bp-large {
+    background-color: transparent;
+    width: 0;
+    cursor: pointer;
+
+    &:focus {
+      width: 200px;
+      background-color: #333;
+    }
+  }
+}
+
+.algolia-autocomplete {
+  vertical-align: top;
+  height: 53px;
+}

site/jekyll/_layouts/default.html

@@ -17,6 +17,7 @@
   <link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}/feed.xml" />
 
   {% stylesheet main %}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
 
   <script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
@@ -41,6 +42,7 @@
           <img class="nav-logo" src="/img/logo.svg" width="48" height="36">
           {{ site.name }}
         </a>
+        <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
         <ul class="nav-site">
           <li><a href="/docs"{% if page.sectionid == 'docs' and page.id != 'tutorial' and page.id != 'download' %} class="active"{% endif %}>Docs</a></li>
           <li><a href="/getting-started/tutorial.html"{% if page.id == 'tutorial' %} class="active"{% endif %}>Tutorial</a></li>
@@ -63,6 +65,17 @@
     </footer>
   </div>
 
+  <!-- Algolia search -->
+  <script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
+  <script>
+  docsearch({
+    apiKey: 'e9888f8a8af8c16709c02402b15c7695',
+    indexName: 'reactjs_net',
+    inputSelector: '#algolia-doc-search',
+    debug: false // Set debug to true if you want to inspect the dropdown
+  });
+  </script>
+
   <!-- Facebook SDK -->
   <div id="fb-root"></div>
   <script>(function(d, s, id) {