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
This commit is contained in:
Adam Perkowski 2024-10-02 21:49:19 +02:00 committed by GitHub
parent 9ffa35249b
commit 2f3c49ed0f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 110 additions and 2 deletions

View File

@ -88,3 +88,23 @@ jobs:
env: env:
version: ${{ env.version }} version: ${{ env.version }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 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()

View File

@ -7,7 +7,7 @@
<!-- TODO: crates.io package here + <br> --> <!-- 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) [![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. **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.

BIN
docs/assets/preview.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

88
docs/assets/preview.tape Normal file
View File

@ -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

View File

@ -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: 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 !!! info