Add floating copy button to code blocks #63
Conversation
stylesheets/styles.css
Outdated
| text-decoration: none; | ||
| } | ||
|
|
||
| code .copy-button { |
There was a problem hiding this comment.
I kind of like it always visible so people know it exists 🤔 but I am am willing to be told "no" lol
I do think it should be the upper right corner though, consistent with most of what I see online
| } | ||
|
|
||
| const hasCopy = props.copy || language === "copy"; | ||
| const hasCopy = /*props.copy || language === "copy"*/ true; |
There was a problem hiding this comment.
Do we want everything to be copyable? Wondering if it makes more sense to make this opt-in instead
(For opt in, you would do this:
```json copy
code
There was a problem hiding this comment.
Think it would make more sense for it to be opt-out rather than opt-in.
There was a problem hiding this comment.
If we were to go with a make every languaged code copyable route, some stuff like URLs and weird examples wouldn't be copyable.
If we were to go with an opt in version, we'd have to update the docs a ton
If we were to go with an opt out version, we'd still have to update the docs, but it might be the easiest method.
There was a problem hiding this comment.
I think opt in is better, most of the docs don't need to be copyable (e.g. example objects)
4 participants
Using the incomplete copy button code, I fixed some stuff and added some styles to make it appear when hovering over code blocks.
I made it only visible on desktop for now, I'm not sure how to implement it for mobile yet.