blume 0.0.0 → 0.1.1

package/src/components/layout/Pagination.astro

@@ -0,0 +1,56 @@
+---
+import type { UIStrings } from "../../core/i18n-ui.ts";
+import type { FlatPage } from "./nav-utils.ts";
+import Icon from "../Icon.astro";
+
+interface Props {
+  /** Previous page in reading order, or `null` at the start. */
+  prev: FlatPage | null;
+  /** Next page in reading order, or `null` at the end. */
+  next: FlatPage | null;
+  /** Localized page-level strings (`previous`, `next`). */
+  strings: UIStrings["page"];
+}
+
+const { prev, next, strings } = Astro.props;
+---
+
+{
+  (prev || next) && (
+    <nav
+      aria-label="Pagination"
+      class="mx-auto mt-12 flex max-w-[42rem] justify-between gap-4 border-border border-t pt-6 max-md:flex-col"
+    >
+      {prev ? (
+        <a
+          class="flex max-w-[48%] flex-1 items-center gap-2 rounded-full border border-border px-4 py-3 text-foreground transition-colors hover:border-foreground max-md:max-w-full"
+          href={prev.route}
+        >
+          <Icon class="rtl:-scale-x-100" name="arrow-left" size={16} />
+          <span>
+            <span class="block text-muted-foreground text-xs">
+              {strings.previous}
+            </span>
+            <span class="block font-medium">{prev.label}</span>
+          </span>
+        </a>
+      ) : (
+        <span />
+      )}
+      {next && (
+        <a
+          class="ms-auto flex max-w-[48%] flex-1 items-center justify-end gap-2 rounded-full border border-border px-4 py-3 text-end text-foreground transition-colors hover:border-foreground max-md:max-w-full"
+          href={next.route}
+        >
+          <span>
+            <span class="block text-muted-foreground text-xs">
+              {strings.next}
+            </span>
+            <span class="block font-medium">{next.label}</span>
+          </span>
+          <Icon class="rtl:-scale-x-100" name="arrow-right" size={16} />
+        </a>
+      )}
+    </nav>
+  )
+}

package/src/components/layout/ReferenceLayout.astro

@@ -0,0 +1,107 @@
+---
+import "blume:theme";
+import type { Navigation } from "../../core/types.ts";
+import Analytics from "./Analytics.astro";
+import Banner from "./Banner.astro";
+import Favicon from "./Favicon.astro";
+import Fonts from "./Fonts.astro";
+import Header from "./Header.astro";
+
+// A minimal shell for the Scalar API/AsyncAPI reference: Blume's banner + navbar
+// on top, then a full-height region the reference mounts into. Unlike RootLayout
+// it has no docs sidebar/TOC/prose column, so the reference renders edge to edge.
+interface Props {
+  site: { title: string; description?: string };
+  logo?: {
+    svg?: string;
+    light?: string;
+    dark?: string;
+    alt: string;
+    href: string;
+  } | null;
+  favicon?: {
+    href: string;
+    type?: string;
+  } | null;
+  appleIcon?: {
+    href: string;
+    type?: string;
+  } | null;
+  banner?: {
+    content: string;
+    link?: { text: string; href: string };
+    dismissible: boolean;
+    key: string;
+  } | null;
+  analytics?: {
+    posthog?: { host?: string; key: string };
+    scripts?: {
+      attributes?: Record<string, string>;
+      content?: string;
+      src?: string;
+      strategy?: "async" | "defer";
+    }[];
+    vercel?: boolean;
+  } | null;
+  navigation: Navigation;
+  route: string;
+  themeMode: "system" | "light" | "dark";
+  fontCssVars?: string[];
+  searchEnabled: boolean;
+  pageTitle: string;
+}
+
+const {
+  site,
+  logo,
+  favicon,
+  appleIcon,
+  banner,
+  analytics,
+  navigation,
+  route,
+  themeMode,
+  fontCssVars,
+  searchEnabled,
+  pageTitle,
+} = Astro.props;
+
+// Set the theme before paint so the navbar never flashes the wrong colors
+// (mirrors RootLayout's pre-paint script).
+const initialThemeScript = `(()=>{const m=${JSON.stringify(themeMode)};const s=localStorage.getItem("blume-theme");const sys=matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";document.documentElement.dataset.theme=s??(m==="system"?sys:m);})();`;
+
+// Pre-paint: hide a previously-dismissed banner before it flashes in.
+const bannerScript = banner?.dismissible
+  ? `(()=>{if(localStorage.getItem("blume-banner:"+${JSON.stringify(banner.key)}))document.documentElement.setAttribute("data-blume-banner-hidden","");})();`
+  : null;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{pageTitle}</title>
+    <Favicon favicon={favicon} appleIcon={appleIcon} />
+    <Fonts cssVars={fontCssVars ?? []} />
+    {bannerScript && <script is:inline set:html={bannerScript} />}
+    <script is:inline set:html={initialThemeScript} />
+    <Analytics analytics={analytics} />
+  </head>
+  <body class="bg-background font-sans text-foreground antialiased">
+    <Banner banner={banner} />
+    <Header
+      hasSidebar={false}
+      logo={logo}
+      navigation={navigation}
+      route={route}
+      searchEnabled={searchEnabled}
+      site={site}
+    />
+    <div
+      class="h-[calc(100dvh-4rem)] overflow-auto border-border border-t [&>[data-scalar-client]]:h-full"
+    >
+      <slot />
+    </div>
+  </body>
+</html>

