v5.2.0: Migrate to DocSearch 3 (#36176)

* Migrate to DocSearch v3

Fixes #33338

* initialize `siteDocsVersion` const after the proper check

* Update site/layouts/partials/stylesheet.html

Co-authored-by: GeoSot <geo.sotis@gmail.com>

* Update header.html

* code review changes

* Update search.js

* Fix contrast issue, tweak some styles

* Fix some navbar changes

* temporary safari fix for docsearch3

Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>

site/assets/js/search.js

@@ -5,51 +5,40 @@
 (() => {
   'use strict'
 
-  const inputElement = document.getElementById('search-input')
+  const searchElement = document.getElementById('docsearch')
 
-  if (!window.docsearch || !inputElement) {
+  if (!window.docsearch || !searchElement) {
     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')
-  }
+  const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version')
 
   window.docsearch({
-    apiKey: '5990ad008512000bba2cf951ccf0332f',
+    apiKey: '3151f502c7b9e9dafd5e6372b691a24e',
     indexName: 'bootstrap',
-    inputSelector: '#search-input',
-    algoliaOptions: {
+    appId: 'AK7KMZKZHQ',
+    container: searchElement,
+    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/_navbar.scss

@@ -63,7 +63,7 @@
   }
 
   .dropdown-toggle {
-    &:focus {
+    &:focus:not(:focus-visible) {
       outline: 0;
     }
   }

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,105 @@
     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 {
+  --docsearch-muted-color: #{$text-muted};
+  --docsearch-hit-shadow: none;
 
-    &::-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%;
-    }
+  z-index: 1030;
 
-    &:focus {
-      background-color: rgba($black, .25);
-      border-color: rgba($bd-accent, 1);
-      box-shadow: 0 0 0 .25rem rgba($bd-accent, .4);
+  @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%;
+  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;
+}
+
+.DocSearch-Form {
+  @include border-radius(var(--bs-border-radius));
+}
+
+.DocSearch-Hits {
+  mark {
+    padding: 0;
+  }
+}
+
+.DocSearch-Hit {
+  padding-bottom: 0;
+  @include border-radius(0);
+
+  a {
+    @include border-radius(0);
+    border: solid var(--bs-border-color);
+    border-width: 0 1px 1px;
+  }
+
+  &:first-child a {
+    @include border-top-radius(var(--bs-border-radius));
+    border-top-width: 1px;
+  }
+  &:last-child a {
+    @include border-bottom-radius(var(--bs-border-radius));
+  }
+}
+
+.DocSearch-Hit-icon {
+  display: flex;
+  align-items: center;
+}

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/_default/docs.html

@@ -62,4 +62,5 @@ <h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1>
   {{ range .Page.Params.extra_js -}}
     <script{{ with .async }} async{{ end }} src="{{ .src }}"></script>
   {{- end -}}
+  <div class="position-fixed"><input type="text"></div>
 {{ end }}

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/docs-versions.html

@@ -11,9 +11,9 @@
 {{- end }}
 
 <li class="nav-item dropdown">
-  <a href="#" class="nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
+  <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
     <span class="d-lg-none">Bootstrap</span> v{{ .Site.Params.docs_version }}
-  </a>
+  </button>
   <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
     <li><h6 class="dropdown-header">v5 releases</h6></li>
     <li>

site/layouts/partials/header.html

@@ -11,6 +11,10 @@
 
 <link rel="canonical" href="{{ .Permalink }}">
 
+{{- if eq .Page.Layout "docs" -}}
+<link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
+{{- end }}
+
 {{ with .Params.robots -}}
 <meta name="robots" content="{{ . }}">
 {{- end }}

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,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="/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">