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

@@ -62,4 +62,5 @@
   {{ 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 @@
         <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">