84 lines
1.9 KiB
Svelte
84 lines
1.9 KiB
Svelte
<script lang="ts" context="module">
|
|
import type { Load } from '@sveltejs/kit'
|
|
|
|
export const load: Load = async ({ fetch }) => {
|
|
return {
|
|
props: {
|
|
prebuilt: await fetch('/api/search.json').then((r) => r.json()),
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import lunr from 'lunr'
|
|
import { onMount } from 'svelte'
|
|
|
|
import type { SearchResultItem } from '$lib/components/SearchResult.svelte'
|
|
import SearchResult from '$lib/components/SearchResult.svelte'
|
|
import SimplePage from '$lib/components/SimplePage.svelte'
|
|
|
|
export let prebuilt: any
|
|
let needle: string | null = null
|
|
let results: SearchResultItem[] = []
|
|
let input: HTMLInputElement
|
|
|
|
const idx = lunr.Index.load(prebuilt)
|
|
|
|
async function search(needle: string) {
|
|
if (!needle || !idx) {
|
|
results = []
|
|
} else {
|
|
let found = idx.search(needle + '~1')
|
|
if (!found.length) found = idx.search(needle + '*')
|
|
results = found.slice(0, 20)
|
|
}
|
|
}
|
|
|
|
$: if (needle !== null) {
|
|
if (typeof window !== 'undefined') {
|
|
window.history.replaceState(null, '', `/search?q=${needle ?? ''}`)
|
|
}
|
|
search(needle)
|
|
}
|
|
|
|
onMount(() => {
|
|
needle = new URLSearchParams(window.location.search).get('q')
|
|
input.focus()
|
|
})
|
|
</script>
|
|
|
|
<SimplePage title="Search" expanded={false}>
|
|
<input bind:this={input} bind:value={needle} placeholder="needle" />
|
|
{#if needle}
|
|
<ul>
|
|
{#each results as result (result.ref)}
|
|
<SearchResult {result} />
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
</SimplePage>
|
|
|
|
<style>
|
|
input {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
padding: 0.75rem;
|
|
font-size: inherit;
|
|
width: 100%;
|
|
outline: none;
|
|
border: 0.15rem solid var(--clr-primary);
|
|
border-bottom-width: 0.5rem;
|
|
border-radius: 0;
|
|
background: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
ul {
|
|
margin-top: 2em;
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
</style>
|