Convert most ERB examples to HTML live

[simurai]

This replaces (almost) all erb examples with html live. Mostly using <svg> for Octicons.

Not converted:

• box-overlay needs some more fixing. It depends on the styles from details-dialog-element
• select-menu-deprecated because it's deprecated. We could also remove everything except the migration guide?

Concerns

It makes the code "busy" because the <svg>s can take up a lot of space. But maybe still better than not showing the example at all? 🤷‍♂ Also, this is just a stop-gap until we find a better solution:

• Use custom elements to show Octicons https://github.com/primer/css/issues/815
• Not soft-wrap code examples so that <svg>s only take up a single line.
• Make the collapsible/expandable

/cc @primer/ds-core
/ccc @keeran who kicked this off in Slack 🤗

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://primer-css-git-convert-erb-to-html-live.primer.now.sh

[shawnbot]

Oof, Pagehead is really borked. 😬 Maybe we just switch those all to ERB until we can sort out the octicon situation in those examples?

[shawnbot]

Thanks for this! I really want to figure out a better solution for this that makes the examples more legible, but for now this works.

[simurai]

Oof, Pagehead is really borked. 😬 Maybe we just switch those all to ERB until we can sort out the octicon situation in those examples?

Ouuuu.. 🙈 right. For now, let's convert them to svg too.