docs: add search

Author: mrholek

docs/assets/js/search.js

@@ -11,36 +11,11 @@
     return
   }
 
-  const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version')
-
   window.docsearch({
-    apiKey: '3151f502c7b9e9dafd5e6372b691a24e',
-    indexName: 'bootstrap',
-    appId: 'AK7KMZKZHQ',
+    appId: '5OOVC1SDJS',
+    apiKey: 'ab4149e82cfd175c0afe647a937a8d21',
+    indexName: 'coreui',
     container: searchElement,
-    searchParameters: {
-      facetFilters: [`version:${siteDocsVersion}`]
-    },
-    transformItems(items) {
-      return items.map(item => {
-        const liveUrl = 'https://getbootstrap.com/'
-
-        item.url = window.location.origin.startsWith(liveUrl) ?
-          // On production, return the result as is
-          item.url :
-          // On development or Netlify, replace `item.url` with a trailing slash,
-          // so that the result link is relative to the server root
-          item.url.replace(liveUrl, '/')
-
-        // Prevent jumping to first header
-        if (item.anchor === 'content') {
-          item.url = item.url.replace(/#content$/, '')
-          item.anchor = null
-        }
-
-        return item
-      })
-    },
     // Set debug to `true` if you want to inspect the dropdown
     debug: false
   })

docs/assets/scss/_search.scss

@@ -1,77 +1,70 @@
 // stylelint-disable selector-class-pattern
 
-.docs-search {
-  position: relative;
-  width: 100%;
-
-  @include media-breakpoint-up(lg) {
-    position: absolute;
-    top: .875rem;
-    left: 50%;
-    width: 200px;
-    margin-left: -100px;
-  }
-
-  @include media-breakpoint-up(xl) {
-    width: 280px;
-    margin-left: -140px;
-  }
-
-}
-
 .DocSearch-Container {
   --docsearch-muted-color: #{$text-muted};
   --docsearch-hit-shadow: none;
 
-  z-index: 1030;
+  z-index: 2000; // Make sure to be over all components showcased in the documentation
+  cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
 
   @include media-breakpoint-up(lg) {
     padding-top: 4rem;
   }
 }
 
 .DocSearch-Button {
-  --docsearch-searchbox-background: #{rgba($black, .1)};
-  --docsearch-searchbox-color: #{$white};
-  --docsearch-searchbox-focus-background: #{rgba($black, .25)};
-  --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
-  --docsearch-text-color: #{$white};
-  --docsearch-muted-color: #{rgba($white, .65)};
-
-  width: 100%;
-  height: 38px; // Match Bootstrap inputs
-  margin: 0;
-  border: 1px solid rgba($white, .4);
-  @include border-radius(.375rem);
-
-  .DocSearch-Search-Icon {
-    opacity: .65;
+  min-width: 200px;
+  min-height: 38px;
+  font-family: $input-font-family;
+  font-weight: $input-font-weight;
+  line-height: $input-line-height;
+  @include font-size($input-font-size);
+  color: $input-color;
+  background-color: $input-bg;
+  background-clip: padding-box;
+  border: $input-border-width solid $input-border-color;
+
+  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+  @include border-radius($btn-border-radius);
+
+  @include box-shadow($input-box-shadow);
+  @include transition($input-transition);
+
+  &:focus {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-focus-box-shadow;
+    }
   }
 
-  &:active,
-  &:focus,
-  &:hover {
-    border-color: rgba($bd-accent, 1);
+  &:hover:not(:disabled):not([readonly])::file-selector-button {
+    background-color: $form-file-button-hover-bg;
+  }
 
-    .DocSearch-Search-Icon {
-      opacity: 1;
-    }
+  .DocSearch-Search-Icon {
+    opacity: .65;
   }
 }
 
+
 .DocSearch-Button-Keys {
   min-width: 0;
-  padding: .125rem .25rem;
-  background: rgba($black, .25);
+  padding: 0 .25rem;
+  background: rgba($black, .125);
   @include border-radius(.25rem);
 }
 
 .DocSearch-Button-Key {
   top: 0;
   width: auto;
-  height: 1.25rem;
-  padding-right: .125rem;
-  padding-left: .125rem;
+  height: 1.5rem;
+  padding: 0 .125rem;
   margin-right: 0;
   font-size: .875rem;
   background: none;

docs/assets/scss/docs.scss

@@ -52,6 +52,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
 @import "colors";
 @import "clipboard-js";
 @import "placeholder-img";
+@import "search";
 
 // Load docs dependencies
 @import "syntax";

docs/layouts/partials/header.html

@@ -3,6 +3,7 @@
     <button class="header-toggler d-lg-none" type="button" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
       {{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "32" "height" "32") }}
     </button>
+    <div class="docs-search" id="docsearch"></div>
 
     <ul class="header-nav ms-auto">
       <li class="nav-item">

docs/layouts/partials/scripts.html

@@ -4,6 +4,10 @@
   <script src="/dist/js/coreui.bundle.js"></script>
 {{- end }}
 
+{{ if eq .Page.Layout "docs" -}}
+<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
+{{- end }}
+
 {{- $vendor := resources.Match "js/vendor/*.js" -}}
 {{- $js := resources.Match "js/*.js" -}}
 {{- $targetDocsJSPath := printf "/assets/js/docs.js" -}}

docs/layouts/partials/stylesheet.html

@@ -1,4 +1,7 @@
-{{- "<!-- Bootstrap core CSS -->" | safeHTML }}
+{{ if eq .Page.Layout "docs" -}}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
+{{- end }}
+
 {{ if eq hugo.Environment "production" -}}
 {{ if eq .Page.Params.direction "rtl" -}}
 <link href="/dist/css/coreui.rtl.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_rtl_hash | safeHTMLAttr }} crossorigin="anonymous">