diff --git a/framework/backend/entry-node.ts b/framework/backend/entry-node.ts
index 3402f2230d789f341a20528a7ac34a9e9fd87c7b..899d4aef43c0ee2cf6315326533ce4088634f6c0 100644
--- a/framework/backend/entry-node.ts
+++ b/framework/backend/entry-node.ts
@@ -8,7 +8,9 @@ const server = serve({
   fetch: app.default.fetch,
   port: Number(process.env.PORT ?? 3000),
 }, ({ address, port }) => {
-  if (address === "::") address = "localhost";
+  if (address === "::" || address === "127.0.0.1") {
+    address = os.hostname().replace(/\.local$/, "");
+  }
   console.info(url.format({
     protocol,
     hostname: address,
@@ -36,6 +38,7 @@ declare global {
   var CLOVER_SERVER_ENTRY: string;
 }
 
-import url from "node:url";
+import * as os from "os";
+import * as url from "node:url";
 import { serve } from "@hono/node-server";
 import process from "node:process";
diff --git a/framework/bundle.ts b/framework/bundle.ts
index cc05cef76ad33ac39a515d4e0fe4f92e9713b7ac..5c4bcfa82dd8b6b06d9f64874ee582179d95a96e 100644
--- a/framework/bundle.ts
+++ b/framework/bundle.ts
@@ -39,6 +39,18 @@ export async function bundleClientJavaScript(
   const clientPlugins: esbuild.Plugin[] = [
     projectRelativeResolution(),
     markoViaBuildCache(),
+    {
+      name: "mark css external",
+      setup(b) {
+        b.onResolve({ filter: /\.css$/ }, () => ({
+          path: ".",
+          namespace: "dropped",
+        }));
+        b.onLoad({ filter: /./, namespace: "dropped" }, () => ({
+          contents: "",
+        }));
+      },
+    },
   ];
 
   using _ = io.start(`bundle ${entryPoints.length} files`);
@@ -60,6 +72,7 @@ export async function bundleClientJavaScript(
       outdir: "out!",
       plugins: clientPlugins,
       write: false,
+      external: ["/js/scripts/vendor/dash.js", "/js/scripts/vendor/hls.js"],
       define: {
         ASSERT: "console.assert",
         MIME_INLINE_DATA: JSON.stringify(mime.rawEntriesText),
@@ -290,7 +303,7 @@ export async function bundleServerJavaScript({
           "globalThis.CLOVER_SERVER_ENTRY": JSON.stringify(entry),
         },
         external: Object.keys(pkg.dependencies).filter(
-          (x) => !x.startsWith("@paperclover"),
+          (x) => x !== "lib",
         ),
       });
       await trackEsbuild(io, metafile);
diff --git a/framework/engine/marko-runtime.ts b/framework/engine/marko-runtime.ts
index 95cd4dbcd4e0b0e09cba5e0db96c0678c8493fe7..beb038ad467c32635fc7dcaf2bb756ceee8a077c 100644
--- a/framework/engine/marko-runtime.ts
+++ b/framework/engine/marko-runtime.ts
@@ -27,7 +27,6 @@ export const _template: typeof marko._template = (
       return markoResult.then(render.raw);
     }
     const rr = markoResult.toString();
-    console.log({ rr });
     return render.raw(rr);
   }
   wrap.render = renderFn;
diff --git a/framework/engine/render.ts b/framework/engine/render.ts
index 9f733cc41335045c8fbe0fd7ff23792caf52b695..8fa81556fd16cdd0a329bdfe4a46ebc6a12504d4 100644
--- a/framework/engine/render.ts
+++ b/framework/engine/render.ts
@@ -6,6 +6,8 @@
 // Add-ons to the rendering engine can provide opaque data, And retrieve it
 // within component calls with 'getAddonData'. For example, 'sitegen' uses this
 // to track needed client scripts without introducing patches to the engine.
+//
+// This module is not production ready
 export let current: State | null = null;
 export function setCurrent(r: State | null) {
   current = r ?? null;
@@ -212,8 +214,7 @@ export function stringifyNode(node: ResolvedNode): string {
 }
 function stringifyElement(element: ResolvedElement) {
   const { 1: tag, 2: props, 3: children } = element;
-  let out = "<" + tag;
-  let needSpace = true;
+  let out = "<" + tag + " ";
   for (const prop in props) {
     const value = props[prop];
     if (!value || typeof value === "function") continue;
@@ -249,10 +250,10 @@ function stringifyElement(element: ResolvedElement) {
       case "key":
         continue;
     }
-    if (needSpace) ((out += " "), (needSpace = !attr.endsWith('"')));
+    if (!out.endsWith('"')) out += " ";
     out += attr;
   }
-  out += ">";
+  out = out.trimEnd() + ">";
   if (children) out += stringifyNode(children);
   if (
     tag !== "br" &&
diff --git a/framework/generate.ts b/framework/generate.ts
index 7e558e72efd51ea09aad279ea1cb1e20d56ccbb8..66d530a2a7bf93a4893de64dd65a6cb6de663958 100644
--- a/framework/generate.ts
+++ b/framework/generate.ts
@@ -369,10 +369,8 @@ export async function assembleAndWritePage(
 
       pageNode.passive = false;
 
-      const scripts = scriptIds
-        .map((ref) => UNWRAP(scriptMap[ref], `Missing script ${ref}`))
-        .map((x) => `{${x}}`)
-        .join("\n");
+      const scripts = sg.joinScripts(scriptIds
+        .map((ref) => UNWRAP(scriptMap[ref], `Missing script ${ref}`)));
 
       const buffer = sg.wrapDocument({
         body: html,
diff --git a/framework/incremental.ts b/framework/incremental.ts
index c7f91df9e857cc3a899c4b6a14d1f1657bf21f63..58fbba1fd402b254b3f068138b51a648f3437551 100644
--- a/framework/incremental.ts
+++ b/framework/incremental.ts
@@ -496,7 +496,7 @@ export class Io {
     return resolved;
   }
   async readFile(file: string) {
-    return fs.readFile(await this.trackFile(file), "utf-8");
+    return fs.readFile(await this.trackFile(file));
   }
   async readJson<T>(file: string) {
     return JSON.parse(await this.readFile(file)) as T;
diff --git a/framework/lib/lru.ts b/framework/lib/lru.ts
index 628b125b9c926c72d3e0126fc0d6473481afed09..f58d2e9ed78af6f1608e052258ff3b998bfba55d 100644
--- a/framework/lib/lru.ts
+++ b/framework/lib/lru.ts
@@ -94,7 +94,8 @@ export class Lru<K, V> extends Map<K, V> {
     this.#used += size;
     try {
       this.ensureUnusedCapacity(0);
-    } catch {
+    } catch (err) {
+      console.error(err);
       ASSERT(false, "capacity is already verified");
     }
     super.set(key, value);
diff --git a/framework/lib/meta.ts b/framework/lib/meta.ts
index 846551e663a2bd492cf07481c10c606f8bc39283..da20a51429068b2b88472738ac8ab00fed3aec6e 100644
--- a/framework/lib/meta.ts
+++ b/framework/lib/meta.ts
@@ -214,7 +214,7 @@ function renderMetadata(meta: Meta, template: Template): string {
   if (denyRobots) {
     out += `<meta name=robots content=noindex,nofollow>`;
   }
-  if (description) {
+  if (viewport) {
     out += `<meta name=viewport content=${attr(viewport)}>`;
   }
   if (canonical) {
diff --git a/framework/lib/mime.ts b/framework/lib/mime.ts
index af270bd3b3c5ac447dd8af59b5bfca336bceff3d..3913ebbab69054ed12b26c2d03992c8edfe332d9 100644
--- a/framework/lib/mime.ts
+++ b/framework/lib/mime.ts
@@ -18,7 +18,7 @@ const fullNames = new Map(entries.filter((x) => !x[0].startsWith(".")));
 export function contentTypeFor(file: string) {
   const slash = file.indexOf("/");
   if (slash !== -1) file = file.slice(slash + 1);
-  const dot = file.indexOf(".");
+  const dot = file.lastIndexOf(".");
   if (dot === -1) file = "." + file;
   else if (dot > 0) {
     let entry = fullNames.get(file);
diff --git a/framework/lib/mime.txt b/framework/lib/mime.txt
index ad6220bb80616c843b28316e8f814a89ca8d8d89..06af2f96260e0f3add34e7d81ba7dab195b0c310 100644
--- a/framework/lib/mime.txt
+++ b/framework/lib/mime.txt
@@ -42,7 +42,7 @@
 .jpg     image/jpeg
 .jpgv    video/jpeg
 .jxl     image/jxl
-.js      application/javascript
+.js      application/javascript;charset=utf-8
 .json    application/json
 .latex   application/x-latex
 .list    text/plain
diff --git a/framework/lib/sitegen.ts b/framework/lib/sitegen.ts
index 6f1bd0312f683b16373dad0126d622cd329ee85e..a25a464f5f82c8f3ac787e80f1abe5891d7a08b5 100644
--- a/framework/lib/sitegen.ts
+++ b/framework/lib/sitegen.ts
@@ -50,9 +50,7 @@ export type FontVars = Record<string, FontVariableAxis>;
 export type FontVariableAxis = number | [min: number, max: number];
 export type FontRange = string | number | { start: number; end: number };
 
-export const userData = render.userData<SitegenRender>(() => {
-  throw new Error("This function can only be used in a page (static or view)");
-});
+export const userData = render.userData<SitegenRender>(() => initRender());
 
 export interface SitegenRender {
   scripts: Set<string>;
@@ -78,13 +76,21 @@ export function wrapDocument({
   inlineCss: string;
   scripts: string;
 }) {
-  return `<!doctype html><html lang=en><head>${head}${
+  return `<!doctype html><html lang=en><head><meta charset=utf8>${head}${
     inlineCss ? `<style>${inlineCss}</style>` : ""
   }</head><body>${body}${
     scripts ? `<script>${scripts}</script>` : ""
   }</body></html>`;
 }
 
+export function joinScripts(scriptSources: string[]) {
+  const { length } = scriptSources;
+  if (scriptSources[0] == null) return "";
+  if (length === 1) return UNWRAP(scriptSources[0]);
+  return "[" + scriptSources.map((source) => `()=>{${source}}`).join(",") +
+    "].map(e=>e())";
+}
+
 import * as render from "#engine/render";
 import type * as meta from "./meta.ts";
 import type * as css from "../css.ts";
diff --git a/framework/lib/subprocess.ts b/framework/lib/subprocess.ts
index 6d2eec5905452d043dd59e9f53ea2bdfbfafd2f8..959e235d59fb3db67b863b75d7867458f6dd7920 100644
--- a/framework/lib/subprocess.ts
+++ b/framework/lib/subprocess.ts
@@ -3,76 +3,80 @@
 
 const execFileRaw = util.promisify(child_process.execFile);
 export const exec: typeof execFileRaw = ((
-  ...args: Parameters<typeof execFileRaw>
+    ...args: Parameters<typeof execFileRaw>
 ) =>
-  execFileRaw(...args).catch((e: any) => {
-    if (e?.message?.startsWith?.("Command failed")) {
-      if (e.code > 2 ** 31) e.code |= 0;
-      const code = e.signal ? `signal ${e.signal}` : `code ${e.code}`;
-      e.message = `${e.cmd.split(" ")[0]} failed with ${code}`;
-    }
-    throw e;
-  })) as any;
+    execFileRaw(...args).catch((e: any) => {
+        if (e?.message?.startsWith?.("Command failed")) {
+            if (e.code > 2 ** 31) e.code |= 0;
+            const code = e.signal ? `signal ${e.signal}` : `code ${e.code}`;
+            e.message = `${e.cmd.split(" ")[0]} failed with ${code}`;
+        }
+        throw e;
+    })) as any;
 
-const activePids = new Set<number>();
+// const activePids = new Set<number>();
 
 export interface SpawnOptions extends child_process.SpawnOptions {
-  cmd: string[];
+    cmd: string[];
 }
 export function spawn({ cmd, ...rest }: SpawnOptions) {
-  rest.detached ??= true;
-  const process = child_process.spawn(cmd[0]!, cmd.slice(1), rest);
-  const pid = rest.detached && process.pid ? -process.pid : process.pid;
-  if (pid) {
-    activePids.add(pid);
-    process.on("exit", () => void activePids.delete(pid));
-  }
-  return process;
+    // rest.detached ??= true;
+    const process = child_process.spawn(cmd[0]!, cmd.slice(1), rest);
+    // const pid = rest.detached && process.pid ? -process.pid : process.pid;
+    // if (pid) {
+    //   activePids.add(pid);
+    //   process.on("exit", () => void activePids.delete(pid));
+    // }
+    return process;
 }
 
 export interface ForkOptions extends child_process.ForkOptions {
-  cmd: string[];
+    cmd: string[];
 }
 
 export function fork({ cmd, ...rest }: ForkOptions) {
-  rest.detached ??= true;
-  const process = child_process.fork(cmd[0]!, cmd.slice(1), rest);
-  const pid = rest.detached && process.pid ? -process.pid : process.pid;
-  if (pid) {
-    activePids.add(pid);
-    process.on("exit", () => void activePids.delete(pid));
-  }
-  return process;
+    // rest.detached ??= true;
+    const process = child_process.fork(cmd[0]!, cmd.slice(1), rest);
+    // const pid = rest.detached && process.pid ? -process.pid : process.pid;
+    // if (pid) {
+    //     activePids.add(pid);
+    //     process.on("exit", () => void activePids.delete(pid));
+    // }
+    return process;
 }
 
 export async function spawnAndWait(opts: SpawnOptions) {
-  opts.stdio ??= ["ignore", "inherit", "inherit"];
-  const process = spawn(opts);
-  const output = Promise.all([
-    process.stdout ? Array.fromAsync(process.stdout).then(Buffer.concat) : null,
-    process.stderr ? Array.fromAsync(process.stderr).then(Buffer.concat) : null,
-  ]);
-  let [code, signal] = await events.EventEmitter.once(process, "exit") as [
-    number | null,
-    string | null,
-  ];
-  if (code !== 0) {
-    if (code !== null && code > 2 ** 31) code |= 0;
-    const exit = signal ? `signal ${signal}` : `code ${code}`;
-    throw new Error(`${opts.cmd[0]} failed with ${exit}`);
-  }
-  const [stdout, stderr] = await output;
-  return { stdout, stderr };
+    opts.stdio ??= ["ignore", "inherit", "inherit"];
+    const process = spawn(opts);
+    const output = Promise.all([
+        process.stdout
+            ? Array.fromAsync(process.stdout).then(Buffer.concat)
+            : null,
+        process.stderr
+            ? Array.fromAsync(process.stderr).then(Buffer.concat)
+            : null,
+    ]);
+    let [code, signal] = (await events.EventEmitter.once(process, "exit")) as [
+        number | null,
+        string | null,
+    ];
+    if (code !== 0) {
+        if (code !== null && code > 2 ** 31) code |= 0;
+        const exit = signal ? `signal ${signal}` : `code ${code}`;
+        throw new Error(`${opts.cmd[0]} failed with ${exit}`);
+    }
+    const [stdout, stderr] = await output;
+    return { stdout, stderr };
 }
 
-process.on("exit", () => {
-  for (const pid of activePids) {
-    console.info(`Kill ${Math.abs(pid)}`);
-    process.kill(pid, 9);
-  }
-});
+// process.on("exit", () => {
+//   for (const pid of activePids) {
+//     console.info(`Kill ${Math.abs(pid)}`);
+//     process.kill(pid, 9);
+//   }
+// });
 
-import * as process from "node:process";
+// import * as process from "node:process";
 import * as events from "node:events";
 import * as util from "node:util";
 import * as child_process from "node:child_process";
diff --git a/framework/lib/view.ts b/framework/lib/view.ts
index 7a424790a8fd8cdedf66674704a6801fe5fc604e..708295686a663e5376dcbcd491de7a15672a8172 100644
--- a/framework/lib/view.ts
+++ b/framework/lib/view.ts
@@ -83,7 +83,7 @@ export async function renderToString<K extends Key>(
     body,
     head: await renderedMetaPromise,
     inlineCss,
-    scripts: joinScripts(
+    scripts: sg.joinScripts(
       Array.from(
         sitegen!.scripts,
         (id) => UNWRAP(codegen.scripts[id], `Missing script ${id}`),
@@ -108,13 +108,6 @@ export function regenerate(tag: RegenKey) {
   }
 }
 
-function joinScripts(scriptSources: string[]) {
-  const { length } = scriptSources;
-  if (length === 0) return "";
-  if (0 in scriptSources) return scriptSources[0];
-  return scriptSources.map((source) => `{${source}}`).join(";");
-}
-
 import * as meta from "./meta.ts";
 import type * as hono from "#hono";
 import * as render from "#engine/render";
diff --git a/run.js b/run.js
index a78f57f33964cf781b0df3bf81f75d7d33e3537c..c891dc5606619eb95ea60ea6abf9dec74d9e605f 100644
--- a/run.js
+++ b/run.js
@@ -1,8 +1,9 @@
 // This file allows using Node.js in combination with
 // all available plugins. Usage: "node run <script>"
-import * as util from "node:util";
 import * as zlib from "node:zlib";
 import * as url from "node:url";
+import * as fs from "node:fs";
+import * as os from "node:os";
 import process from "node:process";
 
 // Disable experimental warnings (Type Stripping, etc)
@@ -23,7 +24,7 @@ try {
 
   // seems to fail in bun
   (await import("source-map-support")).install({ hookRequire: true });
-} catch {
+} catch (e) {
   const brand = process.versions.bun
     ? `bun ${process.versions.bun}`
     : process.versions.deno
@@ -33,8 +34,9 @@ try {
   globalThis.console.error(
     `sitegen depends on a node.js v24. your runtime is missing features.\n` +
       `this is node.js version ${process.version}${brandText}\n\n` +
-      `get node.js --> https://nodejs.org/en/download/current`,
+      `get node.js --> https://nodejs.org/en/download/current\n`,
   );
+  console.error(e);
   process.exit(1);
 }
 
@@ -53,6 +55,15 @@ process.on("uncaughtException", (error) => {
   process.exit(1);
 });
 
+if (fs.existsSync(".env")) {
+  const env = fs.readFileSync(".env", "utf-8").split("\n").map((x) =>
+    x.trim().split("=")
+  );
+  for (const [k, v] of env) {
+    process.env[k] = v;
+  }
+}
+
 // Load with hooks
 if (process.argv[1].startsWith(import.meta.filename.slice(0, -".js".length))) {
   if (process.argv.length == 2) {
@@ -82,9 +93,12 @@ if (process.argv[1].startsWith(import.meta.filename.slice(0, -".js".length))) {
       serve(
         {
           fetch: mod.default.fetch,
+          port: mod.port ?? 3000,
         },
         ({ address, port }) => {
-          if (address === "::") address = "::1";
+          if (address === "::" || address === "127.0.0.1") {
+            address = os.hostname().replace(/\.local$/, "");
+          }
           log.info(
             url.format({
               protocol,
diff --git a/src/admin.ts b/src/admin.ts
index f9ee787d56ab687bc47130c5489cfd0e5219ec0f..91d5435753441d64eead168de739f3958434bb05 100644
--- a/src/admin.ts
+++ b/src/admin.ts
@@ -12,9 +12,7 @@ function compareToken(token: string) {
 }
 
 export async function middleware(c: Context, next: Next) {
-  if (c.req.path.startsWith("/admin")) {
-    return adminInner(c, next);
-  }
+  if (c.req.path.startsWith("/admin")) return adminInner(c, next);
   return next();
 }
 
diff --git a/src/backend.ts b/src/backend.ts
index f2994f1c6d4d685643eb6f10807b10f865a26b28..a9bca66d19e4c47047a9e732886890e0c978cb77 100644
--- a/src/backend.ts
+++ b/src/backend.ts
@@ -11,6 +11,7 @@ app.use(admin.middleware);
 // Backends
 app.route("", require("./q+a/backend.ts").app);
 app.route("", require("./file-viewer/backend.tsx").app);
+app.route("", require("./friend-auth.ts").app);
 
 // Asset middleware has least precedence
 app.use(assets.middleware);
diff --git a/src/deploy.ts b/src/deploy.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e7ee235a69c35c75826fa938a3dd3d1573edf679
--- /dev/null
+++ b/src/deploy.ts
@@ -0,0 +1,51 @@
+export async function main() {
+  if (!process.argv.includes("-f")) await incr.restore();
+  await incr.compile(generate);
+
+  await rsync.spawn({
+    cwd: Path.resolve(import.meta.dirname).parent!.toString(),
+    args: [
+      "-a",
+      "-r",
+      "--progress",
+      "--delete",
+      "--exclude=node_modules",
+      "--exclude=.clover",
+      "package.json",
+      "package-lock.json",
+      ".clover/o/",
+      "paperclover.net:~/paperclover.net/",
+    ],
+    progress: progress.start("copy site files"),
+  });
+  const cache = Path.resolve(".clover/cache.sqlite").ifExistsSync();
+  if (cache) {
+    await rsync.spawn({
+      cwd: Path.resolve(import.meta.dirname).parent!.toString(),
+      args: [
+        "-a",
+        "--progress",
+        cache.toString(),
+        "paperclover.net:~/paperclover.net/.clover/cache.sqlite",
+      ],
+      progress: progress.start("copy file viewer cache"),
+    });
+  }
+  await subprocess.spawnAndWait({
+    stdio: "inherit",
+    cmd: [
+      "ssh",
+      "paperclover.net",
+      "cd paperclover.net && " +
+      "npm i &&" +
+      "pm2 restart site",
+    ],
+  });
+}
+
+import * as incr from "../framework/incremental.ts";
+import { generate } from "../framework/generate.ts";
+import * as progress from "lib/log/progress.ts";
+import * as subprocess from "#sitegen/subprocess";
+import * as rsync from "./file-viewer/rsync.ts";
+import { Path } from "#sitegen/path";
diff --git a/src/file-viewer/backend.tsx b/src/file-viewer/backend.tsx
index 20a55e54907d6f1ce6bdae6f7d6fd9cec077c1db..99a4532a3044d24b9261fffc78831172e74d88ec 100644
--- a/src/file-viewer/backend.tsx
+++ b/src/file-viewer/backend.tsx
@@ -66,7 +66,10 @@ app.get("/file/*", async (c, next) => {
   if (c.req.query("dl") != null) viewMode = "download";
   if (lofi) viewMode = file.extension === ".html" ? "embed" : "download";
 
-  if (viewMode == null && c.req.header("Accept")?.includes("text/html")) {
+  if (
+    viewMode == null && !derivedKey &&
+    c.req.header("Accept")?.includes("text/html")
+  ) {
     // cache.prefetch(file);
     c.res = await view.serve(c, "file-viewer/clofi", {
       file,
@@ -156,13 +159,14 @@ app.get("/file/*", async (c, next) => {
 
   const found = await cache.read({
     file,
-    hash,
+    size,
     derived: derivedKey,
+    hash,
     start,
     end,
   });
   if (!found) {
-    return Response.json({
+    return c.json({
       error: "localOnly is enabled and this file is not available",
     }, 500);
   }
@@ -265,17 +269,20 @@ function getPartialPage(c: Context, rawFilePath: string) {
     return c.json({ error: "File not found" }, 404);
   }
 
-  let root = MediaPanel({
-    file,
-    isLast: true,
-    activeFilename: null,
-    hasCotyledonCookie: rawFilePath === "" && checkCotyledonCookie(c),
-  });
+  const r = render.init(false, {});
+  let root = render.resolveNode(
+    r,
+    <MediaPanel
+      file={file}
+      isLast
+      activeFilename={null}
+      hasCotyledonCookie={rawFilePath === "" && checkCotyledonCookie(c)}
+    />,
+  );
   // Remove the root element, it's created client side!
-  root = root[2].children as render.Element;
+  root = (root as render.ResolvedElement)[3];
 
-  const html = render.sync(root).text;
-  return c.html(html);
+  return c.html(render.stringifyNode(root));
 }
 
 import { type Context, Hono } from "hono";
diff --git a/src/file-viewer/bin/scan3.ts b/src/file-viewer/bin/scan3.ts
index e01e16824270a364b86fda451575ec9a1ffcc62f..5f4ed8212c39431a168edb914461bb236a08ed57 100644
--- a/src/file-viewer/bin/scan3.ts
+++ b/src/file-viewer/bin/scan3.ts
@@ -160,7 +160,7 @@ export async function main() {
       );
       dependantJob.needs -= 1;
       if (dependantJob.needs == 0) {
-        queueFileProcessor(dependantJob);
+        promises.push(queueFileProcessor(dependantJob));
       }
     }
   }, (job) => ({ cores: job.processor.cores ?? 0 }));
@@ -281,6 +281,7 @@ export async function main() {
   using dirMetaNode = progress.start("update directory metadata");
   const dirs = MediaFile.getDirectoriesToReindex()
     .sort((a, b) => b.path.length - a.path.length);
+
   for (const dir of dirs) {
     using _ = dirMetaNode.start(dir.path);
     const children = dir.getChildren();
@@ -376,7 +377,7 @@ export async function main() {
   });
   if (sotToken) {
     const res = await fetch("https://db.paperclover.net/reload", {
-      method: "post",
+      method: "POST",
       headers: {
         Authorization: sotToken,
       },
diff --git a/src/file-viewer/cache.ts b/src/file-viewer/cache.ts
index c740539fa76b6e11019fe998631d4617b8361cd3..e076ace52bafacd2a3a0a8e38105c98b2f0654fd 100644
--- a/src/file-viewer/cache.ts
+++ b/src/file-viewer/cache.ts
@@ -33,7 +33,7 @@ export type Source =
 const token = process.env.CLOVER_SOT_KEY ?? null;
 const sotUrl = new URL(
   process.env.CLOVER_SOT_URL ?? "https://db.paperclover.net",
-);
+).toString().replace(/\/+$/g, "");
 if (!token) console.warn("Missing CLOVER_SOT_KEY, cannot host protected files");
 
 const diskCacheRoot = openDiskCache();
@@ -94,6 +94,7 @@ export interface Options {
   file: MediaFile;
   /** If set, fetches the derived asset instead. */
   derived: string | null;
+  size: number;
   hash: string;
   start: number;
   /** exclusive. ex: [10, 30] skips ten bytes then grabs 20 */
@@ -107,7 +108,7 @@ export interface Options {
  * `null` if a derived asset does not exist
  */
 export async function read(
-  { file, derived, hash, start, end, noWrite, localOnly }: Options,
+  { file, derived, hash, size, start, end, noWrite, localOnly }: Options,
 ): Promise<{ stream: ReadableStream; src: Source; size: number } | null> {
   const rel = derived ? `${file.path}$/${derived}` : file.path;
 
@@ -115,33 +116,33 @@ export async function read(
   const localFile = derived
     ? derivedFileRoot?.join(derived)
     : rawFileRoot?.join(file.path);
-  if (localFile) {
-    local: {
-      let size: number;
-      try {
-        ({ size } = await localFile.stat());
-      } catch (err) {
-        if (error.code(err) === "ENOENT") {
-          console.warn(`missing local file: ${localFile}`);
-          break local;
-        }
-        throw err;
+  local: {
+    if (!localFile) break local;
+    if (process.env.CLOVER_SOT_FORCE) break local;
+    let size: number;
+    try {
+      ({ size } = await localFile.stat());
+    } catch (err) {
+      if (error.code(err) === "ENOENT") {
+        console.warn(`missing local file: ${localFile}`);
+        break local;
       }
-      const fileStream = await readStream(localFile, { start, end });
-      if (!fileStream) break local;
-      console.info(`from local: ${rel} ` + localFile);
-      return {
-        stream: stream.Readable.toWeb(fileStream),
-        size,
-        src: "local",
-      };
+      throw err;
     }
+    const fileStream = await readStream(localFile, { start, end });
+    if (!fileStream) break local;
+    console.info(`from local: ${rel} ` + localFile);
+    return {
+      stream: stream.Readable.toWeb(fileStream),
+      size,
+      src: "local",
+    };
   }
 
-  if (!localOnly) return null;
+  if (localOnly) return null;
 
   // Disk cache
-  const diskPath = diskCacheRoot.join(key);
+  const diskPath = diskCacheRoot.join(hash);
   let diskFile = diskCache.get(diskPath);
   if (diskFile) {
     const lock = diskCache.lock(diskPath);
@@ -165,67 +166,154 @@ export async function read(
   }
 
   // Fetch the source of truth
-  const url = `${sotUrl}/file${file.path}`;
-  let response;
-  {
-    let promise = parallelRequests.get(url);
-    if (promise) {
-      console.info(`from other response: ${rel}`);
-      response = await promise;
-    } else {
-      console.info(`cache miss: ${rel}`);
-      promise = httpGet(url, {
-        headers: token ? { Authorization: token } : {},
-      });
-      parallelRequests.set(url, promise);
-      response = await promise;
-      parallelRequests.delete(url);
-    }
-  }
-  const { statusCode, headers } = response;
-  if (statusCode !== 200) {
-    const text = await new Response(response as unknown as Blob).text();
-    const msg = `Source of Truth responded with status ${statusCode}: ${text}`;
-    console.error(msg);
-    throw new Error("Source of Truth is unavailable");
-  }
-  const size = Number(headers["content-length"]);
-  ASSERT(!Number.isNaN(size) && size >= 0);
+  const suffix = derived ? ":/" + derived.split("/").slice(1).join("/") : "";
+  const url = `${sotUrl}/file${file.path}${suffix}`;
 
   // Do not cache large assets
   if (size > 1_000_000_000) {
     console.info(`skipping disk cache due to large asset: ${rel}`);
-    return { stream: stream.Readable.toWeb(response), size, src: "ignored" };
+    return {
+      stream: fetchAndSlice(rel, url, start, end),
+      size,
+      src: "ignored",
+    };
   }
   // Bail out of the disk cache if it is contended
   if (diskCache.unlockedCapacity < size) {
     console.info(`skipping disk cache due to contention: ${rel}`);
-    return { stream: stream.Readable.toWeb(response), size, src: "contended" };
+    return {
+      stream: fetchAndSlice(rel, url, start, end),
+      size,
+      src: "contended",
+    };
   }
   // IPs which request too many cache misses are temporarily
   // banned from writing into the disk cache to avoid abuse.
   if (noWrite) {
     console.info(`skipping disk cache due to config: ${rel}`);
-    return { stream: stream.Readable.toWeb(response), size, src: "ratelimit" };
+    return {
+      stream: fetchAndSlice(rel, url, start, end),
+      size,
+      src: "ratelimit",
+    };
   }
 
   // Create a disk cache entry;
   // Tee the stream to both the request and the filesystem.
-  diskFile = {
-    size,
-    written: new async.Watch(0),
-    memory: new Map(),
-  };
+  diskFile = { size, written: new async.Watch(0), memory: new Map() };
   diskCache.set(diskPath, diskFile);
-
   const lock = diskCache.lock(diskPath);
-  const writer = await writeStream(diskPath, response, diskFile, lock);
-  writer.on("error", () => {
-    diskCache.delete(diskPath);
-    diskFile.written.value = Infinity;
+  return fetchAndStore(rel, url, size, diskPath, diskFile, start, end, lock);
+}
+
+async function fetchAndStore(
+  rel: string,
+  url: string,
+  size: number,
+  diskPath: Path,
+  diskFile: DiskFile,
+  start: number,
+  end: number,
+  lock: Lock,
+) {
+  try {
+    let response = await fetch(rel, url);
+    const { statusCode } = response;
+    if (statusCode !== 200) {
+      const text = await new Response(response as unknown as Blob).text();
+      const msg =
+        `Source of Truth responded with status ${statusCode}: ${text}`;
+      console.error(msg);
+      throw new Error("Source of Truth is unavailable");
+    }
+    const writer = await writeStream(diskPath, response, diskFile, lock);
+    writer.on("error", () => {
+      diskCache.delete(diskPath);
+      diskFile.written.value = Infinity;
+    });
+
+    return { stream: sliceStream(response, start, end), size, src: "miss" };
+  } catch (e) {
+    lock();
+    throw e;
+  }
+}
+
+async function fetch(rel: string, url: string, headers?: {}) {
+  let promise = !headers ? parallelRequests.get(url) : null;
+  if (promise) {
+    console.info(`from other response: ${rel}`);
+    return await promise;
+  } else {
+    console.info(`cache miss: ${rel}`);
+    promise = httpGet(url, {
+      headers: {
+        ...token ? { Authorization: token } : null,
+        ...headers,
+      },
+    });
+    if (!headers) parallelRequests.set(url, promise);
+    const response = await promise;
+    if (!headers) parallelRequests.delete(url);
+    return response;
+  }
+}
+
+async function fetchAndSlice(
+  rel: string,
+  url: string,
+  start: number,
+  end: number,
+) {
+  const headers = start !== 0 || end !== Infinity
+    ? { "Clover-Start": String(start), "Clover-End": String(end) }
+    : null;
+  return stream.Readable.toWeb(await fetch(rel, url, headers));
+}
+
+export function sliceStream(
+  readable: stream.Readable,
+  start: number,
+  end: number,
+): Readable {
+  const length = end === Infinity ? Infinity : end - start;
+  let recieved = 0;
+  let sent = 0;
+
+  const transform = new stream.Transform({
+    transform(chunk: Buffer, _, callback) {
+      const chunkEnd = recieved + chunk.length;
+
+      if (chunkEnd <= start) {
+        recieved = chunkEnd;
+        callback();
+        return;
+      }
+
+      if (sent >= length) {
+        callback();
+        return;
+      }
+
+      const sliceStart = Math.max(0, start - recieved);
+      const remaining = length - sent;
+      const sliceEnd = end === Infinity
+        ? chunk.length
+        : Math.min(chunk.length, sliceStart + remaining);
+
+      const slice = chunk.slice(sliceStart, sliceEnd);
+      sent += slice.length;
+      recieved = chunkEnd;
+
+      this.push(slice);
+
+      callback();
+    },
   });
 
-  return { stream: stream.Readable.toWeb(response), size, src: "miss" };
+  readable.on("error", (err) => transform.destroy(err));
+
+  return readable.pipe(transform);
 }
 
 interface DiskFile {
@@ -236,7 +324,10 @@ interface DiskFile {
 
 function httpGet(url: string, options: https.RequestOptions) {
   return new Promise<http.IncomingMessage>((resolve, reject) => {
-    const request = https.get(url, options);
+    const request = (url.startsWith("https://") ? https : http).get(
+      url,
+      options,
+    );
     request.on("response", resolve);
     request.on("error", reject);
   });
diff --git a/src/file-viewer/models/FilePermissions.ts b/src/file-viewer/models/FilePermissions.ts
index 4187c6efb3cc93aa0fd86fed0f63bf9f32d784de..71e2c8dab705aa8c84832da33bf047afc6e38a6c 100644
--- a/src/file-viewer/models/FilePermissions.ts
+++ b/src/file-viewer/models/FilePermissions.ts
@@ -3,9 +3,9 @@ const db = getDb("cache.sqlite");
 db.table(
   "permissions",
   /* SQL */ `
-  CREATE TABLE IF NOT EXISTS permissions (
-    prefix TEXT PRIMARY KEY,
-    allow INTEGER NOT NULL
+  create table if not exists permissions (
+    prefix text primary key,
+    allow integer not null
   );
 `,
 );
@@ -36,24 +36,24 @@ const getByPrefixQuery = db.prepare<
   [prefix: string],
   Pick<FilePermissions, "allow">
 >(/* SQL */ `
-  SELECT allow 
-  FROM permissions 
-  WHERE ? GLOB prefix || '*'
-  ORDER BY LENGTH(prefix) DESC 
-  LIMIT 1;
+  select allow 
+  from permissions 
+  where ? glob prefix || '*'
+  order by length(prefix) desc 
+  limit 1;
 `);
 const getExactQuery = db.prepare<
   [file: string],
   Pick<FilePermissions, "allow">
 >(/* SQL */ `
-  SELECT allow FROM permissions WHERE ? == prefix
+  select allow from permissions where ? == prefix
 `);
 
 const insertQuery = db.prepare<[{ prefix: string; allow: number }]>(/* SQL */ `
-  REPLACE INTO permissions(prefix, allow) VALUES($prefix, $allow);
+  replace into permissions(prefix, allow) values($prefix, $allow);
 `);
 const deleteQuery = db.prepare<[file: string]>(/* SQL */ `
-  DELETE FROM permissions WHERE prefix = ?;
+  delete from permissions where prefix = ?;
 `);
 
 import { getDb } from "#sitegen/sqlite";
diff --git a/src/file-viewer/models/MediaFile.ts b/src/file-viewer/models/MediaFile.ts
index e0c1b6aa07da58c77fb1005c408a59c4b1a0fa0a..f99c10f99611f14ac6d55f2ad3d082039860d247 100644
--- a/src/file-viewer/models/MediaFile.ts
+++ b/src/file-viewer/models/MediaFile.ts
@@ -113,12 +113,11 @@ export class MediaFile {
     return ext;
   }
   getChildren() {
-    return MediaFile.getChildren(this.id)
-      .filter((file) => !file.basename.startsWith("."));
+    return MediaFile.getChildren(this.id);
   }
   getPublicChildren() {
     const children = MediaFile.getChildren(this.id).filter((x) =>
-      !x.basename.startsWith("_unlisted")
+      !x.basename.startsWith(".") && !x.basename.startsWith("_unlisted")
     );
     if (FilePermissions.getByPrefix(this.path) == 0) {
       return children.filter(({ path }) => FilePermissions.getExact(path) == 0);
diff --git a/src/file-viewer/rules.ts b/src/file-viewer/rules.ts
index ea18b9b948d6f6a4655458adbe341b7c7d62b16a..07e12cfb27924181060e1b88e39a27f6132d2a01 100644
--- a/src/file-viewer/rules.ts
+++ b/src/file-viewer/rules.ts
@@ -70,7 +70,7 @@ export const extsImageLike = new Set([
 /** These files populate `duration` using `ffprobe` */
 export const extsDuration = new Set([...extsAudio, ...extsVideo]);
 /** These files populate `dimensions` using `ffprobe` */
-export const extsDimensions = new Set([...extsImage, ...extsVideo]);
+export const extsDimensions = new Set([...extsImage, ...extsVideo, ".gif"]);
 
 /** These files read file contents into `contents`, as-is */
 export const extsReadContents = new Set([".txt", ".chat", ".dirsort"]);
diff --git a/src/file-viewer/views/clofi.client.ts b/src/file-viewer/views/clofi.client.ts
index 4cf9af433f809c901c0887ae7de5f20a8e568f7b..1082a8d4ed1c00deb409c18c8036ee88c62f48ae 100644
--- a/src/file-viewer/views/clofi.client.ts
+++ b/src/file-viewer/views/clofi.client.ts
@@ -139,7 +139,7 @@ function ensureCanvasReady(id: string): Promise<CanvasFn> {
   promise = new Promise<CanvasFn>((r) => resolve = r);
   fetchCanvas.set(id, promise);
   const script = document.createElement("script");
-  script.src = `/js/canvas/${id}.js`;
+  script.src = `/js/file-viewer/scripts/canvas_${id}.js`;
   script.async = true;
   script.onload = () => {
     func = (globalThis as any)["canvas_" + id];
@@ -216,6 +216,11 @@ class Panel {
       }
     }
 
+    Array.from(
+      panel.querySelectorAll<HTMLElement>(".clover-video"),
+      (container) => hydrateVideo(container),
+    );
+
     const ul = panel.querySelector("ul");
     if (!ul) {
       this.width = 0;
diff --git a/src/file-viewer/views/clofi.tsx b/src/file-viewer/views/clofi.tsx
index cffef34d7b9a13a944c7780969c9b32ae2ed16e8..daaffa39af40620945309eb8b35dc0b4af9c6f84 100644
--- a/src/file-viewer/views/clofi.tsx
+++ b/src/file-viewer/views/clofi.tsx
@@ -70,8 +70,6 @@ export default function MediaList({
   file: MediaFile;
   hasCotyledonCookie: boolean;
 }) {
-  addScript("./clofi.client.ts");
-
   const dirs: MediaFile[] = [];
   let dir: MediaFile | null = file;
   assert(dir);
@@ -115,43 +113,43 @@ export function MediaPanel({
   activeFilename: string | null;
   hasCotyledonCookie: boolean;
 }) {
+  addScript("./clofi.client.ts");
+  addScript("../../tags/clover-video.client.ts");
   const showsActions = file.path !== "/2024/for everyone";
   const label = file.path === "/"
     ? (
       "clo's files"
     )
     : (
-      <>
-        {file.kind === MediaFileKind.directory
-          ? (
-            <span>
-              {file.basename}
-              <span class="bold-slash">/</span>
-            </span>
-          )
-          : (
-            <>
-              {file.basename}
-              <div style="flex:1" />
-              {showsActions && (
-                <div class="actions">
-                  <a
-                    class="custom full-screen"
-                    href={`/file${escapeUri(file.path)}?view=embed`}
-                    aria-label="full screen"
-                  >
-                  </a>
-                  <a
-                    class="custom download"
-                    href={`/file${escapeUri(file.path)}?dl`}
-                    aria-label="download"
-                  >
-                  </a>
-                </div>
-              )}
-            </>
-          )}
-      </>
+      file.kind === MediaFileKind.directory
+        ? (
+          <span>
+            {file.basename}
+            <span class="bold-slash">/</span>
+          </span>
+        )
+        : (
+          <>
+            {file.basename}
+            <div style="flex:1" />
+            {showsActions && (
+              <div class="actions">
+                <a
+                  class="custom full-screen"
+                  href={`/file${escapeUri(file.path)}?view=embed`}
+                  aria-label="full screen"
+                >
+                </a>
+                <a
+                  class="custom download"
+                  href={`/file${escapeUri(file.path)}?dl`}
+                  aria-label="download"
+                >
+                </a>
+              </div>
+            )}
+          </>
+        )
     );
   let View = specialCaseViewers[file.path] ??
     (extensionToViewer[file.extension.toLowerCase()] as any) ??
@@ -166,18 +164,16 @@ export function MediaPanel({
     />
   );
   const canvases: Record<string, string> = {
-    "/2017": "2017",
-    "/2018": "2018",
-    "/2019": "2019",
-    "/2020": "2020",
-    "/2021": "2021",
-    "/2022": "2022",
-    "/2023": "2023",
-    "/2024": "2024",
+    "/2017": () => addScript("../scripts/canvas_2017.client.ts"),
+    "/2018": () => addScript("../scripts/canvas_2018.client.ts"),
+    "/2019": () => addScript("../scripts/canvas_2019.client.ts"),
+    "/2020": () => addScript("../scripts/canvas_2020.client.ts"),
+    "/2021": () => addScript("../scripts/canvas_2021.client.ts"),
+    "/2022": () => addScript("../scripts/canvas_2022.client.ts"),
+    "/2023": () => addScript("../scripts/canvas_2023.client.ts"),
+    "/2024": () => addScript("../scripts/canvas_2024.client.ts"),
   };
-  if (canvases[file.path]) {
-    addScript(`file-viewer/canvas_${canvases[file.path]}.client.ts`);
-  }
+  canvases[file.path]?.();
   return (
     <div
       class={(isLast ? "panel last" : "panel") +
@@ -186,7 +182,7 @@ export function MediaPanel({
       {canvases[file.path] && (
         <canvas
           class="fullscreen-canvas"
-          data-canvas={canvases[file.path]}
+          data-canvas={file.path.slice(1).split("/")![0]}
         >
         </canvas>
       )}
@@ -680,23 +676,16 @@ function CodeView({ file }: { file: MediaFile }) {
 function VideoView({ file }: { file: MediaFile }) {
   const dimensions = file.parseDimensions() ?? { width: 1920, height: 1080 };
   return (
-    <>
-      <video
-        controls
-        preload
-        style={`background:transparent;aspect-ratio:${
-          simplifyFraction(
-            dimensions.width,
-            dimensions.height,
-          )
-        }`}
-      >
-        <source
-          src={"/file" + file.path}
-          type={mime.contentTypeFor(file.path)}
-        />
-      </video>
-    </>
+    <CloverVideo
+      minimal
+      file={file}
+      style={`background:transparent;aspect-ratio:${
+        simplifyFraction(
+          dimensions.width,
+          dimensions.height,
+        )
+      }`}
+    />
   );
 }
 
@@ -748,10 +737,11 @@ function AudioView({
 
 function ImageView({ file }: { file: MediaFile }) {
   return (
-    <img
-      src={"/file" + file.path}
+    <Image
+      src={file}
       alt={file.basename}
-      style="max-width:100%;max-height:100%;object-fit:contain;margin:auto;display:block;"
+      objectFit="contain"
+      style="max-width:100%;max-height:100%;margin:auto;display:block;"
     />
   );
 }
@@ -935,4 +925,6 @@ import {
 import { ForEveryone } from "@/file-viewer/cotyledon.tsx";
 import * as mime from "#sitegen/mime";
 import * as sort from "../sort.ts";
+import CloverVideo from "@/tags/clover-video.marko";
+import Image from "@/tags/image.tsx";
 import * as render from "#engine/render";
diff --git a/src/pages/in-the-summer.marko b/src/pages/in-the-summer.marko
index f0d4b450d87d85339b8204dc5b4c0f8c4c511c2a..d9af19e337e0123681faf57fba1ebaffbe669687 100644
--- a/src/pages/in-the-summer.marko
+++ b/src/pages/in-the-summer.marko
@@ -22,7 +22,10 @@ import "./in-the-summer.css";
   </p>
 </div>
 
-<clover-video file="/2025/in the summer/in the summer.mp4">
+<clover-video
+  file="/2025/in the summer/in the summer.mp4"
+  poster="/2025/in the summer/thumbnail.jpeg"
+>
   <@header><strong>music video</>: in the summer</>
 </>
 
@@ -34,7 +37,7 @@ import "./in-the-summer.css";
       <li><a href="/file/2025/in%20the%20summer/fragments">fragments/</a> (behind the scenes)</li>
   </ul>
   <h2>mentions on the q&a</h2>
-  // <QuestionsFor artifact='in-the-summer'/>
+  <questions-embed="in-the-summer" />
 </div>
 </main>
 
diff --git a/src/pages/index.marko b/src/pages/index.marko
index 2c8bb37f8ad7bebbebd43ebf6ce3f8af4210c81c..becf253be35e58443558cc9ceedb0f12b89b788c 100644
--- a/src/pages/index.marko
+++ b/src/pages/index.marko
@@ -21,10 +21,7 @@ export const meta = {
     <p><a href="/file">file browser</a></p>
     <p><a href="/subscribe">mailing list</a></p>
     <p><a href="/donate">donate</a></p>
-    <p><a href="/rss.xml">rss feed</a></p>
-    <p style="position: relative; z-index: 10"><a href="/discord">discord</a></p>
-    <h1>
-      paper clover
-    </h1>
+    <p style="position: relative; z-index: 10"><a href="/rss.xml">rss feed</a></p>
+    <h1>paper clover</h1>
   </div>
 </main>
diff --git a/src/pages/subscribe.client.ts b/src/pages/subscribe.client.ts
deleted file mode 100644
index ac6546043f0d3b0d64a1d883619e31f9dafd09fe..0000000000000000000000000000000000000000
--- a/src/pages/subscribe.client.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-// @ts-nocheck
-// manually obfuscated to make it very difficult to reverse engineer
-// if you want to decode what the email is, visit the page!
-// stops people from automatically scraping the email address
-//
-// Unfortunately this needs a rewrite to support Chrome without
-// hardware acceleration and some Linux stuff. I will probably
-// go with a proof of work alternative.
-requestAnimationFrame(() => {
-  const hash = "SHA";
-  const a = [
-    { parentElement: document.getElementById("subscribe") },
-    function (b) {
-      let c = 0, d = 0;
-      for (let i = 0; i < b.length; i++) {
-        c = (c + b[i] ^ 0xF8) % 8;
-        d = (c * b[i] ^ 0x82) % 193;
-      }
-      a[c + 1]()[c](d, b.buffer);
-    },
-    function () {
-      const i = a[4](a[3]());
-      const b = i.innerText = a.pop();
-      if (a[b.indexOf("@") / 3]) {
-        i.href = "mailto:" + b;
-      }
-    },
-    function () {
-      return a[a.length % 10];
-    },
-    function (x) {
-      return x.parentElement;
-    },
-    function (b, c) {
-      throw new Uint8Array(
-        c,
-        0,
-        64,
-        c.parentElement = this[8].call(b.call(this)).location,
-      );
-    },
-    function (b, c) {
-      this.width = 8;
-      this.height = 16;
-      b.clearColor(0.5, 0.7, 0.9, 1.0);
-      b.clear(16408 ^ this.width ^ this.height);
-      const e = new Uint8Array(4 * this.width * this.height);
-      b.readPixels(0, 0, this.width, this.height, b.RGBA, b.UNSIGNED_BYTE, e);
-      let parent = a[this.width / 2](this);
-      while (parent.tagName !== "BODY") {
-        parent = a[2 * this.height / this.width](parent);
-      }
-      try {
-        let d = [hash, e.length].join("-");
-        const b = a[0.25 * this.height](a.pop()(parent)).subtle.digest(d, e);
-        [, d] = a;
-        b.then(c.bind(a, a[this.width].bind(globalThis))).catch(d);
-      } catch (e) {
-        fetch(e).then(a[5]).catch(a[2]);
-      }
-    },
-    function (b, c) {
-      const d = a.splice(
-        9,
-        1,
-        [
-          a[3]().parentElement.id,
-          c.parentElement.hostname,
-        ].join(String.fromCharCode(b)),
-      );
-      var e = new Error();
-      Object.defineProperty(e, "stack", {
-        get() {
-          a[9] = d;
-        },
-      });
-      a[2].call(console.log(e));
-    },
-    function () {
-      return this;
-    },
-    "[failed to verify your browser]",
-    function (a) {
-      a = a.parentElement.ownerDocument.defaultView;
-      return { parentElement: a.navigator.webdriver || a.crypto };
-    },
-  ];
-  try {
-    const c = document.querySelector("canvas");
-    const g = c.getContext("webgl2") || c.getContext("webgl");
-    a[0].parentElement.innerText = "[...loading...]";
-    g.field || requestAnimationFrame(a[6].bind(c, g, a[5]));
-  } catch {
-    a.pop();
-    fetch(":").then(a[5]).catch(a[2]);
-  }
-});
diff --git a/src/pages/subscribe.css b/src/pages/subscribe.css
index 37f20059c9cb62123bc211800f93a81a5a5d28ff..da302819d2658174aabd1fa488b05cdef846ea0a 100644
--- a/src/pages/subscribe.css
+++ b/src/pages/subscribe.css
@@ -1,4 +1,4 @@
-#subscribe[href] {
+#subscribe {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -6,9 +6,6 @@
   font-weight: bold;
   text-align: center;
 }
-#subscribe:not([href]) {
-  opacity: 0.5;
-}
 .flex {
   display: flex;
   justify-content: center;
diff --git a/src/pages/subscribe.marko b/src/pages/subscribe.marko
index 7bfe35fd91aecbcdd9eaecb4b9ea6e0b8e86d1e2..97c1e4f17469bdc84a121b323f5dba2e90aaab90 100644
--- a/src/pages/subscribe.marko
+++ b/src/pages/subscribe.marko
@@ -4,8 +4,6 @@ export const meta = {
   description: "subscribe to the mailing list",
 };
 
-client import "./subscribe.client.ts";
-
 <main>
 <h1>mailing list</h1>
 <canvas style="display: none;"></canvas>
@@ -17,19 +15,14 @@ client import "./subscribe.client.ts";
   the list is currently managed manually. to get added, please email anything
   with the word "subscribe" in the subject or body to the following address:
 </p>
-<code class="flex">
-  <a id="subscribe">
-    [please enable javascript, this is an anti-spam/scraping measure]
-  </a>
+<code id="subscribe" class="flex">
+  subscribe at paper clover dot net
 </code>
 <p>
   to unsubscribe, send an email asking to unsubscribe. for those who are close
   friends with me, add your name and i'll add you to the 'friends' list, where i
   send life updates in addition to new content (1-2 times per month).
 </p>
-<p>
-  alternatively, you can join <a href="/discord">the discord</a> to receive mentions in the <code>#new</code> channel.
-</p>
 <br>
 <br>
 <br>
diff --git a/src/pages/waterfalls.marko b/src/pages/waterfalls.marko
index b1f226670b55e9918d679db8f4237355a0012536..5a53a05401598525091a9dab80352bbed4035b45 100644
--- a/src/pages/waterfalls.marko
+++ b/src/pages/waterfalls.marko
@@ -42,6 +42,9 @@ export const theme = {
         <br />
         <a href="/q+a">q&a page</a>
       </p>
+
+      <h2>mentions on the q&a</h2>
+      <questions-embed="waterfalls" />
     </div>
   </main>
 </main>
diff --git a/src/q+a/artifacts.ts b/src/q+a/artifacts.ts
index 5c7be261969f2377319f20ab8fba196b612fe8be..bbeeb48527691a209c27a7b20b0e0f279964f18d 100644
--- a/src/q+a/artifacts.ts
+++ b/src/q+a/artifacts.ts
@@ -3,87 +3,36 @@
 // one canonical URL, which the questions page can refer to with `@id`.
 type Artifact = [title: string, url: string, type: ArtifactType];
 type ArtifactType = "music" | "game" | "project" | "video";
+
+// deno-fmt-ignore
 export const artifactMap: Record<string, Artifact> = {
   // 2025
-  "in-the-summer": ["in the summer", "", "music"],
-  waterfalls: ["waterfalls", "/waterfalls", "music"],
-  lolzip: ["lol.zip", "", "project"],
-  "g-is-missing": ["g is missing", "", "music"],
-  "im-18-now": ["i'm 18 now", "", "music"],
-  "programming-comparison": [
-    "thursday programming language comparison",
-    "",
-    "video",
-  ],
-  aaaaaaaaa: ["aaaaaaaaa", "", "music"],
-  "its-snowing": ["it's snowing", "", "video"],
-  // 2023
-  "iphone-15-review": [
-    "iphone 15 review",
-    "/file/2023/iphone%2015%20review/iphone-15-review.mp4",
-    "video",
-  ],
-  // 2022
-  mayday: ["mayday", "/file/2022/mayday/mayday.mp4", "music"],
-  "mystery-of-life": [
-    "mystery of life",
-    "/file/2022/mystery-of-life/mystery-of-life.mp4",
-    "music",
-  ],
-  // 2021
-  "top-10000-bread": [
-    "top 10000 bread",
-    "https://paperclover.net/file/2021/top-10000-bread/output.mp4",
-    "video",
-  ],
-  "phoenix-write-soundtrack": [
-    "Phoenix, WRITE! soundtrack",
-    "/file/2021/phoenix-write/OST",
-    "music",
-  ],
-  "phoenix-write": ["Pheonix, WRITE!", "/file/2021/phoenix-write", "game"],
-  "money-visual-cover": [
-    "money visual cover",
-    "/file/2021/money-visual-cover/money-visual-cover.mp4",
-    "video",
-  ],
-  "i-got-this-thing": [
-    "i got this thing",
-    "/file/2021/i-got-this-thing/i-got-this-thing.mp4",
-    "video",
-  ],
-  // 2020
-  elemental4: ["elemental 4", "/file/2020/elemental4-rewrite", "game"],
+  "in-the-summer": ["in the summer", "/in-the-summer", "music"],
+  "waterfalls": ["waterfalls", "/waterfalls", "music"],
+
+  // cotyledon
+  "aaaaaaaaa": ["aaaaaaaaa", "", "music"],
+  "dice-roll": [ "thursday dice roll", "/file/2019/thursday-dice-roll/thursday-dice-roll.mp4", "video"],
   "elemental-4": ["elemental 4", "/file/2020/elemental4-rewrite", "game"],
-  // 2019
-  "throw-soundtrack": [
-    "throw soundtrack",
-    "/file/2019/throw/soundtrack",
-    "music",
-  ],
   "elemental-lite": ["elemental lite", "/file/2019/elemental-lite-1.7", "game"],
-  volar: [
-    "volar visual cover",
-    "/file/2019/volar-visual-cover/volar.mp4",
-    "video",
-  ],
-  wpm: [
-    "how to read 500 words per minute",
-    "/file/2019/how-to-read-500-words-per-minute/how-to-read-500-words-per-minute.mp4",
-    "video",
-  ],
-  "dice-roll": [
-    "thursday dice roll",
-    "/file/2019/thursday-dice-roll/thursday-dice-roll.mp4",
-    "video",
-  ],
-  "math-problem": [
-    "thursday math problem",
-    "/file/2019/thursday-math-problem/thursday-math-problem.mp4",
-    "video",
-  ],
-  // 2018
-  // 2017
+  "elemental4": ["elemental 4", "/file/2020/elemental4-rewrite", "game"],
+  "g-is-missing": ["g is missing", "https://paperclover.net/file/2023/g%20is%20missing/g%20is%20missing.mp4", "music"],
   "hatred-island": ["hatred island", "/file/2017/hatred%20island", "game"],
+  "i-got-this-thing": [ "i got this thing", "/file/2021/i-got-this-thing/i-got-this-thing.mp4", "video"],
+  "im-18-now": ["i'm 18 now", "", "music"],
+  "iphone-15-review": [ "iphone 15 review", "/file/2023/iphone%2015%20review/iphone-15-review.mp4", "video"],
+  "its-snowing": ["it's snowing", "https://paperclover.net/file/2022/its-snowing/it's%20snowing.mp4", "video"],
+  "lolzip": ["lol.zip", "", "project"],
+  "math-problem": [ "thursday math problem", "/file/2019/thursday-math-problem/thursday-math-problem.mp4", "video"],
+  "mayday": ["mayday", "/file/2022/mayday/mayday.mp4", "music"],
+  "money-visual-cover": [ "money visual cover", "/file/2021/money-visual-cover/money-visual-cover.mp4", "video"],
+  "mystery-of-life": [ "mystery of life", "/file/2022/mystery-of-life/mystery-of-life.mp4", "music"],
+  "phoenix-write": ["Pheonix, WRITE!", "/file/2021/phoenix-write", "game"],
+  "phoenix-write-soundtrack": [ "Phoenix, WRITE! soundtrack", "/file/2021/phoenix-write/OST", "music"],
+  "programming-comparison": [ "thursday programming language comparison", "", "video"],
   "test-video-1": ["test video 1", "/file/2017/test-video1.mp4", "video"],
+  "throw-soundtrack": [ "throw soundtrack", "/file/2019/throw/soundtrack", "music"],
+  "top-10000-bread": [ "top 10000 bread", "https://paperclover.net/file/2021/top-10000-bread/output.mp4", "video"],
+  "volar": [ "volar visual cover", "/file/2019/volar-visual-cover/volar.mp4", "video" ],
+  "wpm": [ "how to read 500 words per minute", "/file/2019/how-to-read-500-words-per-minute/how-to-read-500-words-per-minute.mp4", "video"],
 };
diff --git a/src/q+a/clover-markdown.tsx b/src/q+a/clover-markdown.tsx
index b5c13adf669813b44f9ab87c7582d8163bb164e7..6de9f1e090d8f051ef7225738652d1942e349357 100644
--- a/src/q+a/clover-markdown.tsx
+++ b/src/q+a/clover-markdown.tsx
@@ -61,7 +61,7 @@ customRules.insertBefore("paragraph", {
 customRules.insertBefore("url", {
   name: "autolink_mention",
   match: inlineRegex(
-    /^https?:\/\/(?:paper(?:dave|clover)\.net|localhost:\d+)\/([^\s<]+[^<.,:;"')\]\s])/,
+    /^https?:\/\/(?:paperclover\.net|localhost:\d+)\/([^\s<]+[^<.,:;"')\]\s])/,
   ),
   parse(capture) {
     const qaMatch = capture[1].match(/^q\+a\/([0-9]{10}(?:[0-9]{2})?)/);
@@ -72,6 +72,17 @@ customRules.insertBefore("url", {
       };
     }
 
+    const fileMatch = capture[1].match(/^file\/([^#?]*)/);
+    if (fileMatch) {
+      // const file = MediaFile.getByPath(decodeURIComponent(fileMatch[1]));
+      // if (file) {
+      //   return {
+      //     type: "file",
+      //     file,
+      //   };
+      // }
+    }
+
     return {
       type: "link",
       content: [
diff --git a/src/q+a/models/Question.ts b/src/q+a/models/Question.ts
index d382955cd2b2fff787c7514cc0b305a20b10faa4..a6a3f3f6ff72f56ba0a435e9e0c5844ebaac523d 100644
--- a/src/q+a/models/Question.ts
+++ b/src/q+a/models/Question.ts
@@ -2,7 +2,7 @@ const db = getDb("questions.sqlite");
 db.table(
   "questions",
   `
-    create table questions (
+    create table if not exists questions (
       qmid integer not null,
       type integer not null,
       text text not null,
@@ -68,6 +68,9 @@ export class Question {
   static updateByQmid(qmid: number, text: string, type: QuestionType) {
     return updateByQmidQuery.run({ text, type, qmid });
   }
+  static search(ref: string) {
+    return searchQuery.array(`%@${ref}%`, `%https://paperclover.net/${ref}%`);
+  }
 }
 
 // Create a new question with a unique QMID
@@ -114,5 +117,9 @@ const updateByQmidQuery = db.prepare<
   UPDATE questions SET text = $text, type = $type WHERE qmid = $qmid
 `);
 
+const searchQuery = db.prepare<[string, string]>(
+  `select * from questions where type = ${QuestionType.normal} and (text like ? or text like ?)`,
+).as(Question);
+
 import { formatQuestionId } from "../format.ts";
 import { getDb } from "#sitegen/sqlite";
diff --git a/src/q+a/tags/question.marko b/src/q+a/tags/question.marko
index e8ce4e835f199c65e2061dd8ff53db7b886d0cd0..5dcd1db05b317277fb79bfbc0eedabb61f5398dc 100644
--- a/src/q+a/tags/question.marko
+++ b/src/q+a/tags/question.marko
@@ -1,3 +1,5 @@
+import "../questions.css";
+
 // Renders a `Question` entry including its markdown body.
 export interface Input {
   question: Question;
@@ -12,7 +14,7 @@ export const transitionDate = 1735639200000;
 <const/{ id, date } = question/>
 
 <${"e-"}
-  f=(date > transitionDate ? true : undefined)
+  f=(date > transitionDate ? true : null)
   id=admin ? `q${id}` : undefined
 >
   <if=admin>
diff --git a/src/scripts/vendor/dash.client.ts b/src/scripts/vendor/dash.client.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7725040eff5af28c1edf03ce532ab48476f0e351
--- /dev/null
+++ b/src/scripts/vendor/dash.client.ts
@@ -0,0 +1 @@
+export * from "dashjs";
diff --git a/src/scripts/vendor/hls.client.ts b/src/scripts/vendor/hls.client.ts
new file mode 100644
index 0000000000000000000000000000000000000000..38fadd1d92af4ce2efcdd866c88b758b04cfa105
--- /dev/null
+++ b/src/scripts/vendor/hls.client.ts
@@ -0,0 +1 @@
+export * from "hls.js";
diff --git a/src/source-of-truth.ts b/src/source-of-truth.ts
index 305e223496f88d8143047bfb12583d4f80dc98b1..b5520c192ec40d212113fa52ec904fb0e0d0ffa5 100644
--- a/src/source-of-truth.ts
+++ b/src/source-of-truth.ts
@@ -1,24 +1,27 @@
-// The "source of truth" server is the canonical storage for
-// paper clover's files. This is technically needed because
-// the VPS she uses can only store about 20gb of content, where
-// the contents of /file is about 48gb as of writing; only a
-// limited amount of data can be cached.
-//
-// What's great about this system is it also allows scaling the
-// website up into multiple servers, if that is ever desired.
-// When that happens, mutations to "q+a" will be moved here,
-// and the SQLite synchronization mechanism will apply to both
-// of those databases.
-//
-// An alternative to this would have been to use a SMB client,
-// but I've read that the systems used for caching don't work
-// like the HTTP Cache-Control header, where you can say a file
-// is valid for up to a certain amount of time. If we seriously
-// need cache busts (paper clover does not), the proper way
-// would be to push a message to all VPS nodes instead of
-// checking upstream if a file changed every time.
+/** @module
+ * The "source of truth" server is the canonical storage for
+ * paper clover's files. This is technically needed because
+ * the VPS she uses can only store about 20gb of content, where
+ * the contents of /file is about 48gb as of writing; only a
+ * limited amount of data can be cached.
+ *
+ * What's great about this system is it also allows scaling the
+ * website up into multiple servers, if that is ever desired.
+ * When that happens, mutations to "q+a" will be moved here,
+ * and the SQLite synchronization mechanism will apply to both
+ * of those databases.
+ *
+ * An alternative to this would have been to use a SMB client,
+ * but I've read that the systems used for caching don't work
+ * like the HTTP Cache-Control header, where you can say a file
+ * is valid for up to a certain amount of time. If we seriously
+ * need cache busts (paper clover does not), the proper way
+ * would be to push a message to all VPS nodes instead of
+ * checking upstream if a file changed every time.
+ */
 const app = new Hono();
 export default app;
+export const port = 4000;
 
 const token = UNWRAP(process.env.CLOVER_SOT_KEY);
 
@@ -32,22 +35,22 @@ if (!fs.existsSync(derivedFileRoot)) {
 // Re-use file descriptors if the same file is being read twice.
 const fds = new Map<string, Awaitable<{ fd: number; refs: number }>>();
 
+app.get("/", (c) => {
+  return c.text("everything you love, loves you back.");
+});
+
 app.get("/file/*", async (c) => {
   const fullQuery = c.req.path.slice("/file".length);
-  const [filePath, derivedAsset, ...invalid] = fullQuery.split("$/");
+  const [filePath, derivedAsset, ...invalid] = fullQuery.split(":/");
   ASSERT(filePath != null);
   if (invalid.length > 0) return c.notFound();
   if (filePath.length <= 1) return c.notFound();
   const permissions = FilePermissions.getByPrefix(filePath);
-  if (permissions !== 0) {
-    if (c.req.header("Authorization") !== token) {
-      return c.json({ error: "invalid authorization header" }, 401);
-    }
+  if (permissions !== 0 && c.req.header("Authorization") !== token) {
+    return c.json({ error: "invalid authorization header" }, 401);
   }
   const file = MediaFile.getByPath(filePath);
-  if (!file || file.kind === MediaFileKind.directory) {
-    return c.notFound();
-  }
+  if (!file || file.kind === MediaFileKind.directory) return c.notFound();
   const fullPath = derivedAsset
     ? path.join(derivedFileRoot, file.hash, derivedAsset)
     : path.join(rawFileRoot, file.path);
@@ -66,11 +69,10 @@ app.get("/file/*", async (c) => {
     }
     handle.refs += 1;
   } catch (err: any) {
-    if (err.code === "ENOENT") {
-      return c.notFound();
-    }
+    if (err.code === "ENOENT") return c.notFound();
     throw err;
   }
+  c.header("Content-Length", (await fstat(handle.fd)).size);
   const nodeStream = fs.createReadStream(fullPath, {
     fd: handle.fd,
     fs: {
@@ -86,9 +88,6 @@ app.get("/file/*", async (c) => {
     },
   });
   c.header("Content-Type", mime.contentTypeFor(fullPath));
-  if (!derivedAsset) {
-    c.header("Content-Length", file.size.toString());
-  }
   return c.body(stream.Readable.toWeb(nodeStream) as ReadableStream);
 });
 
@@ -102,6 +101,7 @@ app.post("/reload", async (c) => {
 
 const openFile = util.promisify(fsCallbacks.open);
 const closeFile = util.promisify(fsCallbacks.close);
+const fstat = util.promisify(fsCallbacks.fstat);
 
 import { Hono } from "#hono";
 import { MediaFile, MediaFileKind } from "@/file-viewer/models/MediaFile.ts";
diff --git a/src/tags/PhotoGrid.css b/src/tags/PhotoGrid.css
deleted file mode 100644
index 43134886fef57fe0763892515e731e3145c963da..0000000000000000000000000000000000000000
--- a/src/tags/PhotoGrid.css
+++ /dev/null
@@ -1,16 +0,0 @@
-photo-grid {
-  display: grid;
-  gap: 0.5rem;
-  div {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border: 2px solid #0009;
-  }
-  img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
diff --git a/src/tags/PhotoGrid.tsx b/src/tags/PhotoGrid.tsx
deleted file mode 100644
index 7ebec64fbdc78c11e04ab648f35ad23bda7cdce6..0000000000000000000000000000000000000000
--- a/src/tags/PhotoGrid.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import "./PhotoGrid.css";
-import { MediaFile } from "@/file-viewer/models/MediaFile.ts";
-const { isArray } = Array;
-
-export interface PhotoGridProps {
-  style: any;
-  base: string;
-  width: number;
-  widths?: string[];
-  heights?: number[];
-  items: Item[];
-}
-
-type Item = [img: string, options?: ItemOptions];
-
-interface ItemOptions {
-  w?: number;
-  h?: number;
-  align?: keyof typeof alignments;
-}
-
-const alignments = {
-  bottom: "50% 80%",
-  "bottom-end": "50% 100%",
-  top: "50% 30%",
-  "top-end": "50% 0%",
-  left: "30% 50%",
-  "left-end": "0% 50%",
-  right: "80% 50%",
-  "right-end": "100% 50%",
-};
-
-const typicalPageWidth = 768;
-
-export function PhotoGrid({
-  style,
-  base,
-  width,
-  widths,
-  heights,
-  items,
-}: PhotoGridProps) {
-  return;
-  if (!base.endsWith("/")) base += "/";
-  let rows: boolean[][] = [];
-  const row = (y: number) => (rows[y] ??= new Array(width).fill(false));
-  const anyCollide = (x: number, y: number, w: number, h: number) => {
-    for (let yy = 0; yy < h; yy++) {
-      const r = row(y + yy);
-      for (let xx = 0; xx < w; xx++) if (r[x + xx]) return true;
-    }
-    return false;
-  };
-
-  const firstRowHeight = heights?.[0] ?? 325;
-
-  let x = 0;
-  let y = 0;
-  let contents = [];
-  for (const item of items) {
-    const [img, { w = 1, h = 1, align } = {}] = isArray(item) ? item : [item];
-    if (w > width) throw new Error(`Item ${img} too wide (${w} > ${width})`);
-
-    while (anyCollide(x, y, w, h)) {
-      x += 1;
-      if (x > width - w) x = 0, y += 1;
-    }
-    for (let yy = 0; yy < h; yy++) {
-      const r = row(y + yy);
-      for (let xx = 0; xx < w; xx++) r[x + xx] = true;
-    }
-
-    const info = fileInfo(base, img);
-    contents.push(
-      <div
-        style={{
-          ...x === 0 && y === 0 &&
-            {
-              "aspect-ratio": ((w / width) * typicalPageWidth) / firstRowHeight,
-            },
-          "grid-area": `${y + 1} / ${x + 1} / ${1 + y + h} / ${1 + x + w}`,
-        }}
-      >
-        <img
-          {...info}
-          style={{
-            "object-position": align
-              ? (alignments as Record<string, string>)[align] ?? align
-              : "50% 50%",
-          }}
-        />
-      </div>,
-    );
-  }
-
-  const height = rows.length;
-  return (
-    <photo-grid
-      style={{
-        ...style,
-        "grid-template-columns": widths
-          ? mapSizes(widths).join(" ")
-          : `repeat(${width}, 1fr)`,
-        "grid-template-rows": heights
-          ? heights.map((h) => (h / firstRowHeight) + "fr")
-            .concat(new Array(height - heights.length).fill("1fr"))
-            .join(" ")
-          : `repeat(${height}, 1fr)`,
-      }}
-    >
-      {contents}
-    </photo-grid>
-  );
-}
-
-function fileInfo(base: string, img: string) {
-  const filePath = path.join(base, img);
-  const file = MediaFile.getByPath(filePath);
-  const dimensions = file?.parseDimensions();
-  if (!dimensions) {
-    throw new Error(`File does not exist or has no dimensions: ${filePath}`);
-  }
-  const src = "/file" + base + encodeURIComponent(img);
-  const alt = path.basename(img, path.extname(img));
-  return { src, alt, width: dimensions.width, height: dimensions.height };
-}
-
-function mapSizes(sizes: Array<string | number>) {
-  return sizes.map(mapSize);
-}
-function mapSize(size: string | number) {
-  return typeof size === "number" ? size + "px" : size;
-}
-
-import * as path from "node:path";
diff --git a/src/tags/clover-video.client.ts b/src/tags/clover-video.client.ts
index dab6c8c48f5b371feb1b32809cbced7866563e4d..547e55cc5815d020ba3c35d38a34a145627b002c 100644
--- a/src/tags/clover-video.client.ts
+++ b/src/tags/clover-video.client.ts
@@ -2,6 +2,7 @@
 
 // Polyfill for old browsers.
 type PlaybackMode = "av1" | "hls-polyfill" | "hls-native" | "none";
+let mode: Promise<PlaybackMode> | null = null;
 let hls: Promise<typeof import("hls.js")> | null = null;
 
 Promise.allSettled ??= <T>(promises: Iterable<T | PromiseLike<T>>) =>
@@ -12,11 +13,14 @@ Promise.allSettled ??= <T>(promises: Iterable<T | PromiseLike<T>>) =>
         (reason) => ({ status: "rejected" as const, reason }),
       )));
 
-decidePlaybackMode().then((mode) =>
-  Array.from(
-    document.querySelectorAll<HTMLElement>(".clover-video"),
-    (container) => hydrateVideo(container, mode),
-  )
+globalThis.hydrateVideo = function hydrateVideo(container) {
+  mode ??= decidePlaybackMode();
+  mode.then((mode) => hydrateVideoInner(container, mode));
+};
+
+Array.from(
+  document.querySelectorAll<HTMLElement>(".clover-video"),
+  (container) => hydrateVideo(container),
 );
 
 function decidePlaybackMode(): Promise<PlaybackMode> {
@@ -39,7 +43,7 @@ function decidePlaybackMode(): Promise<PlaybackMode> {
         return "hls-native";
       }
 
-      return (hls ??= import("hls.js"))
+      return (hls ??= import("/js/scripts/vendor/hls.js"))
         .then((hls): PlaybackMode => {
           // Polyfill HLS (Chrome 23, Firefox 42, IE11 on Win8)
           // TODO: ES modules have a minimum of Chrome 63 or Firefox 60
@@ -55,8 +59,16 @@ function decidePlaybackMode(): Promise<PlaybackMode> {
     });
 }
 
-function hydrateVideo(container: HTMLElement, mode: PlaybackMode) {
+declare global {
+  function hydrateVideo(container: HTMLElement): void;
+}
+
+function hydrateVideoInner(
+  container: HTMLElement,
+  mode: PlaybackMode,
+) {
   const video = container.querySelector("video")!;
+  if (video.hasAttribute("controls")) return;
   let src = video.getAttribute("data-src");
   if (!src) return;
   src = `/file${src}`;
@@ -65,8 +77,7 @@ function hydrateVideo(container: HTMLElement, mode: PlaybackMode) {
   const hlsFile = `${src}:/master.m3u8`;
 
   if (mode === "av1") {
-    console.info(`Playback: av1, opus, mpeg-dash`);
-    import("dashjs").then((dashjs) => {
+    import("/js/scripts/vendor/dash.js").then((dashjs) => {
       const player = dashjs.MediaPlayer().create();
       // This proxying is for ManagedMediaSource, exposing the HLS stream for AirPlay
       let mainSource: HTMLSourceElement | null = null;
diff --git a/src/tags/clover-video.css b/src/tags/clover-video.css
index a0867a391a0d5d5f47b3577d6df93a675c98cc34..b49e98ebf3dff80f5d9a4082867eacde9c42a342 100644
--- a/src/tags/clover-video.css
+++ b/src/tags/clover-video.css
@@ -3,6 +3,9 @@
   display: flex;
   flex-direction: column;
 }
+.clover-video.minimal {
+  border: none;
+}
 .clover-video video {
   background-color: transparent;
 }
@@ -11,6 +14,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  background-color: black;
 }
 .clover-video video {
   width: 100%;
@@ -33,7 +37,7 @@
 }
 .clover-video figcaption {
   background-color: var(--fg);
-  color: white;
+  color: var(--bg);
   width: 100%;
   margin-top: -1px;
   padding-bottom: 2px;
diff --git a/src/tags/clover-video.marko b/src/tags/clover-video.marko
index 1f18035982711a5b8874f8e86e30370b8611b877..41051ce86eacbaf024cf5b030ec71186e8ed9389 100644
--- a/src/tags/clover-video.marko
+++ b/src/tags/clover-video.marko
@@ -4,9 +4,10 @@ export interface Input {
   file: MediaFile | string;
   poster?: MediaFile | string;
   header?: Marko.AttrTag<{ content: Marko.Body }>;
+  minimal?: boolean;
 }
 
-<const/{ header } = input />
+<const/{ header, minimal } = input />
 <const/file = typeof UNWRAP(input.file) === 'object'
   ? input.file
   : UNWRAP(MediaFile.getByPath(input.file), `No file ${JSON.stringify(input.file)}`) />
@@ -18,12 +19,14 @@ export interface Input {
 
 <const/{ width, height } = file.parseDimensions() />
 
-<figure.clover-video>
-  <figcaption>
-    <if=header><${header.content}/></><else>
-      ${file.basename}
-    </else>
-  </figcaption>
+<figure.clover-video class={ minimal }>
+  <if=!minimal>
+    <figcaption>
+      <if=header><${header.content}/></><else>
+        ${file.basename}
+      </else>
+    </figcaption>
+  </>
   <div.stack style=`aspect-ratio:${width}/${height}`>
     <video
       data-src=file.path
diff --git a/src/tags/image.tsx b/src/tags/image.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0106c239c07757d9c44cd9ea49feec48b62df293
--- /dev/null
+++ b/src/tags/image.tsx
@@ -0,0 +1,55 @@
+interface Props {
+  src: MediaFile | string;
+  alt: string;
+  displayWidthEstimate?: number | string;
+  objectFit?: string;
+
+  style?: string;
+  className?: string;
+}
+
+export default function Image(
+  { src, class: className, objectFit, style, displayWidthEstimate, ...rest }:
+    Props,
+) {
+  src = typeof src === "object"
+    ? src
+    : UNWRAP(MediaFile.getByPath(src), `No file ${JSON.stringify(src)}`);
+
+  const base = `/file${escapeUri(src.path)}`;
+  if (src.extension === ".gif") {
+    return <img src={base} class={className} style={style} {...rest} />;
+  }
+
+  const { width } = UNWRAP(src.parseDimensions());
+  const targetSizes = transcodeRules.imageSizes.filter((w) => w < width);
+
+  const sizes = displayWidthEstimate
+    ? typeof displayWidthEstimate === "number"
+      ? `${displayWidthEstimate}px`
+      : displayWidthEstimate
+    : `100vw`;
+
+  return (
+    <picture class={className} style={style}>
+      {["jxl", "avif", "webp"].map((ext) => (
+        <source
+          type={`image/${ext}`}
+          srcset={targetSizes.map((s) => `${base}:/${s}.${ext} ${s}w`)}
+          sizes={sizes}
+        />
+      ))}
+      <img
+        src={base}
+        {...rest}
+        style={objectFit
+          ? { "object-fit": objectFit, width: "100%", height: "100%" }
+          : null}
+      />
+    </picture>
+  );
+}
+
+import * as transcodeRules from "@/file-viewer/transcode-rules.ts";
+import { MediaFile } from "@/file-viewer/models/MediaFile.ts";
+import { escapeUri } from "@/file-viewer/format.ts";
diff --git a/src/tags/photo-grid.css b/src/tags/photo-grid.css
new file mode 100644
index 0000000000000000000000000000000000000000..43134886fef57fe0763892515e731e3145c963da
--- /dev/null
+++ b/src/tags/photo-grid.css
@@ -0,0 +1,16 @@
+photo-grid {
+  display: grid;
+  gap: 0.5rem;
+  div {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border: 2px solid #0009;
+  }
+  img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
diff --git a/src/tags/photo-grid.tsx b/src/tags/photo-grid.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3889ec2f4a8c8ccd55dd42451f5a5926c1644b40
--- /dev/null
+++ b/src/tags/photo-grid.tsx
@@ -0,0 +1,135 @@
+const { isArray } = Array;
+
+export interface PhotoGridProps {
+  style: any;
+  base: string;
+  width: number;
+  widths?: string[];
+  heights?: number[];
+  items: Item[];
+}
+
+type Item = [img: string, options?: ItemOptions];
+
+interface ItemOptions {
+  w?: number;
+  h?: number;
+  align?: keyof typeof alignments;
+}
+
+const alignments = {
+  bottom: "50% 80%",
+  "bottom-end": "50% 100%",
+  top: "50% 30%",
+  "top-end": "50% 0%",
+  left: "30% 50%",
+  "left-end": "0% 50%",
+  right: "80% 50%",
+  "right-end": "100% 50%",
+};
+
+const typicalPageWidth = 768;
+
+export function PhotoGrid({
+  style,
+  base,
+  width,
+  widths,
+  heights,
+  items,
+}: PhotoGridProps) {
+  if (!base.endsWith("/")) base += "/";
+  let rows: boolean[][] = [];
+  const row = (y: number) => (rows[y] ??= new Array(width).fill(false));
+  const anyCollide = (x: number, y: number, w: number, h: number) => {
+    for (let yy = 0; yy < h; yy++) {
+      const r = row(y + yy);
+      for (let xx = 0; xx < w; xx++) if (r[x + xx]) return true;
+    }
+    return false;
+  };
+
+  const firstRowHeight = heights?.[0] ?? 325;
+
+  let x = 0;
+  let y = 0;
+  let contents = [];
+  for (const item of items) {
+    const [img, { w = 1, h = 1, align } = {}] = isArray(item) ? item : [item];
+    if (w > width) throw new Error(`Item ${img} too wide (${w} > ${width})`);
+
+    while (anyCollide(x, y, w, h)) {
+      x += 1;
+      if (x > width - w) x = 0, y += 1;
+    }
+    for (let yy = 0; yy < h; yy++) {
+      const r = row(y + yy);
+      for (let xx = 0; xx < w; xx++) r[x + xx] = true;
+    }
+
+    const info = fileInfo(base, img);
+    contents.push(
+      <div
+        style={{
+          ...x === 0 && y === 0 &&
+            {
+              "aspect-ratio": ((w / width) * typicalPageWidth) / firstRowHeight,
+            },
+          "grid-area": `${y + 1} / ${x + 1} / ${1 + y + h} / ${1 + x + w}`,
+        }}
+      >
+        <Image
+          {...info}
+          displayWidthEstimate={Math.ceil((w / width) * 736)}
+          style={{
+            "object-position": align
+              ? (alignments as Record<string, string>)[align] ?? align
+              : "50% 50%",
+          }}
+        />
+      </div>,
+    );
+  }
+
+  const height = rows.length;
+  return (
+    <photo-grid
+      style={{
+        ...style,
+        "grid-template-columns": widths
+          ? mapSizes(widths).join(" ")
+          : `repeat(${width}, 1fr)`,
+        "grid-template-rows": heights
+          ? heights.map((h) => (h / firstRowHeight) + "fr")
+            .concat(new Array(height - heights.length).fill("1fr"))
+            .join(" ")
+          : `repeat(${height}, 1fr)`,
+      }}
+    >
+      {contents}
+    </photo-grid>
+  );
+}
+
+function fileInfo(base: string, img: string) {
+  const filePath = path.join(base, img);
+  const file = MediaFile.getByPath(filePath);
+  const dimensions = file?.parseDimensions();
+  if (!dimensions) {
+    throw new Error(`File does not exist or has no dimensions: ${filePath}`);
+  }
+  const alt = path.basename(img, path.extname(img));
+  return { src: file, alt, width: dimensions.width, height: dimensions.height };
+}
+
+function mapSizes(sizes: Array<string | number>) {
+  return sizes.map(mapSize);
+}
+function mapSize(size: string | number) {
+  return typeof size === "number" ? size + "px" : size;
+}
+
+import "./photo-grid.css";
+import { MediaFile } from "@/file-viewer/models/MediaFile.ts";
+import Image from "./image.tsx";
+import * as path from "node:path";
diff --git a/src/tags/questions-embed.css b/src/tags/questions-embed.css
new file mode 100644
index 0000000000000000000000000000000000000000..5be21885a58cf0d137b498f768e87b17e319efd8
--- /dev/null
+++ b/src/tags/questions-embed.css
@@ -0,0 +1,9 @@
+.questions-embed {
+  --fg: #f0f0f0;
+  --bg: #1a1a1a;
+  --primary: #f5a9b8;
+  background-color: var(--bg);
+  margin: -1rem;
+  margin-top: 1rem;
+  padding: 1rem;
+}
diff --git a/src/tags/questions-embed.marko b/src/tags/questions-embed.marko
new file mode 100644
index 0000000000000000000000000000000000000000..49f8cb540aa26fc045a21a266133fa94e49f3397
--- /dev/null
+++ b/src/tags/questions-embed.marko
@@ -0,0 +1,16 @@
+import "./questions-embed.css";
+
+export interface Input {
+  value: string;
+}
+
+<div.questions-embed.qa>
+  <a href="/q+a">ask your own question / view all questions</a>
+  <br />
+  <for|question| of=Question.search(input.value)>
+    <QuestionRender ...{ question } />
+  </>
+</div>
+
+import QuestionRender from "@/q+a/tags/question.marko";
+import { Question } from "@/q+a/models/Question.ts";