docs: automated dynamic gif previews using vhs (#736)

* use vhs for previews

* some improvements

* some improvements 2

* forgot about those somehow

* and those

* better commit message

.github/workflows/linutil.yml

@@ -88,3 +88,23 @@ jobs:
         env:
           version: ${{ env.version }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Install vhs
+        run: |
+          wget 'https://github.com/charmbracelet/vhs/releases/download/v0.8.0/vhs_0.8.0_amd64.deb'
+          sudo apt install -y ffmpeg
+          sudo snap install ttyd --classic
+          sudo dpkg -i 'vhs_0.8.0_amd64.deb'
+
+      - name: Build the preview
+        run: |
+          export PATH="$(pwd)/build:$PATH"
+          vhs docs/assets/preview.tape -o docs/assets/preview.gif
+
+      - name: Upload the preview
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: Preview for ${{ env.version }}
+          file_pattern: "docs/assets/preview.gif"
+          add_options: "--force"
+        if: success()

README.md

@@ -7,7 +7,7 @@
 <!-- TODO: crates.io package here + <br> -->
 [![Crates.io Version](https://img.shields.io/crates/v/linutil_tui?style=for-the-badge&color=%23af3a03)](https://crates.io/crates/linutil_tui) [![linutil AUR Version](https://img.shields.io/aur/version/linutil?style=for-the-badge&label=%5BAUR%5D%20linutil&color=%23230567ff)](https://aur.archlinux.org/packages/linutil) [![linutil-bin AUR Version](https://img.shields.io/aur/version/linutil-bin?style=for-the-badge&label=%5BAUR%5D%20linutil-bin&color=%23230567ff)](https://aur.archlinux.org/packages/linutil-bin)
 
-![Preview](docs/assets/preview.png)
+![Preview](docs/assets/preview.gif)
 
 **Linutil** is a distro-agnostic toolbox designed to simplify everyday Linux tasks. It helps you set up applications and optimize your system for specific use cases. The utility is actively developed in Rust 🦀, providing performance and reliability.
 

docs/assets/preview.tape

@@ -0,0 +1,88 @@
+# 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>
+#
+# Require:
+#   Require <string>                Ensure a program is on the $PATH to proceed
+#
+# 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 LoopOffset <float>%         Set the starting frame offset for the GIF loop
+#   Set Theme <json|string>         Set the theme of the terminal
+#   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
+#   Set MarginFill <file|#000000>   Set the file or color the margin will be filled with.
+#   Set Margin <number>             Set the size of the margin. Has no effect if MarginFill isn't set.
+#   Set BorderRadius <number>       Set terminal border radius, in pixels.
+#   Set WindowBar <string>          Set window bar type. (one of: Rings, RingsRight, Colorful, ColorfulRight)
+#   Set WindowBarSize <number>      Set window bar size, in pixels. Default is 40.
+#   Set TypingSpeed <time>          Set the typing speed of the terminal. Default is 50ms.
+#
+# 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:
+#   Escape[@<time>] [number]        Press the Escape key
+#   Backspace[@<time>] [number]     Press the Backspace key
+#   Delete[@<time>] [number]        Press the Delete key
+#   Insert[@<time>] [number]        Press the Insert 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
+#   PageUp[@<time>] [number]        Press the Page Up key
+#   PageDown[@<time>] [number]      Press the Page Down 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 preview.gif
+
+Require linutil
+Require sh
+
+Set Shell "bash"
+Set FontSize 32
+Set Width 3200
+Set Height 1800
+
+Sleep 1s
+
+Type "linutil -t compatible" Sleep 1s  Enter
+
+Sleep 5s
+
+Left Sleep 2s
+Down Sleep 1s
+Down Sleep 1s
+Down Sleep 1s
+Down Sleep 2s
+Right Sleep 3s
+
+Type "/" Sleep 1s
+Type@200ms "System Cleanup" Sleep 1s  Enter
+
+Sleep 2s
+Enter Sleep 3s
+Type "y" Sleep 15s    # CONFIRMATION PROMPT
+
+Escape

docs/index.md

@@ -69,7 +69,7 @@ Note that crates installed using `cargo install` require manual updating with `c
 
 After you've ran the command, you should see a GUI on your screen; It will look something like this:
 
-![preview](assets/preview.png)
+![preview](assets/preview.gif)
 
 !!! info