Skip to content

Commit b50dc3a

Browse files
kaci8claude
kaci8
and
claude
authored
Add Algolia DocSearch to docs site (#19)
* Add Algolia DocSearch with custom dark theme styling - Configure Algolia DocSearch (appId, apiKey, indexName) in themeConfig - Show search bar only on /docs pages using CSS class selectors - Style DocSearch button and modal to match site dark theme - Position search left of Download button in navbar - Hide Download button on mobile for docs pages to prevent overlap Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Refactor DocSearch styles to use specificity over !important - Replace !important with higher-specificity selectors (body prefix, html[data-theme='dark']:root for variables) - Fix modal inner elements clipping by restoring overflow: hidden on DocSearch-Modal - Fix search bar visibility on non-docs pages using body .DocSearch-Button selector - Add algolia-site-verification meta tag - Simplify html[data-theme='dark'], html selector to just html Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add comment with Algolia dashboard link Signed-off-by: Kaci Lambeth <97469517+kaci8@users.noreply.github.com> --------- Signed-off-by: Kaci Lambeth <97469517+kaci8@users.noreply.github.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 307f85d commit b50dc3a

2 files changed

Lines changed: 167 additions & 4 deletions

File tree

‎docusaurus.config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,24 @@ const config = {
7171
{ to: '/blog', label: 'Blog', position: 'left' },
7272
{ href: 'https://8th.io/discord', label: 'Discord', position: 'left' },
7373
{ to: '/docs', label: 'Docs', position: 'left' },
74+
{ type: 'search', position: 'right' },
7475
{
7576
type: 'html',
7677
position: 'right',
7778
value: '<a href="/downloads" class="btn btn-primary navbar-download-btn">Download</a>',
7879
},
7980
],
8081
},
82+
83+
/* Algolia keys are managed here https://dashboard.algolia.com/account/api-keys/all?applicationId=4OEBKHRDF1 */
84+
algolia: {
85+
appId: '4OEBKHRDF1',
86+
apiKey: '1b345ffba80eb2203110909c7cd6775b',
87+
indexName: 'Documentation',
88+
},
8189
footer: {},
8290
metadata: [
91+
{ name: 'algolia-site-verification', content: '9440827CF3D84DC9' },
8392
{ property: 'og:image', content: 'https://8thwall.org/social-cover.png' },
8493
{ property: 'og:type', content: 'website' },
8594
{ name: 'twitter:image', content: 'https://8thwall.org/social-cover.png' },

‎src/css/custom.css‎

Lines changed: 158 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -131,14 +131,167 @@
131131
text-decoration: none !important;
132132
}
133133

134-
/* Hide Download button in nav when already on downloads page or on legacy-policy pages */
134+
/* Hide Download button in nav when already on downloads page, legacy-policy pages, or mobile */
135135
html:has(.downloads-hero) .navbar-download-btn,
136136
html.plugin-id-legacy-policies .navbar-download-btn {
137-
display: none !important;
137+
display: none;
138+
}
139+
140+
@media (max-width: 996px) {
141+
html.docs-doc-page:not(.plugin-id-legacy-policies) .navbar-download-btn {
142+
display: none;
143+
}
144+
}
145+
146+
/* Hide search bar on non-docs pages */
147+
body .DocSearch-Button { display: none; }
148+
html.docs-doc-page:not(.plugin-id-legacy-policies) body .DocSearch-Button { display: flex; }
149+
150+
/* DocSearch button styling */
151+
body .DocSearch-Button {
152+
font-family: var(--font-family);
153+
font-size: 0.875rem;
154+
background-color: var(--color-bg-card);
155+
color: var(--color-text-secondary);
156+
border: 1px solid var(--color-border);
157+
border-radius: var(--radius-lg);
158+
padding: 8px 16px;
159+
height: auto;
160+
width: auto;
161+
transition: border-color 0.2s, color 0.2s;
162+
gap: 8px;
138163
}
139164