package/src/components/layout/RootLayout.astro

@@ -0,0 +1,537 @@
+---
+import { EN_UI } from "../../core/i18n-ui.ts";
+import type { UIStrings } from "../../core/i18n-ui.ts";
+import type {
+  Heading,
+  LocaleSwitchOption,
+  Navigation,
+} from "../../core/types.ts";
+import "blume:theme";
+import type { ComponentOverride } from "../../core/define-components.ts";
+import { buildStructuredData } from "../../seo/jsonld.ts";
+import Analytics from "./Analytics.astro";
+import Banner from "./Banner.astro";
+import Breadcrumbs from "./Breadcrumbs.astro";
+import Favicon from "./Favicon.astro";
+import Fonts from "./Fonts.astro";
+import { bannerInitScript, themeInitScript } from "./head-scripts.ts";
+import Header from "./Header.astro";
+import { findBreadcrumbs, flattenPages, getPagination } from "./nav-utils.ts";
+import NavTree from "./NavTree.astro";
+import { resolveSlot } from "./overrides.ts";
+import PageActions from "./PageActions.astro";
+import PageFeedback from "./PageFeedback.astro";
+import Pagination from "./Pagination.astro";
+import TableOfContents from "./TableOfContents.astro";
+
+interface Props {
+  site: { title: string; description?: string };
+  logo?: {
+    svg?: string;
+    light?: string;
+    dark?: string;
+    alt: string;
+    href: string;
+  } | null;
+  favicon?: {
+    href: string;
+    type?: string;
+  } | null;
+  appleIcon?: {
+    href: string;
+    type?: string;
+  } | null;
+  banner?: {
+    content: string;
+    link?: { text: string; href: string };
+    dismissible: boolean;
+    key: string;
+  } | null;
+  analytics?: {
+    posthog?: { host?: string; key: string };
+    scripts?: {
+      attributes?: Record<string, string>;
+      content?: string;
+      src?: string;
+      strategy?: "async" | "defer";
+    }[];
+    vercel?: boolean;
+  } | null;
+  navigation: Navigation;
+  mcp?: { name: string; route: string } | null;
+  page: { title: string; description?: string; route: string };
+  headings: Heading[];
+  imageZoom?: boolean;
+  codeWrap?: boolean;
+  themeMode: "system" | "light" | "dark";
+  fontCssVars?: string[];
+  searchEnabled: boolean;
+  indexable: boolean;
+  ogImage?: string | null;
+  canonical?: string | null;
+  editUrl?: string | null;
+  askEnabled?: boolean;
+  /** Show the "Was this page helpful?" rating below the content. */
+  feedback?: boolean;
+  exportPdf?: boolean;
+  exportEpub?: boolean;
+  feeds?: { title: string; href: string }[];
+  siteUrl?: string | null;
+  pageType?: string;
+  published?: string | Date | null;
+  lastModified?: string | null;
+  noindex?: boolean;
+  structuredDataEnabled?: boolean;
+  /** Active locale code for `<html lang>` (defaults to `en`). */
+  locale?: string;
+  /** Text direction for `<html dir>` (defaults to `ltr`). */
+  dir?: "ltr" | "rtl";
+  /**
+   * Direction of the page content's own language — differs from `dir` on a
+   * fallback page (e.g. English content under an RTL locale). Applied to the
+   * article so prose punctuation reads correctly; the chrome still mirrors.
+   */
+  contentDir?: "ltr" | "rtl";
+  /** Resolved UI dictionary; English baseline when omitted. */
+  ui?: UIStrings;
+  /** `hreflang` alternates (absolute URLs) for this page's translations. */
+  localeAlternates?: { hreflang: string; href: string }[];
+  /** Absolute URL of the default-locale translation, for `hreflang=x-default`. */
+  xDefault?: string | null;
+  /** Language-switcher entries for the current page. */
+  localeSwitch?: LocaleSwitchOption[];
+  /**
+   * User layout-slot overrides from `components.ts` (`defineComponents`). Each
+   * key replaces the matching built-in; unknown keys are ignored. Wired slots:
+   * `Header`, `Sidebar`, `Breadcrumbs`, `TableOfContents`, `Pagination`.
+   */
+  layout?: Record<string, ComponentOverride>;
+}
+
+const {
+  site,
+  logo,
+  favicon,
+  appleIcon,
+  banner,
+  analytics,
+  navigation,
+  mcp,
+  page,
+  headings,
+  imageZoom = true,
+  codeWrap = false,
+  themeMode,
+  fontCssVars,
+  searchEnabled,
+  indexable,
+  ogImage,
+  canonical,
+  editUrl,
+  askEnabled,
+  feedback = false,
+  exportPdf,
+  exportEpub,
+  feeds,
+  siteUrl,
+  pageType,
+  published,
+  lastModified,
+  noindex,
+  structuredDataEnabled,
+  locale = "en",
+  dir = "ltr",
+  contentDir,
+  ui,
+  localeAlternates,
+  xDefault,
+  localeSwitch,
+  layout = {},
+} = Astro.props;
+
+// Layout-slot overrides: render the user's component when configured, else the
+// built-in. Each override receives the same props as the component it replaces.
+const HeaderSlot = resolveSlot(layout.Header, Header);
+const SidebarSlot = resolveSlot(layout.Sidebar, NavTree);
+const BreadcrumbsSlot = resolveSlot(layout.Breadcrumbs, Breadcrumbs);
+const TableOfContentsSlot = resolveSlot(layout.TableOfContents, TableOfContents);
+const PaginationSlot = resolveSlot(layout.Pagination, Pagination);
+
+const strings = ui ?? EN_UI;
+// Filter search to the active language only when the site is multi-locale.
+const searchLocale =
+  localeSwitch && localeSwitch.length > 1 ? locale : undefined;
+const tocHeadings = headings.filter((h) => h.depth >= 2 && h.depth <= 3);
+const pageTitle = page.title ? `${page.title} - ${site.title}` : site.title;
+const description = page.description ?? site.description;
+
+// "Last updated on <date>" — formatted in UTC to match the changelog timeline.
+const lastModifiedDate = lastModified ? new Date(lastModified) : null;
+const formattedLastModified =
+  lastModifiedDate && !Number.isNaN(lastModifiedDate.getTime())
+    ? new Intl.DateTimeFormat(locale || "en", {
+        dateStyle: "long",
+        timeZone: "UTC",
+      }).format(lastModifiedDate)
+    : null;
+
+// The hosted MCP server's absolute URL, used by the page-actions install menu.
+// Needs a configured site to be useful, so the menu is hidden without one.
+const mcpUrl = mcp && siteUrl ? new URL(mcp.route, siteUrl).href : null;
+
+const crumbs = findBreadcrumbs(navigation.sidebar, page.route);
+const { prev, next } = getPagination(
+  flattenPages(navigation.sidebar),
+  page.route
+);
+
+// Structured data is skipped when disabled or for pages we ask crawlers not to
+// index. Escape `<` so a title/description containing `</script>` can't break
+// out of the inline JSON-LD tag.
+const structuredData =
+  structuredDataEnabled === false || noindex
+    ? null
+    : buildStructuredData({
+      breadcrumbs: crumbs,
+      description,
+      locale,
+      modified: lastModified,
+      pageType,
+      published,
+      route: page.route,
+      siteName: site.title,
+      siteUrl: siteUrl ?? null,
+      title: page.title,
+    });
+const structuredDataJson = structuredData
+  ? JSON.stringify(structuredData).replaceAll("<", "\\u003c")
+  : null;
+
+const initialThemeScript = themeInitScript(themeMode);
+const bannerScript = banner?.dismissible
+  ? bannerInitScript(banner.key)
+  : null;
+---
+
+<!doctype html>
+<html dir={dir} lang={locale}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{pageTitle}</title>
+    <Favicon favicon={favicon} appleIcon={appleIcon} />
+    <Fonts cssVars={fontCssVars ?? []} />
+    {canonical && <link rel="canonical" href={canonical} />}
+    {
+      localeAlternates?.map((alt) => (
+        <link href={alt.href} hreflang={alt.hreflang} rel="alternate" />
+      ))
+    }
+    {xDefault && <link href={xDefault} hreflang="x-default" rel="alternate" />}
+    {noindex && <meta name="robots" content="noindex" />}
+    {description && <meta name="description" content={description} />}
+    <meta property="og:title" content={pageTitle} />
+    {description && <meta property="og:description" content={description} />}
+    {
+      ogImage && (
+        <>
+          <meta property="og:image" content={ogImage} />
+          <meta name="twitter:image" content={ogImage} />
+          <meta name="twitter:card" content="summary_large_image" />
+        </>
+      )
+    }
+    {
+      feeds?.map((feed) => (
+        <link
+          href={feed.href}
+          rel="alternate"
+          title={feed.title}
+          type="application/rss+xml"
+        />
+      ))
+    }
+    {
+      structuredDataJson && (
+        <script
+          is:inline
+          set:html={structuredDataJson}
+          type="application/ld+json"
+        />
+      )
+    }
+    {bannerScript && <script is:inline set:html={bannerScript} />}
+    <script is:inline set:html={initialThemeScript} />
+    <Analytics analytics={analytics} />
+  </head>
+  <body
+    class="bg-background font-sans text-foreground antialiased"
+    data-blume-code-wrap={codeWrap ? "" : undefined}
+    data-blume-image-zoom={imageZoom ? "" : undefined}
+  >
+    <a
+      class="absolute start-[-999px] top-0 z-[100] bg-accent px-4 py-2 text-accent-foreground focus:start-0"
+      href="#blume-content">{strings.page.skipToContent}</a
+    >
+    <Banner banner={banner} />
+    <HeaderSlot
+      askEnabled={askEnabled}
+      localeSwitch={localeSwitch}
+      logo={logo}
+      navigation={navigation}
+      route={page.route}
+      searchEnabled={searchEnabled}
+      searchLocale={searchLocale}
+      searchStrings={strings.search}
+      site={site}
+      switcherStrings={strings.languageSwitcher}
+    >
+      <slot name="ask" slot="ask" />
+    </HeaderSlot>
+    <div class="mx-auto grid grid-cols-1 items-start lg:grid-cols-[17.5rem_minmax(0,1fr)] xl:grid-cols-[17.5rem_minmax(0,1fr)_17.5rem]">
+      <aside
+        aria-label="Primary"
+        class="fixed top-16 start-0 z-[35] h-[calc(100dvh-4rem)] w-64 max-w-[80vw] -translate-x-[105%] overflow-y-auto border-border border-e bg-background px-5 pt-4 pb-6 transition-transform rtl:translate-x-[105%] [:where([data-blume-nav-open])_&]:translate-x-0! lg:sticky lg:z-auto lg:w-auto lg:max-w-none lg:translate-x-0! lg:border-e-0 lg:bg-transparent lg:px-4"
+      >
+        <nav>
+          <SidebarSlot currentRoute={page.route} items={navigation.sidebar} />
+        </nav>
+      </aside>
+      <main class="min-w-0 px-6 pt-6 pb-10 lg:px-8 xl:px-10" id="blume-content">
+        <BreadcrumbsSlot crumbs={crumbs} />
+        <TableOfContentsSlot
+          headings={tocHeadings}
+          title={strings.toc.title}
+          variant="mobile"
+        />
+        <article class="prose mx-auto max-w-[42rem]" dir={contentDir}>
+          <slot />
+        </article>
+        {
+          formattedLastModified && (
+            <p class="mx-auto mt-10 max-w-[42rem] text-muted-foreground text-sm">
+              {strings.page.lastUpdated} {formattedLastModified}
+            </p>
+          )
+        }
+        {feedback && <PageFeedback strings={strings.feedback} />}
+        <PaginationSlot next={next} prev={prev} strings={strings.page} />
+      </main>
+      <aside
+        aria-label={strings.toc.title}
+        class="sticky top-16 hidden h-[calc(100dvh-4rem)] overflow-y-auto px-4 pt-6 pb-10 text-sm xl:block"
+      >
+        <TableOfContentsSlot
+          headings={tocHeadings}
+          title={strings.toc.title}
+          variant="desktop"
+        />
+        <PageActions
+          askEnabled={askEnabled}
+          editUrl={editUrl}
+          exportEpub={exportEpub}
+          exportPdf={exportPdf}
+          mcpName={mcp?.name}
+          mcpUrl={mcpUrl}
+          route={page.route}
+          strings={strings.actions}
+        />
+      </aside>
+    </div>
+    <button
+      aria-label="Close navigation"
+      class="fixed inset-0 z-[30] hidden cursor-pointer border-0 bg-black/40 [:where([data-blume-nav-open])_&]:block lg:hidden"
+      data-blume-nav-toggle
+      type="button"
+    ></button>
+    <script>
+      import { icons } from "../../theme/icons.ts";
+      // Registers the <blume-mermaid> custom element (emitted by ```mermaid
+      // fences). Mermaid itself is lazy-loaded only on pages that use a diagram.
+      import "../content/mermaid-element.ts";
+      // Registers the <blume-toc> custom element: scrollspy for the table of
+      // contents, highlighting the section currently in view as you scroll.
+      import "./toc-element.ts";
+
+      const svg = (name: string) =>
+        `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${icons[name]}</svg>`;
+
+      const buttonClass =
+        "absolute right-3 inline-flex size-7 items-center justify-center rounded-full bg-transparent text-muted-foreground opacity-70 transition hover:bg-muted hover:text-foreground hover:opacity-100 focus-visible:opacity-100";
+
+      const languageLabels: Record<string, string> = {
+        astro: "Astro",
+        bash: "Bash",
+        css: "CSS",
+        html: "HTML",
+        js: "JavaScript",
+        json: "JSON",
+        jsx: "JSX",
+        md: "Markdown",
+        mdx: "MDX",
+        plaintext: "Text",
+        sh: "Shell",
+        shell: "Shell",
+        ts: "TypeScript",
+        tsx: "TSX",
+        txt: "Text",
+        yaml: "YAML",
+        yml: "YAML",
+        zsh: "Zsh",
+      };
+
+      for (const pre of document.querySelectorAll(".prose pre")) {
+        if (pre.querySelector("[data-blume-copy]")) {
+          continue;
+        }
+        // Skip nested <pre>: Twoslash renders each hover popup's type signature
+        // as a <pre> inside the code block, which shouldn't get its own button.
+        if (pre.parentElement?.closest("pre")) {
+          continue;
+        }
+        const language = pre.getAttribute("data-language");
+        if (language) {
+          pre.setAttribute(
+            "data-language",
+            languageLabels[language.toLowerCase()] ?? language
+          );
+        }
+        pre.classList.add("group", "relative");
+        const button = document.createElement("button");
+        button.type = "button";
+        // The language-label bar (prose) vs flush code (tabs) need a different
+        // offset; pick the Tailwind class by context instead of a CSS override.
+        const topClass = pre.closest("blume-tabs, .not-prose")
+          ? "top-2.5"
+          : "top-2";
+        button.className = `${buttonClass} ${topClass}`;
+        button.setAttribute("data-blume-copy", "");
+        button.setAttribute("aria-label", "Copy code");
+        button.innerHTML = svg("copy");
+        button.addEventListener("click", async () => {
+          const text = pre.querySelector("code")?.textContent ?? "";
+          try {
+            await navigator.clipboard.writeText(text);
+          } catch {
+            return;
+          }
+          button.innerHTML = svg("check");
+          setTimeout(() => {
+            button.innerHTML = svg("copy");
+          }, 1500);
+        });
+        pre.appendChild(button);
+      }
+
+      // Click-to-zoom for content images (gated by `markdown.imageZoom`).
+      // Enhances every `.prose img` so plain Markdown images open in a lightbox.
+      // Opt out per-image with `data-no-zoom`.
+      const zoomImages: Iterable<HTMLImageElement> =
+        document.body.hasAttribute("data-blume-image-zoom")
+          ? document.querySelectorAll<HTMLImageElement>(
+              ".prose img:not([data-no-zoom])"
+            )
+          : [];
+      const zoomTargets = Array.from(zoomImages);
+      if (zoomTargets.length > 0) {
+        const reduceMotion = window.matchMedia(
+          "(prefers-reduced-motion: reduce)"
+        ).matches;
+        let active: {
+          clone: HTMLImageElement;
+          original: HTMLImageElement;
+          overlay: HTMLElement;
+        } | null = null;
+
+        const closeZoom = () => {
+          if (!active) {
+            return;
+          }
+          const { clone, original, overlay } = active;
+          active = null;
+          overlay.style.opacity = "0";
+          clone.style.transform = "translate(0px, 0px) scale(1)";
+          const cleanup = () => {
+            overlay.remove();
+            original.style.visibility = "";
+            document.removeEventListener("keydown", onKey);
+            window.removeEventListener("scroll", closeZoom);
+          };
+          if (reduceMotion) {
+            cleanup();
+          } else {
+            clone.addEventListener("transitionend", cleanup, { once: true });
+          }
+        };
+
+        const onKey = (event: KeyboardEvent) => {
+          if (event.key === "Escape") {
+            closeZoom();
+          }
+        };
+
+        const openZoom = (image: HTMLImageElement) => {
+          if (active) {
+            return;
+          }
+          const start = image.getBoundingClientRect();
+          if (start.width === 0 || start.height === 0) {
+            return;
+          }
+
+          const overlay = document.createElement("div");
+          overlay.className =
+            "fixed inset-0 z-[100] flex cursor-zoom-out items-center justify-center bg-background/80 opacity-0 backdrop-blur-sm transition-opacity duration-300";
+
+          const clone = image.cloneNode(true) as HTMLImageElement;
+          clone.className = "absolute m-0 max-w-none rounded-blume shadow-2xl";
+          clone.style.top = `${start.top}px`;
+          clone.style.left = `${start.left}px`;
+          clone.style.width = `${start.width}px`;
+          clone.style.height = `${start.height}px`;
+          clone.style.transformOrigin = "top left";
+          if (!reduceMotion) {
+            clone.style.transition =
+              "transform 300ms cubic-bezier(0.22, 1, 0.36, 1)";
+          }
+
+          overlay.appendChild(clone);
+          document.body.appendChild(overlay);
+          image.style.visibility = "hidden";
+          active = { clone, original: image, overlay };
+
+          const margin = 0.92;
+          const ratio = start.width / start.height;
+          let targetWidth = window.innerWidth * margin;
+          let targetHeight = targetWidth / ratio;
+          if (targetHeight > window.innerHeight * margin) {
+            targetHeight = window.innerHeight * margin;
+            targetWidth = targetHeight * ratio;
+          }
+          const naturalWidth = image.naturalWidth || targetWidth;
+          if (targetWidth > naturalWidth) {
+            targetWidth = naturalWidth;
+            targetHeight = targetWidth / ratio;
+          }
+          const scale = targetWidth / start.width;
+          const dx = (window.innerWidth - targetWidth) / 2 - start.left;
+          const dy = (window.innerHeight - targetHeight) / 2 - start.top;
+
+          requestAnimationFrame(() => {
+            overlay.style.opacity = "1";
+            clone.style.transform = `translate(${dx}px, ${dy}px) scale(${scale})`;
+          });
+
+          overlay.addEventListener("click", closeZoom);
+          document.addEventListener("keydown", onKey);
+          window.addEventListener("scroll", closeZoom, { passive: true });
+        };
+
+        for (const image of zoomTargets) {
+          image.classList.add("cursor-zoom-in");
+          image.addEventListener("click", () => openZoom(image));
+        }
+      }
+    </script>
+  </body>
+</html>