mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
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>
This commit is contained in:
Mark Otto
GitHub
parent
d2497b0384
commit
6b49d26b21
@ -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
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
&:focus {
|
||||
&:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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 }}
|
||||
|
||||
@ -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 }}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 }}
|
||||
|
||||
@ -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 }}
|
||||
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user