(() => {
'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
}
.dropdown-toggle {
- &:focus {
+ &:focus:not(:focus-visible) {
outline: 0;
}
}
+// 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;
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;
+}
$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;
--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);
}
{{ range .Page.Params.extra_js -}}
<script{{ with .async }} async{{ end }} src="{{ .src }}"></script>
{{- end -}}
+ <div class="position-fixed"><input type="text"></div>
{{ end }}
<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 }}
{{- 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>
<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 }}
{{- 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 }}
-{{- "<!-- 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">
projects / thirdparty / bootstrap.git / commitdiff
