Skip to content

Commit f28fbfe

Browse files
paulOsinskiPaul Osinski
paulOsinski
and
Paul Osinski
authored
add docsearch init implementation (#12890)
Co-authored-by: Paul Osinski <paul.m.osinski@gmail.com>
1 parent 794d861 commit f28fbfe

10 files changed

Lines changed: 869 additions & 225 deletions

File tree

‎docs/assets/js/docsearch.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import docsearch from "@docsearch/js";
2+
3+
docsearch({
4+
container: '#docsearch',
5+
appId: '1JP5JYFGFC',
6+
indexName: 'DefectDojo Docs',
7+
apiKey: '213cc809a92717cffe6ffbe804d13fd1'
8+
});
9+
10+
const onClick = function () {
11+
document.getElementsByClassName("DocSearch-Button")[0].click();
12+
};
13+
14+
document.getElementById("searchToggleMobile").onclick = onClick;
15+
document.getElementById("searchToggleDesktop").onclick = onClick;

‎docs/assets/scss/app.scss‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
// Source: https://getbootstrap.com/docs/5.3/customize/sass/#importing
2+
3+
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
4+
@import "bootstrap/scss/functions";
5+
6+
// 2. Include any default variable overrides here
7+
@import "common/colors";
8+
@import "common/variables-overrides";
9+
@import "common/variables-custom";
10+
11+
// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
12+
@import "bootstrap/scss/variables";
13+
@import "bootstrap/scss/variables-dark";
14+
15+
// 4. Include any default map overrides here
16+
17+
// 5. Include remainder of required parts
18+
@import "bootstrap/scss/maps";
19+
@import "bootstrap/scss/mixins";
20+
@import "bootstrap/scss/root";
21+
22+
// 6. Optionally include any other parts as needed
23+
24+
// Layout & components
25+
@import "bootstrap/scss/utilities";
26+
@import "bootstrap/scss/reboot";
27+
@import "bootstrap/scss/type";
28+
@import "bootstrap/scss/images";
29+
@import "bootstrap/scss/containers";
30+
@import "bootstrap/scss/grid";
31+
@import "bootstrap/scss/helpers";
32+
@import "bootstrap/scss/tables";
33+
@import "bootstrap/scss/forms";
34+
@import "bootstrap/scss/buttons";
35+
@import "bootstrap/scss/transitions";
36+
@import "bootstrap/scss/dropdown";
37+
@import "bootstrap/scss/button-group";
38+
@import "bootstrap/scss/nav";
39+
@import "bootstrap/scss/navbar";
40+
@import "bootstrap/scss/card";
41+
@import "bootstrap/scss/accordion";
42+
@import "bootstrap/scss/breadcrumb";
43+
@import "bootstrap/scss/pagination";
44+
@import "bootstrap/scss/badge";
45+
@import "bootstrap/scss/alert";
46+
@import "bootstrap/scss/progress";
47+
@import "bootstrap/scss/list-group";
48+
@import "bootstrap/scss/close";
49+
@import "bootstrap/scss/toasts";
50+
@import "bootstrap/scss/modal";
51+
@import "bootstrap/scss/tooltip";
52+
@import "bootstrap/scss/popover";
53+
@import "bootstrap/scss/carousel";
54+
@import "bootstrap/scss/spinners";
55+
@import "bootstrap/scss/offcanvas";
56+
@import "bootstrap/scss/placeholders";
57+
58+
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
59+
@import "bootstrap/scss/utilities/api";
60+
61+
// 8. Add additional custom code here
62+
@import "common/fonts";
63+
@import "common/global";
64+
@import "common/syntax";
65+
@import "common/dark";
66+
@import "components/alerts";
67+
@import "components/buttons";
68+
@import "components/callouts";
69+
@import "components/expressive-code";
70+
@import "components/code";
71+
@import "components/comments";
72+
@import "components/details";
73+
@import "components/forms";
74+
@import "components/images";
75+
@import "components/mermaid";
76+
@import "components/modals";
77+
@import "components/search";
78+
@import "components/section-nav";
79+
@import "components/steps";
80+
@import "components/tables";
81+
@import "components/tabs";
82+
@import "layouts/footer";
83+
@import "layouts/header";
84+
@import "layouts/pages";
85+
@import "layouts/posts";
86+
@import "layouts/sidebar";
87+
88+
/*
89+
body {
90+
background-color: {{ site.Params.doks.backGround }};
91+
}
92+
*/
93+
94+
// 9. Custom styles
95+
@import "common/custom";
96+
97+
// 10. DocSearch
98+
@import "common/variables-docsearch";
99+
@import "@docsearch/css/dist/modal";

‎docs/assets/scss/common/_custom.scss‎

Lines changed: 43 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,46 @@
11
/* work-sans-regular - latin */
22
@font-face {
3-
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
4-
font-family: 'Worksans';
5-
font-style: normal;
6-
font-weight: 400;
7-
src: url('/fonts/worksans/work-sans-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
8-
}
9-
/* work-sans-500 - latin */
10-
@font-face {
11-
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
12-
font-family: 'Worksans';
13-
font-style: normal;
14-
font-weight: 500;
15-
src: url('/fonts/worksans/work-sans-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
3+
font-display: swap;
4+
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
5+
font-family: 'Worksans';
6+
font-style: normal;
7+
font-weight: 400;
8+
src: url('/fonts/worksans/work-sans-v19-latin-regular.woff2') format('woff2');
9+
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
10+
}
11+
12+
/* work-sans-500 - latin */
13+
@font-face {
14+
font-display: swap;
15+
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
16+
font-family: 'Worksans';
17+
font-style: normal;
18+
font-weight: 500;
19+
src: url('/fonts/worksans/work-sans-v19-latin-500.woff2') format('woff2');
20+
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
21+
}
22+
23+
.container-lg {
24+
max-width: 100%;
25+
}
26+
27+
// DocSearch
28+
29+
.DocSearch-Container {
30+
z-index: 2000 !important;
31+
}
32+
33+
.DocSearch-Hit-icon {
34+
display: flex;
35+
align-items: center;
36+
}
37+
38+
.DocSearch-Hits mark {
39+
padding: 0;
40+
}
41+
42+
@media (max-width: 768px) {
43+
.DocSearch-Modal {
44+
position: fixed !important;
1645
}
17-
.container-lg {
18-
max-width: 100%;
19-
}
46+
}

‎docs/assets/scss/common/_variables-docsearch.scss‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* DocSearch Variables */
2+
3+
:root {
4+
--docsearch-primary-color: rgb(84, 104, 255);
5+
--docsearch-text-color: rgb(28, 30, 33);
6+
--docsearch-spacing: 12px;
7+
--docsearch-icon-stroke-width: 1.4;
8+
--docsearch-highlight-color: var(--docsearch-primary-color);
9+
--docsearch-muted-color: rgb(150, 159, 175);
10+
--docsearch-container-background: rgba(101, 108, 133, 0.8);
11+
--docsearch-logo-color: rgba(84, 104, 255);
12+
13+
/* modal */
14+
--docsearch-modal-width: 560px;
15+
--docsearch-modal-height: 600px;
16+
--docsearch-modal-background: rgb(245, 246, 247);
17+
--docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), 0 3px 8px 0 rgba(85, 90, 100, 1);
18+
19+
/* searchbox */
20+
--docsearch-searchbox-height: 56px;
21+
--docsearch-searchbox-background: rgb(235, 237, 240);
22+
--docsearch-searchbox-focus-background: #fff;
23+
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
24+
25+
/* hit */
26+
--docsearch-hit-height: 56px;
27+
--docsearch-hit-color: rgb(68, 73, 80);
28+
--docsearch-hit-active-color: #fff;
29+
--docsearch-hit-background: #fff;
30+
--docsearch-hit-shadow: 0 1px 3px 0 rgb(212, 217, 225);
31+
32+
/* key */
33+
--docsearch-key-gradient: linear-gradient(-225deg, rgb(213, 219, 228) 0%, rgb(248, 248, 248) 100%);
34+
--docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230), inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
35+
--docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 1px 0 rgba(30, 35, 90, 0.4);
36+
/* footer */
37+
--docsearch-footer-height: 44px;
38+
--docsearch-footer-background: #fff;
39+
--docsearch-footer-shadow: 0 -1px 0 0 rgb(224, 227, 232), 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
40+
}
41+
42+
/* Darkmode */
43+
44+
html[data-bs-theme="dark"] {
45+
--docsearch-text-color: rgb(245, 246, 247);
46+
--docsearch-container-background: rgba(9, 10, 17, 0.8);
47+
--docsearch-modal-background: rgb(21, 23, 42);
48+
--docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9);
49+
--docsearch-searchbox-background: rgb(9, 10, 17);
50+
--docsearch-searchbox-focus-background: #000;
51+
--docsearch-hit-color: rgb(190, 195, 201);
52+
--docsearch-hit-shadow: none;
53+
--docsearch-hit-background: rgb(9, 10, 17);
54+
--docsearch-key-gradient: linear-gradient(-26.5deg, rgb(86, 88, 114) 0%, rgb(49, 53, 91) 100%);
55+
--docsearch-key-shadow: inset 0 -2px 0 0 rgb(40, 45, 85), inset 0 0 1px 1px rgb(81, 87, 125), 0 2px 2px 0 rgba(3, 4, 9, 0.3);
56+
--docsearch-key-pressed-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 1px 1px 0 #0304094d;
57+
--docsearch-footer-background: rgb(30, 33, 54);
58+
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
59+
--docsearch-logo-color: rgb(255, 255, 255);
60+
--docsearch-muted-color: rgb(127, 132, 151);
61+
}

