This adds a bit of debugging information on mouseover.
For example, a tooltip with the text `bird@tail.arm[0]` can be interpreted as "a bird symbol attached to the tail symbol's first arm attachment point."
The implementation is a bit funky: we basically annotate the SVG DOM with various `data` attributes, and on mouseover we traverse the DOM from the element the mouse is over all the way up to the SVG root element, picking out relevant `data` attributes and building a tooltip out of it. This ended up being easier than e.g. passing a bunch of props down the whole tree in React.
This fixes#20 by adding support for TOML-based metadata for symbols.
There's now a template TOML file in `svg/_template.toml` that documents all the different metadata properties. The file can be copied to match the name of an SVG file (but with a `.toml` extension) and it will be processed by the vocabulary builder when the site is generated.
Currently there are only two properties documented, `always_nest` and `always_be_nested` (as per the needs outlined in https://github.com/toolness/mystic-symbolic/issues/17#issuecomment-786696966), but they don't actually do anything yet (actual support for _using_ the metadata will come in another file).
Right now the TOML files are validated quite stringently: if a file contains the name of a property it doesn't understand, or the type of the property is wrong, it will raise an error. We can revisit this if it becomes burdensome.
This attempts to manually scale the strokes on creatures so they aren't affected by scale.
The weird thing here is that applying `vector-effect="non-scaling-stroke"` does not appear to do the trick--rather, it makes all the strokes look _super heavy_. So in this PR we scale the stroke by the inverse of whatever we're cumulatively scaling by when we're drawing something.
Atul Varma