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>

1 files changed, 17 insertions, 28 deletions

diff --git a/site/assets/js/search.js b/site/assets/js/search.js
index 6c90a20872..9bad2749f5 100644
--- a/site/assets/js/search.js
+++ b/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