docs: generate demo video for README

Author: SKalt

Makefile

@@ -1,6 +1,6 @@
 .PHONY: build install release changelog test-release-process test-rpm-install
 ./dist/git-cc: ./main.go ./go.mod ./go.sum ./pkg/**/*.go
-	go build -o ./dist
+	go build -o ./dist/git-cc
 build: ./dist/git-cc
 unit-test:
 	go test ./...
@@ -12,6 +12,9 @@ test-rpm-install: test-release-process
 	docker run -v ${PWD}/dist:/dist centos bash -c 'rpm -i /dist/git-cc*_linux_amd64.rpm && git-cc --version'
 #^ requires that GITHUB_TOKEN be set, and the token have the 'repo' scope
 
+./assets/demo.mp4: ./assets/demo.tape
+	cat ./assets/demo.tape | vhs
+
 changelog:
 	pnpx standard-version
 release:

README.md

@@ -7,7 +7,12 @@ a git extension to help write [conventional commits][cc-standard]
 
 ## Usage
 
-![demo video](./assets/demo.gif)
+<details><summary>Video</summary>
+<div>
+    <video controls src="./assets/demo.mp4" muted="true">
+    </video>
+</div>
+</details>
 
 ```sh
 # you can invoke either of the below to

assets/demo.gif

@@ -0,0 +1,122 @@
+# VHS documentation
+#
+# Output:
+#   Output <path>.gif               Create a GIF output at the given <path>
+#   Output <path>.mp4               Create an MP4 output at the given <path>
+#   Output <path>.webm              Create a WebM output at the given <path>
+#
+# Settings:
+#   Set FontSize <number>           Set the font size of the terminal
+#   Set FontFamily <string>         Set the font family of the terminal
+#   Set Height <number>             Set the height of the terminal
+#   Set Width <number>              Set the width of the terminal
+#   Set LetterSpacing <float>       Set the font letter spacing (tracking)
+#   Set LineHeight <float>          Set the font line height
+#   Set Theme <string>              Set the theme of the terminal (JSON)
+#   Set Padding <number>            Set the padding of the terminal
+#   Set Framerate <number>          Set the framerate of the recording
+#   Set PlaybackSpeed <float>       Set the playback speed of the recording
+#
+# Sleep:
+#   Sleep <time>                    Sleep for a set amount of <time> in seconds
+#
+# Type:
+#   Type[@<time>] "<characters>"    Type <characters> into the terminal with a
+#                                   <time> delay between each character
+#
+# Keys:
+#   Backspace[@<time>] [number]     Press the Backspace key
+#   Down[@<time>] [number]          Press the Down key
+#   Enter[@<time>] [number]         Press the Enter key
+#   Space[@<time>] [number]         Press the Space key
+#   Tab[@<time>] [number]           Press the Tab key
+#   Left[@<time>] [number]          Press the Left Arrow key
+#   Right[@<time>] [number]         Press the Right Arrow key
+#   Up[@<time>] [number]            Press the Up Arrow key
+#   Down[@<time>] [number]          Press the Down Arrow key
+#   Ctrl+<key>                      Press the Control key + <key> (e.g. Ctrl+C)
+#
+# Display:
+#   Hide                            Hide the subsequent commands from the output
+#   Show                            Show the subsequent commands in the output
+
+Output assets/demo.gif
+Output assets/demo.mp4
+
+Set FontSize 24
+Set Width 1200
+Set Height 800
+
+Hide
+Type@1ms "export PATH=$(pwd)/dist:$PATH old_dir=$(pwd) new_dir=/tmp/git-repo"
+Enter
+Type@1ms "rm -rf $new_dir && mkdir -p $new_dir && cd $new_dir"
+Enter
+Type@1ms "cp $old_dir/commit_convention.yaml $new_dir && git init && git checkout -b main"
+Enter
+Type@1ms "touch ./foo && git add foo"
+Enter
+Type "clear"
+Enter
+
+Type "export EDITOR=vi"
+Enter
+Show
+
+# start the TUI
+Type "git cc"
+Sleep 300ms
+Enter
+
+# navigate the type-selector
+Sleep 400ms
+Type@250ms "fe"
+Sleep 400ms
+Enter
+
+# navigate the scope-selector
+Sleep 400ms
+Type "scope"
+Sleep 400ms
+Enter
+
+# enter a new scope
+Sleep 200ms
+Escape
+Type "12G"
+Enter
+Type "$"
+Type "i"
+Right
+Enter
+Backspace 2
+Type "- scope: description of scope"
+Escape
+Type ":wq"
+Enter
+Sleep 500ms
+Enter
+
+# describe change
+Sleep 500ms
+Type "informative message about the change"
+Sleep 200ms
+Enter
+
+# describe a breaking change
+Sleep 500ms
+Type "what this commit broke"
+Sleep 500ms
+Enter
+
+# fill out remaining detail
+Type "3G"
+Type "i"
+Enter 2
+Up 2
+Type "additional details"
+Enter
+Escape
+Type ":wq"
+Enter
+Sleep 200ms

assets/demo.mp4

@@ -10,4 +10,3 @@ scopes:
   - cli: UI for command-line invocation
   - dist: the release; means of distribution
   - devtools: tools for development
-

assets/demo.tape

@@ -6,8 +6,6 @@
 
   outputs = { self, flake-utils, nixpkgs }:
     flake-utils.lib.eachDefaultSystem (system:
-      # packages.x86_64-linux.hello = nixpkgs.legacyPackages.x86_64-linux.hello;
-      # packages.x86_64-linux.default = self.packages.x86_64-linux.hello;
       let
         pkgs = (import nixpkgs) {
           inherit system;
@@ -16,7 +14,7 @@
       rec {
         devShell = pkgs.mkShell {
           nativeBuildInputs = with pkgs; [
-            go # 1.19
+            go # 1.19.x
           ];
           buildInputs = with pkgs; [
             nixpkgs-fmt
@@ -26,9 +24,10 @@
             nodejs
             nodePackages.pnpm
             goreleaser
-            # ttyd
-            # ffmpeg
-            # vhs
+            ttyd
+            ffmpeg
+            vhs
+            bashInteractive
           ];
         };
       }