website-xp-phone 2.2.1 → 2.2.11

package/src/window/Window.tsx

@@ -1,11 +1,12 @@
-import { useEffect } from "react";
-import { createPortal } from "react-dom";
-import { playLayeredAudio } from "@/lib/audio";
+import { useEffect, useRef } from "react";
+import { playLayeredAudio, playMinimizeClick } from "@/lib/audio";
 import { getClippyState } from "@/lib/clippy";
 import { Md } from "@/lib/markdown";
+import { suppressNextSlideClick } from "@/themes/pageSlide";
 import { CopyAddon } from "./CopyAddon";
 import { BannerView, EmbedView } from "./Embed";
 import { OkButton } from "./OkButton";
+import { MaximizedWindow, useMaximizedController } from "./MaximizedWindow";
 import { ResourceEmbed } from "./ResourceEmbed";
 import { TitleBar } from "./TitleBar";
 import type { WindowChild, WindowNode } from "./model";
@@ -14,7 +15,6 @@ import { dataTheme, forcesExpanded } from "./themes";
 import { hasTheme } from "./model";
 
 const CLOSE_SOUND = "/crunchy_kick.ogg";
-const MINIMIZE_SOUND = "/Click.ogg";
 
 function Children({ items }: { items: WindowChild[] }) {
   return (
@@ -63,6 +63,13 @@ function PermalinkButton({ node }: { node: WindowNode }) {
   return <button onClick={onClick}>Permalink</button>;
 }
 
+/** The maximized rail's dismiss button for linked windows: Cancel closes
+ * the fullscreen view without touching OK's link (the dialog OK/Cancel
+ * pair — OK confirms through the link, Cancel backs out). */
+function CancelButton({ onClose }: { onClose: () => void }) {
+  return <button onClick={onClose}>Cancel</button>;
+}
+
 function Body({
   node,
   expanded,
@@ -97,16 +104,19 @@ function Body({
   );
 
   // Maximized: the rail sits BELOW the content in normal flow — content on
-  // top, then OK + Permalink. margin-top: auto only pushes the rail to the
-  // bottom edge when the window is taller than its content, so nothing ever
-  // scrolls underneath it. OK keeps its regular function (navigate when
-  // linked) and closes the fullscreen view otherwise (via onOk).
+  // top, then OK (+ Cancel for linked windows) + Permalink. Dialog rules:
+  // OK keeps its native meaning — follow the link on linked windows,
+  // dismiss on link-less ones — while Cancel is the explicit dismiss
+  // affordance that leaves the link untouched. margin-top: auto only
+  // pushes the rail to the bottom edge when the window is taller than
+  // its content, so nothing ever scrolls underneath it.
   if (maximized) {
     return (
       <div className="maximized-content-col">
         {content}
         <div className="ok-row ok-row-bottom">
           <OkButton node={node} onOk={node.link ? undefined : onOk} />
+          {node.link && onOk && <CancelButton onClose={onOk} />}
           <PermalinkButton node={node} />
         </div>
       </div>
@@ -139,21 +149,37 @@ export function Window({ node }: { node: WindowNode }) {
   const leaves = node.depth === 0 && onLeave;
   const flags = flagsOf(node.id);
   const maximized = Boolean(flags.maximized);
-
-  /** Exiting the fullscreen view: click sound + restore into the page. */
-  const exitFullscreen = () => {
-    playLayeredAudio(MINIMIZE_SOUND);
-    patch(node.id, { maximized: false });
-  };
+  const windowRef = useRef<HTMLDivElement | null>(null);
+  const maximizedCtl = useMaximizedController(
+    node.id,
+    patch,
+    flagsOf,
+    windowRef,
+  );
 
   useEffect(() => {
     if (!maximized) return;
     const onKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape") exitFullscreen();
+      // Escape restores silently (no sound, no slide) like every other
+      // non-minimize exit — no other key does.
+      if (event.key === "Escape") maximizedCtl.dismiss();
     };
     document.addEventListener("keydown", onKey, true);
     return () => document.removeEventListener("keydown", onKey, true);
-  }, [maximized, node.id, patch]);
+  }, [maximized, node.id, patch, maximizedCtl]);
+
+  // Mobile: the maximized window's hash entry is a history PUSH, so the
+  // OS back button removes it — the hash leaves this window first, which
+  // dismisses the overlay (instead of ever leaving the page).
+  useEffect(() => {
+    if (!maximized) return;
+    if (!window.matchMedia("(max-width: 768px)").matches) return;
+    const onHash = () => {
+      if (location.hash !== `#${node.id}`) maximizedCtl.dismiss();
+    };
+    window.addEventListener("hashchange", onHash);
+    return () => window.removeEventListener("hashchange", onHash);
+  }, [maximized, node.id, maximizedCtl]);
 
   if (flags.closed) return null;
 
@@ -177,40 +203,52 @@ export function Window({ node }: { node: WindowNode }) {
   const expanded =
     forcesExpanded(node) || Boolean(flags.expanded || node.embed) || maximized;
 
-  // Minimize and Close share the same window behaviour. Close consults the
-  // window-close-attempt event first: only refusals play the crunchy kick
-  // and keep the window open. Leaving the fullscreen view is the minimize
-  // sound + restore-into-the-page for every exit (title bar, Escape, or
-  // OK); the ✕ close from fullscreen restores silently. Outside of
-  // fullscreen, minimize keeps its page-exit/collapse roles.
+  // Minimize and Close share the same window behaviour. Sounds are pinned
+  // to their moments: the minimize click belongs to the title-bar
+  // minimize and the ✕ cross on a MAXIMIZED window, the crunchy kick to
+  // the ✕ close on an inline window, navigation gets its own click
+  // (pageSlide). Escape and OK stay silent.
   const minimize = () => {
     if (maximized) {
-      exitFullscreen();
+      // The title-bar minimize is the ONLY dismissal that plays the
+      // click + slide-off (Escape, OK, ✕ and the backdrop restore
+      // silently).
+      playMinimizeClick();
+      maximizedCtl.dismissWithSlide();
+      return;
+    }
+    if (leaves) {
+      // Navigation is the fold here: pageSlide animates every departing
+      // window (and plays the minimize click). Don't fold twice.
+      leaves();
       return;
     }
-    if (leaves) leaves();
-    else patch(node.id, { expanded: false, maximized: false });
+    // Inline windows collapse to their title bar — silently, with no
+    // depart animation (the minimize click and the slide-off belong to
+    // the title-bar minimize on a maximized window, and to navigation).
+    patch(node.id, { expanded: false, maximized: false });
   };
 
   const close = () => {
-    // Windows themed "funny" ARE the joke — pressing their ✕ always
-    // crunches, even when the close goes through normally.
+    if (maximized) {
+      // ✕ on a maximized window = a minimize: restores into the page
+      // flow with the minimize click — no crunchy kick, no slide.
+      playMinimizeClick();
+      maximizedCtl.dismiss();
+      return;
+    }
+    // The crunchy kick backs every inline ✕ press: refused closes
+    // (Clippy veto, "funny" windows) and successful ones alike.
+    playLayeredAudio(CLOSE_SOUND);
     const funnyClose = hasTheme(node, "funny");
-    // The crunchy kick plays only when a window refuses to close (Clippy
-    // saying no); successful closes pass silently and then
-    // park/restore/leave as before.
+    // Refusal keeps the window open (see window-close-attempt below);
+    // successful closings park/restore/leave after the crunch.
     const refused = !document.dispatchEvent(
       new CustomEvent("window-close-attempt", { cancelable: true }),
     );
-    if (funnyClose || refused) playLayeredAudio(CLOSE_SOUND);
-    // "funny" windows refuse outright: the kick plays, the window stays.
+    // "funny" windows refuse outright: the kick played, the window stays.
     if (funnyClose) return;
     if (!refused) {
-      if (maximized) {
-        // ✕ from fullscreen: restore into the page, no sound.
-        patch(node.id, { maximized: false });
-        return;
-      }
       // Easter egg: while Clippy is on screen, ✕ parks the window instead
       // of leaving the page — the mascot's unhide list offers it back
       // (restore). Never on leave-on-close pages (Projects), where ✕ means
@@ -219,14 +257,19 @@ export function Window({ node }: { node: WindowNode }) {
         patch(node.id, { closed: true });
         return;
       }
+      if (leaves) {
+        // ✕ on a page-exit window navigates with the kick as its sound:
+        // the navigation fold the close triggers stays silent.
+        suppressNextSlideClick();
+      }
       minimize();
       return;
     }
-    // (Refusals and funny windows played the crunchy kick above.)
   };
 
   const window_ = (
     <div
+      ref={windowRef}
       id={maximized ? undefined : node.id}
       className={[
         "window",
@@ -242,10 +285,38 @@ export function Window({ node }: { node: WindowNode }) {
         node={node}
         maximized={maximized}
         onMinimize={minimize}
-        onMaximize={() => patch(node.id, { maximized: !maximized })}
+        onMaximize={() => {
+          if (!maximized) {
+            maximizedCtl.maximize();
+            return;
+          }
+          // Restore button: instant dismiss (silent, no slide) + hash
+          // hand-off.
+          maximizedCtl.dismiss();
+        }}
         onClose={close}
       />
-      {!flags.minimized && (
+      {flags.minimized ? (
+        // Minimized windows keep an OK row as their only interior
+        // affordance: pressing it restores and reveals the window.
+        <div className="window-body window-minimized-body">
+          <div className="ok-row ok-row-bottom">
+            <button
+              onClick={() => {
+                patch(node.id, { minimized: false, expanded: true });
+                requestAnimationFrame(() =>
+                  windowRef.current?.scrollIntoView({
+                    behavior: "smooth",
+                    block: "start",
+                  }),
+                );
+              }}
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      ) : (
         <div
           className={`window-body${maximized ? " maximized-window-body" : ""}`}
         >
@@ -253,23 +324,28 @@ export function Window({ node }: { node: WindowNode }) {
             node={node}
             expanded={expanded}
             maximized={maximized}
-            // OK restores the window into the page when it has no link to
-            // follow; linked windows keep their navigate-on-OK behaviour.
-            // Deliberately silent: the minimize click (Click.ogg) is for the
-            // title bar / Escape paths only.
-            onOk={
-              maximized ? () => patch(node.id, { maximized: false }) : undefined
-            }
+            // OK is the dismiss affordance in fullscreen: silent close,
+            // no slide — the departing animation is the minimize's alone.
+            // OK on a maximized window: dismiss AND reveal its content
+            // (the returned window opens along with its direct children).
+            onOk={maximized ? () => maximizedCtl.dismissRevealed() : undefined}
           />
         </div>
       )}
     </div>
   );
 
-  return maximized
-    ? createPortal(
-        <div className="maximized-backdrop">{window_}</div>,
-        document.body,
-      )
-    : window_;
+  // The maximized chrome wraps the window in EVERY state: the window
+  // element stays in the last, stable child slot so its DOM identity
+  // survives maximize/dismiss round-trips, while the dimmed layer and
+  // the reserved flow slot appear only while lifted.
+  return (
+    <MaximizedWindow
+      maximized={maximized}
+      controller={maximizedCtl}
+      nodeId={node.id}
+      onOutsideClick={maximizedCtl.dismiss}
+      windowEl={window_}
+    />
+  );
 }

package/src/window/model.ts

@@ -50,6 +50,11 @@ function buildNode(section: Section, id: string, depth: number): WindowNode {
       children.push({ kind: "element", element: item });
     } else if ("banner" in item) {
       children.push({ kind: "banner", banner: item.banner });
+    } else if ("include" in item) {
+      // Directives are resolved at content load (src/content/index.ts);
+      // reaching the model means an unknown/broken include slipped
+      // through — fail loudly instead of rendering an opaque object.
+      throw new Error(`Unresolved include directive: ${String(item.include)}`);
     } else if (isEmbed(item)) {
       children.push({ kind: "embed", embed: item });
     } else {
@@ -92,6 +97,23 @@ export function flatten(nodes: WindowNode[]): WindowNode[] {
   ]);
 }
 
+/** Every descendant window id beneath a node (the node itself excluded) —
+ * used to reveal a whole subtree when arriving via a hash href. */
+export function descendantIds(windows: WindowNode[], rootId: string): string[] {
+  const root = windows.find((w) => w.id === rootId);
+  const acc: string[] = [];
+  const walk = (node: WindowNode) => {
+    for (const child of node.children) {
+      if (child.kind === "window") {
+        acc.push(child.node.id);
+        walk(child.node);
+      }
+    }
+  };
+  if (root) walk(root);
+  return acc;
+}
+
 /** "0.1.2" -> ["0", "0.1", "0.1.2"] */
 export function lineage(id: string): string[] {
   const parts = id.split(".");

package/src/window/state.tsx

@@ -7,7 +7,7 @@ import {
   type ReactNode,
 } from "react";
 import { clearHidden, publishHidden } from "./hidden";
-import { flatten, lineage, type WindowNode } from "./model";
+import { descendantIds, flatten, lineage, type WindowNode } from "./model";
 
 export type PermalinkMode = "hash" | "post";
 
@@ -51,6 +51,27 @@ type WindowStore = {
 
 const Ctx = createContext<WindowStore | null>(null);
 
+/** Seeds the store synchronously from the URL: if the location names a
+ * target window (?post=slug / #tree-index), it starts maximized with the
+ * whole subtree expanded on the FIRST render. usePermalinkTarget's
+ * post-paint effect normally applies these flags a frame later, but then
+ * the page first paints the un-maximized main DOM and scrolls — the
+ * maximized element pops into view over a polluted first frame. Rendering
+ * the flags from the start shows the maximized overlay immediately, with
+ * nothing below it ever committed. */
+function initialFlags(roots: WindowNode[]): State {
+  const windows = flatten(roots);
+  const target = findTarget(windows);
+  if (!target) return {};
+  const state: State = {
+    [target.id]: { maximized: true, minimized: false, expanded: true },
+  };
+  for (const id of descendantIds(windows, target.id)) {
+    state[id] = { expanded: true, minimized: false };
+  }
+  return state;
+}
+
 export function WindowProvider({
   roots,
   permalinkMode = "hash",
@@ -62,7 +83,7 @@ export function WindowProvider({
   onLeave?: (() => void) | undefined;
   children: ReactNode;
 }) {
-  const [state, dispatch] = useReducer(reducer, {});
+  const [state, dispatch] = useReducer(reducer, [], () => initialFlags(roots));
   const windows = useMemo(() => flatten(roots), [roots]);
 
   const store = useMemo<WindowStore>(() => {
@@ -119,50 +140,53 @@ export const toSlug = (heading: string): string =>
     .replace(/[^\p{L}\p{N}]+/gu, "-")
     .replace(/^-+|-+$/g, "");
 
-/** Blog posts are addressed as ?post=slug, everything else by #tree-index. */
+/** Blog posts are addressed as ?post=slug, everything else by #tree-index.
+ * The depth-0 root is excluded from ?post= addressing: findTarget's
+ * slug lookup only dives under the root, so emitting the slug for it
+ * generates a dead permalink from the very rail that shows the button. */
 export function permalinkFor(node: WindowNode, mode: PermalinkMode): string {
   const { origin, pathname } = window.location;
-  if (mode === "post" && node.heading) {
+  if (mode === "post" && node.depth > 0 && node.heading) {
     return `${origin}${pathname}?post=${encodeURIComponent(toSlug(node.heading))}`;
   }
   return `${origin}${pathname}#${node.id}`;
 }
 
-function findTarget(windows: WindowNode[], mode: PermalinkMode) {
-  if (mode === "post") {
-    const slug = new URLSearchParams(location.search).get("post");
-    return slug
-      ? windows.find(
-          (w) => w.depth > 0 && w.heading && toSlug(w.heading) === slug,
-        )
-      : undefined;
+/** The window named by the URL. BOTH link shapes land on any page:
+ * ?post=slug (the blog's permalink mode) addresses a post by heading, and
+ * #tree-index addresses any window by id. ?post wins when both are set
+ * (they could name different windows); the hash is the fallback. */
+function findTarget(windows: WindowNode[]) {
+  const slug = new URLSearchParams(location.search).get("post");
+  if (slug) {
+    const post = windows.find(
+      (w) => w.depth > 0 && w.heading && toSlug(w.heading) === slug,
+    );
+    if (post) return post;
   }
   const hash = location.hash.slice(1);
   return windows.find((w) => w.id === hash);
 }
 
-/** Opens the window named by the URL, once per page load. Hash targets
- * (cross-page links and permalinks) open their section maximized in the
- * foreground; blog ?post= targets keep the expand-and-scroll behaviour. */
-export function usePermalinkTarget(mode: PermalinkMode) {
+/** Confirms the window named by the URL, once per page load. The store is
+ * already seeded synchronously with the target maximized (initialFlags)
+ * so the FIRST paint shows the fullscreen view with no inline flash;
+ * this effect only re-applies the identical, idempotent patches. Both
+ * link shapes arrive the same way: the target opens maximized in the
+ * foreground with its whole subtree expanded. */
+export function usePermalinkTarget() {
   const { windows, expand, patch } = useWindowStore();
   useEffect(() => {
-    const target = findTarget(windows, mode);
+    const target = findTarget(windows);
     if (!target) return;
-    if (mode === "hash") {
-      expand(target.id);
-      patch(target.id, { maximized: true });
-      return;
-    }
     expand(target.id);
-    const timer = setTimeout(
-      () =>
-        document
-          .getElementById(target.id)
-          ?.scrollIntoView({ behavior: "smooth" }),
-      100,
-    );
-    return () => clearTimeout(timer);
+    // Arriving at a permalink reveals the target's whole subtree, not
+    // just its own section (descendants expand, stale minimized flags
+    // clear; closed/parked windows stay parked), then lifts it.
+    for (const id of descendantIds(windows, target.id)) {
+      patch(id, { expanded: true, minimized: false });
+    }
+    patch(target.id, { maximized: true, minimized: false });
   }, []);
 }
 

package/test/asset-reference.test.js

@@ -0,0 +1,53 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import {
+  canonicalizeAssetRefs,
+  isCanonicalizablePath,
+} from "../scripts/asset-reference.mjs";
+
+test("strips Vite content hashes from hashed asset references", () => {
+  const build = (hashes) => `<html><head>
+  <script type="module" crossorigin src="/assets/index-${hashes.index}.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/markdown-${hashes.markdown}.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-${hashes.index}.css">
+</head></html>`;
+
+  // Two builds whose bundles rehashed but whose authored content is identical
+  // must canonicalize to the same text.
+  const first = build({ index: "C-jayB4T", markdown: "4zwTcHc2" });
+  const second = build({ index: "z86-hiKg", markdown: "DKJpDlSZ" });
+  assert.equal(canonicalizeAssetRefs(first), canonicalizeAssetRefs(second));
+  assert.notEqual(first, second);
+});
+
+test("hashes in asset names are stripped, the extension is kept", () => {
+  assert.equal(
+    canonicalizeAssetRefs('href="/assets/chunk-Ab12Cd34.js"'),
+    'href="/assets/chunk.js"',
+  );
+  assert.equal(
+    canonicalizeAssetRefs('href="/assets/index-Ab12Cd34.css"'),
+    'href="/assets/index.css"',
+  );
+});
+
+test("non-hashed and non-asset references are left untouched", () => {
+  const page = `<a href="/blog/random/google.md">doc</a>
+  <link rel="canonical" href="https://akinevz.com/configs.html">
+  <img src="/blog/P5kKjYA.png">
+  <script src="https://example.com/lib.js"></script>`;
+  assert.equal(canonicalizeAssetRefs(page), page);
+});
+
+test("hyphenated asset names canonicalize correctly", () => {
+  assert.equal(
+    canonicalizeAssetRefs('src="/assets/react-core-9sdj916r.js"'),
+    'src="/assets/react-core.js"',
+  );
+});
+
+test("only HTML paths are canonicalized for drift comparison", () => {
+  assert.equal(isCanonicalizablePath("configs/index.html"), true);
+  assert.equal(isCanonicalizablePath("blog/random/google.md"), false);
+  assert.equal(isCanonicalizablePath("assets/index-Ab12Cd34.js"), false);
+});

package/test/content.test.js

@@ -20,28 +20,82 @@ test("route paths are unique and a /404 route exists", () => {
 test("page aliases target an existing route (+optional section anchor)", () => {
   const paths = new Set(pages.map((r) => r.path));
   const anchors = new Set(
-    readFileSync("src/content/addons.json", "utf8").match(/"anchor"\s*:\s*"([^"]+)"/g) ?? [],
+    readFileSync("src/content/addons.json", "utf8").match(
+      /"anchor"\s*:\s*"([^"]+)"/g,
+    ) ?? [],
   );
   for (const route of pages) {
     if (!route.alias) continue;
     const [target, hash] = route.alias.split("#");
-    assert.ok(paths.has(target), `${route.path}: alias target ${target} exists`);
+    assert.ok(
+      paths.has(target),
+      `${route.path}: alias target ${target} exists`,
+    );
     if (hash && target === "/wow" && hash === "addons")
       assert.ok(anchors.size > 0, "wow#addons anchor exists in addons.json");
   }
 });
 
+test("include directives target a registered content file", async () => {
+  const { readdirSync } = await import("node:fs");
+  const indexTs = readFileSync("src/content/index.ts", "utf8");
+  const jsonFiles = readdirSync("src/content").filter((f) =>
+    f.endsWith(".json"),
+  );
+  const directives = jsonFiles.flatMap(
+    (file) =>
+      readFileSync(`src/content/${file}`, "utf8").match(
+        /"include"\s*:\s*"([^"]+)"/g,
+      ) ?? [],
+  );
+  for (const directive of directives) {
+    const name = directive.match(/"include"\s*:\s*"([^"]+)"/)[1];
+    const target = `src/content/${name}.json`;
+    assert.ok(
+      readFileSync(target, "utf8").length > 0,
+      `include target ${target} exists`,
+    );
+    assert.match(
+      indexTs,
+      new RegExp(`\\b${name}\\b`),
+      `${name} registered in includeRegistry`,
+    );
+  }
+});
+
 test("every project document is complete and routable", async () => {
   const { readdirSync } = await import("node:fs");
-  const files = readdirSync("src/content/projects").filter((f) => f.endsWith(".json"));
+  const files = readdirSync("src/content/projects").filter((f) =>
+    f.endsWith(".json"),
+  );
   assert.ok(files.length > 0);
   for (const file of files) {
-    const project = JSON.parse(readFileSync(`src/content/projects/${file}`, "utf8"));
+    const project = JSON.parse(
+      readFileSync(`src/content/projects/${file}`, "utf8"),
+    );
     for (const key of ["slug", "title", "description", "github"]) {
       assert.equal(typeof project[key], "string", `${file}: ${key}`);
     }
     assert.ok(project.content, `${file}: content`);
-    const path = project.path ?? `/projects/${project.slug}`;
-    assert.ok(!pages.some((r) => r.path === path), `${file}: path clashes with pages.json`);
+    assert.equal(
+      project.path,
+      undefined,
+      `${file}: standardised under /projects/${project.slug}`,
+    );
+    const path = `/projects/${project.slug}`;
+    assert.ok(
+      !pages.some((r) => r.path === path),
+      `${file}: path clashes with pages.json`,
+    );
+  }
+  // every project is also reachable as /<slug> via a generated alias route
+  const slugs = files.map(
+    (f) => JSON.parse(readFileSync(`src/content/projects/${f}`, "utf8")).slug,
+  );
+  for (const slug of slugs) {
+    assert.ok(
+      !pages.some((r) => r.path === `/${slug}`),
+      `${slug}: short-hand must not clash with pages.json`,
+    );
   }
 });

package/test/mutable-assets.test.js

@@ -0,0 +1,27 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { isMutablePath } from "../scripts/mutable-assets.mjs";
+
+test("blog post artifacts are mutable, so new posts are never drift", () => {
+  // posts at the blog root and in subdirectories
+  assert.equal(isMutablePath("blog/new-post.md"), true);
+  assert.equal(isMutablePath("blog/random/google.md"), true);
+  // post attachments
+  assert.equal(isMutablePath("blog/P5kKjYA.png"), true);
+  assert.equal(isMutablePath("blog/exhausted.txt"), true);
+  // non-ASCII post filenames survive path checks
+  assert.equal(isMutablePath("blog/рунисч-глоссарий.md"), true);
+  // embedded post documents
+  assert.equal(isMutablePath("stories/1.md"), true);
+});
+
+test("blog pages remain mutable", () => {
+  assert.equal(isMutablePath("blog.html"), true);
+  assert.equal(isMutablePath("blog/index.html"), true);
+});
+
+test("stable non-blog artifacts are not mutable", () => {
+  assert.equal(isMutablePath("configs.html"), false);
+  assert.equal(isMutablePath("spinner.svg"), false);
+  assert.equal(isMutablePath("assets/index-Ab12Cd34.css"), false);
+});