feat: support webp as a first-class output format

.gitattributes

@@ -1,6 +1,7 @@
 **/*.gif filter=lfs diff=lfs merge=lfs -text
 **/*.mp4 filter=lfs diff=lfs merge=lfs -text
 **/*.webm filter=lfs diff=lfs merge=lfs -text
+**/*.webp filter=lfs diff=lfs merge=lfs -text
 **/*.png filter=lfs diff=lfs merge=lfs -text
 *.tape linguist-language=elixir
 themes*.json linguist-generated

README.md

@@ -11,9 +11,9 @@
 
 Write terminal GIFs as code for integration testing and demoing your CLI tools.
 
-<img alt="Welcome to VHS" src="https://stuff.charm.sh/vhs/examples/neofetch_3.gif" width="600" />
+<img alt="Welcome to VHS" src="https://vhs.charm.sh/vhs-5pZ3XQIYm4T2oSh5fQwV0N.gif" width="600" />
 
-The above example was generated with VHS ([view source](./examples/neofetch/neofetch.tape)).
+The above example was generated with VHS ([view source](./examples/fastfetch/fastfetch.tape)).
 
 ## Tutorial
 
@@ -248,6 +248,7 @@ will render them to the respective locations.
 Output out.gif
 Output out.mp4
 Output out.webm
+Output out.webp
 Output frames/ # a directory of frames as a PNG sequence
 ```
 

command.go

@@ -414,6 +414,8 @@ func ExecuteOutput(c parser.Command, v *VHS) error {
 		v.Options.Video.Output.Frames = c.Args
 	case ".webm":
 		v.Options.Video.Output.WebM = c.Args
+	case ".webp":
+		v.Options.Video.Output.WebP = c.Args
 	default:
 		v.Options.Video.Output.GIF = c.Args
 	}

examples/demo.tape

@@ -4,6 +4,7 @@
 #   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>
+#   Output <path>.webp              Create a WebP output at the given <path>
 #
 # Require:
 #   Require <string>                Ensure a program is on the $PATH to proceed

examples/fastfetch/README.md

@@ -0,0 +1,7 @@
+# fastfetch
+
+<img width="600" src="fastfetch.gif" />
+
+# Source code for the VHS fastfetch example
+
+See [fastfetch.tape](fastfetch.tape)

examples/fastfetch/config.jsonc

@@ -0,0 +1,70 @@
+{
+    "$schema": "https://github.com/fastfetch-cli/fastfetch/raw/dev/doc/json_schema.json",
+    "logo": {
+        "type": "file-raw",
+        "source": "examples/fastfetch/vhs-color.ascii",
+        "padding": {
+            "right": 2
+        }
+    },
+    "display": {
+        "separator": ": "
+    },
+    "modules": [
+        {
+            "type": "custom",
+            "format": "charmbracelet/vhs",
+            "outputColor": "magenta"
+        },
+        "break",
+        {
+            "type": "custom",
+            "key": "OS",
+            "format": "Video Home System",
+            "keyColor": "green"
+        },
+        {
+            "type": "custom",
+            "key": "Packages",
+            "format": "(2) tree-sitter-vhs, vhs-action",
+            "keyColor": "green"
+        },
+        {
+            "type": "custom",
+            "key": "Shell",
+            "format": "bash 5.2",
+            "keyColor": "green"
+        },
+        {
+            "type": "custom",
+            "key": "Resolution",
+            "format": "1200x600",
+            "keyColor": "green"
+        },
+        {
+            "type": "custom",
+            "key": "Theme",
+            "format": "VHS",
+            "keyColor": "green"
+        },
+        {
+            "type": "custom",
+            "key": "Icons",
+            "format": "VHS",
+            "keyColor": "green"
+        },
+        {
+            "type": "custom",
+            "key": "Terminal",
+            "format": "xterm.js",
+            "keyColor": "green"
+        },
+        {
+            "type": "custom",
+            "key": "Font",
+            "format": "JetBrains Mono",
+            "keyColor": "green"
+        },
+        "colors"
+    ]
+}

examples/fastfetch/fastfetch.tape

@@ -0,0 +1,36 @@
+# Source code for the VHS fastfetch example.
+#
+# To run:
+#
+#     vhs < fastfetch.tape
+
+Output examples/fastfetch/fastfetch.gif
+Output examples/fastfetch/fastfetch.mp4
+Output examples/fastfetch/fastfetch.webm
+Output examples/fastfetch/fastfetch.webp
+Output examples/fastfetch/frames/
+
+Set TypingSpeed 75ms
+Set FontSize 18
+Set Width 1300
+Set Height 550
+
+Hide
+Type "fastfetch() { command fastfetch -c examples/fastfetch/config.jsonc --pipe false; }"
+Enter
+Type "clear"
+Enter
+Show
+
+Type "fastfetch"
+
+Sleep 500ms
+Enter
+Sleep 2s
+
+Type "Welcome to VHS!"
+Sleep 1
+Space
+Type "A tool for generating terminal GIFs from code."
+
+Sleep 5s

examples/fixtures/all.tape

@@ -4,6 +4,7 @@
 Output examples/fixtures/all.gif
 Output examples/fixtures/all.mp4
 Output examples/fixtures/all.webm
+Output examples/fixtures/all.webp
 
 # Settings:
 Set Shell "fish"

ffmpeg.go

@@ -318,6 +318,21 @@ func (sb *StreamBuilder) WithWebm() *StreamBuilder {
 	return sb
 }
 
+// WithWebP adds animated WebP stream configuration.
+func (sb *StreamBuilder) WithWebP() *StreamBuilder {
+	sb.args = append(sb.args,
+		"-vcodec", "libwebp_anim",
+		"-pix_fmt", "yuva420p",
+		"-quality", "100",
+		"-compression_level", "3",
+		"-lossless", "0",
+		"-loop", "0",
+		"-an",
+	)
+
+	return sb
+}
+
 // Build returns streams for using with ffmepg.
 func (sb *StreamBuilder) Build() []string {
 	return sb.args

lexer/lexer_test.go

@@ -163,6 +163,8 @@ func TestLexTapeFile(t *testing.T) {
 		{token.STRING, "examples/fixtures/all.mp4"},
 		{token.OUTPUT, "Output"},
 		{token.STRING, "examples/fixtures/all.webm"},
+		{token.OUTPUT, "Output"},
+		{token.STRING, "examples/fixtures/all.webp"},
 		{token.COMMENT, " Settings:"},
 		{token.SET, "Set"},
 		{token.SHELL, "Shell"},

main.go

@@ -106,6 +106,8 @@ var (
 						v.Options.Video.Output.GIF = output
 					} else if strings.HasSuffix(output, webm) {
 						v.Options.Video.Output.WebM = output
+					} else if strings.HasSuffix(output, webp) {
+						v.Options.Video.Output.WebP = output
 					} else if strings.HasSuffix(output, mp4) {
 						v.Options.Video.Output.MP4 = output
 					}

man.go

@@ -24,7 +24,7 @@ A tape file is a script made up of commands describing what actions to perform i
 
 The following is a list of all possible commands in VHS:
 
-* %Output% <path>.(gif|webm|mp4)
+* %Output% <path>.(gif|webm|webp|mp4)
 * %Require% <program>
 * %Set% <setting> <value>
 * %Sleep% <time>
@@ -56,7 +56,7 @@ The following is a list of all possible commands in VHS:
 `
 
 	manOutput = `The Output command instructs VHS where to save the output of the recording.
-File names with the extension %.gif%, %.webm%, %.mp4% will have the respective file types.
+File names with the extension %.gif%, %.webm%, %.webp%, %.mp4% will have the respective file types.
 `
 
 	manSettings = `The Set command allows VHS to adjust settings in the terminal, such as fonts, dimensions, and themes.

parser/parser_test.go

@@ -127,6 +127,7 @@ func TestParseTapeFile(t *testing.T) {
 		{Type: token.OUTPUT, Options: ".gif", Args: "examples/fixtures/all.gif"},
 		{Type: token.OUTPUT, Options: ".mp4", Args: "examples/fixtures/all.mp4"},
 		{Type: token.OUTPUT, Options: ".webm", Args: "examples/fixtures/all.webm"},
+		{Type: token.OUTPUT, Options: ".webp", Args: "examples/fixtures/all.webp"},
 		{Type: token.SET, Options: "Shell", Args: "fish"},
 		{Type: token.SET, Options: "FontSize", Args: "22"},
 		{Type: token.SET, Options: "FontFamily", Args: "DejaVu Sans Mono"},