add docsearch

3 files changed, 13 insertions, 38 deletions

diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index 62bf93b9d..4747abf24 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -35,17 +35,17 @@
 <script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>
 <script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
 
-<script src="{{ site.baseurl }}/assets/js/vendor/jekyll-search.min.js"></script>
-
+{% if page.layout == "docs" %}
+<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
 <script>
-SimpleJekyllSearch.init({
-  searchInput: document.getElementById('search-input'),
-  resultsContainer: document.getElementById('search-results'),
-  searchResultTemplate: '<a class="dropdown-item" href="{url}">{title}</a>',
-  noResultsText: '<div class="dropdown-item no-results">Sorry, there are no results for that search.</div>',
-  json: '{{ site.baseurl }}/search.json'
-})
+  docsearch({
+    apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
+    indexName: 'bootstrap-v4',
+    inputSelector: '#search-input',
+    debug: true // Set debug to true if you want to inspect the dropdown
+  });
 </script>
+{% endif %}
 
 <script>
 Holder.addTheme('gray', {
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index 57415be54..fd9a9a28c 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -19,6 +19,9 @@
 {% endif %}
 
 <!-- Documentation extras -->
+{% if page.layout == "docs" %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
+{% endif %}
 <link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
 
 <!-- Favicons -->
diff --git a/docs/assets/scss/_sidebar.scss b/docs/assets/scss/_sidebar.scss
index 2436e0763..e2465e805 100644
--- a/docs/assets/scss/_sidebar.scss
+++ b/docs/assets/scss/_sidebar.scss
@@ -64,39 +64,11 @@
 }
 
 .bd-search {
-  position: relative;
+  position: relative; // To contain the Algolia search
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
 
-.bd-search-results {
-  right: 0;
-  display: block;
-  padding: 0;
-  overflow: hidden;
-  font-size: .85rem;
-
-  &:empty {
-    display: none;
-  }
-
-  .dropdown-item {
-    padding-right: .75rem;
-    padding-left: .75rem;
-
-    &:first-child { margin-top: .25rem; }
-    &:last-child { margin-bottom: .25rem; }
-  }
-
-  .no-results {
-    padding: .75rem 1rem;
-    color: #7a7a7a;
-    text-align: center;
-    white-space: normal; // Undo .dropdown-item defaults
-  }
-}
-
-
 .bd-sidenav {
   display: none;
 }