Skip to content

Commit 61a2308

Browse files
colegoldsmithcolegoldsmith
authored
Docsearch UI (#20)
* poc stage, ui elements working * finish styling * recolor search overlay * use the search API key instead * underline styles
1 parent 13ac07b commit 61a2308

File tree

10 files changed

+166
-29
lines changed

10 files changed

+166
-29
lines changed

‎src/css/doc.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222

2323
@media screen and (max-width: 1023.5px) {
2424
.doc {
25-
padding-left: var(--site-padding);
26-
padding-right: var(--site-padding);
25+
padding-left: var(--site-padding--mobile);
26+
padding-right: var(--site-padding--mobile);
2727
}
2828
}
2929

‎src/css/docsearch.css‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
.DocSearch .DocSearch-Hit[aria-selected=true] a {
2+
background-color: var(--ds-background-level1);
3+
}
4+
5+
html[data-theme="dark"] .DocSearch .DocSearch-Modal {
6+
border: 1px solid var(--ds-divider);
7+
}
8+
9+
.DocSearch .DocSearch-Footer {
10+
border-top: 1px solid var(--ds-divider);
11+
}
12+
13+
.DocSearch .DocSearch-Commands-Key,
14+
.DocSearch .DocSearch-Button-Key {
15+
border-radius: 4px;
16+
color: var(--ds-text-tertiary);
17+
}
18+
19+
.DocSearch .DocSearch-LoadingIndicator svg,
20+
.DocSearch .DocSearch-MagnifierLabel svg {
21+
width: 20px;
22+
height: 20px;
23+
}
24+
25+
.DocSearch .DocSearch-Input {
26+
@include text-body;
27+
}
28+
29+
.DocSearch .DocSearch-Form {
30+
border-radius: 6px;
31+
border: 1px solid var(--ds-neutral-outlined-border);
32+
33+
&:hover {
34+
border-color: var(--ds-neutral-outlined-hover-border);
35+
}
36+
37+
&:focus-within {
38+
outline: 2px solid var(--ds-focus-visible);
39+
outline-offset: -2px;
40+
}
41+
}
42+
43+
.DocSearch .DocSearch-Button-Placeholder {
44+
@include text-body;
45+
46+
color: var(--ds-text-placeholder);
47+
margin-right: var(--ds-space-3);
48+
}
49+
50+
.DocSearch .DocSearch-Button {
51+
transition: var(--ds-transition);
52+
height: var(--ds-space-5);
53+
border-radius: 6px;
54+
border: 1px solid var(--ds-neutral-outlined-border);
55+
margin: 0;
56+
57+
&:hover {
58+
background-color: var(--ds-neutral-outlined-hover-bg);
59+
border-color: var(--ds-neutral-outlined-hover-border);
60+
}
61+
62+
&:active {
63+
background-color: var(--ds-neutral-outlined-active-bg);
64+
}
65+
}
66+
67+
.DocSearch .DocSearch-Hit[aria-selected=false] mark {
68+
text-decoration: underline;
69+
}
70+
71+
@media screen and (max-width: 768px) {
72+
.DocSearch.DocSearch-Container {
73+
position: fixed;
74+
height: 100vh;
75+
}
76+
}
77+
78+
.DocSearch {
79+
--docsearch-primary-color: var(--ds-text-primary);
80+
--docsearch-text-color: var(--ds-text-primary);
81+
--docsearch-spacing: 2rem;
82+
--docsearch-icon-stroke-width: 1.4;
83+
--docsearch-highlight-color: var(--ds-text-primary);
84+
--docsearch-muted-color: var(--ds-text-placeholder);
85+
--docsearch-container-background: rgba(0, 0, 0, 0.5);
86+
--docsearch-logo-color: var(--ds-text-primary);
87+
88+
/* modal */
89+
--docsearch-modal-width: 560px;
90+
--docsearch-modal-height: 600px;
91+
--docsearch-modal-background: var(--ds-background-body);
92+
--docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), 0 3px 8px 0 rgba(85, 90, 100, 1);
93+
94+
/* searchbox */
95+
--docsearch-searchbox-height: var(--ds-space-7);
96+
--docsearch-searchbox-background: none;
97+
--docsearch-searchbox-focus-background: none;
98+
--docsearch-searchbox-shadow: none;
99+
100+
/* hit */
101+
--docsearch-hit-height: var(--ds-space-7);
102+
--docsearch-hit-color: var(--ds-text-primary);
103+
--docsearch-hit-active-color: var(--ds-text-primary);
104+
--docsearch-hit-background: var(--ds-background-body);
105+
--docsearch-hit-shadow: none;
106+
107+
/* key */
108+
--docsearch-key-gradient: var(--ds-background-level1);
109+
--docsearch-key-shadow: none;
110+
111+
/* footer */
112+
--docsearch-footer-height: var(--ds-space-6);
113+
--docsearch-footer-background: var(--ds-background-body);
114+
--docsearch-footer-shadow: none;
115+
}
116+
117+
/* Darkmode */
118+
119+
html[data-theme='dark'] .DocSearch {
120+
--docsearch-text-color: var(--ds-text-primary);
121+
--docsearch-container-background: rgba(20, 20, 20, 0.7);
122+
--docsearch-modal-background: var(--ds-background-body);
123+
--docsearch-modal-shadow: none;
124+
--docsearch-searchbox-background: none;
125+
--docsearch-searchbox-focus-background: none;
126+
--docsearch-hit-color: var(--ds-text-primary);
127+
--docsearch-hit-shadow: none;
128+
--docsearch-hit-background: var(--ds-background-body);
129+
--docsearch-key-gradient: var(--ds-background-level1);
130+
--docsearch-key-shadow: none;
131+
--docsearch-footer-background: var(--ds-background-body);
132+
--docsearch-footer-shadow: none;
133+
--docsearch-logo-color: var(--ds-text-primary);
134+
--docsearch-muted-color: var(--ds-text-placeholder);
135+
}

