@mvarble/mesearch-ui 0.0.0-stage → 0.1.0

package/dist/components/Index.svelte

@@ -0,0 +1,283 @@
+<script lang="ts">
+    import { bestMatch, highlight } from '../fuzzy.js';
+    import { formatDate, isoDate, kindLabel } from '../settings.js';
+    import type { IndexEntry, Kind } from '../types.js';
+
+    // Every concept and writeup, as a ledger: newest change first, with a
+    // fuzzy filter over titles and summaries. Without JavaScript it is the
+    // same list in the same order, minus the controls.
+    //
+    // `kinds` are the kinds a reader can narrow the list to; with fewer than
+    // two there is nothing to choose, and the control is left out.
+    let {
+        entries,
+        kinds = [
+            ['concept', 'Concepts'],
+            ['writeup', 'Writeups'],
+        ],
+        empty = 'Nothing has been written yet.',
+    }: { entries: IndexEntry[]; kinds?: Array<[Kind, string]>; empty?: string } = $props();
+
+    type Sort = 'updated' | 'created' | 'title';
+    type Filter = 'all' | Kind;
+    let query = $state('');
+    let sort = $state<Sort>('updated');
+    let filter = $state<Filter>('all');
+
+    const sorts: Array<[Sort, string]> = [
+        ['updated', 'Updated'],
+        ['created', 'Created'],
+        ['title', 'A–Z'],
+    ];
+    let filters = $derived<Array<[Filter, string]>>([['all', 'All'], ...kinds]);
+
+    let shown = $derived.by(() => {
+        const kept = entries.filter((entry) => filter == 'all' || entry.kind == filter);
+        if (query.trim()) {
+            const matched = kept
+                .map((entry) => ({
+                    entry,
+                    match: bestMatch(query, [
+                        [entry.title, 1.6],
+                        [entry.summary, 0.6],
+                    ]),
+                }))
+                .filter(({ match }) => match);
+            // Once something matches well, scattered letters elsewhere are noise.
+            const best = Math.max(0, ...matched.map(({ match }) => match!.score));
+            return matched
+                .filter(({ match }) => match!.score >= best * 0.35)
+                .sort((a, b) => b.match!.score - a.match!.score)
+                .map(({ entry, match }) => ({
+                    entry,
+                    indices: match!.field == 0 ? match!.indices : [],
+                }));
+        }
+        const order = {
+            updated: (a: IndexEntry, b: IndexEntry) => b.updated.valueOf() - a.updated.valueOf(),
+            created: (a: IndexEntry, b: IndexEntry) => b.created.valueOf() - a.created.valueOf(),
+            title: (a: IndexEntry, b: IndexEntry) => a.title.localeCompare(b.title),
+        }[sort];
+        return kept.toSorted(order).map((entry) => ({ entry, indices: [] as number[] }));
+    });
+
+    const dateOf = (entry: IndexEntry) => (sort == 'created' ? entry.created : entry.updated);
+</script>
+
+<div class="index">
+    <div class="controls needs-js">
+        <label class="search">
+            <span class="visually-hidden">Filter the index</span>
+            <input
+                bind:value={query}
+                type="search"
+                placeholder="Filter by title or summary…"
+                autocomplete="off"
+            />
+        </label>
+        <div class="toggles">
+            {#if kinds.length > 1}
+                <div class="segmented" role="radiogroup" aria-label="Show">
+                    {#each filters as [value, label] (value)}
+                        <button
+                            type="button"
+                            role="radio"
+                            aria-checked={filter == value}
+                            onclick={() => (filter = value)}
+                        >
+                            {label}
+                        </button>
+                    {/each}
+                </div>
+            {/if}
+            <div class="segmented" role="radiogroup" aria-label="Sort by">
+                {#each sorts as [value, label] (value)}
+                    <button
+                        type="button"
+                        role="radio"
+                        aria-checked={sort == value}
+                        disabled={!!query.trim()}
+                        onclick={() => (sort = value)}
+                    >
+                        {label}
+                    </button>
+                {/each}
+            </div>
+        </div>
+    </div>
+
+    <ol class="entries">
+        {#each shown as { entry, indices } (entry.key)}
+            <li class="kind-{entry.kind}">
+                <time class="date" datetime={isoDate(dateOf(entry))}
+                    >{formatDate(dateOf(entry))}</time
+                >
+                <div class="text">
+                    <p class="eyebrow kind">
+                        {kindLabel(entry.kind)}{#if entry.readingMinutes}<span class="minutes">
+                                · {entry.readingMinutes} min</span
+                            >{/if}
+                    </p>
+                    <a class="title" href={entry.url}>
+                        {#if indices.length}
+                            {#each highlight(entry.title, indices) as part, i (i)}
+                                {#if part.hit}<mark>{part.text}</mark>{:else}{part.text}{/if}
+                            {/each}
+                        {:else}
+                            {@html entry.titleHtml}
+                        {/if}
+                    </a>
+                    {#if entry.summaryHtml}<p class="summary">{@html entry.summaryHtml}</p>{/if}
+                </div>
+            </li>
+        {:else}
+            <li class="none">
+                {entries.length ? `Nothing matches “${query}”.` : empty}
+            </li>
+        {/each}
+    </ol>
+</div>
+
+<style>
+    .controls {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0.75rem 1rem;
+        margin-bottom: 1.25rem;
+        font-family: var(--font-ui);
+    }
+
+    .search {
+        flex: 1 1 16rem;
+    }
+
+    input {
+        width: 100%;
+        padding: 0.6rem 0.9rem;
+        border: 1px solid var(--rule-strong);
+        border-radius: 10px;
+        background: var(--paper-raised);
+        color: var(--ink);
+        font: 400 0.95rem / 1.3 var(--font-ui);
+    }
+
+    input:focus {
+        outline: none;
+        border-color: var(--accent);
+        box-shadow: 0 0 0 3px var(--accent-soft);
+    }
+
+    .toggles {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.6rem;
+    }
+
+    .segmented {
+        display: inline-flex;
+        padding: 3px;
+        border: 1px solid var(--rule);
+        border-radius: 10px;
+        background: var(--paper-sunken);
+    }
+
+    .segmented button {
+        border: none;
+        border-radius: 7px;
+        padding: 0.32rem 0.7rem;
+        background: transparent;
+        color: var(--muted);
+        font: 500 0.8rem / 1.2 var(--font-ui);
+        cursor: pointer;
+    }
+
+    .segmented button[aria-checked='true'] {
+        background: var(--paper-raised);
+        color: var(--ink);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    }
+
+    .segmented button:disabled {
+        opacity: 0.5;
+        cursor: default;
+    }
+
+    .entries {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        border-top: 1px solid var(--rule);
+    }
+
+    .entries li {
+        display: grid;
+        grid-template-columns: 7.5rem 1fr;
+        gap: 1.25rem;
+        padding: 1.1rem 0;
+        border-bottom: 1px solid var(--rule);
+    }
+
+    .date {
+        font: 500 0.8rem / 2.1 var(--font-ui);
+        color: var(--muted);
+        font-variant-numeric: tabular-nums;
+    }
+
+    .kind {
+        margin: 0 0 0.2rem;
+        color: var(--kind);
+    }
+
+    .minutes {
+        color: var(--faint);
+        letter-spacing: 0.04em;
+    }
+
+    .title {
+        font: 600 1.18rem / 1.3 var(--font-serif);
+        color: var(--ink);
+        text-decoration: none;
+    }
+
+    .title:hover {
+        color: var(--kind);
+    }
+
+    mark {
+        background: var(--kind-soft);
+        color: inherit;
+        border-radius: 2px;
+    }
+
+    .summary {
+        margin: 0.35rem 0 0;
+        color: var(--ink-soft);
+        font-size: 0.98rem;
+        line-height: 1.6;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .none {
+        display: block !important;
+        color: var(--muted);
+        font-family: var(--font-ui);
+        text-align: center;
+    }
+
+    @media (max-width: 560px) {
+        .entries li {
+            grid-template-columns: 1fr;
+            gap: 0.2rem;
+        }
+
+        .date {
+            line-height: 1.4;
+            order: 2;
+        }
+    }
+</style>

package/dist/components/Index.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { IndexEntry, Kind } from '../types.js';
+type $$ComponentProps = {
+    entries: IndexEntry[];
+    kinds?: Array<[Kind, string]>;
+    empty?: string;
+};
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/Pager.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import Icon from './Icon.svelte';
+
+    // The previous and next stops of a sequence, as two cards.
+    type Stop = { url: string; titleHtml: string };
+    let {
+        previous,
+        next,
+        label = 'Sequence',
+    }: { previous?: Stop; next?: Stop; label?: string } = $props();
+</script>
+
+{#if previous || next}
+    <nav class="pager kind-sequence" aria-label={label}>
+        {#if previous}
+            <a class="previous" href={previous.url}>
+                <span class="eyebrow"><Icon name="arrow-left" size={14} /> Previous</span>
+                <span class="title">{@html previous.titleHtml}</span>
+            </a>
+        {/if}
+        {#if next}
+            <a class="next" href={next.url}>
+                <span class="eyebrow">Next <Icon name="arrow-right" size={14} /></span>
+                <span class="title">{@html next.titleHtml}</span>
+            </a>
+        {/if}
+    </nav>
+{/if}
+
+<style>
+    .pager {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+        font-family: var(--font-ui);
+    }
+
+    a {
+        display: flex;
+        flex-direction: column;
+        gap: 0.35rem;
+        padding: 1rem 1.1rem;
+        border: 1px solid var(--rule);
+        border-radius: var(--radius);
+        background: var(--paper-raised);
+        color: inherit;
+        text-decoration: none;
+        transition: border-color 120ms;
+    }
+
+    a:hover {
+        border-color: var(--kind);
+    }
+
+    .eyebrow {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.3rem;
+        color: var(--kind);
+    }
+
+    .next {
+        grid-column: 2;
+        text-align: right;
+        align-items: flex-end;
+    }
+
+    .title {
+        font: 600 1rem / 1.3 var(--font-serif);
+    }
+</style>

package/dist/components/Pager.svelte.d.ts

@@ -0,0 +1,12 @@
+type Stop = {
+    url: string;
+    titleHtml: string;
+};
+type $$ComponentProps = {
+    previous?: Stop;
+    next?: Stop;
+    label?: string;
+};
+declare const Pager: import("svelte").Component<$$ComponentProps, {}, "">;
+type Pager = ReturnType<typeof Pager>;
+export default Pager;

package/dist/components/Palette.svelte

@@ -0,0 +1,333 @@
+<script lang="ts">
+    import { bestMatch, highlight } from '../fuzzy.js';
+    import { kindLabel } from '../settings.js';
+    import type { SearchEntry } from '../types.js';
+
+    // Search across the whole library from anywhere: `/` or Ctrl/⌘-K opens
+    // it, arrows move, Enter goes, Escape closes. Documents match on their
+    // titles and summaries; a heading inside one is its own result, so a
+    // search can land on a section.
+    //
+    // `index` is where the entries come from: the URL of a JSON array of
+    // them, fetched the first time the palette opens, or a function that
+    // returns them. `navigate` follows a result --- SvelteKit's `goto`, say;
+    // without it the browser navigates the ordinary way.
+    let {
+        index,
+        navigate = (url: string) => location.assign(url),
+        open = $bindable(false),
+    }: {
+        index: string | (() => Promise<SearchEntry[]>);
+        navigate?: (url: string) => unknown;
+        open?: boolean;
+    } = $props();
+
+    let entries = $state<SearchEntry[]>([]);
+    let loading: Promise<void> | undefined;
+    $effect(() => {
+        if (open && !loading) {
+            const load =
+                typeof index == 'string'
+                    ? () => fetch(index).then((response) => response.json())
+                    : index;
+            loading = load()
+                .then((loaded: SearchEntry[]) => void (entries = loaded))
+                .catch(() => (loading = undefined));
+        }
+    });
+
+    let dialog: HTMLDialogElement | undefined = $state();
+    let input: HTMLInputElement | undefined = $state();
+    let query = $state('');
+    let active = $state(0);
+
+    interface Result {
+        key: string;
+        kind: SearchEntry['kind'];
+        title: string;
+        context?: string;
+        contextHtml?: string;
+        url: string;
+        score: number;
+        indices: number[];
+    }
+
+    let results = $derived.by((): Result[] => {
+        if (!query.trim()) {
+            return entries.slice(0, 8).map((entry) => ({
+                key: entry.key,
+                kind: entry.kind,
+                title: entry.title,
+                contextHtml: entry.summaryHtml,
+                url: entry.url,
+                score: 0,
+                indices: [],
+            }));
+        }
+        const out: Result[] = [];
+        for (const entry of entries) {
+            const match = bestMatch(query, [
+                [entry.title, 1.6],
+                [entry.summary, 0.5],
+            ]);
+            if (match) {
+                out.push({
+                    key: entry.key,
+                    kind: entry.kind,
+                    title: entry.title,
+                    contextHtml: entry.summaryHtml,
+                    url: entry.url,
+                    score: match.score,
+                    indices: match.field == 0 ? match.indices : [],
+                });
+            }
+            for (const heading of entry.headings) {
+                const hit = bestMatch(query, [[heading.title, 1.1]]);
+                if (hit) {
+                    out.push({
+                        key: `${entry.key}#${heading.slug}`,
+                        kind: entry.kind,
+                        title: heading.title,
+                        context: entry.title,
+                        url: `${entry.url}#${heading.slug}`,
+                        score: hit.score,
+                        indices: hit.indices,
+                    });
+                }
+            }
+        }
+        // Once something matches well, scattered letters elsewhere are noise.
+        const best = Math.max(0, ...out.map((result) => result.score));
+        return out
+            .filter((result) => result.score >= best * 0.35)
+            .sort((a, b) => b.score - a.score)
+            .slice(0, 12);
+    });
+
+    $effect(() => {
+        void results;
+        active = 0;
+    });
+
+    $effect(() => {
+        if (!dialog) return;
+        if (open && !dialog.open) {
+            dialog.showModal();
+            input?.select();
+        } else if (!open && dialog.open) {
+            dialog.close();
+        }
+    });
+
+    function go(result: Result | undefined) {
+        if (!result) return;
+        open = false;
+        query = '';
+        void navigate(result.url);
+    }
+
+    function onkeydown(event: KeyboardEvent) {
+        if (event.key == 'ArrowDown') {
+            active = Math.min(active + 1, results.length - 1);
+            event.preventDefault();
+        } else if (event.key == 'ArrowUp') {
+            active = Math.max(active - 1, 0);
+            event.preventDefault();
+        } else if (event.key == 'Enter') {
+            go(results[active]);
+            event.preventDefault();
+        }
+    }
+
+    // Opening shortcuts, from anywhere but a text field.
+    function onwindowkeydown(event: KeyboardEvent) {
+        const target = event.target as HTMLElement | null;
+        const typing = target?.closest('input, textarea, [contenteditable="true"]');
+        if ((event.key == 'k' || event.key == 'K') && (event.metaKey || event.ctrlKey)) {
+            open = !open;
+            event.preventDefault();
+        } else if (event.key == '/' && !typing && !open) {
+            open = true;
+            event.preventDefault();
+        }
+    }
+</script>
+
+<svelte:window onkeydown={onwindowkeydown} />
+
+<dialog
+    bind:this={dialog}
+    class="palette"
+    aria-label="Search the library"
+    onclose={() => (open = false)}
+    onclick={(event) => {
+        if (event.target == dialog) open = false;
+    }}
+>
+    <div class="box">
+        <label class="field">
+            <span class="visually-hidden">Search</span>
+            <input
+                bind:this={input}
+                bind:value={query}
+                {onkeydown}
+                type="search"
+                placeholder="Search titles, summaries and sections…"
+                autocomplete="off"
+                spellcheck="false"
+                role="combobox"
+                aria-expanded="true"
+                aria-controls="palette-results"
+                aria-activedescendant={results[active] ? `palette-${active}` : undefined}
+            />
+            <kbd>esc</kbd>
+        </label>
+        <ul id="palette-results" class="results" role="listbox">
+            {#each results as result, i (result.key)}
+                <li
+                    id={`palette-${i}`}
+                    role="option"
+                    aria-selected={i == active}
+                    class:active={i == active}
+                    class="kind-{result.kind}"
+                >
+                    <a
+                        href={result.url}
+                        onclick={(event) => {
+                            event.preventDefault();
+                            go(result);
+                        }}
+                        onmousemove={() => (active = i)}
+                    >
+                        <span class="kind">{kindLabel(result.kind)}</span>
+                        <span class="title">
+                            {#each highlight(result.title, result.indices) as part, j (j)}
+                                {#if part.hit}<mark>{part.text}</mark>{:else}{part.text}{/if}
+                            {/each}
+                        </span>
+                        {#if result.contextHtml}
+                            <span class="context">{@html result.contextHtml}</span>
+                        {:else if result.context}
+                            <span class="context">{result.context}</span>
+                        {/if}
+                    </a>
+                </li>
+            {:else}
+                <li class="empty">{entries.length ? `Nothing matches “${query}”.` : 'Loading…'}</li>
+            {/each}
+        </ul>
+    </div>
+</dialog>
+
+<style>
+    .palette {
+        width: min(40rem, calc(100vw - 2rem));
+        max-height: min(34rem, calc(100vh - 6rem));
+        margin: 12vh auto auto;
+        padding: 0;
+        border: 1px solid var(--rule-strong);
+        border-radius: var(--radius-large);
+        background: var(--paper-raised);
+        color: var(--ink);
+        box-shadow: var(--shadow-strong);
+        font-family: var(--font-ui);
+        overflow: hidden;
+    }
+
+    .palette::backdrop {
+        background: rgba(20, 16, 10, 0.32);
+        backdrop-filter: blur(2px);
+    }
+
+    .box {
+        display: flex;
+        flex-direction: column;
+        max-height: inherit;
+    }
+
+    .field {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.9rem 1.1rem;
+        border-bottom: 1px solid var(--rule);
+    }
+
+    input {
+        flex: 1;
+        border: none;
+        outline: none;
+        background: transparent;
+        color: var(--ink);
+        font: 400 1.05rem / 1.4 var(--font-ui);
+    }
+
+    input::-webkit-search-cancel-button {
+        display: none;
+    }
+
+    kbd {
+        font: 500 0.7rem / 1 var(--font-ui);
+        color: var(--muted);
+        border: 1px solid var(--rule-strong);
+        border-radius: 4px;
+        padding: 0.2rem 0.35rem;
+    }
+
+    .results {
+        list-style: none;
+        margin: 0;
+        padding: 0.4rem;
+        overflow-y: auto;
+    }
+
+    .results a {
+        display: grid;
+        grid-template-columns: 5.5rem 1fr;
+        grid-template-rows: auto auto;
+        column-gap: 0.75rem;
+        padding: 0.55rem 0.7rem;
+        border-radius: 8px;
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .active a {
+        background: var(--kind-soft);
+    }
+
+    .kind {
+        grid-row: span 2;
+        font: 600 0.66rem / 1.9 var(--font-ui);
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: var(--kind);
+    }
+
+    .title {
+        font-weight: 550;
+        font-size: 0.95rem;
+    }
+
+    mark {
+        background: none;
+        color: var(--kind);
+        text-decoration: underline;
+        text-underline-offset: 0.15em;
+    }
+
+    .context {
+        font-size: 0.8rem;
+        color: var(--muted);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .empty {
+        padding: 1.5rem;
+        text-align: center;
+        color: var(--muted);
+        font-size: 0.9rem;
+    }
+</style>