@@ -13,13 +13,16 @@ const IS_LIVE = false;
1313---
1414
1515<div class =" ml-auto flex items-center space-x-4" >
16- <Search id =" search" className =" pagefind-ui" uiOptions ={ {
17-
16+ <Search
17+ id =" search"
18+ className =" pagefind-ui"
19+ uiOptions ={ {
1820 showImages: false ,
1921 translations: {
20- zero_results: " Couldn't find [SEARCH_TERM]"
21- }
22- }} />
22+ zero_results: " Couldn't find [SEARCH_TERM]" ,
23+ },
24+ }}
25+ />
2326 {
2427 ! mobile ? (
2528 <>
@@ -43,118 +46,118 @@ const IS_LIVE = false;
4346 </label >
4447</div >
4548<script >
46- document.addEventListener("DOMContentLoaded", function () {
49+ document.addEventListener("DOMContentLoaded", function () {
4750 const searchContainer = document.querySelector(".pagefind-ui");
4851 const searchInput = searchContainer?.querySelector("input");
4952 let selectedIndex = -1;
5053
5154 function updateSelection() {
52- const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
53- if (!results) return;
55+ const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
56+ if (!results) return;
5457
55- results.forEach((result, index) => {
56- if (index === selectedIndex) {
57- result.classList.add("selected");
58- result.scrollIntoView({ block: "nearest", behavior: "smooth" });
59- } else {
60- result.classList.remove("selected");
61- }
62- });
58+ results.forEach((result, index) => {
59+ if (index === selectedIndex) {
60+ result.classList.add("selected");
61+ result.scrollIntoView({ block: "nearest", behavior: "smooth" });
62+ } else {
63+ result.classList.remove("selected");
64+ }
65+ });
6366 }
6467
6568 document.addEventListener("keydown", function (event) {
66- if (!searchContainer || !searchInput) return;
69+ if (!searchContainer || !searchInput) return;
6770
68- const results = searchContainer.querySelectorAll(".pagefind-ui__result");
69- if (document.activeElement === searchInput) {
70- if (event.key === "ArrowDown") {
71- event.preventDefault();
72- selectedIndex = (selectedIndex + 1) % results.length;
73- updateSelection();
74- } else if (event.key === "ArrowUp") {
75- event.preventDefault();
76- selectedIndex = (selectedIndex - 1 + results.length) % results.length;
77- updateSelection();
78- } else if (event.key === "Enter" && selectedIndex >= 0) {
79- event.preventDefault();
80- results[selectedIndex].querySelector("a")?.click();
81- }
71+ const results = searchContainer.querySelectorAll(".pagefind-ui__result");
72+ if (document.activeElement === searchInput) {
73+ if (event.key === "ArrowDown") {
74+ event.preventDefault();
75+ selectedIndex = (selectedIndex + 1) % results.length;
76+ updateSelection();
77+ } else if (event.key === "ArrowUp") {
78+ event.preventDefault();
79+ selectedIndex = (selectedIndex - 1 + results.length) % results.length;
80+ updateSelection();
81+ } else if (event.key === "Enter" && selectedIndex >= 0) {
82+ event.preventDefault();
83+ results[selectedIndex].querySelector("a")?.click();
8284 }
85+ }
8386 });
8487
8588 // Reset selection when the search query changes
8689 searchInput?.addEventListener("input", function () {
87- selectedIndex = -1;
90+ selectedIndex = -1;
8891 });
89-
90- });
92+ });
9193</script >
9294<style is:global >
93- .pagefind-ui__result.selected {
94- background-color: #f5f5f5;
95- background-image: linear-gradient(to right, #3684B6 7px, transparent 5px);
96- -webkit-transform: translate3d(0, 0, 0);
97- transform: translate3d(0, 0, 0);
98- }
99- .pagefind-ui__drawer {
100- }
101- .pagefind-ui__message {
102- margin: 1em;
103- }
104- .pagefind-ui__result mark {
105- background: #F9EB5D;
106- background-image: linear-gradient(to right, #F9EB5D 10%, #FCF4A7 100%);
107- margin: 4px;
108- padding-right: 6px;
109- padding-left: 6px;
110- padding-top: 2px;
111- padding-bottom: 2px;
112- color: #000000;
113- font-family: monospace;
114- border-radius: 4px;
115- }
116- .pagefind-ui {
117- --pagefind-ui-scale: 1;
118- --pagefind-ui-primary: #141f36;
119- --pagefind-ui-text: black;
120- --pagefind-ui-border: #d8d8d8;
121- --pagefind-ui-border-width: 2px;
122- --pagefind-ui-border-radius: 0;
123- width: 50%;
124- }
125- .pagefind-ui.yellow {
126- --pagefind-ui-background: #efc302;
127- }
128- .pagefind-ui.red {
129- --pagefind-ui-background: #ffb9bb;
130- width: 50%;
131- }
132- .pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
133- position: absolute;
134- left: auto;
135- right: 0;
136- margin-top: 0px;
137- width:50vw;
138- z-index: 9999;
139- overflow-y: auto;
140- box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
141- border-bottom-right-radius: var(--pagefind-ui-border-radius);
142- border-bottom-left-radius: var(--pagefind-ui-border-radius);
143- background-color: var(--pagefind-ui-background);
144- }
145- .pagefind-ui__result{
146- padding: 0 2em 1em !important;
147- }
148- .pagefind-ui .pagefind-ui__result-link {
149- color: var(--pagefind-ui-primary);
150- }
151- .pagefind-ui .pagefind-ui__result-excerpt {
152- color: var(--pagefind-ui-text);
153- }
154- @media (max-width: 1280px) {
155- .pagefind-ui {
156- display:none;
95+ .pagefind-ui__result.selected {
96+ background-color: #f5f5f5;
97+ background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
98+ -webkit-transform: translate3d(0, 0, 0);
99+ transform: translate3d(0, 0, 0);
100+ }
101+ .pagefind-ui__drawer {
102+ }
103+ .pagefind-ui__message {
104+ margin: 1em;
105+ }
106+ .pagefind-ui__result mark {
107+ background: #f9eb5d;
108+ background-image: linear-gradient(to right, #f9eb5d 10%, #fcf4a7 100%);
109+ margin: 4px;
110+ padding-right: 6px;
111+ padding-left: 6px;
112+ padding-top: 2px;
113+ padding-bottom: 2px;
114+ color: #000000;
115+ font-family: monospace;
116+ border-radius: 4px;
117+ }
118+ .pagefind-ui {
119+ --pagefind-ui-scale: 1;
120+ --pagefind-ui-primary: #141f36;
121+ --pagefind-ui-text: black;
122+ --pagefind-ui-border: #d8d8d8;
123+ --pagefind-ui-border-width: 2px;
124+ --pagefind-ui-border-radius: 0;
125+ width: 50%;
126+ }
127+ .pagefind-ui.yellow {
128+ --pagefind-ui-background: #efc302;
129+ }
130+ .pagefind-ui.red {
131+ --pagefind-ui-background: #ffb9bb;
132+ width: 50%;
133+ }
134+ .pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
135+ position: absolute;
136+ left: auto;
137+ right: 0;
138+ margin-top: 0px;
139+ width: 50vw;
140+ z-index: 9999;
141+ overflow-y: auto;
142+ box-shadow:
143+ 0 10px 10px -5px rgba(0, 0, 0, 0.2),
144+ 0 2px 2px 0 rgba(0, 0, 0, 0.1);
145+ border-bottom-right-radius: var(--pagefind-ui-border-radius);
146+ border-bottom-left-radius: var(--pagefind-ui-border-radius);
147+ background-color: var(--pagefind-ui-background);
148+ }
149+ .pagefind-ui__result {
150+ padding: 0 2em 1em !important;
151+ }
152+ .pagefind-ui .pagefind-ui__result-link {
153+ color: var(--pagefind-ui-primary);
154+ }
155+ .pagefind-ui .pagefind-ui__result-excerpt {
156+ color: var(--pagefind-ui-text);
157+ }
158+ @media (max-width: 1280px) {
159+ .pagefind-ui {
160+ display: none;
157161 }
158- }
159-
162+ }
160163</style >
0 commit comments