fix(scripts): render template-only blocks in catalog previews (#3098)

* fix(scripts): render template-only blocks in catalog previews

The catalog preview renderer treated any file containing `__timelines` as a
standalone composition and rendered it as index.html directly. The 12 VS Code
snippet blocks register their timeline inside a `<template>`, which stays
inert until a host mounts it, so every one of them failed with "Composition
has zero duration" and no preview could be produced from the registry at all.
Six of the previews on the docs CDN were hand-made from a project still
mounting Monokai, so Dark+, High Contrast, High Contrast Light, Solarized
Light, Visual Studio Dark and Visual Studio Light all showed Monokai's video.

Detect standalone-ness on the document with template content stripped, mount
the mirrored install-layout copy so a block's own `../assets/*` references
resolve, and capture posters opaque: `format: "png"` is the engine's
transparent mode and forces `background-image: none` on every composition
root, which erased the desktop backdrop these blocks paint.

Publishing gets the missing half too: preview URLs are stable and the objects
are uploaded `immutable` with a one-year max-age, so a re-upload alone never
reaches a reader.

* fix(scripts): install ffmpeg in the preview job and fix the sibling renderer

The canary this PR added caught its own regression: the poster transcode
shells out to ffmpeg, which ubuntu-latest does not ship and this job never
needed, so both canaries failed with `spawnSync ffmpeg ENOENT`. Install it
the way every other render job does. `encodeForWeb` has always shelled out to
the same binary; the job only got away with it because `--skip-video` skipped
that path.

generate-template-previews.ts captures posters through the same transparent
`format: "png"` mode, so any template painting its own backdrop loses it
exactly as the code snippets did. Fixing one renderer and leaving its sibling
on the broken call would just move the bug.

Also fold the three separate parses of registry-item.json into one read: they
had drifted into three different failure behaviours for the same file.
This commit is contained in:
Miguel Ángel
2026-08-07 15:17:30 -07:00
committed by GitHub
parent a850e97f3d
commit 218eff7d36
4 changed files with 100 additions and 22 deletions
+21
View File
@@ -58,6 +58,14 @@ jobs:
with:
chrome-version: stable
# The renderer shells out to ffmpeg for both halves of a preview: the
# poster transcode and the web encode of the mp4. Neither ran here before
# (`--skip-video` skipped the encode, and the poster copy was a plain
# file copy), so the job never needed it and ubuntu-latest does not ship
# it.
- name: Install ffmpeg
run: sudo apt-get update -qq && sudo apt-get install -y --no-install-recommends ffmpeg
- name: Render changed block/component previews
env:
BASE_SHA: ${{ github.event.pull_request.base.sha }}
@@ -68,6 +76,19 @@ jobs:
| sed 's|^registry/[^/]*/\([^/]*\)/.*|\1|' \
| sort -u)
# A renderer change reaches every item, so it cannot be trusted to a
# PR that happens to also touch a block. Two canaries cover the two
# shapes the renderer has to tell apart: a block whose scene lives in
# a <template> (mounted through a wrapper) and one that registers its
# timeline at body level (rendered directly). Getting that wrong is
# silent — the wrong-shaped block renders blank, not red.
RENDERER_CHANGED=$(git diff --name-only --diff-filter=ACMR "$BASE_SHA"...HEAD \
-- scripts/generate-catalog-previews.ts scripts/registry-target-paths.mjs)
if [ -n "$RENDERER_CHANGED" ]; then
CHANGED_ITEMS=$(printf '%s\n' $CHANGED_ITEMS \
code-snippet-visual-studio-dark code-snippet-apple-terminal-pro | sort -u)
fi
if [ -z "$CHANGED_ITEMS" ]; then
echo "No block/component changes detected."
exit 0