@coywolf/emdash 0.0.0-stage → 0.35.13

package/src/astro/search/SearchBoxForm.astro

@@ -0,0 +1,509 @@
+---
+import type { Props as SearchBoxProps } from "./SearchBox.astro";
+
+/**
+ * The SearchBox form, styles and script. Rendered only by SearchBox.astro
+ * when the "search.box" feature is on, so nothing here ships while it's off:
+ * the style is inline and the script is rendered with the component.
+ */
+
+export type Props = Omit<SearchBoxProps, "database"> & {
+	/** Live results ("search.live"). Without them it's a plain search form. */
+	live?: boolean;
+};
+
+const {
+	action = "/search",
+	name = "q",
+	label = "Search",
+	showLabel = false,
+	placeholder = "Search",
+	collections,
+	locale = Astro.currentLocale ?? null,
+	minChars = 2,
+	debounce = 200,
+	limit = 8,
+	showType = true,
+	showSnippets = true,
+	submitButton = true,
+	value,
+	class: className,
+	id = "cw-search",
+	live = true,
+} = Astro.props;
+
+const inputId = `${id}-input`;
+---
+
+<form
+	class:list={["cw-search", className]}
+	role="search"
+	action={action}
+	method="get"
+	data-cw-search
+	data-live={live ? "1" : undefined}
+	data-endpoint="/_emdash/api/plugins/coywolf-pack/search/live"
+	data-min-chars={minChars}
+	data-debounce={debounce}
+	data-limit={limit}
+	data-collections={collections?.join(",")}
+	data-locale={locale ?? undefined}
+	data-show-type={showType ? "1" : undefined}
+	data-show-snippets={showSnippets ? "1" : undefined}
+>
+	<label for={inputId} class:list={["cw-search__label", { "cw-search__visually-hidden": !showLabel }]}>
+		{label}
+	</label>
+	<div class="cw-search__field">
+		<input
+			id={inputId}
+			class="cw-search__input"
+			type="search"
+			name={name}
+			value={value}
+			placeholder={placeholder}
+			autocomplete="off"
+			autocapitalize="off"
+			spellcheck="false"
+			enterkeyhint="search"
+		/>
+		<button type="button" class="cw-search__clear" aria-label="Clear search" hidden>
+			<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
+				<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" fill="none" />
+			</svg>
+		</button>
+		{submitButton && (
+			<button type="submit" class="cw-search__submit" aria-label="Search">
+				<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
+					<circle cx="7" cy="7" r="4.75" stroke="currentColor" stroke-width="1.75" fill="none" />
+					<path d="M10.5 10.5L14 14" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
+				</svg>
+			</button>
+		)}
+	</div>
+	<ul id={`${id}-list`} class="cw-search__list" role="listbox" aria-label="Suggestions" hidden />
+	<div class="cw-search__visually-hidden" role="status" aria-live="polite" aria-atomic="true" />
+</form>
+
+<style is:inline>
+	.cw-search {
+		--cw-search-bg: #fff;
+		--cw-search-fg: #1a1a1a;
+		--cw-search-muted: #5c5c5c;
+		--cw-search-border: #d4d4d4;
+		--cw-search-active-bg: #f1f1f1;
+		--cw-search-active-border: currentColor;
+		--cw-search-active-fg: inherit;
+		--cw-search-mark: rgb(255 214 0 / 0.35);
+		--cw-search-radius: 0.5rem;
+		--cw-search-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
+		position: relative;
+		max-width: 100%;
+	}
+	@media (prefers-color-scheme: dark) {
+		.cw-search {
+			--cw-search-bg: #1e1e1e;
+			--cw-search-fg: #f2f2f2;
+			--cw-search-muted: #b0b0b0;
+			--cw-search-border: #3d3d3d;
+			--cw-search-active-bg: rgb(255 255 255 / 0.08);
+			--cw-search-mark: rgb(255 214 0 / 0.25);
+			--cw-search-shadow: 0 8px 24px rgb(0 0 0 / 0.5);
+		}
+	}
+	.cw-search__visually-hidden {
+		position: absolute !important;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		padding: 0;
+		overflow: hidden;
+		clip: rect(0 0 0 0);
+		white-space: nowrap;
+		border: 0;
+	}
+	.cw-search__field {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		border: 1px solid var(--cw-search-border);
+		border-radius: var(--cw-search-radius);
+		background: var(--cw-search-bg);
+		color: var(--cw-search-fg);
+		padding-inline: 0.5rem 0.25rem;
+	}
+	.cw-search__field:focus-within {
+		outline: 2px solid var(--cw-search-active-border);
+		outline-offset: 1px;
+	}
+	.cw-search__input {
+		flex: 1;
+		min-width: 0;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		padding: 0.5rem 0.25rem;
+		outline: none;
+	}
+	.cw-search__input::-webkit-search-cancel-button {
+		appearance: none;
+	}
+	.cw-search__clear,
+	.cw-search__submit {
+		display: inline-grid;
+		place-items: center;
+		width: 2rem;
+		height: 2rem;
+		border: 0;
+		border-radius: calc(var(--cw-search-radius) - 2px);
+		background: transparent;
+		color: var(--cw-search-muted);
+		cursor: pointer;
+	}
+	.cw-search__clear[hidden] {
+		display: none;
+	}
+	.cw-search__clear:hover,
+	.cw-search__submit:hover {
+		color: var(--cw-search-fg);
+		background: var(--cw-search-active-bg);
+	}
+	.cw-search__list {
+		position: absolute;
+		z-index: 50;
+		inset-inline: 0;
+		top: calc(100% + 0.25rem);
+		min-width: min(20rem, 100vw - 2rem);
+		max-height: min(26rem, 70vh);
+		overflow-y: auto;
+		margin: 0;
+		padding: 0.25rem;
+		list-style: none;
+		background: var(--cw-search-bg);
+		color: var(--cw-search-fg);
+		border: 1px solid var(--cw-search-border);
+		border-radius: var(--cw-search-radius);
+		box-shadow: var(--cw-search-shadow);
+		opacity: 0;
+	}
+	.cw-search__list[hidden] {
+		display: none;
+	}
+	.cw-search__list.is-open {
+		opacity: 1;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.cw-search__list {
+			transition: opacity 120ms ease-out;
+		}
+	}
+	.cw-search__option {
+		border-inline-start: 3px solid transparent;
+		border-radius: calc(var(--cw-search-radius) - 2px);
+	}
+	.cw-search__link {
+		display: block;
+		padding: 0.5rem 0.625rem;
+		color: inherit;
+		text-decoration: none;
+	}
+	.cw-search__option[aria-selected="true"],
+	.cw-search__option:hover {
+		background: var(--cw-search-active-bg);
+		border-inline-start-color: var(--cw-search-active-border);
+		color: var(--cw-search-active-fg);
+	}
+	.cw-search__title {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		gap: 0.75rem;
+		font-weight: 600;
+	}
+	.cw-search__title mark {
+		background: none;
+		color: inherit;
+		text-decoration: underline;
+		text-underline-offset: 0.15em;
+	}
+	.cw-search__type {
+		flex: none;
+		font-size: 0.75em;
+		font-weight: 400;
+		color: var(--cw-search-muted);
+	}
+	.cw-search__snippet {
+		margin-top: 0.125rem;
+		font-size: 0.875em;
+		color: var(--cw-search-muted);
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+	.cw-search__snippet mark {
+		background: var(--cw-search-mark);
+		color: inherit;
+		border-radius: 2px;
+	}
+	.cw-search__note,
+	.cw-search__empty {
+		padding: 0.5rem 0.625rem;
+		font-size: 0.875em;
+		color: var(--cw-search-muted);
+	}
+	@media (forced-colors: active) {
+		.cw-search__option[aria-selected="true"] {
+			outline: 2px solid Highlight;
+			forced-color-adjust: none;
+			background: Highlight;
+			color: HighlightText;
+		}
+	}
+</style>
+
+<script>
+	const MARK = /<(?!\/?mark>)/g;
+
+	interface Item {
+		title?: string;
+		snippet?: string;
+		url: string;
+		type: string;
+	}
+
+	function terms(query: string): string[] {
+		return [...new Set(query.toLowerCase().split(/[^\p{L}\p{N}]+/u).filter(Boolean))];
+	}
+
+	/** The title as text nodes, with the visitor's words (as word prefixes) wrapped in <mark>. */
+	function highlight(target: HTMLElement, text: string, words: string[]) {
+		if (!words.length) {
+			target.textContent = text;
+			return;
+		}
+		const escaped = words.map((w) => w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
+		const pattern = new RegExp(`(^|[^\\p{L}\\p{N}])(${escaped})`, "giu");
+		let last = 0;
+		for (const m of text.matchAll(pattern)) {
+			const start = (m.index ?? 0) + m[1].length;
+			target.append(text.slice(last, start));
+			const mark = document.createElement("mark");
+			mark.textContent = m[2];
+			target.append(mark);
+			last = start + m[2].length;
+		}
+		target.append(text.slice(last));
+	}
+
+	function enhance(form: HTMLFormElement) {
+		const found = {
+			input: form.querySelector<HTMLInputElement>(".cw-search__input"),
+			list: form.querySelector<HTMLUListElement>(".cw-search__list"),
+			status: form.querySelector<HTMLElement>("[role=status]"),
+			clear: form.querySelector<HTMLButtonElement>(".cw-search__clear"),
+		};
+		if (!found.input || !found.list || !found.status || !found.clear) return;
+		const input: HTMLInputElement = found.input;
+		const list: HTMLUListElement = found.list;
+		const status: HTMLElement = found.status;
+		const clear: HTMLButtonElement = found.clear;
+
+		const d = form.dataset;
+		const minChars = Number(d.minChars) || 2;
+		const wait = Number(d.debounce) || 200;
+		const cache = new Map<string, { items: Item[]; fallback: boolean }>();
+		let timer: ReturnType<typeof setTimeout> | undefined;
+		let controller: AbortController | undefined;
+		let options: HTMLElement[] = [];
+		let active = -1;
+
+		// Without live results ("search.live" off) only the clear button is wired up.
+		const live = d.live === "1";
+		if (live) {
+			input.setAttribute("role", "combobox");
+			input.setAttribute("aria-autocomplete", "list");
+			input.setAttribute("aria-controls", list.id);
+			input.setAttribute("aria-expanded", "false");
+		}
+
+		const isOpen = () => !list.hidden;
+
+		function close() {
+			list.hidden = true;
+			list.classList.remove("is-open");
+			if (live) input.setAttribute("aria-expanded", "false");
+			input.removeAttribute("aria-activedescendant");
+			active = -1;
+		}
+
+		function open() {
+			list.hidden = false;
+			input.setAttribute("aria-expanded", "true");
+			requestAnimationFrame(() => list.classList.add("is-open"));
+		}
+
+		function setActive(index: number) {
+			options.forEach((o, i) => o.setAttribute("aria-selected", i === index ? "true" : "false"));
+			active = index;
+			const option = options[index];
+			if (option) {
+				input.setAttribute("aria-activedescendant", option.id);
+				option.scrollIntoView({ block: "nearest" });
+			} else {
+				input.removeAttribute("aria-activedescendant");
+			}
+		}
+
+		function render(query: string, items: Item[], fallback: boolean) {
+			list.replaceChildren();
+			options = [];
+			active = -1;
+			const words = terms(query);
+			if (fallback && items.length) {
+				const note = document.createElement("li");
+				note.className = "cw-search__note";
+				note.setAttribute("aria-hidden", "true");
+				note.textContent = "No results for all of your words. Showing results for some of them.";
+				list.append(note);
+			}
+			items.forEach((item, i) => {
+				// The option is a real link (so middle-click and "open in new tab" work), in a
+				// presentational list item: a listbox may only contain options.
+				const row = document.createElement("li");
+				row.setAttribute("role", "none");
+				const link = document.createElement("a");
+				link.id = `${list.id}-${i}`;
+				link.className = "cw-search__option cw-search__link";
+				link.setAttribute("role", "option");
+				link.setAttribute("aria-selected", "false");
+				link.dataset.url = item.url;
+				link.href = item.url;
+				link.tabIndex = -1;
+				const title = document.createElement("span");
+				title.className = "cw-search__title";
+				const text = document.createElement("span");
+				highlight(text, item.title || item.url, words);
+				title.append(text);
+				if (d.showType && item.type) {
+					const type = document.createElement("span");
+					type.className = "cw-search__type";
+					type.textContent = item.type;
+					title.append(type);
+				}
+				link.append(title);
+				if (d.showSnippets && item.snippet) {
+					const snippet = document.createElement("span");
+					snippet.className = "cw-search__snippet";
+					// EmDash escapes snippets and adds only <mark>; escape anything else again to be safe.
+					snippet.innerHTML = item.snippet.replace(MARK, "&lt;");
+					link.append(snippet);
+				}
+				row.append(link);
+				// Keep focus in the field while clicking; the link still navigates.
+				link.addEventListener("mousedown", (e) => e.preventDefault());
+				list.append(row);
+				options.push(link);
+			});
+			if (!items.length) {
+				const empty = document.createElement("li");
+				empty.className = "cw-search__empty";
+				empty.setAttribute("aria-hidden", "true");
+				empty.textContent = "No matching results.";
+				list.append(empty);
+			}
+			status.textContent = items.length
+				? `${items.length} ${items.length === 1 ? "suggestion" : "suggestions"}${fallback ? " matching some of your words" : ""}. Use the up and down arrows to review.`
+				: `No results for ${query}.`;
+			open();
+		}
+
+		async function suggest(query: string) {
+			const cached = cache.get(query);
+			if (cached) return render(query, cached.items, cached.fallback);
+			controller?.abort();
+			controller = new AbortController();
+			const params = new URLSearchParams({ q: query, limit: d.limit || "8" });
+			if (d.collections) params.set("collections", d.collections);
+			if (d.locale) params.set("locale", d.locale);
+			try {
+				const response = await fetch(`${d.endpoint}?${params}`, { signal: controller.signal, headers: { Accept: "application/json" } });
+				if (!response.ok) return close();
+				const body = await response.json();
+				const data = (body.data ?? body) as { items: Item[]; fallback: boolean };
+				cache.set(query, data);
+				if (input.value.trim() === query) render(query, data.items, data.fallback);
+			} catch (error) {
+				if ((error as Error).name !== "AbortError") close();
+			}
+		}
+
+		input.addEventListener("input", () => {
+			const query = input.value.trim();
+			clear.hidden = input.value === "";
+			clearTimeout(timer);
+			if (!live) return;
+			if (query.length < minChars) {
+				controller?.abort();
+				status.textContent = "";
+				return close();
+			}
+			timer = setTimeout(() => void suggest(query), wait);
+		});
+
+		// Keys work whenever the list is open (the listener is on the form, not just the field).
+		form.addEventListener("keydown", (e) => {
+			// Keys pressed while an input method (Chinese, Japanese, Korean) is composing belong to
+			// it: Enter confirms a candidate, Escape cancels it. keyCode 229 covers Safari before 27,
+			// which ends the composition before the confirming keydown.
+			if (e.isComposing || e.keyCode === 229) return;
+			if (e.key === "Escape") {
+				if (isOpen()) {
+					close();
+				} else if (input.value) {
+					input.value = "";
+					clear.hidden = true;
+					status.textContent = "";
+				} else {
+					return;
+				}
+				e.preventDefault();
+				input.focus();
+				return;
+			}
+			if (!isOpen() || !options.length) return;
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+				e.preventDefault();
+				const step = e.key === "ArrowDown" ? 1 : -1;
+				setActive(active < 0 ? (step > 0 ? 0 : options.length - 1) : (active + step + options.length) % options.length);
+			} else if (e.key === "Enter" && active >= 0) {
+				e.preventDefault();
+				const url = options[active]?.dataset.url;
+				if (url) window.location.assign(url);
+			} else if (e.key === "Tab") {
+				close();
+			}
+		});
+
+		form.addEventListener("focusout", (e) => {
+			if (!form.contains(e.relatedTarget as Node | null)) close();
+		});
+
+		input.addEventListener("focus", () => {
+			if (options.length && input.value.trim().length >= minChars) open();
+		});
+
+		clear.hidden = input.value === "";
+		clear.addEventListener("click", () => {
+			input.value = "";
+			clear.hidden = true;
+			status.textContent = "";
+			controller?.abort();
+			close();
+			input.focus();
+		});
+	}
+
+	for (const form of document.querySelectorAll<HTMLFormElement>("form[data-cw-search]")) enhance(form);
+</script>

package/src/astro/tables/CaptionedTable.astro

@@ -0,0 +1,72 @@
+---
+/**
+ * EmDash's table, made keyboard-scrollable, plus its caption.
+ *
+ * Scrolling: wide tables scroll sideways. EmDash's wrapper is the scroller but
+ * can't take focus, and Safari (unlike Chrome and Firefox) never makes a
+ * scroller focusable on its own, so keyboard users there can't scroll the
+ * table. The table goes in a focusable, named region that is the scroller
+ * instead (EmDash's wrapper inside stops scrolling).
+ *
+ * Caption: tables imported from WordPress keep their <figcaption> as a
+ * `caption` field on the table block (WordPress import module; EmDash's
+ * editor keeps the field when it saves). With a caption the table is wrapped
+ * in <figure class="cw-table"> with a <figcaption>, which also names the
+ * region; without one the region is named by `label`.
+ *
+ * Included in `portableTextComponents`; or pass it yourself:
+ *
+ *   import { CaptionedTable } from "@coywolf/emdash/astro";
+ *   <PortableText value={value} components={{ type: { table: CaptionedTable } }} />
+ */
+import { emdashComponents } from "emdash/ui";
+
+interface Props {
+	node: { _key?: unknown; caption?: unknown };
+	/** The region's accessible name when the table has no caption. */
+	label?: string;
+}
+
+const { node, label = "Table" } = Astro.props;
+const Table = emdashComponents.type.table;
+const caption = typeof node?.caption === "string" ? node.caption.trim() : "";
+const key = typeof node?._key === "string" && /^[\w-]+$/.test(node._key) ? node._key : Math.random().toString(36).slice(2, 10);
+const captionId = `cw-table-caption-${key}`;
+---
+
+{caption ? (
+	<figure class="cw-table">
+		<div class="cw-table-scroll" tabindex="0" role="region" aria-labelledby={captionId}>
+			<Table node={node} />
+		</div>
+		<figcaption id={captionId}>{caption}</figcaption>
+	</figure>
+) : (
+	<div class="cw-table-scroll" tabindex="0" role="region" aria-label={label}>
+		<Table node={node} />
+	</div>
+)}
+
+<style is:global>
+	.cw-table-scroll {
+		max-inline-size: 100%;
+		margin-block: 1.5rem;
+		overflow-x: auto;
+		overscroll-behavior-inline: contain;
+	}
+	/* In a captioned figure, the figure owns the spacing. */
+	.cw-table > .cw-table-scroll {
+		margin-block: 0;
+	}
+	/* EmDash's wrapper (and any theme rule that makes it scroll) stops scrolling, and its margin
+	   moves to the region so the focus outline hugs the table. The doubled class outranks EmDash's
+	   scoped rule (class + data-astro-cid attribute). */
+	.cw-table-scroll > .emdash-table-wrapper.emdash-table-wrapper {
+		overflow: visible;
+		margin-block: 0;
+	}
+	.cw-table-scroll:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+</style>