Skip to content

Comments

Add VHS demo GIF generation#18

Merged
SCKelemen merged 61 commits intomainfrom
demo-gifs
Nov 29, 2025
Merged

Add VHS demo GIF generation#18
SCKelemen merged 61 commits intomainfrom
demo-gifs

Conversation

@SCKelemen
Copy link
Owner

This PR adds automated demo GIF generation using VHS.

Changes

  • Added demos/vhs/generate-demos.sh script to discover examples and generate demo GIFs
  • Added GitHub Actions workflow (.github/workflows/demos.yml) for automated GIF generation
  • Added all demo tape files (.tape) and generated GIFs for all examples
  • Updated .gitignore to properly track example directories while ignoring build binaries
  • Configured Nord theme with proper color support

Features

  • Automatically discovers examples in examples/ directory
  • Generates tape files and GIFs for each example
  • Uses Hide/Show to keep GIFs clean (hides unset NO_COLOR command)
  • GitHub Action regenerates GIFs when examples or tape files change

Examples included

  • basic
  • bubbles
  • gcloud
  • gh
  • lipgloss
  • multicli
  • survey

- Add generate-demos.sh script to discover and generate demo GIFs
- Add GitHub Actions workflow for automated GIF generation
- Add all demo tape files and generated GIFs for examples
- Update .gitignore to track example directories but ignore binaries
- Use Nord theme with proper color support via unset NO_COLOR && clear
SCKelemen and others added 27 commits November 29, 2025 16:29
- Replace manual VHS installation with official vhs-action
- Remove auto-commit logic (no automatic commits from CI)
- Simplify workflow - vhs-action handles VHS setup automatically
- Remove components branch from triggers (only main now)
- vhs-action will generate GIFs from all tape files matching pattern
- Re-add commit step but use personal GitHub account credentials
- Commit as Samuel Kelemen (SCKelemen) instead of generic GitHub Action
- Uses GITHUB_TOKEN which should work for personal account commits
- Use PERSONAL_GITHUB_TOKEN if available, fallback to GITHUB_TOKEN
- This allows commits to show as coming from personal account
- Add PERSONAL_GITHUB_TOKEN secret in repo settings for personal commits
- Use GIT_USER_NAME and GIT_USER_EMAIL repository secrets
- Falls back to default values if secrets are not set
- Allows changing commit author without modifying workflow code
- Change from samuel.kelemen@users.noreply.github.com
- To SCKelemen@users.noreply.github.com (username format)
- vhs-action only accepts single 'path', not 'tapes' or globs
- Generate GIFs by iterating over tape files and using vhs directly
- Install vhs if needed and run it for each tape file
- vhs-action doesn't support glob patterns, only single path
- Use our existing generate-demos.sh script which handles all tape files
- Install VHS using vhs-action (with empty path) just for setup
- Then use our script to generate all GIFs
- vhs-action requires a path even when empty, causing errors
- Install VHS and dependencies manually
- Then use our generate-demos.sh script to generate all GIFs
- Checkout the branch explicitly before committing
- Extract branch name from GITHUB_REF
- Push to the specific branch instead of relying on upstream tracking
- Use github.head_ref for PRs instead of GITHUB_REF
- GITHUB_REF is refs/pull/N/merge for PRs which is invalid
- github.head_ref contains the actual branch name for PRs
- Install xvfb for headless display
- Start Xvfb before generating GIFs
- Set DISPLAY environment variable for VHS
- Fixes broken GIFs showing only cursors or execvp errors
- Find all tape files and create matrix for parallel execution
- Each tape file generates its GIF in parallel
- Should reduce total time from ~5 minutes to ~1 minute
- fail-fast: false so one failure doesn't stop others
- Install jq for JSON parsing
- Fix path to find tape files (relative to repo root)
- Add debug output to show found tape files
- Split into prepare, generate-demos (matrix), and commit jobs
- Matrix strategy at job level for true parallel execution
- Each tape file generates in parallel on separate runners
- Should reduce total time significantly (from ~5min to ~1min)
- vhs-action handles VHS installation, dependencies, and display setup
- Cleaner workflow - no manual VHS/dependency installation needed
- vhs-action handles Xvfb and all VHS requirements automatically
- jq needed for JSON parsing in prepare job
- vhs-action handles all VHS setup, so we only need jq here
- vhs-action is failing to install ffmpeg
- Install ffmpeg manually as workaround
- vhs-action will skip ffmpeg installation if already present
- vhs-action has issues installing ffmpeg
- Install all dependencies manually (ffmpeg, ttyd, xvfb, VHS)
- More reliable and gives us full control
- Still generates GIFs in parallel via matrix strategy
- Add setup job to install and cache VHS binary
- Matrix jobs restore VHS from cache instead of installing each time
- System dependencies (ffmpeg, ttyd, xvfb) still installed per job (fast via apt)
- Matrix is already dynamic from prepare job discovering tape files
- Reduces redundant dependency installation across parallel jobs
- List directory contents before running VHS
- Check if binaries exist before VHS runs
- Better error reporting if VHS fails
- Add Go to PATH so tape file build commands can find 'go'
- execvp errors likely due to 'go' command not found
- VHS tape files include go build commands that need Go in PATH
- Use bash parameter expansion instead of dirname/basename commands
- Ensure standard PATH includes /usr/bin and /bin
- More reliable than relying on dirname command availability
- Fix cache path to use directory instead of single file
- Create bin directory before installing VHS
- Add workflow_dispatch input for manual regeneration
- Use Go's built-in cache for better dependency caching
- Allows manual triggering from Actions tab
- Can force regenerate all GIFs on demand
- Useful for updating GIFs without code changes
- Each matrix job uploads its generated GIF as an artifact
- Commit job downloads all GIFs and copies them to example directories
- Ensures regenerated GIFs are committed even if source code didn't change
- Fixes issue where GIFs were regenerated but not committed in PRs
SCKelemen and others added 29 commits November 29, 2025 18:15
- Use sed to replace forward slashes with dashes
- Remove examples- prefix and .tape suffix
- GitHub Actions expressions don't support replace() function
- Artifact names are now filesystem-safe
- Use matrix.tape directly in shell script
- Properly sanitize path to create valid artifact name
- Remove examples- prefix and .tape suffix
- Artifact names like 'gif-bubbles-demo' instead of 'gif-examples/bubbles/demo.tape'
- Show downloaded GIFs location
- Verify GIFs are copied to example directories
- Better logging to diagnose why GIFs might not be committed
- Set TERM and COLORTERM environment variables for VHS
- Add better error checking and debugging
- Verify GIF file exists and show size before uploading
- Better logging to diagnose execvp errors
- Add 10-minute timeout to GIF generation step
- Add timeout command wrapper (600s) for VHS execution
- Update tape files at runtime to use actual PATH instead of variables
- VHS doesn't expand shell variables in Env directives
- Use sed -i.bak on Linux (creates backup, then removes it)
- Fallback to sed -i '' for macOS compatibility
- Add better error handling and warnings
- Continue even if PATH update fails
- Check if Env PATH exists before trying to update
- Try Linux style sed -i.bak first, then macOS style sed -i ''
- Better error handling and logging
- multicli tape is generated separately, so it needs PATH added manually
- This ensures VHS can find go command when executing multicli.tape
- setup job needs checkout to access go.sum for cache key
- Upgrade all checkout actions from v4 to v5
- This ensures all jobs can access repository files
- VHS tape files use zsh as the shell
- zsh is required for proper execution of tape files
- Install in both setup and generate-demos jobs
- Use bash parameter expansion instead of dirname/basename for consistency
- Add explicit directory existence checks before cd operations
- Add error handling for missing directories
- Ensure all path operations are case-sensitive for Linux compatibility
- Explicitly unset NO_COLOR in workflow environment
- Set NO_COLOR to empty string in env block
- This should enable color output in the generated GIFs
- Add RequireInteractive to VHS tape files for better terminal emulation
- Add final sleep to basic demo to keep terminal visible at end
- This should prevent transparent frames in generated GIFs
- RequireInteractive is not a valid VHS command
- Revert to working version from commit 3dcf4b7
- Keep color environment variables and final sleep fixes
- Move generate-demos.sh to prepare job (before finding tapes)
- Fix PATH handling (remove env.PATH override, use GITHUB_PATH)
- Simplify VHS installation (remove broken cache logic)
- Fix Go version to 1.23.x (verify 1.24 exists)
- Improve Xvfb screen size to 1280x720
- Add TERM and COLORTERM to Generate demo GIF step
- Simplify commit job (only commit on non-PR events)
- Keep case-sensitivity fixes and PATH update logic
- Fix missing closing brace in vulnerabilities/commands.go
- Explicitly unset NO_COLOR in workflow
- Add debugging output for TERM/COLORTERM/NO_COLOR
- This should fix build errors and enable colors in GIFs
- Set SHELL environment variable to /bin/zsh
- This matches the tape file shell setting and should enable colors
- zsh has better color support than bash in some environments
- Remove export NO_COLOR="" which still defines the variable
- Only use unset NO_COLOR to completely remove it
- Many programs check for existence of NO_COLOR, not just its value
- This should properly enable colors
- Move Default and Value fields to StringVarOptions level, not FlagOptions
- FlagOptions only contains Name, Short, Usage
- StringVarOptions embeds FlagOptions and adds Default and Value
@SCKelemen SCKelemen merged commit af084b4 into main Nov 29, 2025
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant