Skip to content

Commit d921e6e

Browse files
jknackjknack
committed
doc: add Algolia DocSearch fix #3861 
1 parent 6aa3980 commit d921e6e

File tree

4 files changed

+106
-1
lines changed

4 files changed

+106
-1
lines changed

‎docs/asciidoc/core.adoc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
== Core
22
[.lead]
3-
The foundational building blocks of your Jooby application. This section covers how to bootstrap the server, manage application environments and configuration, and leverage the modular architecture that makes Jooby both lightweight and highly extensible.
3+
The heart of the Jooby development experience. This section defines the Request-Response Pipeline, covering everything from expressive routing and path patterns to managing the Context and crafting fluid responses. It is the essential guide to building the logic that powers your web applications.
44

55
include::routing.adoc[]
66

‎docs/asciidoc/docinfo-footer.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,3 +155,31 @@
155155
}
156156
});
157157
</script>
158+
159+
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
160+
161+
<script>
162+
document.addEventListener('DOMContentLoaded', function() {
163+
// 1. Find Asciidoctor's auto-generated TOC
164+
const toc = document.getElementById('toc');
165+
166+
if (toc) {
167+
// 2. Create the search container dynamically
168+
const searchContainer = document.createElement('div');
169+
searchContainer.id = 'docsearch';
170+
171+
// 3. Inject it at the very top of the TOC, above the title
172+
toc.insertBefore(searchContainer, toc.firstChild);
173+
174+
// 4. Initialize Algolia into that new container
175+
docsearch({
176+
appId: '9U2WK2CSJ7',
177+
apiKey: '113e159f5c587fdac629948dd80dd993',
178+
indexName: 'jooby',
179+
container: '#docsearch'
180+
});
181+
} else {
182+
console.warn("Could not find the #toc element to inject the search bar.");
183+
}
184+
});
185+
</script>

‎docs/asciidoc/docinfo.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
<meta name="algolia-site-verification" content="B92EF92B303805F4" />
12
<link rel="preconnect" href="https://fonts.googleapis.com">
23
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
4+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
35
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
46
<script>
57
// This MUST be in the <head>. It runs before the body is rendered, preventing the white flash.

‎docs/js/styles/theme.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -726,3 +726,78 @@ kbd {
726726
a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 90%; color: #666; }
727727
#content a[href^="#"]::after { content: ""; }
728728
}
729+
730+
/* ==========================================================================
731+
18. Algolia DocSearch Overrides
732+
========================================================================== */
733+
734+
/* Light Theme (Default) */
735+
:root {
736+
--docsearch-primary-color: var(--jooby-blue);
737+
--docsearch-highlight-color: var(--jooby-blue);
738+
--docsearch-text-color: var(--text-main);
739+
--docsearch-muted-color: var(--text-muted);
740+
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--jooby-blue);
741+
--docsearch-searchbox-focus-background: var(--bg-main);
742+
}
743+
744+
/* Dark Theme Overrides */
745+
html[data-theme="dark"] {
746+
--docsearch-text-color: var(--text-main);
747+
--docsearch-container-background: rgba(15, 23, 42, 0.85); /* Slightly darker backdrop */
748+
--docsearch-modal-background: var(--bg-surface);
749+
--docsearch-modal-shadow: inset 1px 1px 0 0 #334155, 0 8px 24px 0 rgba(0,0,0,0.5);
750+
--docsearch-searchbox-background: var(--bg-main);
751+
--docsearch-searchbox-focus-background: var(--bg-main);
752+
--docsearch-hit-color: var(--text-muted);
753+
--docsearch-hit-active-color: var(--bg-main);
754+
--docsearch-hit-background: var(--bg-main);
755+
}
756+
757+
/* --- Seamless Button Integration --- */
758+
759+
/* Force the button to fit your sidebar perfectly */
760+
.DocSearch-Button {
761+
border-radius: var(--border-radius) !important;
762+
background: var(--bg-main) !important;
763+
border: 1px solid var(--border-color) !important;
764+
box-shadow: none !important;
765+
color: var(--text-muted) !important;
766+
transition: all 0.2s ease;
767+
width: 100% !important; /* Stretch to fill sidebar */
768+
margin: 0 0 1.5rem 0 !important; /* Space below the button */
769+
padding: 0 10px !important;
770+
justify-content: flex-start !important; /* Align "Search" to the left */
771+
}
772+
773+
/* Push the keyboard shortcut to the right edge */
774+
.DocSearch-Button-Keys {
775+
margin-left: auto !important;
776+
min-width: auto !important;
777+
}
778+
779+
.DocSearch-Button:hover {
780+
border-color: var(--jooby-blue) !important;
781+
color: var(--jooby-blue) !important;
782+
box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
783+
}
784+
785+
/* --- Keyboard Shortcut Keys (kbd) --- */
786+
.DocSearch-Button-Keys kbd {
787+
font-family: var(--font-code);
788+
background: var(--bg-surface) !important;
789+
border: 1px solid var(--border-color) !important;
790+
color: var(--text-muted) !important;
791+
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 2px var(--bg-main) !important;
792+
border-radius: 4px !important;
793+
padding: 0.1rem 0.3rem !important;
794+
width: auto !important;
795+
height: auto !important;
796+
}
797+
798+
/* Brighten the keys explicitly in Dark Mode */
799+
html[data-theme="dark"] .DocSearch-Button-Keys kbd {
800+
color: #e2e8f0 !important;
801+
background: #334155 !important;
802+
}
803+

0 commit comments

Comments
 (0)