docs(examples): Add examples readme with gifs

[joshka]

This commit adds a readme to the examples directory with gifs of each
example. This should make it easier to see what each example does
without having to run it.

I modified the examples to fit better in the gifs. Mostly this was just
removing the margins, but for the block example I cleaned up the code a
bit to make it more readable.

NOTE!!!!

There are some problems with rendering over ssh, which are not yet resolved. These are noted in the README file. It's possible that these problems are related to #298.

There is a github action that can automatically run VHS as part of a CI process - which would be possibly useful to keep things up to date. https://github.com/charmbracelet/vhs-action

[codecov]

Codecov Report

Merging #303 (d2b11b1) into main (13fb11a) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main     #303   +/-   ##
=======================================
  Coverage   85.05%   85.05%           
=======================================
  Files          40       40           
  Lines        8590     8590           
=======================================
  Hits         7306     7306           
  Misses       1284     1284           

[orhun]

Hey, what else is needed to be done here? Do you want me to update the workflow to add vhs-action maybe?

[joshka]

Note the TODOs in the doc. I haven't had a chance to dig into why some of the problems are happening (our side vs vhs side)

[joshka]

In Block.rs, the entire block background should be green and the top two blocks should render similar widths:

vs

Popup has an issue rendering the background:
Terminal:

VHS:

Perhaps it would be sufficient to just note that there are rendering issues with VHS (or rewrite the examples to avoid the issues). @orhun given that you are not seeing the same issues, It's possible that there's some sort of difference in rendering on a mac vs on a linux machine due to tty differences and installed fonts - so I'll check there to compare.

[orhun]

Yeah, it is likely that those problems are mostly about vhs itself so nothing that would be a good idea.

[joshka]

Fixed block, layout and table by changing the examples a bit and updated the README with the new gifs.
Direct link to README

[joshka]

• Updated the output to point at target/xxx.gif to avoid having to ignore the files.
• Updated the gauge example to have a border around the last gauge (it doesn't address the issue, just makes it look a little nicer)
• Fixed the table example
• Updated the README
• Added instructions for updating the examples in a comment in the README

[orhun]

@joshka Should I add the vhs-action in this PR or a separate one? Which one do you prefer?

[joshka]

@joshka Should I add the vhs-action in this PR or a separate one? Which one do you prefer?

Let's hold off on that for now. It only handles the generate part, not the publishing part, so if we wanted to fully automate the updating of the readme that might be a little difficult.

[joshka]

• Braille dots are fixed in VHS 0.6.0.
  • Removed notes about the dots in the README
  • Regenerated all images
• Updated calendar.tape to wait a little longer as the sleep was catching the last of the cargo build command