‎src/css/header.css‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -70,18 +70,6 @@ html[data-theme="dark"] #theme-toggle::before {
7070
color: var(--ds-warning-300);
7171
}
7272

73-
@media screen and (min-width: 769px) {
74-
#search-input {
75-
width: calc(200 / var(--rem-base) * 1rem);
76-
}
77-
}
78-
79-
@media screen and (max-width: 768.5px) {
80-
#search-button {
81-
display: none;
82-
}
83-
}
84-
8573
@media screen and (max-width: 1023.5px) {
8674
#get-support {
8775
width: var(--ds-space-5);
@@ -95,7 +83,7 @@ html[data-theme="dark"] #theme-toggle::before {
9583

9684
.navbar-brand {
9785
height: inherit;
98-
padding: 0 var(--site-padding);
86+
padding: 0 var(--site-padding--mobile);
9987
}
10088

10189
.navbar-brand .navbar-item {
@@ -109,7 +97,7 @@ html[data-theme="dark"] #theme-toggle::before {
10997
max-height: var(--body-min-height);
11098
overflow-y: auto;
11199
overscroll-behavior: none;
112-
padding: var(--site-padding);
100+
padding: var(--site-padding--mobile);
113101
border-top: 1px solid var(--ds-divider);
114102
border-bottom: 1px solid var(--ds-divider);
115103
}

‎src/css/nav.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,13 @@ html.is-clipped--nav {
106106
padding: var(--ds-space-1) var(--site-padding);
107107
}
108108

109+
@media screen and (max-width: 1023.5px) {
110+
.nav-link,
111+
.nav-text {
112+
padding: var(--ds-space-1) var(--site-padding--mobile);
113+
}
114+
}
115+
109116
.nav-link {
110117
transition: var(--ds-transition);
111118

‎src/css/site.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,4 @@
2727
@import "highlight.css";
2828
@import "print.css";
2929
@import "tutorial-info.css";
30+
@import "docsearch.css"

‎src/css/toolbar.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,6 @@
5555

5656
@media screen and (max-width: 1023.5px) {
5757
.toolbar {
58-
padding-right: var(--site-padding);
58+
padding-right: var(--site-padding--mobile);
5959
}
6060
}

‎src/css/vars.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
--footer-link-font-color: var(--link-font-color);
106106
/* dimensions and positioning */
107107
--site-padding: var(--ds-space-4);
108+
--site-padding--mobile: var(--ds-space-2);
108109
--navbar-height: calc(100 / var(--rem-base) * 1rem);
109110
--toolbar-height: calc(22 / var(--rem-base) * 1rem);
110111
--drawer-height: var(--toolbar-height);

‎src/partials/footer-scripts.hbs‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
<script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
22
<script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
3-
{{#if env.SITE_SEARCH_PROVIDER}}
4-
{{> search-scripts}}
5-
{{/if}}
3+
4+
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
5+
<script>
6+
docsearch({
7+
container: '#docsearch',
8+
appId: '2ELPRZR9UC',
9+
indexName: 'crawler_DocSearch Astra Serverless',
10+
{{!-- This is the public API key which can be safely used in frontend code. --}}
11+
apiKey: '1f4acbf51d118e4137e9a63b38bd8456',
12+
})
13+
</script>

‎src/partials/head-scripts.hbs‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<script async src="https://www.googletagmanager.com/gtag/js?id={{this}}"></script>
33
<script>function gtag() { dataLayer.push(arguments) }; window.dataLayer = window.dataLayer || []; gtag('js', new Date()); gtag('config', '{{this}}')</script>
44
{{/with}}
5-
{{!--
6-
<script>var uiRootPath = '{{{uiRootPath}}}'</script> --}}
5+
6+
<script>var uiRootPath = '{{{uiRootPath}}}'</script>
77

88
<link rel="preload" href="{{uiRootPath}}/font/material-icons-outlined-latin-400-normal.woff2" as="font"
99
type="font/woff2" crossorigin>
@@ -21,4 +21,6 @@
2121
} else {
2222
document.documentElement.setAttribute('data-theme', 'light')
2323
}
24-
</script>
24+
</script>
25+
26+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />

‎src/partials/header-content.hbs‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,7 @@
99
<div class="navbar-end hide-for-print">
1010
{{!-- {{#if env.SITE_SEARCH_PROVIDER}} --}}
1111
<div class="search">
12-
<div class="ds-input-container search">
13-
<span class="material-icons ds-input--leading-icon">search</span>
14-
<input id="search-input" class="ds-input" type="text" placeholder="Search the docs" {{#if page.home}}
15-
autofocus{{/if}}>
16-
</div>
17-
<button id="search-button" class="ds-button ds-button--color-neutral ds-button--variant-solid">Search</button>
12+
<div class="DocSearch" id="docsearch"></div>
1813
</div>
1914
{{!-- {{/if}} --}}
2015
<button class="ds-button ds-button--color-neutral ds-button--variant-outlined" id="get-support"><span

0 commit comments

Comments
 (0)