Use vhs to create some gifs of example configs and getting started

[miniscruff]

https://github.com/charmbracelet/vhs can be used to build gifs, including with CI ( on bump pr ) for things like getting started, example configs, guides, etc. Each one can be included in the website as well as potentially in the readme.

This should replace the asciinema recordings and JS for the website. Ideally a little center popup could load with the new gifs. Also, including some sort of config value for example gifs would be good. Like // vhs: <path to .gif> similar to // example:, or could use a struct tag but they can get quite long.

Due to each gif likely requiring some sort of unique config values a set of these examples would also need to contain unique config files. Something like:

/examples
- .gitignore
- gettingstarted.tape
- changeformat.yml
- changeformat.tape

Then using CHANGIE_CONFIG_PATH env var, select the proper file for each tape recording.

• Replace getting started with a simpler base use case - quick start will work
• Create examples folder
• Create a new gif for https://changie.dev/guide/quick-start/
• Create a gif with custom prompts, a GitHub issue key an Author will work
• Generate gifs in CI for extra laziness

Going to incorporate new gifs/webms into site refresh, so not going to edit the current site.

[sheldonhull]

I can help there if you prefer. I've already built some for internal demos. For external see DelineaXPM/dsv-cli landing. Could be useful. I hear it can help run on CI too, but maybe getting you some configs initially with examples would be cool. Just mention me and I'll do my best as I get time to contribute.

[miniscruff]

@sheldonhull yea of course that would be good, for now just replacing the getting started one and maybe something else if you think of it. I was going to include the gif generation in my "gen-release-pr" action as the website is only deployed on release anyway.