@half-built/astro 0.4.2 → 0.6.0

package/src/scripts/site-header.ts

@@ -48,30 +48,46 @@ interface Popout {
   closeOnFocusLeave?: boolean;
 }
 
-function wirePopout(doc: Document, { btn, panel, openClass, onOpen, closeOnFocusLeave = false }: Popout): () => void {
+function wirePopout(
+  doc: Document,
+  { btn, panel, openClass, onOpen, closeOnFocusLeave = false }: Popout,
+): () => void {
   const isOpen = (): boolean => panel.classList.contains(openClass);
-  const inside = (t: EventTarget | null): boolean => t instanceof Node && (panel.contains(t) || btn.contains(t));
+
+  const inside = (t: EventTarget | null): boolean =>
+    t instanceof Node && (panel.contains(t) || btn.contains(t));
+
   const setOpen = (open: boolean): void => {
     panel.classList.toggle(openClass, open);
     btn.setAttribute("aria-expanded", String(open));
     if (open) onOpen?.();
   };
-  const onClick = (): void => { setOpen(!isOpen()); };
+
+  const onClick = (): void => {
+    setOpen(!isOpen());
+  };
+
   const onPointerdown = (ev: PointerEvent): void => {
     if (isOpen() && !inside(ev.target)) setOpen(false);
   };
+
   const onKeydown = (ev: KeyboardEvent): void => {
     if (ev.key !== "Escape" || !isOpen()) return;
     setOpen(false);
     btn.focus();
   };
+
   const onFocusout = (ev: FocusEvent): void => {
-    if (isOpen() && ev.relatedTarget !== null && !inside(ev.relatedTarget)) setOpen(false);
+    if (isOpen() && ev.relatedTarget !== null && !inside(ev.relatedTarget)) {
+      setOpen(false);
+    }
   };
+
   btn.addEventListener("click", onClick);
   doc.addEventListener("pointerdown", onPointerdown);
   doc.addEventListener("keydown", onKeydown);
   if (closeOnFocusLeave) panel.addEventListener("focusout", onFocusout);
+
   return () => {
     btn.removeEventListener("click", onClick);
     doc.removeEventListener("pointerdown", onPointerdown);
@@ -80,7 +96,10 @@ function wirePopout(doc: Document, { btn, panel, openClass, onOpen, closeOnFocus
   };
 }
 
-export const mountSiteHeader: Island<SiteHeaderOptions> = (root, options = {}): IslandHandle => {
+export const mountSiteHeader: Island<SiteHeaderOptions> = (
+  root,
+  options = {},
+): IslandHandle => {
   const {
     dateId = "header-date",
     menuButton = ".menu-toggle",
@@ -90,6 +109,7 @@ export const mountSiteHeader: Island<SiteHeaderOptions> = (root, options = {}):
     searchField = ".search-field",
     formatDate = formatHeaderDate,
   } = options;
+
   const doc = docOf(root);
 
   // Header date: live like the WordPress original (build-time text is the
@@ -101,16 +121,23 @@ export const mountSiteHeader: Island<SiteHeaderOptions> = (root, options = {}):
 
   const btn = root.querySelector<HTMLButtonElement>(menuButton);
   const menu = doc.getElementById(menuId);
+
   if (btn && menu && claim(btn, "site-header")) {
     const off = wirePopout(doc, { btn, panel: menu, openClass: "open" });
-    unwire.push(() => { off(); release(btn, "site-header"); });
+
+    unwire.push(() => {
+      off();
+      release(btn, "site-header");
+    });
   }
 
   const searchBtn = root.querySelector<HTMLButtonElement>(searchButton);
   const wrap = searchBtn?.closest<HTMLElement>(searchWrap) ?? null;
+
   if (searchBtn && wrap && claim(searchBtn, "site-header")) {
     const field = wrap.querySelector<HTMLInputElement>(searchField);
     wrap.setAttribute("data-search-js", "");
+
     const off = wirePopout(doc, {
       btn: searchBtn,
       panel: wrap,
@@ -118,6 +145,7 @@ export const mountSiteHeader: Island<SiteHeaderOptions> = (root, options = {}):
       onOpen: () => field?.focus(),
       closeOnFocusLeave: true,
     });
+
     unwire.push(() => {
       off();
       wrap.removeAttribute("data-search-js");

package/src/scripts/subscribe.ts

@@ -35,13 +35,17 @@ export const MSG = {
      A function member so an overridden register controls the whole
      sentence, joiner included (step 9.5; the generalization review found
      the joiner was the one baked phrase left in this script). */
-  failedAt: (failed: string, url: string): string => `${failed.replace(/\.$/, "")}, or sign up at ${url}.`,
+  failedAt: (failed: string, url: string): string =>
+    `${failed.replace(/\.$/, "")}, or sign up at ${url}.`,
 };
 
 /* The provider's public sign-up page rides the form's data-public-url
    (config NEWSLETTER via the component's publicUrl prop), so this script names no provider; without the
    attribute the message stays generic. */
-export function failedMessage(form: HTMLFormElement, messages: typeof MSG): string {
+export function failedMessage(
+  form: HTMLFormElement,
+  messages: typeof MSG,
+): string {
   const url = form.dataset.publicUrl;
   return url ? messages.failedAt(messages.failed, url) : messages.failed;
 }
@@ -51,11 +55,23 @@ function setStatus(status: HTMLElement, text: string, isError: boolean): void {
   status.classList.toggle("subscribe-status-err", isError);
 }
 
-async function send(form: HTMLFormElement, input: HTMLInputElement, button: HTMLButtonElement | null, status: HTMLElement, messages: typeof MSG): Promise<void> {
+async function send(
+  form: HTMLFormElement,
+  input: HTMLInputElement,
+  button: HTMLButtonElement | null,
+  status: HTMLElement,
+  messages: typeof MSG,
+): Promise<void> {
   if (button) button.disabled = true;
   setStatus(status, messages.pending, false);
+
   try {
-    const res = await fetch(form.action, { method: "POST", body: new FormData(form), redirect: "manual" });
+    const res = await fetch(form.action, {
+      method: "POST",
+      body: new FormData(form),
+      redirect: "manual",
+    });
+
     if (res.ok || res.type === "opaqueredirect") {
       setStatus(status, messages.sent, false);
       input.value = "";
@@ -80,27 +96,52 @@ export interface SubscribeOptions {
   messages?: Partial<typeof MSG>;
 }
 
-export const mountSubscribe: Island<SubscribeOptions> = (root, options = {}): IslandHandle => {
-  const { selector = ".subscribe-form", messages: messagesOverride = {} } = options;
+export const mountSubscribe: Island<SubscribeOptions> = (
+  root,
+  options = {},
+): IslandHandle => {
+  const { selector = ".subscribe-form", messages: messagesOverride = {} } =
+    options;
+
   const messages: typeof MSG = { ...MSG, ...messagesOverride };
-  const forms = [...root.querySelectorAll<HTMLFormElement>(selector)].filter((form) => claim(form, "subscribe"));
+
+  const forms = [...root.querySelectorAll<HTMLFormElement>(selector)].filter(
+    (form) => claim(form, "subscribe"),
+  );
 
   const handlers: [HTMLFormElement, (e: Event) => void][] = [];
+
   for (const form of forms) {
     const onSubmit = (e: Event): void => {
       e.preventDefault();
       const input = form.querySelector(".subscribe-email");
       const button = form.querySelector(".subscribe-submit");
       const status = form.parentElement?.querySelector(".subscribe-status");
-      if (!(input instanceof HTMLInputElement) || !(status instanceof HTMLElement)) return;
+
+      if (
+        !(input instanceof HTMLInputElement) ||
+        !(status instanceof HTMLElement)
+      ) {
+        return;
+      }
+
       const value = input.value.trim();
       input.value = value;
+
       if (!EMAIL.test(value)) {
         setStatus(status, messages.invalid, true);
         return;
       }
-      void send(form, input, button instanceof HTMLButtonElement ? button : null, status, messages);
+
+      void send(
+        form,
+        input,
+        button instanceof HTMLButtonElement ? button : null,
+        status,
+        messages,
+      );
     };
+
     form.addEventListener("submit", onSubmit);
     handlers.push([form, onSubmit]);
   }

package/src/scripts/theme-toggle.ts

@@ -22,8 +22,12 @@ const LABEL: Record<Theme, string> = {
    every access is guarded and a bad value reads as no choice. With no
    storageKey there is nowhere to read from, so this reads as no choice
    too rather than guessing at a key. */
-export function readStored(storage: Storage | null, storageKey?: string): Theme | null {
+export function readStored(
+  storage: Storage | null,
+  storageKey?: string,
+): Theme | null {
   if (!storageKey) return null;
+
   try {
     const v = storage?.getItem(storageKey);
     return v === "light" || v === "dark" ? v : null;
@@ -36,8 +40,13 @@ export function readStored(storage: Storage | null, storageKey?: string): Theme
    the page, it just does not persist the choice. That is a safe
    degradation for an adopter who forgot to pass one, not a broken
    toggle. */
-function writeStored(storage: Storage | null, storageKey: string | undefined, theme: Theme): void {
+function writeStored(
+  storage: Storage | null,
+  storageKey: string | undefined,
+  theme: Theme,
+): void {
   if (!storageKey) return;
+
   try {
     storage?.setItem(storageKey, theme);
   } catch {
@@ -56,7 +65,11 @@ export function apply(doc: Document, theme: Theme): void {
   else delete doc.documentElement.dataset.theme;
 }
 
-function reflect(btn: HTMLButtonElement, theme: Theme, labels: Record<Theme, string>): void {
+function reflect(
+  btn: HTMLButtonElement,
+  theme: Theme,
+  labels: Record<Theme, string>,
+): void {
   btn.setAttribute("aria-pressed", theme === "dark" ? "true" : "false");
   btn.setAttribute("aria-label", labels[theme]);
   btn.title = labels[theme];
@@ -79,23 +92,37 @@ export interface ThemeToggleOptions {
   labels?: Record<Theme, string>;
 }
 
-export const mountThemeToggle: Island<ThemeToggleOptions> = (root, options = {}): IslandHandle => {
+export const mountThemeToggle: Island<ThemeToggleOptions> = (
+  root,
+  options = {},
+): IslandHandle => {
   const doc = options.doc ?? docOf(root);
-  const { selector = ".theme-toggle", storage = safeStorage(doc), storageKey, labels = LABEL } = options;
+
+  const {
+    selector = ".theme-toggle",
+    storage = safeStorage(doc),
+    storageKey,
+    labels = LABEL,
+  } = options;
+
   const handlers: [HTMLButtonElement, () => void][] = [];
+
   for (const btn of root.querySelectorAll<HTMLButtonElement>(selector)) {
     if (mounted.has(btn)) continue;
     mounted.add(btn);
     reflect(btn, current(doc), labels);
+
     const onClick = () => {
       const next: Theme = current(doc) === "dark" ? "light" : "dark";
       apply(doc, next);
       writeStored(storage, storageKey, next);
       for (const b of mounted) reflect(b, next, labels);
     };
+
     btn.addEventListener("click", onClick);
     handlers.push([btn, onClick]);
   }
+
   return {
     destroy(): void {
       for (const [btn, onClick] of handlers) {

package/src/shiki/code-theme.mjs

@@ -7,10 +7,30 @@ export default {
     "editor.foreground": "#e8d9c3",
   },
   tokenColors: [
-    { scope: ["keyword", "storage", "keyword.control"], settings: { foreground: "#ffaa3c" } },
-    { scope: ["entity.name.function", "support.function", "entity.name.tag"], settings: { foreground: "#ffd18a" } },
-    { scope: ["string", "constant.numeric", "constant.language", "constant.character"], settings: { foreground: "#e07c14" } },
-    { scope: ["comment", "punctuation.definition.comment"], settings: { foreground: "#8a7a63", fontStyle: "italic" } },
-    { scope: ["variable", "support.variable"], settings: { foreground: "#e8d9c3" } },
+    {
+      scope: ["keyword", "storage", "keyword.control"],
+      settings: { foreground: "#ffaa3c" },
+    },
+    {
+      scope: ["entity.name.function", "support.function", "entity.name.tag"],
+      settings: { foreground: "#ffd18a" },
+    },
+    {
+      scope: [
+        "string",
+        "constant.numeric",
+        "constant.language",
+        "constant.character",
+      ],
+      settings: { foreground: "#e07c14" },
+    },
+    {
+      scope: ["comment", "punctuation.definition.comment"],
+      settings: { foreground: "#8a7a63", fontStyle: "italic" },
+    },
+    {
+      scope: ["variable", "support.variable"],
+      settings: { foreground: "#e8d9c3" },
+    },
   ],
 };

package/src/shiki/code-vars.mjs

@@ -19,7 +19,11 @@ const HEX_TO_VAR = {
 function swap(node) {
   const style = node.properties?.style;
   if (typeof style !== "string") return;
-  node.properties.style = style.replace(/#[0-9a-fA-F]{6}/g, (hex) => HEX_TO_VAR[hex.toLowerCase()] ?? hex);
+
+  node.properties.style = style.replace(
+    /#[0-9a-fA-F]{6}/g,
+    (hex) => HEX_TO_VAR[hex.toLowerCase()] ?? hex,
+  );
 }
 
 export default {