Docs UX: Optional “copy to clipboard” button for code blocks

[aadeina]

Hello,

While reading Django’s documentation, I noticed that code examples currently require manual text selection to copy. This isn’t a bug, but a small documentation UX improvement that could make examples easier to use, especially for beginners and mobile users.

If this is considered acceptable for Django’s documentation, I would be interested in working on a lightweight, accessible implementation and submitting a PR for review.

Please let me know if this is something the maintainers would be open to.

Thank you.

[sarahboyce]

Note that this is related to and possibly duplicates #1276

[aadeina]

Appreciate the note, @sarahboyce . I’d be happy to contribute a simple, user-friendly “copy to clipboard” as related to #1276.

[anish-devgit]

Hi maintainer 👋
I’d like to work on this issue. Please let me know if I can proceed. Thanks!

[VidhiKathiriya05]

Hello @aadeina,
I’m following up here after the reference in #1276. I would love to take on this task.

As I've been examining the HTML structure of the Django documentation, I've developed a strategy to make sure this is both practical and lightweight:
Intelligent Copy Logic: The script will specifically target and remove the 'Generic Prompt' elements (the $ and >>> symbols denoted by the.gp class) rather than just copying them. This guarantees that the code will run instantly in the user's terminal or shell when they paste it.

Zero Dependencies: To keep the documentation quick and manageable, I will use Vanilla JavaScript and the contemporary Clipboard API.

Accessibility: I'll make sure the button offers clear visual feedback (e.g., changing the label to 'Copied!' for a few seconds) and is keyboard-accessible (using tags).

[VidhiKathiriya05]

"Hi @aadeina, I received an email notification that I was welcome to work on this, but the comment isn't appearing here on the web interface. I'm ready to start! Could you please assign this issue to me? I'll follow my plan for a lightweight, Vanilla JS implementation. Thanks!"