Skip to content

Commit 18c50a7

Browse files
dcasatidcasati
authored
Merge pull request #48 from appdevgbb:dcasati-enable-search
Add docusaurus-search-local dependency to package.json and fix GBB nomenclature
2 parents e82e614 + a22cd22 commit 18c50a7

File tree

6 files changed

+16233
-11
lines changed

6 files changed

+16233
-11
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,4 @@ bin-release/
1616
# Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties`
1717
# should NOT be excluded as they contain compiler settings and other important
1818
# information for Eclipse / Flash Builder.
19+
node_modules

‎docusaurus/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
# Azure Global Blackbelt Blog
1+
# Azure Global Black Belt Blog
22

33
[![Deploy to GitHub Pages](https://github.com/appdevgbb/gbb-blog/actions/workflows/deploy.yml/badge.svg)](https://github.com/appdevgbb/gbb-blog/actions/workflows/deploy.yml)
44

5-
Home for the Azure Global Blackbelt team to share knowledge and best practices on Azure, Kubernetes, and cloud-native technologies.
5+
Home for the Azure Global Black Belt team to share knowledge and best practices on Azure, Kubernetes, and cloud-native technologies.
66

77
## Quick Start
88

@@ -68,5 +68,5 @@ This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md
6868
## Related Resources
6969

7070
- [Azure Kubernetes Service Documentation](https://learn.microsoft.com/azure/aks/)
71-
- [Azure Global Blackbelt GitHub](https://github.com/appdevgbb)
71+
- [Azure Global Black Belt GitHub](https://github.com/appdevgbb)
7272
- [Kubernetes Documentation](https://kubernetes.io/docs/)

‎docusaurus/docusaurus.config.ts‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@ import type * as Preset from '@docusaurus/preset-classic';
55
// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
66

77
const config: Config = {
8-
title: 'Azure Global Blackbelt',
9-
tagline: 'Home for the Azure Global Blackbelt team to share knowledge',
8+
title: 'Azure Global Black Belt',
9+
tagline: 'Home for the Azure Global Black Belt team to share knowledge',
1010
favicon: 'img/gbb.png',
1111

1212
headTags: [
1313
{
1414
tagName: 'meta',
1515
attributes: {
1616
name: 'og:title',
17-
content: 'Azure Global Blackbelt',
17+
content: 'Azure Global Black Belt',
1818
},
1919
},
2020
{
2121
tagName: 'meta',
2222
attributes: {
2323
name: 'og:description',
24-
content: 'Home for the Azure Global Blackbelt team to share knowledge',
24+
content: 'Home for the Azure Global Black Belt team to share knowledge',
2525
},
2626
},
2727
{
@@ -105,9 +105,9 @@ const config: Config = {
105105
respectPrefersColorScheme: true,
106106
},
107107
navbar: {
108-
title: 'Azure Global Blackbelt',
108+
title: 'Azure Global Black Belt',
109109
logo: {
110-
alt: 'Azure Global Blackbelt Logo',
110+
alt: 'Azure Global Black Belt Logo',
111111
src: 'img/gbb.png',
112112
},
113113
items: [
@@ -167,14 +167,30 @@ const config: Config = {
167167
],
168168
},
169169
],
170-
copyright: `Copyright © ${new Date().getFullYear()} App Innovation Global Blackbelt. Built with Docusaurus.`,
170+
copyright: `Copyright © ${new Date().getFullYear()} Azure Global Black Belt. Built with Docusaurus.`,
171171
},
172172
prism: {
173173
theme: prismThemes.github,
174174
darkTheme: prismThemes.dracula,
175175
additionalLanguages: ['bicep', 'bash', 'powershell', 'json', 'yaml'],
176176
},
177177
} satisfies Preset.ThemeConfig,
178+
179+
themes: [
180+
[
181+
"@easyops-cn/docusaurus-search-local",
182+
{
183+
hashed: true,
184+
language: ["en"],
185+
highlightSearchTermsOnTargetPage: true,
186+
explicitSearchResultPath: true,
187+
blogRouteBasePath: '/',
188+
docsRouteBasePath: [],
189+
indexBlog: true,
190+
indexDocs: false,
191+
},
192+
],
193+
],
178194
};
179195

180196
export default config;

‎docusaurus/src/css/custom.css‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
--ifm-link-color: #8885f9;
2020
--ifm-link-hover-color: #8885f9;
2121
--ifm-link-hover-decoration: underline;
22+
23+
/* Search input colors - light mode default */
24+
--ifm-navbar-search-input-background-color: rgba(255, 255, 255, 0.1);
25+
--ifm-navbar-search-input-color: #ffffff;
2226
}
2327

2428
/* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -194,3 +198,231 @@ footer.footer .footer__copyright {
194198
color: var(--ifm-color-secondary);
195199
}
196200

201+
/* Local Search Plugin - Aggressive Light Mode Override */
202+
html[data-theme='light'] {
203+
/* Search button in navbar - keep dark to match navbar */
204+
--ifm-navbar-search-input-background-color: rgba(255, 255, 255, 0.1) !important;
205+
--ifm-navbar-search-input-color: #ffffff !important;
206+
--ifm-navbar-search-input-placeholder-color: rgba(255, 255, 255, 0.6) !important;
207+
--docsearch-modal-background: #ffffff !important;
208+
--docsearch-searchbox-background: #ffffff !important;
209+
--docsearch-text-color: #000000 !important;
210+
}
211+
212+
html[data-theme='light'] .navbar__search input,
213+
html[data-theme='light'] .navbar__search input[type="search"],
214+
html[data-theme='light'] input.navbar__search-input,
215+
html[data-theme='light'] div[class*="searchBox"] input {
216+
background-color: rgba(255, 255, 255, 0.1) !important;
217+
background-image: none !important;
218+
color: #ffffff !important;
219+
}
220+
221+
/* Target the exact classes from the plugin with highest specificity */
222+
html[data-theme='light'] input.searchInput_T5pz.input_iKql.navbar__search-input,
223+
html[data-theme='light'] input.searchInput_T5pz.input_iKql,
224+
html[data-theme='light'] input.searchInput_T5pz,
225+
html[data-theme='light'] input.input_iKql,
226+
html[data-theme='light'] .navbar__search-input.searchInput_T5pz,
227+
html[data-theme='light'] input[role="combobox"] {
228+
background-color: rgba(255, 255, 255, 0.1) !important;
229+
background-image: none !important;
230+
background: rgba(255, 255, 255, 0.1) !important;
231+
color: #ffffff !important;
232+
}
233+
234+
/* Not focused state - even more specific */
235+
html[data-theme='light'] input.searchInput_T5pz.input_iKql:not(:focus),
236+
html[data-theme='light'] input[role="combobox"]:not(:focus) {
237+
background-color: rgba(255, 255, 255, 0.1) !important;
238+
background: rgba(255, 255, 255, 0.1) !important;
239+
color: #ffffff !important;
240+
}
241+
242+
html[data-theme='light'] .navbar__search input:focus,
243+
html[data-theme='light'] .navbar__search input[type="search"]:focus,
244+
html[data-theme='light'] input.navbar__search-input:focus {
245+
background-color: #ffffff !important;
246+
background-image: none !important;
247+
color: #000000 !important;
248+
-webkit-text-fill-color: #000000 !important;
249+
}
250+
251+
/* Focus states for specific classes */
252+
html[data-theme='light'] input.searchInput_T5pz:focus,
253+
html[data-theme='light'] input.input_iKql:focus,
254+
html[data-theme='light'] input[role="combobox"]:focus {
255+
background-color: #ffffff !important;
256+
background-image: none !important;
257+
background: #ffffff !important;
258+
color: #000000 !important;
259+
-webkit-text-fill-color: #000000 !important;
260+
}
261+
262+
/* Search input in navbar - ONLY style the container, not when typing */
263+
[data-theme='light'] .navbar__search-input:not(:focus) {
264+
background-color: rgba(255, 255, 255, 0.1) !important;
265+
color: #ffffff !important;
266+
border: 1px solid rgba(255, 255, 255, 0.2) !important;
267+
}
268+
269+
/* When focused/typing - white background with black text */
270+
[data-theme='light'] .navbar__search-input:focus,
271+
[data-theme='light'] .navbar__search-input:active {
272+
background-color: #ffffff !important;
273+
color: #000000 !important;
274+
border: 1px solid #cccccc !important;
275+
-webkit-text-fill-color: #000000 !important;
276+
}
277+
278+
/* Force black text when typing */
279+
[data-theme='light'] input[type="search"]:focus,
280+
[data-theme='light'] input[class*="search"]:focus {
281+
color: #000000 !important;
282+
-webkit-text-fill-color: #000000 !important;
283+
}
284+
285+
/* Keep unfocused search input dark */
286+
[data-theme='light'] input[type="search"]:not(:focus),
287+
[data-theme='light'] input[class*="search"]:not(:focus) {
288+
background-color: rgba(255, 255, 255, 0.1) !important;
289+
color: #ffffff !important;
290+
}
291+
292+
[data-theme='light'] .navbar__search-input::placeholder {
293+
color: rgba(255, 255, 255, 0.6) !important;
294+
}
295+
296+
[data-theme='light'] .navbar__search-input:focus::placeholder {
297+
color: #666666 !important;
298+
}
299+
300+
/* Search input wrapper/container */
301+
[data-theme='light'] .navbar__search,
302+
[data-theme='light'] div[class*="searchBox"] {
303+
background-color: transparent !important;
304+
}
305+
306+
/* Force dark background when NOT focused - multiple selectors */
307+
[data-theme='light'] .navbar__search input,
308+
[data-theme='light'] .navbar__search input[type="search"],
309+
[data-theme='light'] input.navbar__search-input,
310+
[data-theme='light'] div[class*="searchBox"] input {
311+
background-color: rgba(255, 255, 255, 0.1) !important;
312+
background: rgba(255, 255, 255, 0.1) !important;
313+
color: #ffffff !important;
314+
}
315+
316+
[data-theme='light'] .navbar__search input:not(:focus),
317+
[data-theme='light'] .navbar__search input[type="search"]:not(:focus),
318+
[data-theme='light'] input.navbar__search-input:not(:focus) {
319+
background-color: rgba(255, 255, 255, 0.1) !important;
320+
background: rgba(255, 255, 255, 0.1) !important;
321+
color: #ffffff !important;
322+
}
323+
324+
/* White background only when focused */
325+
[data-theme='light'] .navbar__search input:focus,
326+
[data-theme='light'] .navbar__search input[type="search"]:focus,
327+
[data-theme='light'] input.navbar__search-input:focus {
328+
background-color: #ffffff !important;
329+
background: #ffffff !important;
330+
color: #000000 !important;
331+
}
332+
333+
/* Remove backgrounds from search icon and inner elements */
334+
[data-theme='light'] .navbar__search svg,
335+
[data-theme='light'] .navbar__search button,
336+
[data-theme='light'] div[class*="searchBox"] svg,
337+
[data-theme='light'] div[class*="searchBox"] button,
338+
[data-theme='light'] .navbar__search::before,
339+
[data-theme='light'] .navbar__search::after {
340+
background-color: transparent !important;
341+
background: transparent !important;
342+
}
343+
344+
[data-theme='light'] .navbar__search .aa-DetachedSearchButton,
345+
[data-theme='light'] .navbar__search [class*="SearchButton"] {
346+
background-color: transparent !important;
347+
background: transparent !important;
348+
}
349+
350+
/* Target the search icon container specifically */
351+
[data-theme='light'] .navbar__search .search-icon,
352+
[data-theme='light'] .navbar__search [class*="searchIcon"],
353+
[data-theme='light'] div[class*="searchBox"] > div:first-child,
354+
[data-theme='light'] .navbar__search-input::before {
355+
background-color: transparent !important;
356+
background: transparent !important;
357+
}
358+
359+
/* Style the search icon itself */
360+
[data-theme='light'] .navbar__search svg path,
361+
[data-theme='light'] div[class*="searchBox"] svg path {
362+
fill: #ffffff !important;
363+
}
364+
365+
/* Search popup/modal container */
366+
[data-theme='light'] div[class*="searchBarContainer"],
367+
[data-theme='light'] div[class*="suggestionContainer"],
368+
[data-theme='light'] .aa-Panel,
369+
[data-theme='light'] .aa-PanelLayout {
370+
background-color: #ffffff !important;
371+
color: #000000 !important;
372+
border: 1px solid #cccccc !important;
373+
}
374+
375+
/* All elements inside search results */
376+
[data-theme='light'] div[class*="searchBarContainer"] *,
377+
[data-theme='light'] div[class*="suggestionContainer"] *,
378+
[data-theme='light'] .aa-Panel *,
379+
[data-theme='light'] .aa-PanelLayout * {
380+
color: #000000 !important;
381+
}
382+
383+
/* Search result items */
384+
[data-theme='light'] div[class*="searchResultItem"],
385+
[data-theme='light'] .aa-Item {
386+
background-color: #ffffff !important;
387+
color: #000000 !important;
388+
}
389+
390+
[data-theme='light'] div[class*="searchResultItem"]:hover,
391+
[data-theme='light'] .aa-Item:hover,
392+
[data-theme='light'] .aa-Item[aria-selected="true"] {
393+
background-color: #f5f5f5 !important;
394+
}
395+
396+
/* Highlighted text */
397+
[data-theme='light'] mark,
398+
[data-theme='light'] .aa-ItemContentTitle mark,
399+
[data-theme='light'] div[class*="searchResultItem"] mark {
400+
background-color: #ffeb3b !important;
401+
color: #000000 !important;
402+
padding: 0 2px;
403+
}
404+
405+
/* Warning message */
406+
[data-theme='light'] div[class*="noResultsScreen"],
407+
[data-theme='light'] .aa-DetachedOverlay {
408+
background-color: #ffffff !important;
409+
color: #000000 !important;
410+
}
411+
412+
/* Dark mode - ensure consistency */
413+
[data-theme='dark'] .navbar__search-input {
414+
background-color: #2d2d2d !important;
415+
color: #ffffff !important;
416+
}
417+
418+
[data-theme='dark'] div[class*="searchBarContainer"],
419+
[data-theme='dark'] div[class*="suggestionContainer"] {
420+
background-color: #2d2d2d !important;
421+
color: #ffffff !important;
422+
}
423+
424+
[data-theme='dark'] mark {
425+
background-color: #8885f9 !important;
426+
color: #ffffff !important;
427+
}
428+

0 commit comments

Comments
 (0)