feat(gatsby-remark-graphviz): wrap svg in element so we can style it

[emtei]

Added a wrapper for all svg's generated by gatsby-remark-graphviz so they can be styled.
Added global styling for [www] that prevents graphs to be wider than viewport;

Thank you to @pieh and @Yurickh for help.

closes #9271

[DSchau]

Left a few comments; this is looking good!

[DSchau]

Since these styles will (always?) need to be applied, why don't we apply them at the plugin level, i.e. something like in gatsby-remark-autolink-headers

[DSchau]

Similarly, probably want to add a className argument so this can be customized (but defaulted) just like in that plugin! It'd be a simple fix in gatsby-ssr.js and index.js!

[LekoArts]

@emtei Hi 👋 Do you have time to address the comments? If not I could finish your PR and get it merged.

[emtei]

@LekoArts Hi, thanks for reminder! I will sort this out soon, please wait a while.

[LekoArts]

@emtei Cool! Please let me know if you need assistance 👍

[LekoArts]

@emtei what‘s the status?

[raulrpearson]

Hey, I might be missing something, but are you guys sure this code is achieving what's intended? Testing this approach with one of the graphs in the docs:

Using the div wrapper approach, the CSS rule that works - if I'm not mistaken - targets the svg child itself not the wrapping div:

div.gatsby-graphviz-container > svg {
  max-width: 100%;
  height: auto;
}

I'm with @hasparus on the idea of removing width and height attributes off the SVG instead of adding a wrapper. These are being introduced by Viz.js, though, and there doesn't seem to be an API to overwrite or remove them. The SVG string could be stripped of those attributes before being saved into the node.value.

Although having a wrapper does help with styling. An alternative/complementary approach would be to read the meta field of the code node in the Markdown AST to enable the user to add things like class="myclass" and id="myid". Assuming this is possible, it would allow more flexibility and better CSS targeting.

The three strategies could work together:

1. Removing height and width from the svg string
2. Adding a div wrapper
3. Reading the meta field if present to provide better targeting

Let me know what you think and if I can help out and how.

[pieh]

@raulrpearson if you can work out manipulating generated SVG html string to remove hardcoded width/height (and maybe replace it with viewBox - not sure if it's needed it's been a while since I worked with svgs :P) and add class (just so people have extra option for styling) that would be great

[raulrpearson]

[...] and maybe replace it with viewBox - not sure if it's needed

I think you're right, it is needed, but luckily viz.js seems to be adding that already.

and add class (just so people have extra option for styling)

I'm not sure which class you're referring to here. One class would be on the wrapper div which @emtei already worked on (pending the changes suggested by @DSchau). [A]

Another would be potentially added by the user on a code-block by code-block basis by using the following syntax in their Markdown file:

```dot id="my-id" class="my-class" style="color: tomato;" data-gocrazy="here"
strict graph {
  a -- b
  a -- b
  b -- a [color=blue]
}
```

If I'm not mistaken, the part id="my-id" ... data-gocrazy="here" would end up in the meta field of the code node of the mdast and we could retrieve it and paste it into the svg tag (maybe as is?). [B]

So, are you referring to A or B?

Additionally, I need some guidance regarding what to do with Git/GitHub. Do I clone this branch (emtei:graphviz-elements-styling) into my fork of gatsby on GitHub and then work locally against that and then push to this branch?

I'll be able to work on this tomorrow.

[pieh]

@raulrpearson For the class I meant we could add by default gatsby-graphviz class to make it easy to target it globally. But I do like your idea of allowing more customization per code/viz block.

This plugin https://github.com/DSchau/gatsby-remark-code-titles does transform code "language" to enable passing metadata (to add header to code block) with

```js:title=example-file.js

so you could look into implementation details there (but it seems like string is saved as-is in AST node as node.lang)

As far as GitHub - I think it would make sense to branch from master and create separate PR because there wouldn't be much of overlap - we can still merge this with just adding div wrapper around svg, which wouldn't affect your PR that much (maybe would just require fixing potential merge conflict)

[KyleAMathews]

This PR was replaced by #11624