diff --git a/site/assets/blog/pocket-vapor-promo-poster.jpg b/site/assets/blog/pocket-vapor-promo-poster.jpg new file mode 100644 index 00000000..6b5d506b Binary files /dev/null and b/site/assets/blog/pocket-vapor-promo-poster.jpg differ diff --git a/site/assets/pocket-vapor-promo.mp4 b/site/assets/pocket-vapor-promo.mp4 new file mode 100644 index 00000000..d419c5f6 Binary files /dev/null and b/site/assets/pocket-vapor-promo.mp4 differ diff --git a/site/build.ts b/site/build.ts index 8292528e..cc2d8205 100644 --- a/site/build.ts +++ b/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); diff --git a/site/content/blog/pocket-vapor.md b/site/content/blog/pocket-vapor.md index 69f0dec3..c22d00ac 100644 --- a/site/content/blog/pocket-vapor.md +++ b/site/content/blog/pocket-vapor.md @@ -1,3 +1,7 @@ + + +

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.

+ 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

A Vue component, mid-keystroke. The amber bar is a reactive string ref being edited with a d-pad; the emerald title is class="bg-emerald-500 text-slate-950 align-center"; the machine is a Game Boy Advance. The whole cartridge is 9.1 KB.

diff --git a/skills/pocketjs-video-outro/SKILL.md b/skills/pocketjs-video-outro/SKILL.md index 4a68c481..561736f8 100644 --- a/skills/pocketjs-video-outro/SKILL.md +++ b/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/.mp4` (existing examples: + `pocketjs-hardware-demo.mp4`, `pocketjs-demo-wall.mp4`). +2. Add a `copy(SITE + "assets/.mp4", "assets/.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 `