Add code copy buttons to docs #883
Conversation
Addresses #829
dancormier
added
do-not-merge
dancormier
changed the title
✅ Deploy Preview for stacks ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
There was a problem hiding this comment.
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).
docs/product/components/cards.html
Outdated
| @@ -9,13 +9,18 @@ | |||
| <p class="stacks-copy">The base card styling applies a border and padding to the card.</p> | |||
| <p class="stacks-copy">Cards can be any size and it’s ok to increase the body text size for larger cards.</p> | |||
| <div class="stacks-preview"> | |||
| <div class="stacks-clipboard-content ps-relative" data-controller="clipboard"> | |||
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
b-kelly
force-pushed
the
code-copy-btn
branch
2 times, most recently
from
c501836
to
aa84fc3
Compare
I think we can get away with this. Larger click target, looks alright. 🤷♂️
per suggestion #883 (review)
|
Love this! Any chance we'll see it on SO one day? :) |
|
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 |
|
@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. |
Addresses #829
For now, I've only applied it to
product/components/cardsto 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
Preview