diff --git a/site/assets/js/search.js b/site/assets/js/search.js index 823dcb10a76e..00924401258a 100644 --- a/site/assets/js/search.js +++ b/site/assets/js/search.js @@ -9,58 +9,122 @@ return } - var inputElement = document.getElementById('search-input') - var siteDocsVersion = inputElement.getAttribute('data-docs-version') - - document.addEventListener('keydown', function (event) { - if (event.ctrlKey && event.key === '/') { - event.preventDefault() - inputElement.focus() - } - }) + function isIconHit(hit) { + return hit.hierarchy.lvl0 === 'Bootstrap Icons' + } - function getOrigin() { - var location = window.location - var origin = location.origin + function IconName(hit) { + return hit.url + .replace(/https:\/\/icons.getbootstrap.com\/icons\//g, '') + .replace(/\/#content/g, '') + } - if (!origin) { - var port = location.port ? ':' + location.port : '' + function IconSVG(hit) { + return { + type: 'svg', + ref: undefined, + constructor: undefined, + key: undefined, + props: { + width: 20, + height: 20, + fill: 'currentColor', + children: { + type: 'use', + ref: undefined, + constructor: undefined, + key: undefined, + props: { + xlinkHref: + '/docs/5.0/assets/img/bootstrap-icons.svg#' + IconName(hit), + }, + }, + }, + } + } - origin = location.protocol + '//' + location.hostname + port + function Hits({ hit, children }) { + if (isIconHit(hit)) { + return { + type: 'a', + ref: undefined, + constructor: undefined, + key: undefined, + props: { + href: hit.url, + children: { + type: 'div', + ref: undefined, + constructor: undefined, + key: undefined, + props: { + className: 'DocSearch-Hit-Container', + children: [ + { + type: 'div', + ref: undefined, + constructor: undefined, + key: undefined, + props: { + className: 'DocSearch-Hit-icon', + children: IconSVG(hit), + }, + }, + { + type: 'div', + ref: undefined, + constructor: undefined, + key: undefined, + props: { + className: 'DocSearch-Hit-content-wrapper', + children: [ + { + type: 'span', + ref: undefined, + constructor: undefined, + key: undefined, + props: { + className: 'DocSearch-Hit-title', + children: hit.hierarchy.lvl1, + }, + }, + { + type: 'span', + ref: undefined, + constructor: undefined, + key: undefined, + props: { + className: 'DocSearch-Hit-path', + children: 'Icon', + }, + }, + ], + }, + }, + ], + }, + }, + }, + } } - return origin + return { + type: 'a', + ref: undefined, + constructor: undefined, + key: undefined, + props: { + href: hit.url, + children, + }, + } } window.docsearch({ - apiKey: '5990ad008512000bba2cf951ccf0332f', - indexName: 'bootstrap', - inputSelector: '#search-input', - algoliaOptions: { - facetFilters: ['version:' + siteDocsVersion] - }, - transformData: function (hits) { - return hits.map(function (hit) { - var currentUrl = getOrigin() - var liveUrl = 'https://getbootstrap.com/' - - hit.url = currentUrl.lastIndexOf(liveUrl, 0) === 0 ? - // On production, return the result as is - hit.url : - // On development or Netlify, replace `hit.url` with a trailing slash, - // so that the result link is relative to the server root - hit.url.replace(liveUrl, '/') - - // Prevent jumping to first header - if (hit.anchor === 'content') { - hit.url = hit.url.replace(/#content$/, '') - hit.anchor = null - } - - return hit - }) - }, - // Set debug to `true` if you want to inspect the dropdown - debug: false + appId: 'BH4D9OD16A', + apiKey: 'c121570761efc762fb8b433b124415fb', + indexName: 'bootstrap-icons', + container: '#search-input', + hitComponent: Hits, }) })() diff --git a/site/assets/scss/_algolia.scss b/site/assets/scss/_algolia.scss index 097dbdd55c75..f22eed52a20f 100644 --- a/site/assets/scss/_algolia.scss +++ b/site/assets/scss/_algolia.scss @@ -1,92 +1,22 @@ // Docsearch theming - -.algolia-autocomplete { - width: 100%; +:root { + --docsearch-primary-color: #7952b3; } -.ds-dropdown-menu { +.DocSearch-SearchButton { width: 100%; - padding: $dropdown-padding-y 0; - margin: $dropdown-spacer 0 0; - @include font-size(.875rem); - background-color: $dropdown-bg; - border: $dropdown-border-width solid $dropdown-border-color; - @include border-radius($dropdown-border-radius); - @include box-shadow($dropdown-box-shadow); - - @include media-breakpoint-up(md) { - width: 400px; - } -} - -.algolia-docsearch-suggestion--category-header { - padding: .125rem 1rem; - font-weight: 600; - color: $bd-purple-bright; - - // stylelint-disable-next-line selector-class-pattern - :not(.algolia-docsearch-suggestion__main) > & { - display: none; - } - - .ds-suggestion:not(:first-child) & { - padding-top: .75rem; - margin-top: .75rem; - border-top: 1px solid rgba(0, 0, 0, .1); - } -} - -.algolia-docsearch-suggestion--content { - padding: .25rem 1rem; - - .ds-cursor & { - background-color: rgba($bd-purple-light, .2); - } -} - -.algolia-docsearch-suggestion { - display: block; - text-decoration: none; -} - -.algolia-docsearch-suggestion--subcategory-column { - display: none; -} - -.algolia-docsearch-suggestion--subcategory-inline { - display: inline; - color: $gray-700; - - &::after { - padding: 0 .25rem; - content: "/"; - } -} - -.algolia-docsearch-suggestion--title { - display: inline; - font-weight: 500; - color: $gray-800; -} - -.algolia-docsearch-suggestion--text { - color: $gray-800; - @include font-size(.75rem); + margin: 0px; + border-radius: 0.25rem; } -.algolia-docsearch-suggestion--highlight { - color: $purple; - background-color: rgba($purple, .1); +.DocSearch-Hit-content-wrapper { + overflow: hidden; } -.algolia-docsearch-footer { - padding: .5rem 1rem 0; - margin-top: .625rem; - @include font-size(.75rem); - color: $gray-600; - border-top: 1px solid rgba(0, 0, 0, .1); +.DocSearch-Modal mark { + padding: 0; } -.algolia-docsearch-footer--logo { - color: inherit; +.DocSearch-Modal svg { + vertical-align: unset; } diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index c23d96a49b26..0bf46a283845 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -1,21 +1,22 @@ .bd-subnavbar { // The position and z-index are needed for the dropdown to stay on top of the content position: relative; - z-index: $zindex-sticky; - background-color: rgba($white, .95); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15); + z-index: 199; + background-color: rgba($white, 0.95); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05), + inset 0 -1px 0 rgba(0, 0, 0, 0.15); .dropdown-menu { - @include font-size(.875rem); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05); + @include font-size(0.875rem); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); } .dropdown-item.current { font-weight: 600; background-image: escape-svg($dropdown-active-icon); background-repeat: no-repeat; - background-position: right $dropdown-item-padding-x top .6rem; - background-size: .75rem .75rem; + background-position: right $dropdown-item-padding-x top 0.6rem; + background-size: 0.75rem 0.75rem; } @include media-breakpoint-up(md) { @@ -29,19 +30,19 @@ &::after { position: absolute; - top: .4rem; - right: .4rem; + top: 0.4rem; + right: 0.4rem; display: flex; align-items: center; justify-content: center; height: 1.5rem; - padding-right: .25rem; - padding-left: .25rem; - @include font-size(.75rem); + padding-right: 0.25rem; + padding-left: 0.25rem; + @include font-size(0.75rem); color: $gray-600; content: "Ctrl + /"; border: $border-width solid $border-color; - @include border-radius(.125rem); + @include border-radius(0.125rem); } @include media-breakpoint-down(md) { @@ -53,7 +54,7 @@ &:focus { border-color: $bd-purple-bright; - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); + box-shadow: 0 0 0 3px rgba($bd-purple-bright, 0.25); } } } @@ -67,17 +68,23 @@ } &:focus { - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); + box-shadow: 0 0 0 3px rgba($bd-purple-bright, 0.25); } .bi { fill: currentColor; } - .bi-collapse { display: none; } + .bi-collapse { + display: none; + } &:not(.collapsed) { - .bi-expand { display: none; } - .bi-collapse { display: inline-block; } + .bi-expand { + display: none; + } + .bi-collapse { + display: inline-block; + } } } diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 5a5b64366147..bd20eb1cdfb6 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -8,7 +8,7 @@ {{ partial "docs-navbar" . }} {{ partial "docs-subnav" . }} - +