@cube-drone/marquee-turbolink 0.1.0

package/dist/index.js

@@ -0,0 +1,99 @@
+// marquee-turbolink: link expanders as plugins.
+//
+// A plugin owns the *presentation* of the link kinds it recognizes - an
+// image in a medium box, audio controls, a playable YouTube embed, a Spotify
+// widget, a host platform's native content, the Binglebongle plugin of 2035.
+// The
+// Marquee renderer owns only the floor (a plain link, always) and the socket
+// (Profile.turbolink). Embedders compose the chain they trust.
+//
+// Two phases, deliberately split:
+//   resolve() - async, MAY touch the network (OpenGraph fetches). Runs in a
+//               fetch-ahead pass (static rendering) or on mount (interactive).
+//   render()  - sync, pure, deterministic given resolved data. This is what
+//               the renderer calls; nothing fetches mid-render, ever.
+//
+// Plugins are embedder-trusted code (like Profile.directive): author bytes
+// only ever enter as the `target` string - escape everything you interpolate
+// (escapeText/escapeAttr are exported for exactly that).
+/** Everything the composed chain needs styled, once: the standard card's
+ * skin (renderCard is the library's keyhole, so its skin is baseline) plus
+ * each plugin's declared css, deduplicated. Emit it in a <style> block or
+ * write it to a bundle file at build time - either way it's one artifact
+ * derived from the same list you composed. */
+export function turbolinkStyles(plugins) {
+    const chunks = new Set([cardCss]);
+    for (const plugin of plugins) {
+        if (plugin.css !== undefined) {
+            chunks.add(plugin.css);
+        }
+    }
+    return [...chunks].join("\n");
+}
+/** Compose a plugin chain into the shape Profile.turbolink wants. First
+ * plugin that matches AND renders wins. */
+export function composeTurbolinks(plugins, resolved) {
+    return (target, level) => {
+        for (const plugin of plugins) {
+            if (!plugin.match(target)) {
+                continue;
+            }
+            const data = resolved?.get(`${plugin.name}\n${target}`);
+            const html = plugin.render(target, { level, data });
+            if (html !== null) {
+                return html;
+            }
+        }
+        return null;
+    };
+}
+/** The fetch-ahead pass: run every matching plugin's resolve() over a
+ * target list, yielding the map composeTurbolinks() consumes. Targets
+ * resolve concurrently (wall-clock is the slowest fetch, not the sum);
+ * within one target, plugins still run in order - first resolver wins,
+ * like first renderer. */
+export async function resolveTargets(targets, plugins) {
+    const resolved = new Map();
+    await Promise.all([...new Set(targets)].map(async (target) => {
+        for (const plugin of plugins) {
+            if (plugin.resolve === undefined || !plugin.match(target)) {
+                continue;
+            }
+            try {
+                const data = await plugin.resolve(target);
+                if (data !== null && data !== undefined) {
+                    resolved.set(`${plugin.name}\n${target}`, data);
+                    break; // first resolver wins, like first renderer
+                }
+            }
+            catch {
+                // a failed fetch is a plain link, not a failed render
+            }
+        }
+    }));
+    return resolved;
+}
+/** Every turbolink target in a parsed document (bare-paragraph nodes and
+ * explicit :::turbolink directives) - the fetch-ahead pass's shopping list. */
+export function turbolinkTargets(node) {
+    const targets = [];
+    (function walk(n) {
+        if (n.type === "turbolink") {
+            targets.push(n.target);
+        }
+        if (n.type === "directive" && n.name === "turbolink" && n.attrs["target"] !== undefined) {
+            targets.push(n.attrs["target"]);
+        }
+        if ("children" in n) {
+            for (const child of n.children) {
+                walk(child);
+            }
+        }
+    })(node);
+    return targets;
+}
+import { cardCss } from "./card.js";
+export { escapeAttr, escapeText } from "./escape.js";
+export { cardCss, renderCard } from "./card.js";
+export { audioPlugin, defaultPlugins, imagePlugin, mapsPlugin, spotifyPlugin, videoPlugin, youtubePlugin, } from "./plugins.js";
+export { opengraphPlugin, parseOpenGraph } from "./opengraph.js";

package/dist/opengraph.d.ts

@@ -0,0 +1,5 @@
+import { type TurbolinkSummary } from "./card.ts";
+import type { TurbolinkPlugin } from "./index.ts";
+/** Pure and separately testable: html text in, summary out. */
+export declare function parseOpenGraph(html: string): TurbolinkSummary | null;
+export declare const opengraphPlugin: TurbolinkPlugin;

