Add a copy button to code samples - #231
hugovk merged 4 commits into
Conversation
Sorry, something went wrong.
|
The docsbuild CI seems broken, could it be related to this change: python/docsbuild-scripts@2113fd7 ? |
Sorry, something went wrong.
|
Yep, fixed here in #232. I've updated the branch from main. |
Sorry, something went wrong.
hugovk
left a comment
There was a problem hiding this comment.
Thanks for the PR!
It's working well on a quick test on Chrome, Safari, Firefox and Opera on macOS, and Chrome on Android.
For now it's text but maybe we could use an icon instead?
An advantage of text over icons is it's more accessible and less open to misinterpretation and different cultural associations.
However, GitHub and Discourse use a double-square icon, so this may be familiar:
a = 1
b = 2
assert a < b
https://discuss.python.org/t/pep-781-make-type-checking-a-built-in-constant/85728/1
And when clicked, GitHub shows a tick and "Copied", Discourse shows "copied!". They also use aria-labels for accessibility.
Discord is similar and shows a tick when clicked:
But I'm fine with this text-only version, and an icon could also be a followup if we want that.
I would suggest to use navigator.clipboard which has been supported by all major browsers for >5 years at this point.
Yes, that feels long enough, it has ~95% support and we don't need to support copy for older browsers. But what happens on a browser without support? As long as we don't break things completely.
Sorry, something went wrong.
|
Looks like there's an issue with the docs workflow: ERROR: Cannot install python-docs-theme==2025.2 and sphinx==3.4.3 because these package versions have conflicting dependencies. |
Sorry, something went wrong.
|
Also happening on main: https://github.com/python/python-docs-theme/actions/runs/14452159103/job/40527148242#step:6:32 Not a new failure, but it only started failing the build recently! Here's the previous main build with an error but the CI is green 😅 https://github.com/python/python-docs-theme/actions/runs/14428653230/job/40460802134#step:6:32 Anyway, don't worry about it for this PR :) |
Sorry, something went wrong.
Alright, just wanted to point it out in case you haven't noticed (unlikely, I know 😄 ) Anyway, I updated the PR based on your feedback - I added proper error handling and feature detection for clipboard.writeText. |
Sorry, something went wrong.
hugovk
left a comment
There was a problem hiding this comment.
Thanks!
Sorry, something went wrong.
|
All commit authors signed the Contributor License Agreement. |
Sorry, something went wrong.
I kept the style similar to the previous button. For now it's text but maybe we could use an icon instead?
Note that unlike the previous button, I added the copy button to all code samples, not only the interactive ones.
I'd like to know what you think!
Before:
After:
Single line:
copybtn.webm📚 Documentation preview 📚: https://python-docs-theme-previews--231.org.readthedocs.build/