website-xp-phone 2.2.11 → 2.3.0

package/src/content/soundcloud.json

@@ -1,9 +1,15 @@
 {
   "source": "https://soundcloud.com/akinevz",
-  "generatedAt": "2026-10-23T21:05:10.086Z",
+  "generatedAt": "2026-10-24T11:54:46.192Z",
   "asOfUploadingTrackCount": 91,
   "trackCount": 91,
   "tracks": [
+    {
+      "owner": "akinevz",
+      "path": "/akinevz/roam",
+      "title": "Roam",
+      "url": "https://soundcloud.com/akinevz/roam"
+    },
     {
       "owner": "akinevz",
       "path": "/akinevz/outer",
@@ -66,9 +72,9 @@
     },
     {
       "owner": "akinevz",
-      "path": "/akinevz/atrophy-cultism",
-      "title": "Atrophy Cultism",
-      "url": "https://soundcloud.com/akinevz/atrophy-cultism"
+      "path": "/akinevz/fragments",
+      "title": "Marrowful Fragments",
+      "url": "https://soundcloud.com/akinevz/fragments"
     },
     {
       "owner": "akinevz",
@@ -84,15 +90,15 @@
     },
     {
       "owner": "akinevz",
-      "path": "/akinevz/diagonal",
-      "title": "Diagonal Constant",
-      "url": "https://soundcloud.com/akinevz/diagonal"
+      "path": "/akinevz/atrophy",
+      "title": "Atrophy Cultism",
+      "url": "https://soundcloud.com/akinevz/atrophy"
     },
     {
       "owner": "akinevz",
-      "path": "/akinevz/bloody-bits",
+      "path": "/akinevz/dresscode",
       "title": "Memento Mori",
-      "url": "https://soundcloud.com/akinevz/bloody-bits"
+      "url": "https://soundcloud.com/akinevz/dresscode"
     },
     {
       "owner": "akinevz",
@@ -109,7 +115,7 @@
     {
       "owner": "akinevz",
       "path": "/akinevz/calculus",
-      "title": "Reticulated Contraventions",
+      "title": "Calculated Reception",
       "url": "https://soundcloud.com/akinevz/calculus"
     },
     {
@@ -126,9 +132,9 @@
     },
     {
       "owner": "akinevz",
-      "path": "/akinevz/frozen-glove",
+      "path": "/akinevz/frozen-scream",
       "title": "Freezing Point",
-      "url": "https://soundcloud.com/akinevz/frozen-glove"
+      "url": "https://soundcloud.com/akinevz/frozen-scream"
     },
     {
       "owner": "akinevz",
@@ -181,7 +187,7 @@
     {
       "owner": "akinevz",
       "path": "/akinevz/crow",
-      "title": "Crow 3",
+      "title": "Crow",
       "url": "https://soundcloud.com/akinevz/crow"
     },
     {
@@ -229,7 +235,7 @@
     {
       "owner": "akinevz",
       "path": "/akinevz/pein",
-      "title": "Spectral Pain",
+      "title": "Er",
       "url": "https://soundcloud.com/akinevz/pein"
     },
     {
@@ -268,12 +274,6 @@
       "title": "Open Door",
       "url": "https://soundcloud.com/akinevz/open-door"
     },
-    {
-      "owner": "akinevz",
-      "path": "/akinevz/wat",
-      "title": "Er",
-      "url": "https://soundcloud.com/akinevz/wat"
-    },
     {
       "owner": "akinevz",
       "path": "/akinevz/warrer-style",
@@ -558,6 +558,12 @@
       "profileImageUrl": null,
       "trackCount": 58,
       "tracks": [
+        {
+          "owner": "akinevz",
+          "path": "/akinevz/roam",
+          "title": "Roam",
+          "url": "https://soundcloud.com/akinevz/roam"
+        },
         {
           "owner": "akinevz",
           "path": "/akinevz/outer",
@@ -620,9 +626,9 @@
         },
         {
           "owner": "akinevz",
-          "path": "/akinevz/atrophy-cultism",
-          "title": "Atrophy Cultism",
-          "url": "https://soundcloud.com/akinevz/atrophy-cultism"
+          "path": "/akinevz/fragments",
+          "title": "Marrowful Fragments",
+          "url": "https://soundcloud.com/akinevz/fragments"
         },
         {
           "owner": "akinevz",
@@ -638,15 +644,15 @@
         },
         {
           "owner": "akinevz",
-          "path": "/akinevz/diagonal",
-          "title": "Diagonal Constant",
-          "url": "https://soundcloud.com/akinevz/diagonal"
+          "path": "/akinevz/atrophy",
+          "title": "Atrophy Cultism",
+          "url": "https://soundcloud.com/akinevz/atrophy"
         },
         {
           "owner": "akinevz",
-          "path": "/akinevz/bloody-bits",
+          "path": "/akinevz/dresscode",
           "title": "Memento Mori",
-          "url": "https://soundcloud.com/akinevz/bloody-bits"
+          "url": "https://soundcloud.com/akinevz/dresscode"
         },
         {
           "owner": "akinevz",
@@ -663,7 +669,7 @@
         {
           "owner": "akinevz",
           "path": "/akinevz/calculus",
-          "title": "Reticulated Contraventions",
+          "title": "Calculated Reception",
           "url": "https://soundcloud.com/akinevz/calculus"
         },
         {
@@ -680,9 +686,9 @@
         },
         {
           "owner": "akinevz",
-          "path": "/akinevz/frozen-glove",
+          "path": "/akinevz/frozen-scream",
           "title": "Freezing Point",
-          "url": "https://soundcloud.com/akinevz/frozen-glove"
+          "url": "https://soundcloud.com/akinevz/frozen-scream"
         },
         {
           "owner": "akinevz",
@@ -735,7 +741,7 @@
         {
           "owner": "akinevz",
           "path": "/akinevz/crow",
-          "title": "Crow 3",
+          "title": "Crow",
           "url": "https://soundcloud.com/akinevz/crow"
         },
         {
@@ -783,7 +789,7 @@
         {
           "owner": "akinevz",
           "path": "/akinevz/pein",
-          "title": "Spectral Pain",
+          "title": "Er",
           "url": "https://soundcloud.com/akinevz/pein"
         },
         {
@@ -822,12 +828,6 @@
           "title": "Open Door",
           "url": "https://soundcloud.com/akinevz/open-door"
         },
-        {
-          "owner": "akinevz",
-          "path": "/akinevz/wat",
-          "title": "Er",
-          "url": "https://soundcloud.com/akinevz/wat"
-        },
         {
           "owner": "akinevz",
           "path": "/akinevz/warrer-style",

package/src/lib/embeds.ts

@@ -2,7 +2,10 @@ export type EmbedSpec = {
   provider: "spotify" | "youtube" | "soundcloud";
   label: string;
   src: string;
-  height: number;
+  /** Fixed pixel height for fixed-aspect players (Spotify, SoundCloud).
+   * Omitted for YouTube: those players are 16:9 and size themselves from
+   * their width via CSS (.embed-youtube). */
+  height?: number;
 };
 
 const SPOTIFY_TYPES = new Set([
@@ -14,6 +17,41 @@ const SPOTIFY_TYPES = new Set([
   "show",
 ]);
 const SPOTIFY_HEIGHT = 152;
+const YOUTUBE_ID = /^[A-Za-z0-9_-]+$/;
+
+/**
+ * Extracts a video id from common YouTube URL forms:
+ *   https://youtu.be/<id>
+ *   https://www.youtube.com/watch?v=<id>
+ *   https://www.youtube.com/embed/<id> (also /shorts/, /live/ and /v/)
+ * www./m./music. subdomains and youtube-nocookie.com are accepted.
+ * Returns null for anything else — including any link carrying a ?list=
+ * parameter: it points at a playlist (often unlisted), and every caller
+ * renders those as plain links instead of embeds.
+ */
+export function youtubeVideoId(url: string): string | null {
+  let parsed: URL;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return null;
+  }
+  if (parsed.searchParams.get("list")) return null;
+  const host = parsed.hostname.replace(/^(www|m|music)\./, "");
+  if (host === "youtu.be") {
+    const id = parsed.pathname.slice(1).split("/")[0];
+    return id && YOUTUBE_ID.test(id) ? id : null;
+  }
+  if (host !== "youtube.com" && host !== "youtube-nocookie.com") return null;
+  if (parsed.pathname === "/watch") {
+    const id = parsed.searchParams.get("v");
+    return id && YOUTUBE_ID.test(id) ? id : null;
+  }
+  const embed = parsed.pathname.match(
+    /^\/(?:embed|shorts|live|v)\/([A-Za-z0-9_-]+)/,
+  );
+  return embed?.[1] ?? null;
+}
 
 function parse(url: string): URL | null {
   try {
@@ -72,23 +110,12 @@ export function resolveEmbed(
     };
   }
 
-  if (
-    host === "youtu.be" ||
-    host === "youtube.com" ||
-    host === "www.youtube.com"
-  ) {
-    // Playlists are often unlisted, so they fall back to a plain link.
-    if (parsed.searchParams.get("list")) return null;
-    const id =
-      host === "youtu.be"
-        ? parsed.pathname.slice(1)
-        : parsed.searchParams.get("v");
-    if (!id) return null;
+  const youtubeId = youtubeVideoId(url);
+  if (youtubeId) {
     return {
       provider: "youtube",
       label: "YouTube",
-      src: `https://www.youtube.com/embed/${id}`,
-      height: SPOTIFY_HEIGHT,
+      src: `https://www.youtube.com/embed/${youtubeId}`,
     };
   }
 
@@ -96,14 +123,6 @@ export function resolveEmbed(
 }
 
 export function youTubeThumbnail(url: string): string | null {
-  const parsed = parse(url);
-  if (!parsed || parsed.searchParams.get("list")) return null;
-  const host = parsed.hostname;
-  const id =
-    host === "youtu.be"
-      ? parsed.pathname.slice(1)
-      : host === "youtube.com" || host === "www.youtube.com"
-        ? parsed.searchParams.get("v")
-        : null;
+  const id = youtubeVideoId(url);
   return id ? `https://i.ytimg.com/vi/${id}/maxresdefault.jpg` : null;
 }

package/src/lib/markdown.tsx

@@ -1,34 +1,21 @@
 import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
-import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import rehypeSanitize from "rehype-sanitize";
 import { Link } from "react-router-dom";
+import { rehypeYoutubeEmbed } from "@/lib/rehypeYoutubeEmbed";
+import { sanitizeSchema } from "@/lib/sanitizeSchema";
 import { CLIPPY_LINK, onClippyTriggerClick } from "./clippy";
 
-const schema = {
-  ...defaultSchema,
-  tagNames: [...(defaultSchema.tagNames ?? []), "iframe"],
-  attributes: {
-    ...defaultSchema.attributes,
-    img: [...(defaultSchema.attributes?.img ?? []), "style", "loading"],
-    iframe: [
-      "src",
-      "width",
-      "height",
-      "title",
-      "allow",
-      "allowFullScreen",
-      "loading",
-      "style",
-    ],
-  },
-};
-
 type Props = { children: string; inline?: boolean };
 
 export function Md({ children }: Props) {
   return (
     <Markdown
-      rehypePlugins={[rehypeRaw, [rehypeSanitize, schema]]}
+      rehypePlugins={[
+        rehypeRaw,
+        rehypeYoutubeEmbed,
+        [rehypeSanitize, sanitizeSchema],
+      ]}
       components={{
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         a({ href, children: label, node: _node, ...rest }) {

package/src/lib/rehypeYoutubeEmbed.ts

@@ -0,0 +1,65 @@
+import type { Element, ElementContent, Root } from "hast";
+import { visit } from "unist-util-visit";
+import { youtubeVideoId } from "./embeds.ts";
+
+/**
+ * Keeps the embed inside its container (the window body) at any width while
+ * preserving the player's 16:9 shape, and centres it when the body is wider
+ * than the cap. The width/height attributes stay as a no-CSS fallback and
+ * give the browser the intrinsic ratio before styles load.
+ */
+const RESPONSIVE_STYLE =
+  "width: 100%; max-width: 560px; height: auto; aspect-ratio: 16 / 9;" +
+  " display: block; margin: 0 auto;";
+
+/** The fallback title for embeds whose link text is just the bare URL
+ * (markdown autolinks) — a URL reads poorly as a player title. */
+const FALLBACK_TITLE = "YouTube video";
+
+function textContent(node: ElementContent): string {
+  if (node.type === "text") return node.value;
+  if (node.type === "element") return node.children.map(textContent).join("");
+  return "";
+}
+
+/** Uses the link's own text as the accessible player title when it is
+ * human-readable ([my talk](…)), falling back for bare autolinks (<…>). */
+function linkTitle(node: Element, href: string): string {
+  const text = textContent(node).trim();
+  return text && text.toLowerCase() !== href.toLowerCase()
+    ? text
+    : FALLBACK_TITLE;
+}
+
+/** Rehype plugin: replace YouTube links with responsive 16:9 embeds. */
+export function rehypeYoutubeEmbed() {
+  return (tree: Root) => {
+    visit(tree, "element", (node, index, parent) => {
+      if (!parent || index === undefined || node.tagName !== "a") return;
+      const href = node.properties?.href;
+      if (typeof href !== "string") return;
+      const id = youtubeVideoId(href);
+      if (!id) return;
+      parent.children[index] = {
+        type: "element",
+        tagName: "iframe",
+        properties: {
+          src: `https://www.youtube-nocookie.com/embed/${id}`,
+          title: linkTitle(node, href),
+          width: "560",
+          height: "315",
+          loading: "lazy",
+          style: RESPONSIVE_STYLE,
+          // YouTube's player rejects embeds without a usable referrer
+          // (error 153). The site sends Referrer-Policy: no-referrer, so
+          // the iframe needs its own policy to send its origin.
+          referrerPolicy: "strict-origin-when-cross-origin",
+          allow:
+            "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+          allowFullScreen: true,
+        },
+        children: [],
+      };
+    });
+  };
+}

package/src/lib/sanitizeSchema.ts

@@ -0,0 +1,32 @@
+import { defaultSchema } from "rehype-sanitize";
+
+/**
+ * Sanitize schema shared by every Markdown pipeline (src/lib/markdown.tsx)
+ * and its test mirror (test/youtubeEmbed.test.js), so the pipeline and the
+ * tests can never drift apart.
+ *
+ * On top of the defaults it allows:
+ * - <iframe> (YouTube embeds via rehypeYoutubeEmbed, or hand-written raw
+ *   HTML), including the attributes those embeds need — `style` for
+ *   responsive sizing, `referrerPolicy` for YouTube's error-153 fix;
+ * - `style` and `loading` on <img> (inline content images).
+ */
+export const sanitizeSchema = {
+  ...defaultSchema,
+  tagNames: [...(defaultSchema.tagNames ?? []), "iframe"],
+  attributes: {
+    ...defaultSchema.attributes,
+    img: [...(defaultSchema.attributes?.img ?? []), "style", "loading"],
+    iframe: [
+      "src",
+      "width",
+      "height",
+      "title",
+      "allow",
+      "allowFullScreen",
+      "loading",
+      "style",
+      "referrerPolicy",
+    ],
+  },
+};

package/src/styles/extras.css

@@ -398,3 +398,10 @@ main.feef69-page {
   max-width: 100% !important;
   object-fit: contain;
 }
+
+/* Same for inline iframe embeds in content (markdown YouTube links carry
+   their own responsive style; this also caps hand-written <iframe>s in raw
+   HTML). Music-page players are sized by their own rules and excluded. */
+.window-body iframe:not(.embed) {
+  max-width: 100%;
+}

package/src/styles/window.css

@@ -383,18 +383,13 @@ form#form > label {
 
 /* In a maximized "centered" window the content hugs the bottom left corner
    and grows upward and rightward as the space allows. */
-.window.maximized[data-theme~="centered"]
-  > .maximized-window-body
-  > ul {
+.window.maximized[data-theme~="centered"] > .maximized-window-body > ul {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
 }
 
-.window.maximized[data-theme~="centered"]
-  > .maximized-window-body
-  > ul
-  > li {
+.window.maximized[data-theme~="centered"] > .maximized-window-body > ul > li {
   justify-content: flex-start;
 }
 
@@ -485,6 +480,14 @@ form#form > label {
   }
 }
 
+/* YouTube players are 16:9 — size them from their width instead of a
+   fixed pixel height (or the mobile square above, which letterboxes
+   video). Declared after the media block so it wins the cascade. */
+.embed-youtube {
+  aspect-ratio: 16 / 9;
+  height: auto;
+}
+
 .music-favourite-link-window ul {
   min-width: 100%;
 }

package/test/deploy-pipeline.test.js

@@ -0,0 +1,73 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { test } from "node:test";
+
+const pkg = JSON.parse(readFileSync("package.json", "utf8"));
+const scripts = pkg.scripts;
+const renderYaml = readFileSync("render.yaml", "utf8");
+const ciYml = readFileSync(".github/workflows/ci.yml", "utf8");
+
+/**
+ * The deploy end (Render) must stay cheap and side-effect-free: it builds
+ * the committed tree and statically gates on the committed drift report.
+ * Everything expensive or stateful — content refresh, checksums, live
+ * baseline fetches — belongs to `build:gated` (CI, build:local) only.
+ */
+test("the deploy build neither regenerates content nor runs the checksums pipeline", () => {
+  const build = scripts.build;
+  assert.match(build, /vite build/);
+  assert.doesNotMatch(build, /checksums/);
+  assert.doesNotMatch(build, /refresh/);
+});
+
+test("build:gated is the full pipeline: build + checksums", () => {
+  assert.equal(scripts["build:gated"], "npm run build && npm run checksums");
+});
+
+test("build:local refreshes soundcloud, then gated build, then the gate", () => {
+  const local = scripts["build:local"];
+  assert.match(local, /refresh:content/);
+  assert.match(local, /refresh:soundcloud/);
+  const refreshAt = local.indexOf("refresh:soundcloud");
+  const gatedAt = local.indexOf("build:gated");
+  const gateAt = local.indexOf("verify:policy");
+  assert.ok(refreshAt !== -1 && gatedAt !== -1 && gateAt !== -1);
+  assert.ok(refreshAt < gatedAt, "content refresh must precede the build");
+  assert.ok(gatedAt < gateAt, "the gate must consume the fresh drift report");
+});
+
+test("build:local commits the refreshed snapshot before the dev preview", () => {
+  // npm run dev blocks forever; if it ran before `git add -A && git commit`
+  // the refreshed snapshots (soundcloud.json, checksums, drift report)
+  // would never be committed and the deployed site would trail releases.
+  const local = scripts["build:local"];
+  const commitAt = local.indexOf("git commit");
+  const devAt = local.indexOf("npm run dev");
+  assert.ok(commitAt !== -1 && devAt !== -1);
+  assert.ok(commitAt < devAt, "commit must precede the blocking dev server");
+});
+
+test("check:ci mirrors the CI subset with the gated build", () => {
+  assert.match(scripts["check:ci"], /build:gated/);
+  assert.match(scripts["check:ci"], /verify:policy/);
+});
+
+test("CI runs the gated build so the drift report is recomputed there", () => {
+  assert.match(ciYml, /npm run build:gated/);
+});
+
+test("Render statically gates on the uploaded report before any install", () => {
+  const commandLine = renderYaml
+    .split("\n")
+    .find((line) => line.trim().startsWith("buildCommand:"));
+  assert.ok(commandLine, "render.yaml must declare a buildCommand");
+  // The static gate runs before npm install: a failing report aborts the
+  // deploy before spending any real compute.
+  const gateAt = commandLine.indexOf("npm run verify:policy");
+  const installAt = commandLine.indexOf("npm install");
+  assert.ok(gateAt !== -1, "deploy must statically check the drift report");
+  assert.ok(installAt !== -1 && gateAt < installAt);
+  // And it must not re-run the pipeline it gated.
+  assert.doesNotMatch(commandLine, /checksums/);
+  assert.doesNotMatch(commandLine, /refresh/);
+});

package/test/embeds.test.js

@@ -0,0 +1,89 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import {
+  resolveEmbed,
+  youtubeVideoId,
+  youTubeThumbnail,
+} from "../src/lib/embeds.ts";
+
+test("youtubeVideoId parses every common URL form", () => {
+  const cases = [
+    ["https://youtu.be/n_L-E8K_gcg", "n_L-E8K_gcg"],
+    ["https://www.youtube.com/watch?v=n_L-E8K_gcg", "n_L-E8K_gcg"],
+    ["https://youtube.com/watch?v=n_L-E8K_gcg&t=30s", "n_L-E8K_gcg"],
+    ["https://m.youtube.com/watch?v=n_L-E8K_gcg", "n_L-E8K_gcg"],
+    ["https://music.youtube.com/watch?v=n_L-E8K_gcg", "n_L-E8K_gcg"],
+    ["https://www.youtube.com/embed/n_L-E8K_gcg", "n_L-E8K_gcg"],
+    ["https://www.youtube.com/shorts/n_L-E8K_gcg", "n_L-E8K_gcg"],
+    ["https://www.youtube.com/live/n_L-E8K_gcg", "n_L-E8K_gcg"],
+    ["https://www.youtube-nocookie.com/embed/n_L-E8K_gcg", "n_L-E8K_gcg"],
+  ];
+  for (const [url, id] of cases) {
+    assert.equal(youtubeVideoId(url), id, url);
+  }
+});
+
+test("youtubeVideoId rejects playlists, other sites and junk", () => {
+  const rejects = [
+    "not a url",
+    "/relative/path",
+    "#clippy",
+    "https://example.com/watch?v=n_L-E8K_gcg",
+    "https://www.youtube.com/playlist?list=PLAOwLA0fz3HQCtJ5",
+    "https://www.youtube.com/watch?v=n_L-E8K_gcg&list=PLAOwLA0fz3HQCtJ5",
+    "https://youtu.be/n_L-E8K_gcg?list=PLAOwLA0fz3HQCtJ5",
+    "https://www.youtube.com/watch", // no v
+    "https://www.youtube.com/watch?v=not a valid id",
+  ];
+  for (const url of rejects) {
+    assert.equal(youtubeVideoId(url), null, url);
+  }
+});
+
+test("resolveEmbed keeps playlists as plain links (they are often unlisted)", () => {
+  assert.equal(
+    resolveEmbed("https://www.youtube.com/watch?v=x&list=PLAOwLA0fz3HQCtJ5"),
+    null,
+  );
+  assert.equal(
+    resolveEmbed("https://www.youtube.com/playlist?list=PLAOwLA0fz3HQCtJ5"),
+    null,
+  );
+});
+
+test("resolveEmbed maps youtube videos to embed cards", () => {
+  const spec = resolveEmbed("https://youtu.be/n_L-E8K_gcg");
+  assert.equal(spec?.provider, "youtube");
+  assert.equal(spec?.label, "YouTube");
+  assert.equal(spec?.src, "https://www.youtube.com/embed/n_L-E8K_gcg");
+  // No fixed height: 16:9 players size from their width via CSS.
+  assert.equal(spec?.height, undefined);
+});
+
+test("resolveEmbed gives fixed-aspect players a fixed height", () => {
+  assert.equal(resolveEmbed("https://open.spotify.com/track/abc")?.height, 152);
+  assert.equal(
+    resolveEmbed("https://soundcloud.com/artist/track")?.height,
+    250,
+  );
+});
+
+test("youTubeThumbnail builds the maxres thumbnail for video URLs only", () => {
+  assert.equal(
+    youTubeThumbnail("https://www.youtube.com/watch?v=n_L-E8K_gcg"),
+    "https://i.ytimg.com/vi/n_L-E8K_gcg/maxresdefault.jpg",
+  );
+  assert.equal(
+    youTubeThumbnail("https://youtu.be/n_L-E8K_gcg"),
+    "https://i.ytimg.com/vi/n_L-E8K_gcg/maxresdefault.jpg",
+  );
+  // Shorts now get thumbnails too (the old parser missed them).
+  assert.equal(
+    youTubeThumbnail("https://www.youtube.com/shorts/n_L-E8K_gcg"),
+    "https://i.ytimg.com/vi/n_L-E8K_gcg/maxresdefault.jpg",
+  );
+  assert.equal(
+    youTubeThumbnail("https://www.youtube.com/playlist?list=PLAOwLA0fz3HQCtJ5"),
+    null,
+  );
+});