Site: Search with @Algolia DocSearch (#6557)

Merge pull request 6557

docs/_includes/header.html

@@ -13,6 +13,7 @@
     </div>
     <nav class="main-nav unit two-thirds hide-on-mobiles">
       {% include primary-nav-items.html %}
+      {% include search/input.html %}
     </nav>
   </div>
 </header>

docs/_includes/search/input.html

@@ -0,0 +1 @@
+<input type="text" id="docsearch-input" placeholder="Search the docs…">

docs/_includes/search/script.html

@@ -0,0 +1,9 @@
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+<script type="text/javascript"> docsearch({
+apiKey: '50fe39c839958dfad797000f33e2ec17',
+indexName: 'jekyllrb',
+inputSelector: '#docsearch-input',
+enhancedSearchInput: true,
+debug: false // Set debug to true if you want to inspect the dropdown
+});
+</script>

docs/_includes/top.html

@@ -7,6 +7,7 @@
   {% feed_meta %}
   <link rel="alternate" type="application/atom+xml" title="Recent commits to Jekyll’s master branch" href="{{ site.repository }}/commits/master.atom">
   <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
   <link rel="stylesheet" href="/css/screen.css">
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
   {% seo %}

docs/_layouts/default.html

@@ -8,6 +8,6 @@
   {% include footer.html %}
   {% include anchor_links.html %}
   {% include analytics.html %}
-
+  {% include search/script.html %}
 </body>
 </html>

docs/_sass/_docsearch.scss

@@ -0,0 +1,50 @@
+.searchbox {
+  .searchbox__input {
+    padding: 5px 5px 5px 29px;
+    border: none;
+    border-radius: 5px;
+    color: #444;
+
+    &::-webkit-input-placeholder {
+      color: #aaa;
+    }
+
+    &:-ms-input-placeholder {
+      color: #aaa;
+    }
+
+    &::placeholder {
+      color: #aaa;
+    }
+  }
+}
+
+.algolia-autocomplete {
+  .ds-dropdown-menu {
+    font-size: 1rem;
+    text-shadow: none;
+
+    .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content {
+      background-color: rgba(221, 221, 221, 0.5);
+    }
+  }
+
+  .algolia-docsearch-suggestion--category-header {
+    background-color: #444;
+    color: #ddd;
+    padding: 0.35em;
+  }
+
+  .algolia-docsearch-suggestion--subcategory-column {
+    color: #444;
+  }
+
+  .algolia-docsearch-suggestion--highlight {
+    background-color: #fc0;
+    color: #222;
+  }
+
+  .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+    box-shadow: inset 0 -2px 0 0 #fc0;
+  }
+}

docs/_sass/_style.scss

@@ -62,6 +62,7 @@ nav {
     padding: 0;
     margin: 0;
     white-space: nowrap;
+    display: inline-block;
   }
 
   li { display: inline-block; }

docs/css/screen.scss

@@ -7,3 +7,4 @@
 @import "pygments";
 @import "font-awesome";
 @import "style";
+@import "docsearch";