Update search to DocSearch v3

site/assets/js/search.js

@@ -9,58 +9,122 @@
     return
   }
 
-  var inputElement = document.getElementById('search-input')
-  var siteDocsVersion = inputElement.getAttribute('data-docs-version')
-
-  document.addEventListener('keydown', function (event) {
-    if (event.ctrlKey && event.key === '/') {
-      event.preventDefault()
-      inputElement.focus()
-    }
-  })
+  function isIconHit(hit) {
+    return hit.hierarchy.lvl0 === 'Bootstrap Icons'
+  }
 
-  function getOrigin() {
-    var location = window.location
-    var origin = location.origin
+  function IconName(hit) {
+    return hit.url
+      .replace(/https:\/\/icons.getbootstrap.com\/icons\//g, '')
+      .replace(/\/#content/g, '')
+  }
 
-    if (!origin) {
-      var port = location.port ? ':' + location.port : ''
+  function IconSVG(hit) {
+    return {
+      type: 'svg',
+      ref: undefined,
+      constructor: undefined,
+      key: undefined,
+      props: {
+        width: 20,
+        height: 20,
+        fill: 'currentColor',
+        children: {
+          type: 'use',
+          ref: undefined,
+          constructor: undefined,
+          key: undefined,
+          props: {
+            xlinkHref:
+              '/docs/5.0/assets/img/bootstrap-icons.svg#' + IconName(hit),
+          },
+        },
+      },
+    }
+  }
 
-      origin = location.protocol + '//' + location.hostname + port
+  function Hits({ hit, children }) {
+    if (isIconHit(hit)) {
+      return {
+        type: 'a',
+        ref: undefined,
+        constructor: undefined,
+        key: undefined,
+        props: {
+          href: hit.url,
+          children: {
+            type: 'div',
+            ref: undefined,
+            constructor: undefined,
+            key: undefined,
+            props: {
+              className: 'DocSearch-Hit-Container',
+              children: [
+                {
+                  type: 'div',
+                  ref: undefined,
+                  constructor: undefined,
+                  key: undefined,
+                  props: {
+                    className: 'DocSearch-Hit-icon',
+                    children: IconSVG(hit),
+                  },
+                },
+                {
+                  type: 'div',
+                  ref: undefined,
+                  constructor: undefined,
+                  key: undefined,
+                  props: {
+                    className: 'DocSearch-Hit-content-wrapper',
+                    children: [
+                      {
+                        type: 'span',
+                        ref: undefined,
+                        constructor: undefined,
+                        key: undefined,
+                        props: {
+                          className: 'DocSearch-Hit-title',
+                          children: hit.hierarchy.lvl1,
+                        },
+                      },
+                      {
+                        type: 'span',
+                        ref: undefined,
+                        constructor: undefined,
+                        key: undefined,
+                        props: {
+                          className: 'DocSearch-Hit-path',
+                          children: 'Icon',
+                        },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        },
+      }
     }
 
-    return origin
+    return {
+      type: 'a',
+      ref: undefined,
+      constructor: undefined,
+      key: undefined,
+      props: {
+        href: hit.url,
+        children,
+      },
+    }
   }
 
   window.docsearch({
-    apiKey: '5990ad008512000bba2cf951ccf0332f',
-    indexName: 'bootstrap',
-    inputSelector: '#search-input',
-    algoliaOptions: {
-      facetFilters: ['version:' + siteDocsVersion]
-    },
-    transformData: function (hits) {
-      return hits.map(function (hit) {
-        var currentUrl = getOrigin()
-        var liveUrl = 'https://getbootstrap.com/'
-
-        hit.url = currentUrl.lastIndexOf(liveUrl, 0) === 0 ?
-          // On production, return the result as is
-          hit.url :
-          // On development or Netlify, replace `hit.url` with a trailing slash,
-          // so that the result link is relative to the server root
-          hit.url.replace(liveUrl, '/')
-
-        // Prevent jumping to first header
-        if (hit.anchor === 'content') {
-          hit.url = hit.url.replace(/#content$/, '')
-          hit.anchor = null
-        }
-
-        return hit
-      })
-    },
-    // Set debug to `true` if you want to inspect the dropdown
-    debug: false
+    appId: 'BH4D9OD16A',
+    apiKey: 'c121570761efc762fb8b433b124415fb',
+    indexName: 'bootstrap-icons',
+    container: '#search-input',
+    hitComponent: Hits,
   })
 })()

site/assets/scss/_algolia.scss

@@ -1,92 +1,22 @@
 // Docsearch theming
-
-.algolia-autocomplete {
-  width: 100%;
+:root {
+  --docsearch-primary-color: #7952b3;
 }
 
-.ds-dropdown-menu {
+.DocSearch-SearchButton {
   width: 100%;
-  padding: $dropdown-padding-y 0;
-  margin: $dropdown-spacer 0 0;
-  @include font-size(.875rem);
-  background-color: $dropdown-bg;
-  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-docsearch-suggestion--category-header {
-  padding: .125rem 1rem;
-  font-weight: 600;
-  color: $bd-purple-bright;
-
-  // stylelint-disable-next-line selector-class-pattern
-  :not(.algolia-docsearch-suggestion__main) > & {
-    display: none;
-  }
-
-  .ds-suggestion:not(:first-child) & {
-    padding-top: .75rem;
-    margin-top: .75rem;
-    border-top: 1px solid rgba(0, 0, 0, .1);
-  }
-}
-
-.algolia-docsearch-suggestion--content {
-  padding: .25rem 1rem;
-
-  .ds-cursor & {
-    background-color: rgba($bd-purple-light, .2);
-  }
-}
-
-.algolia-docsearch-suggestion {
-  display: block;
-  text-decoration: none;
-}
-
-.algolia-docsearch-suggestion--subcategory-column {
-  display: none;
-}
-
-.algolia-docsearch-suggestion--subcategory-inline {
-  display: inline;
-  color: $gray-700;
-
-  &::after {
-    padding: 0 .25rem;
-    content: "/";
-  }
-}
-
-.algolia-docsearch-suggestion--title {
-  display: inline;
-  font-weight: 500;
-  color: $gray-800;
-}
-
-.algolia-docsearch-suggestion--text {
-  color: $gray-800;
-  @include font-size(.75rem);
+  margin: 0px;
+  border-radius: 0.25rem;
 }
 
-.algolia-docsearch-suggestion--highlight {
-  color: $purple;
-  background-color: rgba($purple, .1);
+.DocSearch-Hit-content-wrapper {
+  overflow: hidden;
 }
 
-.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);
+.DocSearch-Modal mark {
+  padding: 0;
 }
 
-.algolia-docsearch-footer--logo {
-  color: inherit;
+.DocSearch-Modal svg {
+  vertical-align: unset;
 }

site/assets/scss/_subnav.scss

@@ -1,21 +1,22 @@
 .bd-subnavbar {
   // The position and z-index are needed for the dropdown to stay on top of the content
   position: relative;
-  z-index: $zindex-sticky;
-  background-color: rgba($white, .95);
-  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15);
+  z-index: 199;
+  background-color: rgba($white, 0.95);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
 
   .dropdown-menu {
-    @include font-size(.875rem);
-    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05);
+    @include font-size(0.875rem);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
   }
 
   .dropdown-item.current {
     font-weight: 600;
     background-image: escape-svg($dropdown-active-icon);
     background-repeat: no-repeat;
-    background-position: right $dropdown-item-padding-x top .6rem;
-    background-size: .75rem .75rem;
+    background-position: right $dropdown-item-padding-x top 0.6rem;
+    background-size: 0.75rem 0.75rem;
   }
 
   @include media-breakpoint-up(md) {
@@ -29,19 +30,19 @@
 
   &::after {
     position: absolute;
-    top: .4rem;
-    right: .4rem;
+    top: 0.4rem;
+    right: 0.4rem;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 1.5rem;
-    padding-right: .25rem;
-    padding-left: .25rem;
-    @include font-size(.75rem);
+    padding-right: 0.25rem;
+    padding-left: 0.25rem;
+    @include font-size(0.75rem);
     color: $gray-600;
     content: "Ctrl + /";
     border: $border-width solid $border-color;
-    @include border-radius(.125rem);
+    @include border-radius(0.125rem);
   }
 
   @include media-breakpoint-down(md) {
@@ -53,7 +54,7 @@
 
     &:focus {
       border-color: $bd-purple-bright;
-      box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+      box-shadow: 0 0 0 3px rgba($bd-purple-bright, 0.25);
     }
   }
 }
@@ -67,17 +68,23 @@
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+    box-shadow: 0 0 0 3px rgba($bd-purple-bright, 0.25);
   }
 
   .bi {
     fill: currentColor;
   }
 
-  .bi-collapse { display: none; }
+  .bi-collapse {
+    display: none;
+  }
 
   &:not(.collapsed) {
-    .bi-expand { display: none; }
-    .bi-collapse { display: inline-block; }
+    .bi-expand {
+      display: none;
+    }
+    .bi-collapse {
+      display: inline-block;
+    }
   }
 }

site/layouts/_default/docs.html

@@ -8,7 +8,7 @@
 
     {{ partial "docs-navbar" . }}
     {{ partial "docs-subnav" . }}
-
+    
     <div class="container-xxl my-md-4 bd-layout">
       <aside class="bd-sidebar">
         {{ partial "docs-sidebar" . }}

site/layouts/partials/docs-subnav.html

@@ -1,8 +1,6 @@
 <nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
   <div class="container-xxl d-flex align-items-md-center">
-    <form class="bd-search position-relative mr-auto">
-      <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
-    </form>
+    <div id="search-input" class="position-relative mr-auto"></div>
 
     {{ partial "docs-versions" . }}
 

site/layouts/partials/scripts.html

@@ -5,7 +5,7 @@
 {{- end }}
 
 {{ if eq .Page.Layout "docs" -}}
-<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+<script src="https://unpkg.com/@docsearch/js@1.0.0-alpha.22/dist/umd/index.js"></script>
 {{- end }}
 
 {{- $vendor := resources.Match "js/vendor/*.js" -}}

site/layouts/partials/stylesheet.html

@@ -1,3 +1,4 @@
+<link rel="stylesheet" href="https://unpkg.com/@docsearch/css" />
 {{- "<!-- Bootstrap core CSS -->" | safeHTML }}
 {{ if eq hugo.Environment "production" -}}
 <link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_hash | safeHTMLAttr }} crossorigin="anonymous">