Add README and screenshots for xilem examples

[sikma-dev]

• Add xilem/examples/README.md with screenshot previews.
• Add a short one-line description for each example.
• Store the screenshot assets under xilem/screenshots.

If this direction is not desired, I can adjust or close this PR.

[xStrom]

A screenshot of all of the examples doesn't seem too valuable, especially as these aren't automated in this PR and some of them are quite large.

I can see some value in having one or two best ones as hero images of the readme, but I'm skeptical about having them for all.

Can see what others think.

[Philipp-M]

If these were automated + snapshot tests I think this would provide value as additional CI checks for more "advanced" usage of Xilem/Masonry (although for some interactive examples this is probably a little bit of effort to do effectively, like the canvas example).
This also poses the question for a testing suite in Xilem...

I think otherwise it's probably fairly quickly out of sync (and/or maintenance burden), although it's nice to have for a quick initial impression. Additionally it seems that for the transforms example a font is missing.

[PoignardAzur]

I think adding new screenshots is valuable even if they're not automated. That said, did you remember to optimize the screenshots with oxipng? They seem a little heavy.

Also, I think some of the examples aren't visually interesting and don't really deserve a screenshot. (We're probably due for some cleanup, but that's a question for later.) I would recommend removing the screenshots for:

• components
• elm
• external_event_loop
• flex
• lists
• memoization
• multiple_windows
• state_machine
• virtual_cats

If you remove those and optimize the remaining screenshots, I'm in favor of merging the PR and figuring out screenshot testing later. (We'll create an issue after we merge this.)

[sikma-dev]

Thanks for the feedback everyone.

I've updated the PR:

• Removed screenshots for examples that aren't visually interesting (components / elm / external_event_loop / flex / lists / memoization / multiple_windows / state_machine / virtual_cats)
• Optimized the remaining PNGs with oxipng: after removing the above screenshots, the total screenshot size went from ~2.1MB down to ~1.5MB.
• Removed the transforms screenshot for now: on my macOS setup it renders as tofu, so I'd rather not include a broken-looking preview. I haven't fully investigated the root cause yet; this seems better suited for a separate issue.

Let me know if there's anything else you'd like me to adjust.

[sikma-dev]

Sorry. I forgot to remove the example_transforms.png file in the previous update. I've removed it now.

[PoignardAzur]

Optimized the remaining PNGs with oxipng: after removing the above screenshots, the total screenshot size went from ~2.1MB down to ~1.5MB.

That still seems like a lot. To give some perspective, the repository will full history currently uses about 25.81 MiB of storage:

> git count-objects -vH
count: 1915
size: 10.30 MiB
in-pack: 55713
packs: 44
size-pack: 25.81 MiB
prune-packable: 24
garbage: 0
size-garbage: 0 bytes

By default, most people download the entire history when they clone our repo (unless they use e.g. --filter-tree). So I'm a little hesitant to add 1.5MB of images that will become stale as soon as we add screenshot tests.