‎docs/config/_default/params.toml‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ mainSections = ["docs"]
2525
navBarButtonText = "Get started"
2626

2727
# FlexSearch
28-
flexSearch = true # true (default) or false
28+
flexSearch = false # false (default) or false
2929
searchExclKinds = [] # list of page kinds to exclude from search indexing (e.g. ["home", "taxonomy", "term"] )
3030
searchExclTypes = [] # list of content types to exclude from search indexing (e.g. ["blog", "docs", "legal", "contributors", "categories"])
3131
showSearch = [] # [] (all pages, default) or homepage (optionally) and list of sections (e.g. ["homepage", "blog", "guides"])
@@ -136,3 +136,7 @@ mainSections = ["docs"]
136136
newsArticle = [] # NewsArticle sections
137137
blogPosting = ["blog"] # BlogPosting sections
138138
product = [] # Product sections
139+
140+
# Add-ons
141+
[add_ons]
142+
docSearch = true # false (default) or true

‎docs/config/postcss.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ module.exports = {
1818
],
1919
dynamicAttributes: [
2020
'aria-expanded',
21+
'aria-selected',
2122
'data-bs-popper',
2223
'data-bs-target',
2324
'data-bs-theme',

‎docs/layouts/partials/footer/script-footer-custom.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1-
{{/* Put your custom <script></script> tags here */}}
1+
{{/* Put your custom
2+
<script></script> tags here */}}
23

34
{{/* EXAMPLE - only load script for production
45
{{ if eq (hugo.Environment) "production" -}}
5-
{{ partial "footer/esbuild" (dict "src" "js/instantpage.js" "load" "async" "transpile" false) -}}
6+
{{ partial "footer/esbuild" (dict "src" "js/instantpage.js" "load" "async" "transpile" false) -}}
67
{{ end -}}
78
*/}}
89

910
{{/* EXAMPLE - only load script for a page type e.g. contact or gallery
1011
{{ if eq .Type "gallery" -}}
11-
{{ partial "footer/esbuild" (dict "src" "js/gallery.js" "load" "async" "transpile" false) -}}
12+
{{ partial "footer/esbuild" (dict "src" "js/gallery.js" "load" "async" "transpile" false) -}}
1213
{{ end -}}
1314
*/}}
15+
16+
{{ if site.Params.add_ons.docSearch -}} {{ partial "footer/esbuild" (dict "src" "js/docsearch.js" "load" "async"
17+
"transpile" false) -}} {{ end -}}

0 commit comments

Comments
 (0)