140-
/* Hide search bar if no search plugin is configured */
141-
.navbar__search { display: none; }
165+
body .DocSearch-Button:hover {
166+
border-color: var(--color-primary);
167+
color: var(--color-text);
168+
background-color: var(--color-bg-card);
169+
box-shadow: none;
170+
}
171+
172+
body .DocSearch-Button-Placeholder {
173+
font-family: var(--font-family);
174+
font-size: 0.875rem;
175+
color: inherit;
176+
}
177+
178+
body .DocSearch-Search-Icon {
179+
color: inherit;
180+
width: 14px;
181+
height: 14px;
182+
}
183+
184+
body .DocSearch-Button-Keys {
185+
display: flex;
186+
gap: 2px;
187+
}
188+
189+
body .DocSearch-Button-Key {
190+
font-family: var(--font-family);
191+
font-size: 0.75rem;
192+
background-color: var(--color-bg-alt);
193+
color: var(--color-text-muted);
194+
border: 1px solid var(--color-border-light);
195+
border-radius: var(--radius-sm);
196+
padding: 2px 4px;
197+
box-shadow: none;
198+
}
199+
200+
/* DocSearch modal theme — higher specificity than DocSearch's html[data-theme='dark'] */
201+
html[data-theme='dark']:root {
202+
--docsearch-primary-color: var(--color-primary);
203+
--docsearch-highlight-color: var(--color-primary);
204+
--docsearch-text-color: var(--color-text);
205+
--docsearch-secondary-text-color: var(--color-text-secondary);
206+
--docsearch-muted-color: var(--color-text-muted);
207+
--docsearch-icon-color: var(--color-text-secondary);
208+
--docsearch-focus-color: var(--color-primary);
209+
--docsearch-subtle-color: var(--color-border);
210+
--docsearch-background-color: var(--color-bg-card);
211+
--docsearch-modal-background: var(--color-bg);
212+
--docsearch-modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
213+
--docsearch-searchbox-background: var(--color-bg-card);
214+
--docsearch-searchbox-focus-background: var(--color-bg-card);
215+
--docsearch-hit-color: var(--color-text);
216+
--docsearch-hit-background: var(--color-bg-card);
217+
--docsearch-dropdown-menu-item-hover-background: var(--color-bg-card-active);
218+
--docsearch-hit-highlight-color: rgba(168, 85, 247, 0.15);
219+
--docsearch-hit-shadow: none;
220+
--docsearch-key-background: var(--color-bg);
221+
--docsearch-key-color: var(--color-text-muted);
222+
--docsearch-container-background: rgba(0, 0, 0, 0.75);
223+
--docsearch-footer-background: var(--color-bg-alt);
224+
--docsearch-footer-shadow: inset 0 1px 0 var(--color-border);
225+
--docsearch-logo-color: var(--color-text-secondary);
226+
--docsearch-error-color: #ef5350;
227+
--docsearch-border-radius: var(--radius-lg);
228+
}
229+
230+
/* DocSearch modal border */
231+
body .DocSearch-Container {
232+
overflow: visible;
233+
}
234+
235+
body .DocSearch-Modal {
236+
border-radius: var(--radius-lg);
237+
overflow: hidden;
238+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
239+
position: relative;
240+
}
241+
242+
body .DocSearch-Modal::before {
243+
content: '';
244+
position: absolute;
245+
inset: 0;
246+
border-radius: inherit;
247+
border: 1px solid var(--color-border);
248+
pointer-events: none;
249+
z-index: 9999;
250+
}
251+
252+
/* DocSearch modal font */
253+
body .DocSearch-Modal,
254+
body .DocSearch-Form,
255+
body .DocSearch-Input,
256+
body .DocSearch-Hit-title,
257+
body .DocSearch-Hit-path,
258+
body .DocSearch-Label,
259+
body .DocSearch-Help,
260+
body .DocSearch-Footer {
261+
font-family: var(--font-family);
262+
}
263+
264+
body .DocSearch-Hit[aria-selected='true'] a {
265+
background-color: var(--color-bg-card-active);
266+
border-color: var(--color-primary);
267+
}
268+
269+
body .DocSearch-Hit a {
270+
border: 1px solid transparent;
271+
border-radius: var(--radius-md);
272+
}
273+
274+
body .DocSearch-Input {
275+
color: var(--color-text);
276+
}
277+
278+
body .DocSearch-MagnifierLabel,
279+
body .DocSearch-Reset {
280+
color: var(--color-text-secondary);
281+
}
282+
283+
body .DocSearch-Hit-highlight {
284+
color: var(--color-primary);
285+
text-decoration: none;
286+
}
287+
288+
body .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon {
289+
color: var(--color-primary);
290+
}
291+
292+
body .DocSearch-Hit[aria-selected='true'] mark {
293+
color: var(--color-primary);
294+
}
142295

143296
/* Force dark background on main content wrapper */
144297
main,
@@ -215,6 +368,7 @@ div[class*="announcementBar"] .banner-btn:hover {
215368
--color-bg-alt: #111111;
216369
--color-bg-card: #1a1a1a;
217370
--color-bg-card-hover: #222222;
371+
--color-bg-card-active: #262626;
218372
--color-text: #ffffff;
219373
--color-text-secondary: #a1a1a1;
220374
--color-text-muted: #8a8a8a;

0 commit comments

Comments
 (0)