VHS Action

repository·main·Indexed 42 days ago

https://github.com/charmbracelet/vhs-action

A GitHub Action that automates the generation of GIFs from VHS .tape files during CI/CD processes. It allows for automated project demos and integration testing via visual output, supporting custom VHS versions and optional font installations.

Tokens
881
Snippets
2
Records
5
Agent score
5%

What's inside VHS Action

  1. Set up VHS Action in GitHub Actions

    main

    To automate GIF generation using VHS in your GitHub workflows, follow these steps:

    1. Create a workflow file at .github/workflows/vhs.yml in your project.
    2. Configure the workflow using one of the provided examples (e.g., auto-committing the GIF or commenting it on a Pull Request).
    3. Create .tape files in your repository containing the VHS instructions for the demo you want to record.
    4. Trigger the action by making a commit or opening a pull request, depending on your workflow configuration.

    Whenever the action is triggered, VHS will regenerate the GIF from your .tape files on CI.

    # Example workflow structure
    name: VHS
    on: [push]
    jobs:
      vhs:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v3
          - uses: charmbracelet/vhs-action@v2
            with:
              path: demo.tape
  2. How VHS Action executes

    main

    The action follows a specific lifecycle during execution:

    1. Validation: If a path is provided, it checks for the file's existence and readability.
    2. Environment Setup: It installs required fonts and dependencies.
    3. Installation: It installs the specified version of the VHS binary.
    4. Path Configuration: It adds the VHS binary directory to the system PATH.
    5. Terminal Configuration:
      • It unsets the CI environment variable to ensure termenv does not ignore ANSI sequences.
      • It sets COLORTERM to truecolor to enable true color support in GitHub Actions.
    6. Execution: If a path was provided, it runs the command: ${bin} ${filePath}.
  3. Use examples for VHS Action workflows

    main

    You can use the following patterns for your VHS workflow:

    • Auto-commit latest generated GIF file: Automatically commits the newly generated GIF back to your repository. See examples/auto-commit.yml.
    • Upload GIF to host and comment on PR: Uploads the generated GIF to a host and posts it as a comment on a Pull Request. See examples/comment-pr.yml.
  4. Configure vhs-action inputs

    main

    The vhs-action accepts the following inputs in your GitHub Actions workflow:

    NameDescriptionDefault
    pathPath of the VHS .tape file"" (installs VHS without running it)
    versionVersion of VHS to use"latest"
    tokenGitHub token to use"${{ github.token }}"
    install-fontsWhether to install extra fonts"false"

    By default, the action provides JetBrains Mono. If you set install-fonts to true, you can access additional fonts and their Nerd Font variations, including:

    • Bitstream Vera Sans Mono
    • DejaVu
    • Fira Code
    • Hack
    • IBM Plex Mono
    • Inconsolata
    • Liberation
    • Roboto Mono
    • Source Code Pro
    • Ubuntu Mono
  5. Configure the VHS Action inputs

    main

    The vhs-action requires specific inputs to function correctly within a GitHub Actions workflow.

    • version: The version of VHS to install.
    • path: (Optional) The path to the .tape file that VHS should execute. If provided, the action validates that the file exists and is readable before attempting to run it.

    When a path is provided, the action automatically executes the VHS binary against that file.

    inputs:
      version: 
        description: 'VHS version to install'
      path: 
        description: 'Path to the .tape file to run'
        required: false