Migrate to DocSearch v3

Fixes #33338

site/assets/js/search.js

@@ -5,51 +5,37 @@
 (() => {
   'use strict'
 
-  const inputElement = document.getElementById('search-input')
+  const siteDocsVersion = document.querySelector('[data-bd-docs-version]').getAttribute('data-bd-docs-version')
 
-  if (!window.docsearch || !inputElement) {
+  if (!window.docsearch) {
     return
   }
 
-  const siteDocsVersion = inputElement.getAttribute('data-bd-docs-version')
-
-  document.addEventListener('keydown', event => {
-    if ((((event.ctrlKey || event.metaKey) && event.key === 'k')) || (event.ctrlKey && event.key === '/')) {
-      event.preventDefault()
-      inputElement.focus()
-    }
-  })
-
-  if (navigator.platform.includes('Win') || navigator.platform.includes('Linux')) {
-    const searchShortcut = document.querySelector('.bd-search')
-    searchShortcut.setAttribute('data-shortcut', '⌃K')
-  }
-
   window.docsearch({
-    apiKey: '5990ad008512000bba2cf951ccf0332f',
     indexName: 'bootstrap',
-    inputSelector: '#search-input',
-    algoliaOptions: {
+    appId: 'AK7KMZKZHQ',
+    container: '#docsearch',
+    searchParameters: {
       facetFilters: [`version:${siteDocsVersion}`]
     },
-    transformData(hits) {
-      return hits.map(hit => {
+    transformItems(items) {
+      return items.map(item => {
         const liveUrl = 'https://getbootstrap.com/'
 
-        hit.url = window.location.origin.startsWith(liveUrl) ?
+        item.url = window.location.origin.startsWith(liveUrl) ?
           // On production, return the result as is
-          hit.url :
-          // On development or Netlify, replace `hit.url` with a trailing slash,
+          item.url :
+          // On development or Netlify, replace `item.url` with a trailing slash,
           // so that the result link is relative to the server root
-          hit.url.replace(liveUrl, '/')
+          item.url.replace(liveUrl, '/')
 
         // Prevent jumping to first header
-        if (hit.anchor === 'content') {
-          hit.url = hit.url.replace(/#content$/, '')
-          hit.anchor = null
+        if (item.anchor === 'content') {
+          item.url = item.url.replace(/#content$/, '')
+          item.anchor = null
         }
 
-        return hit
+        return item
       })
     },
     // Set debug to `true` if you want to inspect the dropdown

site/assets/scss/_search.scss

@@ -1,25 +1,9 @@
+// stylelint-disable selector-class-pattern
+
 .bd-search {
   position: relative;
   width: 100%;
 
-  &::after {
-    position: absolute;
-    top: .4rem;
-    right: .4rem;
-    bottom: .4rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-right: .3125rem;
-    padding-left: .3125rem;
-    @include font-size(.75rem);
-    color: rgba($white, .65);
-    // content: "⌘K";
-    content: attr(data-shortcut);
-    background-color: rgba($white, .1);
-    @include border-radius(.125rem);
-  }
-
   @include media-breakpoint-up(lg) {
     position: absolute;
     top: .75rem;
@@ -33,30 +17,68 @@
     margin-left: -140px;
   }
 
-  .form-control {
-    padding-right: 2.75rem;
-    color: $white;
-    background-color: rgba($black, .1);
-    border-color: rgba($white, .4);
-    transition-property: background-color, border-color, box-shadow;
+}
 
-    &::placeholder {
-      color: rgba($white, .65);
-    }
+.DocSearch-Container {
+  z-index: 1030;
 
-    &::-webkit-search-cancel-button {
-      appearance: none;
-      width: 1rem;
-      height: 1rem;
-      cursor: pointer;
-      background: escape-svg($search-clear-icon) no-repeat 0 0;
-      background-size: 100% 100%;
-    }
+  @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)};
 
-    &:focus {
-      background-color: rgba($black, .25);
-      border-color: rgba($bd-accent, 1);
-      box-shadow: 0 0 0 .25rem rgba($bd-accent, .4);
+  width: 100%;
+  margin: 0;
+  border: 1px solid rgba($white, .4);
+  @include border-radius(.375rem);
+
+  .DocSearch-Search-Icon {
+    opacity: .65;
+  }
+
+  &:active,
+  &:focus,
+  &:hover {
+    border-color: rgba($bd-accent, 1);
+
+    .DocSearch-Search-Icon {
+      opacity: 1;
     }
   }
 }
+
+.DocSearch-Button-Keys {
+  min-width: 0;
+  padding-right: .25rem;
+  padding-left: .25rem;
+  background: rgba($black, .25);
+  @include border-radius(.25rem);
+}
+
+.DocSearch-Button-Key {
+  top: 0;
+  width: auto;
+  height: 1.25rem;
+  padding-right: .125rem;
+  padding-left: .125rem;
+  margin-right: 0;
+  font-size: .875rem;
+  background: none;
+  box-shadow: none;
+}
+
+.DocSearch-Commands-Key {
+  padding-left: 1px;
+  font-size: .875rem;
+  background-color: rgba($black, .1);
+  background-image: none;
+  box-shadow: none;
+}

site/assets/scss/_variables.scss

@@ -6,7 +6,6 @@ $bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-
 $bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
 $bd-accent:       #ffe484;
 $dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
-$search-clear-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='rgba(255,255,255,.75)' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/></svg>");
 
 $bd-gutter-x: 3rem;
 $bd-callout-variants: info, warning, danger !default;
@@ -19,4 +18,6 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-accent-rgb: #{to-rgb($bd-accent)};
   --bd-pink-rgb: #{to-rgb($pink-500)};
   --bd-teal-rgb: #{to-rgb($teal-500)};
+  --docsearch-primary-color: var(--bd-violet);
+  --docsearch-logo-color: var(--bd-violet);
 }

site/layouts/partials/docs-navbar.html

@@ -46,9 +46,7 @@ <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5
         <hr class="d-lg-none text-white-50">
 
         {{ if eq .Layout "docs" }}
-        <form class="bd-search" data-shortcut="⌘K">
-          <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="{{ .Site.Params.docs_version }}">
-        </form>
+        <div class="bd-search" id="docsearch" data-bd-docs-version="{{ .Site.Params.docs_version }}"></div>
 
         <hr class="d-lg-none text-white-50">
         {{ end }}

site/layouts/partials/header.html

@@ -19,3 +19,5 @@
 {{ partial "favicons" . }}
 {{ partial "social" . }}
 {{ partial "analytics" . }}
+
+<link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin />

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://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
 <script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
 {{- end }}
 

site/layouts/partials/stylesheet.html

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