diff options
author | Mark Otto <markd.otto@gmail.com> | 2022-05-07 02:56:43 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-05-07 02:56:43 +0300 |
commit | 6b49d26b21cabb7322a820183c6d925263cddba1 (patch) | |
tree | a20884b37e88ed3f4bb7ac2b653f10d64816396d /site | |
parent | d2497b0384d05af9159743d7ff58fd071d5c5cbb (diff) |
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>
Diffstat (limited to 'site')
-rw-r--r-- | site/assets/js/search.js | 45 | ||||
-rw-r--r-- | site/assets/scss/_navbar.scss | 2 | ||||
-rw-r--r-- | site/assets/scss/_search.scss | 137 | ||||
-rw-r--r-- | site/assets/scss/_variables.scss | 3 | ||||
-rw-r--r-- | site/layouts/_default/docs.html | 1 | ||||
-rw-r--r-- | site/layouts/partials/docs-navbar.html | 4 | ||||
-rw-r--r-- | site/layouts/partials/docs-versions.html | 4 | ||||
-rw-r--r-- | site/layouts/partials/header.html | 4 | ||||
-rw-r--r-- | site/layouts/partials/scripts.html | 2 | ||||
-rw-r--r-- | site/layouts/partials/stylesheet.html | 5 |
10 files changed, 131 insertions, 76 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 diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 57e3f47b7f..4805a3c471 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -63,7 +63,7 @@ } .dropdown-toggle { - &:focus { + &:focus:not(:focus-visible) { outline: 0; } } diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss index 1825337a00..9739d7a3a2 100644 --- a/site/assets/scss/_search.scss +++ b/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; +} diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 8f74f94d0b..b460392d0f 100644 --- a/site/assets/scss/_variables.scss +++ b/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); } diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 3c61cd3421..d08e5a393a 100644 --- a/site/layouts/_default/docs.html +++ b/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 }} diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index 441c2bd56a..c54d3fa447 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/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 }} diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html index 8e34122bea..fb340bb59c 100644 --- a/site/layouts/partials/docs-versions.html +++ b/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> diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html index 2d2eb29d9f..a592cdccb8 100644 --- a/site/layouts/partials/header.html +++ b/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 }} diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index 5e2e52e90b..56513c7ff8 100644 --- a/site/layouts/partials/scripts.html +++ b/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 }} diff --git a/site/layouts/partials/stylesheet.html b/site/layouts/partials/stylesheet.html index cc44733836..1aa3296990 100644 --- a/site/layouts/partials/stylesheet.html +++ b/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"> |