Merge pull request #2367 from jonasrosland/add-docs-search

Add documentation search to the site

site/_layouts/docs.html

@@ -27,8 +27,14 @@
           <div class="container container-max">
             <div class="row">
               <div class="col-md-3 toc">
-              {% include versions.html %}
-              {% include nav.html %}
+                {% include versions.html %}
+                <br />
+                <form class="d-flex align-items-center">
+                  <span class="algolia-autocomplete" style="position: relative; display: inline-block; direction: ltr;">
+                    <input type="search" class="form-control docsearch-input" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;">
+                  </span>
+                </form>
+                {% include nav.html %}
               </div>
               <div class="col-md-8">
               {% include version-warning.html %}
@@ -42,6 +48,15 @@
       {% include footer.html %}
     </div>
   </div>
+<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: '3d80f66bb5ecf85f8e2760caef383f24',
+indexName: 'velero',
+inputSelector: '.docsearch-input',
+algoliaOptions: { 'facetFilters': ["version:{{ page.version }}"] },
+debug: false // Set debug to true if you want to inspect the dropdown
+});
+</script>
 </body>
 
 </html>

site/_scss/_styles.scss

@@ -11,6 +11,7 @@
 // Layouts
 @import "./site/layouts/container";
 @import "./site/layouts/documentation";
+@import "./site/layouts/docsearch";
 
 // Objects
 @import "./site/objects/header";

site/_scss/site/layouts/_docsearch.scss

@@ -0,0 +1,94 @@
+// Docsearch theming from getbootstrap.com, modified
+
+.algolia-autocomplete {
+  width: 100%;
+}
+
+.algolia-autocomplete .ds-dropdown-menu {
+  width: 100%;
+  padding: $dropdown-padding-y 0;
+  margin: $dropdown-spacer 0 0;
+  background-color: $white;
+  border: $dropdown-border-width solid $dropdown-border-color;
+  @include border-radius($dropdown-border-radius);
+  @include box-shadow($dropdown-box-shadow);
+
+  @include media-breakpoint-up(md) {
+    width: 400px;
+  }
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+  padding: .125rem 1rem;
+  font-weight: 600;
+  color: #0091DA;
+
+  // stylelint-disable-next-line selector-class-pattern
+  :not(.algolia-docsearch-suggestion__main) > & {
+    display: none;
+  }
+
+  .algolia-autocomplete .ds-suggestion:not(:first-child) & {
+    padding-top: .75rem;
+    margin-top: .75rem;
+    border-top: 1px solid rgba(0, 0, 0, .1);
+  }
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--content {
+  padding: .25rem 1rem;
+
+  .ds-cursor & {
+    background-color: rgba(#0091DA, .2);
+  }
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion {
+  display: block;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+  display: none;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-inline {
+  display: inline;
+  color: $gray-700;
+
+  &::after {
+    padding: 0 .25rem;
+    content: "/";
+  }
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
+  display: inline;
+  font-weight: 500;
+  color: $gray-800;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--text {
+  color: $gray-800;
+  //@include font-size(.75rem);
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+  color: $darkest-blue;
+  background-color: rgba(#0091DA, .1);
+}
+
+.algolia-autocomplete .algolia-docsearch-footer {
+  padding: .5rem 1rem 0;
+  margin-top: .625rem;
+  //@include font-size(.75rem);
+  color: $gray-600;
+  border-top: 1px solid rgba(0, 0, 0, .1);
+}
+
+.algolia-autocomplete .algolia-docsearch-footer--logo {
+  color: inherit;
+}