Skip to content

Commit 4181095

Browse files
committed
feat(search): improvements to the search
- Add aria-lable to the search input - Style the search input and reset buttons
1 parent c1276df commit 4181095

File tree

1 file changed

+60
-31
lines changed

1 file changed

+60
-31
lines changed

src/routes/search/+page.svelte

Lines changed: 60 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,51 @@
1111
1212
onMount(() => {
1313
if (browser) {
14-
pagefind = new PagefindUI({
15-
element: '#search',
16-
autofocus: true,
17-
bundlePath: `${base}/pagefind/`,
18-
showEmptyFilters: false,
19-
processResult: (result: any) => {
20-
if (dev && result.url) {
21-
result.url = result.url.replace(/\.html$/, '');
22-
}
23-
24-
// remove footer images from results
25-
if (result.meta.image && result.meta.image.indexOf('assets/footer') >= 0) {
26-
result.meta.image = undefined;
27-
}
28-
29-
return result;
14+
initializeSearch();
15+
}
16+
});
17+
18+
function initializeSearch() {
19+
if (pagefind) {
20+
pagefind.destroy();
21+
}
22+
23+
pagefind = new PagefindUI({
24+
element: '#search',
25+
autofocus: true,
26+
bundlePath: `${base}/pagefind/`,
27+
pageSize: 10,
28+
processResult: (result: any) => {
29+
if (dev && result.url) {
30+
result.url = result.url.replace(/\.html$/, '');
3031
}
31-
});
3232
33-
const searchInput = document.querySelector('#search input') as HTMLInputElement;
34-
if (searchInput) {
35-
searchInput.addEventListener('input', (event: Event) => {
36-
const target = event.target as HTMLInputElement;
37-
const url = new URL(window.location.href);
33+
// remove footer images from results
34+
if (result.meta.image && result.meta.image.indexOf('assets/footer') >= 0) {
35+
result.meta.image = undefined;
36+
}
37+
38+
return result;
39+
},
40+
showEmptyFilters: false
41+
});
3842
39-
setTimeout(() => {
40-
url.searchParams.set('q', target.value);
41-
pushState(url, '');
42-
}, 500);
43-
});
44-
}
43+
const searchInput = document.querySelector('#search input') as HTMLInputElement;
44+
if (searchInput) {
45+
searchInput.setAttribute('aria-label', `Search the site`);
46+
searchInput.addEventListener('input', (event: Event) => {
47+
const target = event.target as HTMLInputElement;
48+
const url = new URL(window.location.href);
4549
46-
triggerSearch();
50+
setTimeout(() => {
51+
url.searchParams.set('q', target.value);
52+
pushState(url, '');
53+
}, 500);
54+
});
4755
}
48-
});
56+
57+
triggerSearch();
58+
}
4959
5060
function triggerSearch() {
5161
const currentUrl = new URL(window.location.href);
@@ -54,7 +64,9 @@
5464
}
5565
5666
afterNavigate(() => {
57-
triggerSearch();
67+
if (browser) {
68+
initializeSearch();
69+
}
5870
});
5971
</script>
6072

@@ -71,6 +83,23 @@
7183
</article>
7284

7385
<style>
86+
:global(.pagefind-ui__search-input) {
87+
border-radius: unset !important;
88+
}
89+
90+
:global(.pagefind-ui__search-clear) {
91+
background-color: var(--surface-4) !important;
92+
border-radius: unset !important;
93+
color: var(--text-1) !important;
94+
font-size: var(--font-size-2) !important;
95+
padding-inline: var(--size-4) !important;
96+
97+
&:hover {
98+
background-color: var(--surface-3) !important;
99+
border-bottom: unset !important;
100+
}
101+
}
102+
74103
:global(.pagefind-ui__result-excerpt mark) {
75104
background-color: color-mix(in srgb, var(--yellow) 70%, white);
76105
border-radius: var(--size-1);

0 commit comments

Comments
 (0)