diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml index 41c132f0..597ac8a3 100644 --- a/.github/actions/setup/action.yml +++ b/.github/actions/setup/action.yml @@ -1,5 +1,9 @@ name: Basic Setup description: Install PNPM, Node, and dependencies +inputs: + install: + default: 'true' + description: Whether or not to run 'pnpm install' runs: using: composite steps: @@ -11,5 +15,6 @@ runs: node-version: 18 cache: pnpm - name: Install Dependencies + if: ${{ inputs.install == 'true' }} shell: bash run: pnpm install diff --git a/.github/workflows/vhs.yml b/.github/workflows/vhs.yml new file mode 100644 index 00000000..13936141 --- /dev/null +++ b/.github/workflows/vhs.yml @@ -0,0 +1,29 @@ +name: vhs +on: + push: + paths: + - 'docs/tapes/*.tape' + workflow_dispatch: + +jobs: + vhs: + runs-on: ubuntu-22.04 + steps: + - uses: actions/checkout@v4 + - uses: ./.github/actions/setup + with: + install: 'false' + - name: Preinstall WXT + run: | + pnpm store add wxt@latest + pnpm dlx wxt@latest --version + - uses: charmbracelet/vhs-action@v2.1.0 + with: + path: 'docs/tapes/init-demo.tape' + - uses: stefanzweifel/git-auto-commit-action@v4 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + commit_message: 'docs: Update `wxt init` GIF' + # https://github.com/charmbracelet/vhs#output + file_pattern: 'docs/assets/*.gif' diff --git a/docs/assets/init-demo.gif b/docs/assets/init-demo.gif new file mode 100644 index 00000000..16461336 Binary files /dev/null and b/docs/assets/init-demo.gif differ diff --git a/docs/get-started/installation.md b/docs/get-started/installation.md index 5159f3fd..7bf4765c 100644 --- a/docs/get-started/installation.md +++ b/docs/get-started/installation.md @@ -25,6 +25,10 @@ npx wxt@latest init npx wxt@latest init ``` +### Demo + +![wxt init demo](/assets/init-demo.gif) + ::: There are several starting templates available. diff --git a/docs/tapes/init-demo.tape b/docs/tapes/init-demo.tape new file mode 100644 index 00000000..a57936fe --- /dev/null +++ b/docs/tapes/init-demo.tape @@ -0,0 +1,59 @@ +# VHS documentation +# +# You can view all VHS documentation on the command line with `vhs manual`. +# Or see https://github.com/charmbracelet/vhs#vhs-command-reference + +# Output file +Output docs/assets/init-demo.gif + +# The tools we will use +Require pnpm + + +# === Scene ==== +Set Width 1400 +Set Height 800 + +# The maximum FPS for GIF is `50` FPS. +Set Framerate 50 + +# Terminal theme with WXT brand colors (which was taken from the website) +# Based on the standard charmbracelet/vhs theme: +# https://github.com/charmbracelet/vhs/blob/88e634f4a10bbe305b6aea9a12b4d8dc3dd7f31c/style.go#L7-L28 +Set Theme {"background": "#1a1b1a", "foreground": "#dddddd", "black": "#282a2e", "brightBlack": "#4d4d4d", "red": "#D74E6F", "brightRed": "#FE5F86", "green": "#67d45e", "brightGreen": "#67d45e", "yellow": "#D3E561", "brightYellow": "#EBFF71", "blue": "#8056FF", "brightBlue": "#9B79FF", "magenta": "#ED61D7", "brightMagenta": "#FF7AEA", "cyan": "#04D7D7", "brightCyan": "#00FEFE", "white": "#bfbfbf", "brightWhite": "#e6e6e6", "indigo": "#5B56E0"} +Set FontSize 32 + +# Terminal settings +Set Shell "bash" + +# Terminal prompt. It looks like "● mycommand ..." +Env PS1 "\e[0;32m●\e[0m " + + +# ===== Preparation ===== +# Steps to prepare the recording environment, ensuring a clean and isolated setup. + +Hide +# Create a temporary folder for demo +Type 'vhs_sandbox="$(mktemp -d)"' Enter +Type 'cd "$vhs_sandbox"' Enter +Type 'clear' Enter +Show + + +# ===== Actions ===== + +Type 'pnpm dlx wxt@latest init .' Sleep 1s Enter +Sleep 3.25s +Down@750ms Enter@750ms # Select `vue` template +Sleep 1.25s +Down@750ms Enter@750ms # Select `pnpm` as a package manager +Sleep 5s + + +# ===== Cleaning ===== + +Hide +# Delete the temporary folder +Type 'rm -rf "$vhs_sandbox"' Enter +Show