Add code copy buttons to docs

[dancormier]

Addresses #829

For now, I've only applied it to product/components/cards to keep myself from having to change it in 1000 places. It's out of draft to solicit some 👍/👎 on the approach, but consider this in "do-not-merge" territory.

TODO

• Add copy button to all code snippets

Preview

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	3ea29dd
🔍 Latest deploy log	https://app.netlify.com/sites/stacks/deploys/62c6fc2c693acf0009d0a4f3
😎 Deploy Preview	https://deploy-preview-883--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[b-kelly]

I like this approach! I'd recommend implementing this on the checkbox page as well to see how the button looks in a codeblock that has horizontal scrolling (partially obscuring the code).

[b-kelly]

We could/should probably extend/replace the highlight shortcode to include the copy/paste button as well. That way we'd get it "for free" and wouldn't have to add boilerplate all over the docs.

[dancormier]

I'd like to add the copy button to the highlight shortcode, but also have it available standalone. This will allow us to add a copy button to any element, like so:

It's a contrived example, but I think it illustrates the point.

[MaxHorstmann]

Love this! Any chance we'll see it on SO one day? :)

[dancormier]

Hey @MaxHorstmann! Nice to hear from you!

These specific copy buttons are intended for the Stacks docs only, but I personally love the idea of introducing them to Stack Overflow, writ large. We have the s-codeblock component and we could enhance that component with some copy JS. I'll spread the idea around and see if it takes.

[MaxHorstmann]

@dancormier hey Dan, good to hear from you as well! Would be great to have this on code snippets on SO questions & answers, like on GitHub and many docs pages (random example) these days.