create a tool to make it very easy to make snapshots of examples

[josharian]

[split out from https://github.com//pull/1538]

A common need both when writing documentation and interacting via slack is the ability to run a command and show its results. This is complicated by the need to show hats, cursor state, selection state, etc. We currently resort to some amount of ascii art to do this, which is easy, but suboptimal in a number of ways.

What if we wrote a tool that automated all of this? You'd start with a document like:

# bring air to bat

big art

and trigger the example generator and it would spit out an image like

but maybe less ugly? I manually created that. (it would figure out the content range, look for the header line, run the command in the header line, take screenshots before and after, and stitch them altogether.)

https://github.com/kufii/CodeSnap/ is an extension that lets you take snapshots of code. I'm not sure whether it handles hats, but we could probably adapt the underlying code to do so. (Seems like the core is https://github.com/tsayen/dom-to-image.) You'd have to figure out how to handle the blinking cursor. :/

[josharian]

cc @jmegner

[josharian]

Actually, it would probably be better not to put the spoken command into the text file. And instead capture it, and render it to text with the default spoken form, and then composite that above the rest of the image. Anyway, details TBD--the interesting thing is the idea here. :)

[pokey]

Yeah this might be a nice intermediate version of #940

[pokey]

I think #215 is also related

[pokey]

And see also #866

[josharian]

it definitely seems like an idea that keeps coming up. :) it seems like the next step might be to think through which of these flavors is worth working on first.