Add Examples to CLI

I’ve got some examples so far, but most of them are more ‘unit tests’ to make sure it all works.

It would be great if the CLI could run a “Example Viewer” mode before generating a new sketch. Such as:

canvas-sketch --new --examples

The browser will list a thumbnail grid with examples, and clicking one will generate it from the template and start the server on that file.

[mattdesl]

I’ve started stubbing out a very basic Preact frontend that holds some of the examples. The feature/website branch has some of that work-in-progress.

You can test it here: https://competent-beaver-2ad4cc.netlify.com/

I haven’t bothered with any fancy design yet – will likely do a generative/interactive Canvas background using canvas-sketch itself.

While doing this, I’m realizing it’s really awesome to have a “sketchbook” that can collect all the sketches in a single folder, and most of the code I’m writing for the website could be pulled into the canvas-sketch-cli tool as well. For example, canvas-sketch foo.js could run a single sketch, or canvas-sketchbook src/*.js could wrap all the sketches in src/ folder with a similar interface as in the website. The sketchbook (during dev) could easily have a “Add New Sketch” button (WebSockets that connect to node server) and some other handy features.

Still figuring out the best way to structure all that – ideally it should be re-usable enough that the canvas-sketch website itself can use the canvas-sketch-cli… 😄

[mattdesl]

Thanks!

I think the online Examples viewer will show code + result, but also a “Copy Code” button that simply copies it to clipboard.

The tool should already be ready to accept clipboard contents (and install any dependencies) like this:

# create a new folder to hold sketches
mkdir my-sketch
cd my-sketch

# generate a new sketch from clipboard contents
pbpaste | canvas-sketch -n