package/dist/opengraph.js

@@ -0,0 +1,66 @@
+// The OpenGraph fallback: the one default plugin that touches the network,
+// and only ever in its resolve() phase - never during render. Compose it
+// LAST so the shaped plugins (YouTube, media) win their own kinds.
+import { renderCard } from "./card.js";
+const UA = "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0 Safari/537.36";
+function decodeEntities(s) {
+    return s
+        .replaceAll("&lt;", "<")
+        .replaceAll("&gt;", ">")
+        .replaceAll("&quot;", '"')
+        .replaceAll("&#39;", "'")
+        .replaceAll("&amp;", "&");
+}
+/** Pure and separately testable: html text in, summary out. */
+export function parseOpenGraph(html) {
+    const head = html.slice(0, 65536); // metadata lives up top; stay bounded
+    const meta = (prop) => {
+        const tag = new RegExp(`<meta[^>]+(?:property|name)=["']${prop}["'][^>]*>`, "i").exec(head)?.[0];
+        if (tag === undefined) {
+            return undefined;
+        }
+        const content = /content=["']([^"']*)["']/i.exec(tag)?.[1];
+        return content === undefined || content === "" ? undefined : decodeEntities(content);
+    };
+    const summary = {};
+    const title = meta("og:title") ?? /<title[^>]*>([^<]*)<\/title>/i.exec(head)?.[1]?.trim();
+    if (title !== undefined && title !== "") {
+        summary.title = decodeEntities(title);
+    }
+    const description = meta("og:description") ?? meta("description");
+    if (description !== undefined) {
+        summary.description = description;
+    }
+    const image = meta("og:image");
+    if (image !== undefined) {
+        summary.image = image;
+    }
+    const site = meta("og:site_name");
+    if (site !== undefined) {
+        summary.site = site;
+    }
+    return summary.title === undefined ? null : summary;
+}
+export const opengraphPlugin = {
+    name: "opengraph",
+    match: (t) => /^https?:\/\//.test(t),
+    async resolve(target) {
+        // Generous but finite: a hung server costs ten seconds, never a hung
+        // build. (A timed-out fetch throws; resolveTargets already treats a
+        // failed fetch as a plain link.)
+        const res = await fetch(target, {
+            headers: { "user-agent": UA },
+            signal: AbortSignal.timeout(10_000),
+        });
+        if (!res.ok) {
+            return null;
+        }
+        return parseOpenGraph(await res.text());
+    },
+    render(target, { level, data }) {
+        if (data === undefined || data === null) {
+            return null; // nothing resolved: decline to the plain-link floor
+        }
+        return renderCard(target, data, level);
+    },
+};

package/dist/plugins.d.ts

@@ -0,0 +1,15 @@
+import type { TurbolinkPlugin } from "./index.ts";
+export declare const imagePlugin: TurbolinkPlugin;
+export declare const audioPlugin: TurbolinkPlugin;
+export declare const videoPlugin: TurbolinkPlugin;
+export declare const youtubePlugin: TurbolinkPlugin;
+export declare const spotifyPlugin: TurbolinkPlugin;
+/** Matches a Google Maps link that carries coordinates - and renders the
+ * same spot as an OpenStreetMap embed. Google retired its keyless embed
+ * endpoint, and this is cozier anyway: authors paste the link they have,
+ * readers get the map that doesn't track them. Links without coordinates
+ * decline to the plain-link floor. */
+export declare const mapsPlugin: TurbolinkPlugin;
+/** The fetchless defaults - safe to hand to any static build. OpenGraph
+ * (which fetches) is exported separately and opted into deliberately. */
+export declare const defaultPlugins: TurbolinkPlugin[];

package/dist/plugins.js

