From 40af85e0f2172102611bbab536c13f1eef198ec9 Mon Sep 17 00:00:00 2001 From: shortcuts Date: Fri, 6 Nov 2020 16:54:55 +0100 Subject: [PATCH 1/4] Implementation of DocSearch v3 with bootstrap v5 and icon support --- site/assets/js/search.js | 167 +++++++++++++++--- site/assets/scss/_algolia.scss | 92 +--------- site/assets/scss/_subnav.scss | 43 +++-- site/layouts/_default/docs.html | 2 +- site/layouts/partials/docs-subnav.html | 4 +- site/layouts/partials/scripts.html | 2 +- site/layouts/partials/stylesheet.html | 1 + .../docs/5.0/assets/img/bootstrap-icons.svg | 1 + 8 files changed, 175 insertions(+), 137 deletions(-) create mode 100644 site/static/docs/5.0/assets/img/bootstrap-icons.svg diff --git a/site/assets/js/search.js b/site/assets/js/search.js index 823dcb10a76e..c6421900187a 100644 --- a/site/assets/js/search.js +++ b/site/assets/js/search.js @@ -32,35 +32,148 @@ return origin } + function isIconHit(hit) { + return hit.hierarchy.lvl0 === 'Bootstrap Icons' + } + + function IconName(hit) { + return hit.url + .replace(/https:\/\/icons.getbootstrap.com\/icons\//g, '') + .replace(/\/#content/g, '') + } + + 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), + }, + }, + }, + } + } + + 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 { + type: 'a', + ref: undefined, + constructor: undefined, + key: undefined, + props: { + href: hit.url, + children, + }, + } + } + window.docsearch({ - apiKey: '5990ad008512000bba2cf951ccf0332f', + appId: '4Y8GPLL6DU', + apiKey: 'b52e904f627693602a90f2f6d64b260c', 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 - }) - }, + container: '#search-input', + hitComponent: Hits, + // 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 + debug: false, }) })() diff --git a/site/assets/scss/_algolia.scss b/site/assets/scss/_algolia.scss index 097dbdd55c75..ea1ce8861cd8 100644 --- a/site/assets/scss/_algolia.scss +++ b/site/assets/scss/_algolia.scss @@ -1,92 +1,10 @@ // 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); -} - -.algolia-docsearch-suggestion--highlight { - color: $purple; - background-color: rgba($purple, .1); -} - -.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); -} - -.algolia-docsearch-footer--logo { - color: inherit; + margin: 0px; + border-radius: 0.25rem; } 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" . }} - +