docs: Add wxt init demo GIF

.github/workflows/vhs.yml

@@ -0,0 +1,44 @@
+name: vhs
+on:
+  push:
+    paths:
+      - 'docs/tapes/*.tape'
+  workflow_dispatch:
+
+jobs:
+  vhs:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup pnpm
+        uses: pnpm/[email protected]
+        with:
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/[email protected]
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      # NOTE: This function does not work, possibly because `pnpm` is running in the vhs sandbox
+      # - name: Install dependencies
+      #   run: pnpm store add wxt@latest
+
+      - uses: charmbracelet/[email protected]
+        with:
+          path: 'docs/tapes/demo.tape'
+
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          commit_message: Update generated VHS GIF
+          commit_user_name: vhs-action 📼
+          commit_user_email: [email protected]
+          commit_author: vhs-action 📼 <[email protected]>
+          branch: ${{ github.head_ref || github.ref_name }}
+          # https://github.com/charmbracelet/vhs#output
+          file_pattern: 'docs/public/*.gif'

docs/get-started/installation.md

@@ -25,6 +25,10 @@ npx wxt@latest init <project-name>
 npx wxt@latest init <project-name>
 ```
 
+### Demo
+
+![Demo](/public/demo.gif)
+
 :::
 
 There are several starting templates available.

docs/tapes/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/public/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