@@ -0,0 +1,138 @@
+// The default plugin set: everything obvious that needs no network at all.
+// Media kinds by extension, YouTube and Spotify by URL shape (their embed
+// URLs are derivable, no fetch required). All decline below level=full -
+// the plain-link floor is the right "title" for a player.
+import { escapeAttr } from "./escape.js";
+function extension(target) {
+    const path = target.split(/[?#]/, 1)[0];
+    return path.includes(".") ? path.slice(path.lastIndexOf(".") + 1).toLowerCase() : "";
+}
+const IMAGE_EXT = new Set(["png", "jpg", "jpeg", "gif", "webp", "avif", "svg"]);
+const AUDIO_EXT = new Set(["mp3", "ogg", "wav", "flac", "m4a"]);
+const VIDEO_EXT = new Set(["mp4", "webm"]);
+// Shared style chunks: plugins that emit the same classes reference the
+// same constant, and turbolinkStyles() dedupes by content.
+const frameCss = `.mq-turbolink-frame {
+  display: block;
+  border: 0;
+  width: 100%;
+  max-width: 32rem;
+  border-radius: 0.375rem;
+}
+.mq-frame-video { aspect-ratio: 16 / 9; }`;
+const mediaCss = `.mq-turbolink-image {
+  display: block;
+  max-width: 20rem;
+  max-height: 20rem;
+  border-radius: 0.375rem;
+}
+.mq-turbolink-audio,
+.mq-turbolink-video {
+  display: block;
+  width: 100%;
+  max-width: 32rem;
+}
+.mq-turbolink-video { border-radius: 0.375rem; }`;
+export const imagePlugin = {
+    name: "image",
+    css: mediaCss,
+    match: (t) => IMAGE_EXT.has(extension(t)),
+    render(target, { level }) {
+        if (level !== "full") {
+            return null;
+        }
+        const href = escapeAttr(target);
+        return `<a class="mq-turbolink-media" href="${href}"><img class="mq-turbolink-image" src="${href}" alt="" loading="lazy"></a>`;
+    },
+};
+export const audioPlugin = {
+    name: "audio",
+    css: mediaCss,
+    match: (t) => AUDIO_EXT.has(extension(t)),
+    render(target, { level }) {
+        if (level !== "full") {
+            return null;
+        }
+        return `<audio class="mq-turbolink-audio" controls src="${escapeAttr(target)}"></audio>`;
+    },
+};
+export const videoPlugin = {
+    name: "video",
+    css: mediaCss,
+    match: (t) => VIDEO_EXT.has(extension(t)),
+    render(target, { level }) {
+        if (level !== "full") {
+            return null;
+        }
+        return `<video class="mq-turbolink-video" controls src="${escapeAttr(target)}"></video>`;
+    },
+};
+const YOUTUBE = /(?:youtube\.com\/watch\?(?:[^#\s]*&)?v=|youtu\.be\/)([A-Za-z0-9_-]{5,20})/;
+export const youtubePlugin = {
+    name: "youtube",
+    css: frameCss,
+    match: (t) => YOUTUBE.test(t),
+    render(target, { level }) {
+        if (level !== "full") {
+            return null;
+        }
+        const id = YOUTUBE.exec(target)[1];
+        // nocookie domain: the least-tracking spelling of a playable embed.
+        // referrerpolicy: since late 2025 YouTube refuses embeds (error 153)
+        // unless the page identifies itself via Referer - this attribute keeps
+        // stricter site-wide policies from stripping it. Pages with no origin
+        // at all (file://) can't satisfy YouTube regardless; serve over http.
+        return `<iframe class="mq-turbolink-frame mq-frame-video" src="https://www.youtube-nocookie.com/embed/${escapeAttr(id)}" title="YouTube video" loading="lazy" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>`;
+    },
+};
+const SPOTIFY = /open\.spotify\.com\/(track|album|playlist|episode|show)\/([A-Za-z0-9]+)/;
+export const spotifyPlugin = {
+    name: "spotify",
+    css: frameCss,
+    match: (t) => SPOTIFY.test(t),
+    render(target, { level }) {
+        if (level !== "full") {
+            return null;
+        }
+        const m = SPOTIFY.exec(target);
+        const height = m[1] === "track" || m[1] === "episode" ? 152 : 352;
+        return `<iframe class="mq-turbolink-frame" src="https://open.spotify.com/embed/${m[1]}/${escapeAttr(m[2])}" height="${height}" title="Spotify player" loading="lazy"></iframe>`;
+    },
+};
+const GMAPS_COORDS = /google\.[a-z.]+\/maps\/\S*@(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?),(\d+(?:\.\d+)?)z/;
+/** Matches a Google Maps link that carries coordinates - and renders the
+ * same spot as an OpenStreetMap embed. Google retired its keyless embed
+ * endpoint, and this is cozier anyway: authors paste the link they have,
+ * readers get the map that doesn't track them. Links without coordinates
+ * decline to the plain-link floor. */
+export const mapsPlugin = {
+    name: "maps",
+    css: frameCss,
+    match: (t) => GMAPS_COORDS.test(t),
+    render(target, { level }) {
+        if (level !== "full") {
+            return null;
+        }
+        const m = GMAPS_COORDS.exec(target);
+        const lat = Number(m[1]);
+        const lon = Number(m[2]);
+        const zoom = Math.min(Math.max(Number(m[3]), 1), 19);
+        const dLon = 360 / 2 ** zoom;
+        const dLat = dLon * 0.4;
+        const bbox = [lon - dLon, lat - dLat, lon + dLon, lat + dLat]
+            .map((n) => n.toFixed(5))
+            .join("%2C");
+        const marker = `${lat.toFixed(5)}%2C${lon.toFixed(5)}`;
+        return `<iframe class="mq-turbolink-frame mq-frame-map" src="https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&amp;layer=mapnik&amp;marker=${marker}" height="320" title="Map" loading="lazy"></iframe>`;
+    },
+};
+/** The fetchless defaults - safe to hand to any static build. OpenGraph
+ * (which fetches) is exported separately and opted into deliberately. */
+export const defaultPlugins = [
+    youtubePlugin,
+    spotifyPlugin,
+    mapsPlugin,
+    imagePlugin,
+    audioPlugin,
+    videoPlugin,
+];

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@cube-drone/marquee-turbolink",
+  "version": "0.1.0",
+  "description": "Pluggable turbolink rendering for Marquee: link expanders as plugins, plain link as the floor",
+  "license": "MPL-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cube-drone/marqueemarkup.git",
+    "directory": "ts/marquee-turbolink"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=22.6.0"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "marquee-src": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "test": "node --conditions=marquee-src --test test/*.test.ts",
+    "check": "tsc --noEmit",
+    "build": "tsc -p tsconfig.build.json",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "@cube-drone/marquee-parser": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "typescript": "^5.9.0"
+  }
+}

package/src/card.ts

@@ -0,0 +1,67 @@
+// The standard summary card - the safe keyhole. Plugins that just have
+// facts (title, description, image, site) call this and inherit the shared
+// mq-turbolink-* look and its escaping; plugins with richer ideas write
+// their own markup and own their own escaping.
+
+import { escapeAttr, escapeText } from "./escape.ts";
+import type { TurbolinkLevel } from "./index.ts";
+
+export interface TurbolinkSummary {
+  title?: string;
+  description?: string;
+  image?: string;
+  site?: string;
+}
+
+function siteOf(target: string): string | undefined {
+  const m = /^[A-Za-z][A-Za-z0-9+.-]*:\/\/([^/]+)/.exec(target);
+  return m?.[1];
+}
+
+/** The card's skin. Always included by turbolinkStyles() - the keyhole's
+ * look is the library baseline, whichever plugins use it. */
+export const cardCss = `.mq-turbolink-card {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.15rem 0.75rem;
+  border: 1px solid rgba(136, 136, 136, 0.33);
+  border-left-width: 4px;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+}
+.mq-turbolink-site { font-size: 0.8em; opacity: 0.6; }
+.mq-turbolink-title { font-weight: 600; text-decoration: none; }
+.mq-turbolink-desc { font-size: 0.9em; opacity: 0.85; }
+.mq-turbolink-thumb {
+  grid-column: 2;
+  grid-row: 1 / span 3;
+  width: 6rem;
+  height: 6rem;
+  object-fit: cover;
+  border-radius: 0.25rem;
+}
+.mq-turbolink-rich .mq-turbolink-card {
+  border: none;
+  padding: 0;
+}`;
+
+export function renderCard(
+  target: string,
+  summary: TurbolinkSummary,
+  level: TurbolinkLevel,
+): string {
+  const href = escapeAttr(target);
+  const site = summary.site ?? siteOf(target);
+  let card = "";
+  if (site !== undefined) {
+    card += `<span class="mq-turbolink-site">${escapeText(site)}</span>`;
+  }
+  card += `<a class="mq-turbolink-title" href="${href}">${escapeText(summary.title ?? target)}</a>`;
+  if (level === "full" && summary.description !== undefined) {
+    card += `<span class="mq-turbolink-desc">${escapeText(summary.description)}</span>`;
+  }
+  if (level === "full" && summary.image !== undefined) {
+    card += `<img class="mq-turbolink-thumb" src="${escapeAttr(summary.image)}" alt="" loading="lazy">`;
+  }
+  return `<span class="mq-turbolink-card">${card}</span>`;
+}

package/src/escape.ts

@@ -0,0 +1,11 @@
+// Local escaping (duplicated from the html renderer on purpose: this
+// library stands alone - plugins for other renderers shouldn't drag the
+// HTML renderer in as a dependency).
+
+export function escapeText(s: string): string {
+  return s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+
+export function escapeAttr(s: string): string {
+  return escapeText(s).replaceAll('"', "&quot;");
+}

package/src/index.ts

@@ -0,0 +1,146 @@
+// marquee-turbolink: link expanders as plugins.
+//
+// A plugin owns the *presentation* of the link kinds it recognizes - an
+// image in a medium box, audio controls, a playable YouTube embed, a Spotify
+// widget, a host platform's native content, the Binglebongle plugin of 2035.
+// The
+// Marquee renderer owns only the floor (a plain link, always) and the socket
+// (Profile.turbolink). Embedders compose the chain they trust.
+//
+// Two phases, deliberately split:
+//   resolve() - async, MAY touch the network (OpenGraph fetches). Runs in a
+//               fetch-ahead pass (static rendering) or on mount (interactive).
+//   render()  - sync, pure, deterministic given resolved data. This is what
+//               the renderer calls; nothing fetches mid-render, ever.
+//
+// Plugins are embedder-trusted code (like Profile.directive): author bytes
+// only ever enter as the `target` string - escape everything you interpolate
+// (escapeText/escapeAttr are exported for exactly that).
+
+import type { Node } from "@cube-drone/marquee-parser";
+
+export type TurbolinkLevel = "full" | "title" | "bare";
+
+export interface TurbolinkContext {
+  level: TurbolinkLevel;
+  /** Whatever this plugin's resolve() produced for this target, if it ran. */
+  data: unknown;
+}
+
+export interface TurbolinkPlugin {
+  name: string;
+  /** Cheap recognition; render()/resolve() run only when this is true. */
+  match(target: string): boolean;
+  /** Optional async gathering - the ONLY place network is allowed. */
+  resolve?(target: string): Promise<unknown>;
+  /** Sync and pure. Return HTML, or null to decline (the chain continues;
+   * the renderer's plain-link floor catches everything). */
+  render(target: string, ctx: TurbolinkContext): string | null;
+  /** The stylesheet for the markup render() emits, as a string - collected
+   * by turbolinkStyles(), so importing a plugin imports its skin and no
+   * per-plugin file scavenger hunt exists. Plugins sharing rules assign the
+   * same string constant (aggregation dedupes by content). */
+  css?: string;
+}
+
+/** Everything the composed chain needs styled, once: the standard card's
+ * skin (renderCard is the library's keyhole, so its skin is baseline) plus
+ * each plugin's declared css, deduplicated. Emit it in a <style> block or
+ * write it to a bundle file at build time - either way it's one artifact
+ * derived from the same list you composed. */
+export function turbolinkStyles(plugins: TurbolinkPlugin[]): string {
+  const chunks = new Set<string>([cardCss]);
+  for (const plugin of plugins) {
+    if (plugin.css !== undefined) {
+      chunks.add(plugin.css);
+    }
+  }
+  return [...chunks].join("\n");
+}
+
+/** Compose a plugin chain into the shape Profile.turbolink wants. First
+ * plugin that matches AND renders wins. */
+export function composeTurbolinks(
+  plugins: TurbolinkPlugin[],
+  resolved?: Map<string, unknown>,
+): (target: string, level: TurbolinkLevel) => string | null {
+  return (target, level) => {
+    for (const plugin of plugins) {
+      if (!plugin.match(target)) {
+        continue;
+      }
+      const data = resolved?.get(`${plugin.name}\n${target}`);
+      const html = plugin.render(target, { level, data });
+      if (html !== null) {
+        return html;
+      }
+    }
+    return null;
+  };
+}
+
+/** The fetch-ahead pass: run every matching plugin's resolve() over a
+ * target list, yielding the map composeTurbolinks() consumes. Targets
+ * resolve concurrently (wall-clock is the slowest fetch, not the sum);
+ * within one target, plugins still run in order - first resolver wins,
+ * like first renderer. */
+export async function resolveTargets(
+  targets: string[],
+  plugins: TurbolinkPlugin[],
+): Promise<Map<string, unknown>> {
+  const resolved = new Map<string, unknown>();
+  await Promise.all(
+    [...new Set(targets)].map(async (target) => {
+      for (const plugin of plugins) {
+        if (plugin.resolve === undefined || !plugin.match(target)) {
+          continue;
+        }
+        try {
+          const data = await plugin.resolve(target);
+          if (data !== null && data !== undefined) {
+            resolved.set(`${plugin.name}\n${target}`, data);
+            break; // first resolver wins, like first renderer
+          }
+        } catch {
+          // a failed fetch is a plain link, not a failed render
+        }
+      }
+    }),
+  );
+  return resolved;
+}
+
+/** Every turbolink target in a parsed document (bare-paragraph nodes and
+ * explicit :::turbolink directives) - the fetch-ahead pass's shopping list. */
+export function turbolinkTargets(node: Node): string[] {
+  const targets: string[] = [];
+  (function walk(n: Node): void {
+    if (n.type === "turbolink") {
+      targets.push(n.target);
+    }
+    if (n.type === "directive" && n.name === "turbolink" && n.attrs["target"] !== undefined) {
+      targets.push(n.attrs["target"]);
+    }
+    if ("children" in n) {
+      for (const child of n.children) {
+        walk(child);
+      }
+    }
+  })(node);
+  return targets;
+}
+
+import { cardCss } from "./card.ts";
+
+export { escapeAttr, escapeText } from "./escape.ts";
+export { cardCss, renderCard, type TurbolinkSummary } from "./card.ts";
+export {
+  audioPlugin,
+  defaultPlugins,
+  imagePlugin,
+  mapsPlugin,
+  spotifyPlugin,
+  videoPlugin,
+  youtubePlugin,
+} from "./plugins.ts";
+export { opengraphPlugin, parseOpenGraph } from "./opengraph.ts";

package/src/opengraph.ts

@@ -0,0 +1,75 @@
+// The OpenGraph fallback: the one default plugin that touches the network,
+// and only ever in its resolve() phase - never during render. Compose it
+// LAST so the shaped plugins (YouTube, media) win their own kinds.
+
+import { renderCard, type TurbolinkSummary } from "./card.ts";
+import type { TurbolinkPlugin } from "./index.ts";
+
+const UA =
+  "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0 Safari/537.36";
+
+function decodeEntities(s: string): string {
+  return s
+    .replaceAll("&lt;", "<")
+    .replaceAll("&gt;", ">")
+    .replaceAll("&quot;", '"')
+    .replaceAll("&#39;", "'")
+    .replaceAll("&amp;", "&");
+}
+
+/** Pure and separately testable: html text in, summary out. */
+export function parseOpenGraph(html: string): TurbolinkSummary | null {
+  const head = html.slice(0, 65536); // metadata lives up top; stay bounded
+  const meta = (prop: string): string | undefined => {
+    const tag = new RegExp(`<meta[^>]+(?:property|name)=["']${prop}["'][^>]*>`, "i").exec(
+      head,
+    )?.[0];
+    if (tag === undefined) {
+      return undefined;
+    }
+    const content = /content=["']([^"']*)["']/i.exec(tag)?.[1];
+    return content === undefined || content === "" ? undefined : decodeEntities(content);
+  };
+  const summary: TurbolinkSummary = {};
+  const title = meta("og:title") ?? /<title[^>]*>([^<]*)<\/title>/i.exec(head)?.[1]?.trim();
+  if (title !== undefined && title !== "") {
+    summary.title = decodeEntities(title);
+  }
+  const description = meta("og:description") ?? meta("description");
+  if (description !== undefined) {
+    summary.description = description;
+  }
+  const image = meta("og:image");
+  if (image !== undefined) {
+    summary.image = image;
+  }
+  const site = meta("og:site_name");
+  if (site !== undefined) {
+    summary.site = site;
+  }
+  return summary.title === undefined ? null : summary;
+}
+
+export const opengraphPlugin: TurbolinkPlugin = {
+  name: "opengraph",
+  match: (t) => /^https?:\/\//.test(t),
+  async resolve(target) {
+    // Generous but finite: a hung server costs ten seconds, never a hung
+    // build. (A timed-out fetch throws; resolveTargets already treats a
+    // failed fetch as a plain link.)
+    const res = await fetch(target, {
+      headers: { "user-agent": UA },
+      signal: AbortSignal.timeout(10_000),
+    });
+    if (!res.ok) {
+      return null;
+    }
+    return parseOpenGraph(await res.text());
+  },
+  render(target, { level, data }) {
+    if (data === undefined || data === null) {
+      return null; // nothing resolved: decline to the plain-link floor
+    }
+    return renderCard(target, data as TurbolinkSummary, level);
+  },
+};