Skip to content

Commit fd97bf1

Browse files
mrholekmrholek
committed
docs: add search
1 parent 2599c20 commit fd97bf1

File tree

6 files changed

+53
-76
lines changed

6 files changed

+53
-76
lines changed

‎docs/assets/js/search.js

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -11,36 +11,11 @@
1111
return
1212
}
1313

14-
const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version')
15-
1614
window.docsearch({
17-
apiKey: '3151f502c7b9e9dafd5e6372b691a24e',
18-
indexName: 'bootstrap',
19-
appId: 'AK7KMZKZHQ',
15+
appId: '5OOVC1SDJS',
16+
apiKey: 'ab4149e82cfd175c0afe647a937a8d21',
17+
indexName: 'coreui',
2018
container: searchElement,
21-
searchParameters: {
22-
facetFilters: [`version:${siteDocsVersion}`]
23-
},
24-
transformItems(items) {
25-
return items.map(item => {
26-
const liveUrl = 'https://getbootstrap.com/'
27-
28-
item.url = window.location.origin.startsWith(liveUrl) ?
29-
// On production, return the result as is
30-
item.url :
31-
// On development or Netlify, replace `item.url` with a trailing slash,
32-
// so that the result link is relative to the server root
33-
item.url.replace(liveUrl, '/')
34-
35-
// Prevent jumping to first header
36-
if (item.anchor === 'content') {
37-
item.url = item.url.replace(/#content$/, '')
38-
item.anchor = null
39-
}
40-
41-
return item
42-
})
43-
},
4419
// Set debug to `true` if you want to inspect the dropdown
4520
debug: false
4621
})

‎docs/assets/scss/_search.scss

Lines changed: 40 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,70 @@
11
// stylelint-disable selector-class-pattern
22

3-
.docs-search {
4-
position: relative;
5-
width: 100%;
6-
7-
@include media-breakpoint-up(lg) {
8-
position: absolute;
9-
top: .875rem;
10-
left: 50%;
11-
width: 200px;
12-
margin-left: -100px;
13-
}
14-
15-
@include media-breakpoint-up(xl) {
16-
width: 280px;
17-
margin-left: -140px;
18-
}
19-
20-
}
21-
223
.DocSearch-Container {
234
--docsearch-muted-color: #{$text-muted};
245
--docsearch-hit-shadow: none;
256

26-
z-index: 1030;
7+
z-index: 2000; // Make sure to be over all components showcased in the documentation
8+
cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
279

2810
@include media-breakpoint-up(lg) {
2911
padding-top: 4rem;
3012
}
3113
}
3214

3315
.DocSearch-Button {
34-
--docsearch-searchbox-background: #{rgba($black, .1)};
35-
--docsearch-searchbox-color: #{$white};
36-
--docsearch-searchbox-focus-background: #{rgba($black, .25)};
37-
--docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
38-
--docsearch-text-color: #{$white};
39-
--docsearch-muted-color: #{rgba($white, .65)};
40-
41-
width: 100%;
42-
height: 38px; // Match Bootstrap inputs
43-
margin: 0;
44-
border: 1px solid rgba($white, .4);
45-
@include border-radius(.375rem);
46-
47-
.DocSearch-Search-Icon {
48-
opacity: .65;
16+
min-width: 200px;
17+
min-height: 38px;
18+
font-family: $input-font-family;
19+
font-weight: $input-font-weight;
20+
line-height: $input-line-height;
21+
@include font-size($input-font-size);
22+
color: $input-color;
23+
background-color: $input-bg;
24+
background-clip: padding-box;
25+
border: $input-border-width solid $input-border-color;
26+
27+
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
28+
@include border-radius($btn-border-radius);
29+
30+
@include box-shadow($input-box-shadow);
31+
@include transition($input-transition);
32+
33+
&:focus {
34+
color: $input-focus-color;
35+
background-color: $input-focus-bg;
36+
border-color: $input-focus-border-color;
37+
outline: 0;
38+
@if $enable-shadows {
39+
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
40+
} @else {
41+
// Avoid using mixin so we can pass custom focus shadow properly
42+
box-shadow: $input-focus-box-shadow;
43+
}
4944
}
5045

51-
&:active,
52-
&:focus,
53-
&:hover {
54-
border-color: rgba($bd-accent, 1);
46+
&:hover:not(:disabled):not([readonly])::file-selector-button {
47+
background-color: $form-file-button-hover-bg;
48+
}
5549

56-
.DocSearch-Search-Icon {
57-
opacity: 1;
58-
}
50+
.DocSearch-Search-Icon {
51+
opacity: .65;
5952
}
6053
}
6154

55+
6256
.DocSearch-Button-Keys {
6357
min-width: 0;
64-
padding: .125rem .25rem;
65-
background: rgba($black, .25);
58+
padding: 0 .25rem;
59+
background: rgba($black, .125);
6660
@include border-radius(.25rem);
6761
}
6862

6963
.DocSearch-Button-Key {
7064
top: 0;
7165
width: auto;
72-
height: 1.25rem;
73-
padding-right: .125rem;
74-
padding-left: .125rem;
66+
height: 1.5rem;
67+
padding: 0 .125rem;
7568
margin-right: 0;
7669
font-size: .875rem;
7770
background: none;

‎docs/assets/scss/docs.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
5252
@import "colors";
5353
@import "clipboard-js";
5454
@import "placeholder-img";
55+
@import "search";
5556

5657
// Load docs dependencies
5758
@import "syntax";

‎docs/layouts/partials/header.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<button class="header-toggler d-lg-none" type="button" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
44
{{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "32" "height" "32") }}
55
</button>
6+
<div class="docs-search" id="docsearch"></div>
67

78
<ul class="header-nav ms-auto">
89
<li class="nav-item">

‎docs/layouts/partials/scripts.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
<script src="/dist/js/coreui.bundle.js"></script>
55
{{- end }}
66

7+
{{ if eq .Page.Layout "docs" -}}
8+
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
9+
{{- end }}
10+
711
{{- $vendor := resources.Match "js/vendor/*.js" -}}
812
{{- $js := resources.Match "js/*.js" -}}
913
{{- $targetDocsJSPath := printf "/assets/js/docs.js" -}}

‎docs/layouts/partials/stylesheet.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
{{- "<!-- Bootstrap core CSS -->" | safeHTML }}
1+
{{ if eq .Page.Layout "docs" -}}
2+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
3+
{{- end }}
4+
25
{{ if eq hugo.Environment "production" -}}
36
{{ if eq .Page.Params.direction "rtl" -}}
47
<link href="/dist/css/coreui.rtl.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_rtl_hash | safeHTMLAttr }} crossorigin="anonymous">

0 commit comments

Comments
 (0)