@@ -13,13 +13,16 @@ const IS_LIVE = false;
13
13
---
14
14
15
15
<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 ={ {
18
20
showImages: false ,
19
21
translations: {
20
- zero_results: " Couldn't find [SEARCH_TERM]"
21
- }
22
- }} />
22
+ zero_results: " Couldn't find [SEARCH_TERM]" ,
23
+ },
24
+ }}
25
+ />
23
26
{
24
27
! mobile ? (
25
28
<>
@@ -43,118 +46,118 @@ const IS_LIVE = false;
43
46
</label >
44
47
</div >
45
48
<script >
46
- document.addEventListener("DOMContentLoaded", function () {
49
+ document.addEventListener("DOMContentLoaded", function () {
47
50
const searchContainer = document.querySelector(".pagefind-ui");
48
51
const searchInput = searchContainer?.querySelector("input");
49
52
let selectedIndex = -1;
50
53
51
54
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;
54
57
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
+ });
63
66
}
64
67
65
68
document.addEventListener("keydown", function (event) {
66
- if (!searchContainer || !searchInput) return;
69
+ if (!searchContainer || !searchInput) return;
67
70
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();
82
84
}
85
+ }
83
86
});
84
87
85
88
// Reset selection when the search query changes
86
89
searchInput?.addEventListener("input", function () {
87
- selectedIndex = -1;
90
+ selectedIndex = -1;
88
91
});
89
-
90
- });
92
+ });
91
93
</script >
92
94
<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;
157
161
}
158
- }
159
-
162
+ }
160
163
</style >
0 commit comments