Skip to content

Commit c60248a

Browse files
bgravenorstbgravenorst
authored
Search box updates (#2628)
* Update box to display AI search. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Update search box text and size. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Add clear icon instead of text. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Fixed text overlapping when unable to find results. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Fix highlighting bug. Now uses light highlighter. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Fix bin icon hover. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> --------- Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>
1 parent 1698c3e commit c60248a

4 files changed

Lines changed: 140 additions & 4 deletions

File tree

‎docusaurus.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -764,6 +764,12 @@ const config = {
764764
apiKey: 'b4e925aa9bf05e5bef2e40b3ee6ee431',
765765
indexName: 'mmdocs',
766766
contextualSearch: false,
767+
translations: {
768+
button: {
769+
buttonText: 'Search or Ask AI',
770+
buttonAriaLabel: 'Search or Ask AI',
771+
},
772+
},
767773
askAi: {
768774
assistantId: 'REak1eiP5wfp',
769775
},

‎src/scss/custom.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,30 @@ ol {
359359
font-size: 1.4rem !important;
360360
}
361361

362+
.DocSearch-Button-Keys {
363+
gap: 0 !important;
364+
}
365+
366+
.DocSearch-Button-Key {
367+
font-size: 1.6rem !important;
368+
}
369+
370+
.DocSearch-Button-Key:last-child {
371+
display: none !important;
372+
}
373+
374+
.DocSearch-Button-Key:first-child {
375+
width: auto !important;
376+
padding: 0 0.35rem !important;
377+
gap: 0.15rem;
378+
}
379+
380+
.DocSearch-Button-Key:first-child::after {
381+
content: 'K';
382+
font-size: 1.2rem;
383+
line-height: 1;
384+
}
385+
362386
/* Breadcrumbs */
363387

364388
.breadcrumbs {

‎src/scss/theme/_doc-search.scss‎

Lines changed: 83 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
[data-theme='light'] .DocSearch {
22
/* --docsearch-primary-color: var(--ifm-color-primary); */
33
/* --docsearch-text-color: var(--ifm-font-color-base); */
4-
--docsearch-muted-color: var(--general-gray-dark);
4+
--docsearch-muted-color: var(--general-gray-mid);
55
--docsearch-container-background: rgba(10, 10, 10, 0.9);
66
/* Modal */
77
--docsearch-modal-background: var(--ifm-color-secondary-lighter);
88
/* Search box */
99
--docsearch-searchbox-background: var(--ifm-color-secondary);
10-
--docsearch-searchbox-focus-background: var(--ifm-color-white);
10+
--docsearch-searchbox-focus-background: var(--general-gray-light);
1111
--docsearch-primary-color: var(--general-black);
1212
--docsearch-searchbox-shadow: 0 0 0 0.2rem var(--docsearch-primary-color);
1313
--docsearch-highlight-color: var(--general-black);
@@ -17,11 +17,25 @@
1717
--docsearch-hit-background: var(--ifm-color-white);
1818
/* Footer */
1919
--docsearch-footer-background: var(--ifm-color-white);
20+
21+
// Light mode: keep text/icons dark; use a light highlight background for hover/selection.
22+
// We use !important here because DocSearch styles and our shared rules below
23+
// set a dark background for hover/selection.
24+
.DocSearch-Hit[aria-selected='true'] a,
25+
.DocSearch-Hit[aria-selected='false'] a:hover {
26+
background-color: var(--docsearch-hit-highlight-color) !important;
27+
color: var(--general-black) !important;
28+
}
29+
30+
.DocSearch-Hit[aria-selected='true'] a :is(.DocSearch-Hit-title, .DocSearch-Hit-path, .DocSearch-Hit-text),
31+
.DocSearch-Hit[aria-selected='false'] a:hover :is(.DocSearch-Hit-title, .DocSearch-Hit-path, .DocSearch-Hit-text) {
32+
color: var(--general-black) !important;
33+
}
2034
}
2135

2236
[data-theme='dark'] .DocSearch {
2337
--docsearch-text-color: var(--ifm-font-color-base);
24-
--docsearch-muted-color: var(--ifm-color-secondary-darkest);
38+
--docsearch-muted-color: var(--general-gray-mid);
2539
--docsearch-container-background: rgba(10, 10, 10, 0.9);
2640
/* Modal */
2741
--docsearch-modal-background: var(--general-gray-dark);
@@ -46,11 +60,25 @@
4660

4761
.DocSearch {
4862
--docsearch-spacing: 1.2rem;
49-
--docsearch-modal-width: 56rem;
63+
--docsearch-modal-width: 74.5rem;
5064
--docsearch-modal-height: 60rem;
5165
--docsearch-searchbox-height: 5.6rem;
5266
--docsearch-footer-height: 4.4rem;
5367

68+
.DocSearch-Button {
69+
border: 1px solid var(--docsearch-primary-color);
70+
background-color: var(--docsearch-searchbox-focus-background);
71+
box-shadow: 0 0 0 0.1rem var(--docsearch-primary-color);
72+
}
73+
74+
.DocSearch-Button:hover {
75+
box-shadow: 0 0 0 0.2rem var(--docsearch-primary-color);
76+
}
77+
78+
.DocSearch-Button:focus-visible {
79+
box-shadow: 0 0 0 0.3rem var(--docsearch-primary-color);
80+
}
81+
5482
.DocSearch-Modal {
5583
border-radius: 0;
5684
margin: 0;
@@ -74,8 +102,41 @@
74102
border-radius: 0.4rem;
75103
}
76104

105+
// Make "Clear the query" less prominent: icon-only clear affordance.
106+
// Keeps the accessible label/title intact, but visually renders a small "×" icon.
107+
.DocSearch-Clear {
108+
font-size: 0;
109+
width: 2.8rem;
110+
height: 2.8rem;
111+
padding: 0;
112+
display: inline-flex;
113+
align-items: center;
114+
justify-content: center;
115+
color: transparent;
116+
}
117+
118+
.DocSearch-Clear::before {
119+
content: '';
120+
width: 1.6rem;
121+
height: 1.6rem;
122+
background-color: var(--docsearch-icon-color);
123+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h5v2H3V5h5l1-2Zm1 6h2v10h-2V9Zm4 0h2v10h-2V9ZM7 9h2v10H7V9Zm-1 12h12a2 2 0 0 0 2-2V7H4v12a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E") no-repeat center / contain;
124+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h5v2H3V5h5l1-2Zm1 6h2v10h-2V9Zm4 0h2v10h-2V9ZM7 9h2v10H7V9Zm-1 12h12a2 2 0 0 0 2-2V7H4v12a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E") no-repeat center / contain;
125+
}
126+
127+
.DocSearch-Clear:hover::before {
128+
background-color: var(--docsearch-highlight-color);
129+
}
130+
77131
.DocSearch-Input {
78132
font-size: 2rem;
133+
font-weight: 400;
134+
135+
&::placeholder {
136+
color: var(--docsearch-muted-color);
137+
font-weight: 300;
138+
opacity: 0.75;
139+
}
79140
}
80141

81142
.DocSearch-Help {
@@ -100,6 +161,19 @@
100161
padding: 3.6rem 0;
101162
}
102163

164+
// No results: render the query on its own line to avoid overlap when wrapping
165+
.DocSearch-NoResults .DocSearch-Title {
166+
line-height: 1.2;
167+
}
168+
169+
.DocSearch-NoResults .DocSearch-Title > strong {
170+
display: block;
171+
margin-top: 0.2em;
172+
line-height: 1.2;
173+
overflow-wrap: anywhere;
174+
word-break: break-word;
175+
}
176+
103177
.DocSearch-Dropdown {
104178
margin-top: 0.2rem;
105179
}
@@ -137,6 +211,11 @@
137211

138212
.DocSearch-Hit[aria-selected='true'] a {
139213
background-color: var(--general-black);
214+
215+
.DocSearch-Hit-title,
216+
.DocSearch-Hit-path {
217+
color: var(--docsearch-hit-active-color);
218+
}
140219
}
141220

142221
.DocSearch-HitsFooter a {

‎src/theme/SearchTranslations/index.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type { DocSearchTranslations } from '@docsearch/react'
2+
import baseTranslations from '@theme-original/SearchTranslations'
3+
4+
type SearchTranslations = DocSearchTranslations & {
5+
placeholder?: string
6+
modal?: {
7+
searchBox?: {
8+
placeholderText?: string
9+
placeholderTextAskAi?: string
10+
}
11+
}
12+
}
13+
14+
const t = baseTranslations as SearchTranslations
15+
16+
export default {
17+
...t,
18+
modal: {
19+
...t.modal,
20+
searchBox: {
21+
...t.modal?.searchBox,
22+
placeholderText: 'Search or ask AI a question',
23+
placeholderTextAskAi: 'Ask AI a question…',
24+
},
25+
},
26+
} satisfies SearchTranslations
27+

0 commit comments

Comments
 (0)