|
11 | 11 |
|
12 | 12 | onMount(() => {
|
13 | 13 | 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$/, ''); |
30 | 31 | }
|
31 |
| - }); |
32 | 32 |
|
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 | + }); |
38 | 42 |
|
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); |
45 | 49 |
|
46 |
| - triggerSearch(); |
| 50 | + setTimeout(() => { |
| 51 | + url.searchParams.set('q', target.value); |
| 52 | + pushState(url, ''); |
| 53 | + }, 500); |
| 54 | + }); |
47 | 55 | }
|
48 |
| - }); |
| 56 | +
|
| 57 | + triggerSearch(); |
| 58 | + } |
49 | 59 |
|
50 | 60 | function triggerSearch() {
|
51 | 61 | const currentUrl = new URL(window.location.href);
|
|
54 | 64 | }
|
55 | 65 |
|
56 | 66 | afterNavigate(() => {
|
57 |
| - triggerSearch(); |
| 67 | + if (browser) { |
| 68 | + initializeSearch(); |
| 69 | + } |
58 | 70 | });
|
59 | 71 | </script>
|
60 | 72 |
|
|
71 | 83 | </article>
|
72 | 84 |
|
73 | 85 | <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 | +
|
74 | 103 | :global(.pagefind-ui__result-excerpt mark) {
|
75 | 104 | background-color: color-mix(in srgb, var(--yellow) 70%, white);
|
76 | 105 | border-radius: var(--size-1);
|
|
0 commit comments