Skip to content

Commit afb0ed1

Browse files
HankyStyleHankyStyle
authored
docs: add VHS-based interactive screenshot generation (#1862)
* docs: add VHS tape for cz init interactive demo * docs: add VHS tape for cz commit interactive demo * ci(gen_cli_help_screenshots): add gen_interactive_screenshots function * ci(workflow): add VHS support to documentation workflow * style: remove redundant comments * docs: reorganize interactive CLI GIFs into cli_interactive directory * ci: modify file path * refactor: extract interactive GIF generation into separate script * build: configure parallel screenshot generation with VHS * docs: update VHS tape output paths to cli_interactive directory
1 parent 2847b8c commit afb0ed1

File tree

13 files changed

+276
-8
lines changed

13 files changed

+276
-8
lines changed

‎.github/workflows/docspublish.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,16 @@ jobs:
2020
run: |
2121
uv --version
2222
uv sync --frozen --group base --group script
23+
- name: Install VHS
24+
uses: charmbracelet/vhs-action@v2
2325
- name: Update CLI screenshots
2426
run: |
2527
uv run --no-sync poe doc:screenshots
2628
- name: Commit and push updated CLI screenshots
2729
run: |
2830
git config --global user.name "github-actions[bot]"
2931
git config --global user.email "github-actions[bot]@users.noreply.github.com"
30-
git add docs/images/cli_help
32+
git add docs/images/cli_help docs/images/cli_interactive
3133
3234
if [[ -n "$(git status --porcelain)" ]]; then
3335
git commit -m "docs(cli/screenshots): update CLI screenshots" -m "[skip ci]"

‎docs/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
[![Codecov](https://img.shields.io/codecov/c/github/commitizen-tools/commitizen.svg?style=flat-square)](https://codecov.io/gh/commitizen-tools/commitizen)
1010
[![prek](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/j178/prek/master/docs/assets/badge-v0.json&style=flat-square&color=brightgreen)](https://github.com/j178/prek)
1111

12-
![Using Commitizen cli](images/demo.gif)
12+
![Using Commitizen cli](images/cli_interactive/commit.gif)
1313

1414
---
1515

‎docs/commands/commit.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
## Overview
66

7-
![Using Commitizen cli](../images/demo.gif)
7+
![Using Commitizen cli](../images/cli_interactive/commit.gif)
88

99
The `commit` command provides an interactive way to create structured commits. Use either:
1010

‎docs/commands/init.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ cz init
1414

1515
When you run `cz init`, Commitizen will guide you through an interactive setup process:
1616

17-
![init](../images/init.gif)
17+
![init](../images/cli_interactive/init.gif)
1818

1919
## Configuration File
2020

‎docs/images/cli_interactive/commit.gif‎

187 KB
Loading

‎docs/images/cli_interactive/init.gif‎

227 KB
Loading

‎docs/images/commit.tape‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
Output cli_interactive/commit.gif
2+
3+
Require cz
4+
5+
# Use bash for cross-platform compatibility (macOS, Linux, Windows)
6+
Set Shell bash
7+
8+
Set FontSize 16
9+
Set Width 878
10+
Set Height 568
11+
Set Padding 20
12+
Set TypingSpeed 50ms
13+
14+
Set Theme {
15+
"name": "Commitizen",
16+
"black": "#232628",
17+
"red": "#fc4384",
18+
"green": "#b3e33b",
19+
"yellow": "#ffa727",
20+
"blue": "#75dff2",
21+
"magenta": "#ae89fe",
22+
"cyan": "#708387",
23+
"white": "#d5d5d0",
24+
"brightBlack": "#626566",
25+
"brightRed": "#ff7fac",
26+
"brightGreen": "#c8ed71",
27+
"brightYellow": "#ebdf86",
28+
"brightBlue": "#75dff2",
29+
"brightMagenta": "#ae89fe",
30+
"brightCyan": "#b1c6ca",
31+
"brightWhite": "#f9f9f4",
32+
"background": "#1e1e2e",
33+
"foreground": "#afafaf",
34+
"cursor": "#c7c7c7"
35+
}
36+
37+
# Hide initial shell prompt
38+
Hide
39+
40+
# Wait for terminal to be ready
41+
Sleep 1s
42+
43+
# Set a clean, simple prompt (while hidden)
44+
Type "PS1='$ '"
45+
Enter
46+
Sleep 300ms
47+
48+
# Create a clean temporary directory for recording
49+
Type "rm -rf /tmp/commitizen-demo && mkdir -p /tmp/commitizen-demo && cd /tmp/commitizen-demo"
50+
Enter
51+
Sleep 500ms
52+
53+
# Initialize git repository
54+
Type "git init"
55+
Enter
56+
Sleep 500ms
57+
58+
Type "git checkout -b awesome-feature"
59+
Enter
60+
Sleep 500ms
61+
62+
# Create a dummy file to commit
63+
Type "echo 'test content' > example.py"
64+
Enter
65+
Sleep 300ms
66+
67+
Type "git add example.py"
68+
Enter
69+
Sleep 300ms
70+
71+
# Clear the screen to start fresh
72+
Type "clear"
73+
Enter
74+
Sleep 500ms
75+
76+
# Show commands from here
77+
Show
78+
79+
# Now run cz commit
80+
Type "cz commit"
81+
Sleep 500ms
82+
Enter
83+
84+
# Wait for first prompt to appear
85+
Sleep 1s
86+
87+
# Question 1: Select the type of change (move down to "feat")
88+
Down
89+
Sleep 500ms
90+
Enter
91+
Sleep 1s
92+
93+
# Question 2: Scope (optional, skip)
94+
Enter
95+
Sleep 1s
96+
97+
# Question 3: Subject
98+
Type "awesome new feature"
99+
Sleep 500ms
100+
Enter
101+
Sleep 1s
102+
103+
# Question 4: Is this a BREAKING CHANGE? (No)
104+
Enter
105+
Sleep 1s
106+
107+
# Question 5: Body (optional, skip)
108+
Enter
109+
Sleep 1s
110+
111+
# Question 6: Footer (optional, skip)
112+
Enter
113+
Sleep 1s
114+
115+
# Wait for commit success message
116+
Sleep 2s

‎docs/images/demo.gif‎

-130 KB
Binary file not shown.

‎docs/images/init.gif‎

-131 KB
Binary file not shown.

‎docs/images/init.tape‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
Output cli_interactive/init.gif
2+
3+
Require cz
4+
5+
# Use bash for cross-platform compatibility (macOS, Linux, Windows)
6+
Set Shell bash
7+
8+
Set FontSize 16
9+
Set Width 878
10+
Set Height 568
11+
Set Padding 20
12+
Set TypingSpeed 50ms
13+
14+
Set Theme {
15+
"name": "Commitizen",
16+
"black": "#232628",
17+
"red": "#fc4384",
18+
"green": "#b3e33b",
19+
"yellow": "#ffa727",
20+
"blue": "#75dff2",
21+
"magenta": "#ae89fe",
22+
"cyan": "#708387",
23+
"white": "#d5d5d0",
24+
"brightBlack": "#626566",
25+
"brightRed": "#ff7fac",
26+
"brightGreen": "#c8ed71",
27+
"brightYellow": "#ebdf86",
28+
"brightBlue": "#75dff2",
29+
"brightMagenta": "#ae89fe",
30+
"brightCyan": "#b1c6ca",
31+
"brightWhite": "#f9f9f4",
32+
"background": "#1e1e2e",
33+
"foreground": "#afafaf",
34+
"cursor": "#c7c7c7"
35+
}
36+
37+
# Hide initial shell prompt
38+
Hide
39+
40+
# Wait for terminal to be ready
41+
Sleep 1s
42+
43+
# Set a clean, simple prompt
44+
Type "PS1='$ '"
45+
Enter
46+
Sleep 300ms
47+
48+
49+
# Create a clean temporary directory for recording
50+
Type "rm -rf /tmp/commitizen-example && mkdir -p /tmp/commitizen-example && cd /tmp/commitizen-example"
51+
Enter
52+
Sleep 500ms
53+
54+
# Clear the screen to start fresh
55+
Type "clear"
56+
Enter
57+
Sleep 500ms
58+
59+
# Show commands from here
60+
Show
61+
62+
# Now run cz init in the clean environment
63+
Type "cz init"
64+
Sleep 500ms
65+
Enter
66+
67+
# Wait for welcome message and first prompt
68+
Sleep 500ms
69+
Sleep 1s
70+
# Question 1: Please choose a supported config file
71+
# Default is .cz.toml, just press Enter
72+
Enter
73+
Sleep 1s
74+
75+
# Question 2: Please choose a cz (commit rule)
76+
# Default is cz_conventional_commits, just press Enter
77+
Enter
78+
Sleep 1s
79+
80+
# Question 3: Choose the source of the version
81+
# Default is "commitizen: Fetch and set version in commitizen config, just press Enter"
82+
Enter
83+
Sleep 1s
84+
85+
# Question 4: Choose version scheme
86+
# Default is semver, just press Enter
87+
Enter
88+
Sleep 1s
89+
90+
# Question 5: Please enter the correct version format
91+
# Default is "$version", just press Enter
92+
Enter
93+
Sleep 1s
94+
95+
# Question 6: Create changelog automatically on bump
96+
# Default is Yes, just press Enter
97+
Enter
98+
Sleep 1s
99+
100+
# Question 7: Keep major version zero (0.x) during breaking changes
101+
# Default is Yes, just press Enter
102+
Enter
103+
Sleep 1s
104+
105+
# Question 8: What types of pre-commit hook you want to install?
106+
# Default is [commit-msg], just press Enter to accept
107+
Enter
108+
Sleep 1s
109+
110+
# Wait for completion message
111+
Sleep 3s

0 commit comments

Comments
 (0)