feat(site): embed the Pocket Vapor promo film at the top of the blog post

site/build.ts

@@ -358,6 +358,9 @@ async function main() {
   // The hero demo wall + its poster frame (baked by site/bake-demo-wall.ts).
   copy(SITE + "assets/pocketjs-demo-wall.mp4", "assets/pocketjs-demo-wall.mp4");
   copy(SITE + "assets/pocketjs-demo-wall.jpg", "assets/pocketjs-demo-wall.jpg");
+  // The Pocket Vapor promo film (embedded at the top of the pocket-vapor post;
+  // rendered by vapor/scripts/promo/, poster frame lives in assets/blog/).
+  copy(SITE + "assets/pocket-vapor-promo.mp4", "assets/pocket-vapor-promo.mp4");
   // Blog illustration loops (animated GIFs rendered by the engine itself).
   if (existsSync(SITE + "assets/blog/")) {
     for (const f of readdirSync(SITE + "assets/blog/")) copy(SITE + "assets/blog/" + f, "assets/blog/" + f);

site/content/blog/pocket-vapor.md

@@ -1,3 +1,7 @@
+<video class="w-full rounded-xl border border-line" src="/assets/pocket-vapor-promo.mp4" poster="/assets/blog/pocket-vapor-promo-poster.jpg" controls playsinline preload="metadata"></video>
+
+<p class="text-sm text-slate-500 -mt-4">The 47-second tour: a real Vue component, compiled to three consoles, running the same inputs in lockstep. Sound on; the chiptune is synthesized by the same repo that builds the ROMs.</p>
+
 <img class="w-full rounded-xl border border-line" src="/assets/blog/vapor-gba-edit.png" alt="A Game Boy Advance screen running a todo app: an emerald title bar reading POCKET VAPOR TODO, a list with SHIP POCKET VAPOR selected, WRITE THE COMPILER checked off, and an amber editor bar at the bottom reading NEW: HELLO HN with a glyph picker cursor" />
 
 <p class="text-sm text-slate-500 -mt-4">A Vue component, mid-keystroke. The amber bar is a reactive string ref being edited with a d-pad; the emerald title is <code>class="bg-emerald-500 text-slate-950 align-center"</code>; the machine is a Game Boy Advance. The whole cartridge is 9.1 KB.</p>

skills/pocketjs-video-outro/SKILL.md

@@ -109,6 +109,29 @@ ffprobe -v error -select_streams v:0 \
   spatial-audio track plus several data streams; `a:0` is the standard stereo mix.
   If the source has no audio, the output is video-only.
 
+## Publishing a video on pocketjs.dev
+
+There is no separate upload step — videos ship with the site deploy as
+static Worker assets (Cloudflare, `site/wrangler.jsonc`; keep each file well
+under the 25 MiB per-asset limit):
+
+1. Commit the mp4 into git at `site/assets/<name>.mp4` (existing examples:
+   `pocketjs-hardware-demo.mp4`, `pocketjs-demo-wall.mp4`).
+2. Add a `copy(SITE + "assets/<name>.mp4", "assets/<name>.mp4")` line in
+   `site/build.ts` step 4, next to the other mp4 copies. Files under
+   `site/assets/blog/` (e.g. poster frames) are directory-copied
+   automatically and need no explicit line.
+3. Embed with a raw `<video>` tag in the page or post markdown. House
+   classes: `class="w-full rounded-xl border border-line"`. Silent loops use
+   `autoplay muted loop playsinline`; anything with a soundtrack must use
+   `controls playsinline preload="metadata"` plus a `poster` (browsers block
+   un-muted autoplay). Bake the poster with
+   `ffmpeg -ss <t> -i in.mp4 -frames:v 1 -q:v 3 site/assets/blog/<name>-poster.jpg`.
+4. Verify locally with `bun run site:build`, then merge to main —
+   `.github/workflows/deploy.yml` runs `site:build` and
+   `bunx wrangler deploy -c site/wrangler.jsonc`. Manual deploy is those same
+   two commands.
+
 ## Customization & internals
 
 - The card is `assets/outro.html`, parameterized via query string