Add Click to copy text for commands present in the official Django website.

[VenkataBhaskarr]

As I am following through the Django project tutorial in the official Django website there are so many commands like below, so adding a click to copy text would be a time saver.

Before :

After :

[himanshu007-creator]

I would like to work on that issue

[carltongibson]

There's a Sphinx copy button extension: https://sphinx-copybutton.readthedocs.io/en/latest/ — looking into adapting that would be good.

• What's the HTML it outputs?
• What's the static file we'd need to include.

The docs aren't raw sphinx HTML. We use the JSON builder, and then insert the body into a Django template.

[VenkataBhaskarr]

yes if we used Sphinx copy button extension the ouputs are as follows

I have added sphinx_copybutton in extensions in conf.py file in docs folder.

BEFORE :

AFTER :

[Maniktherana]

It seems some code blocks already have this feature (clipboard.js). Perhaps we can just utilize that but I like the style of the Sphinx copy button for 1 line commands.

I'd be willing to work on this if it's still open.

[ghost]

import django
print(django.get_version())
4.2

[benjaoming]

sphinx-copybutton also uses clipboard.js - so I guess it's a matter of avoiding loading the same JS library twice if its included through the Sphinx extension. If the copy of the JS library included in sphinx-copybutton can be used for the Django project (or the other way around), then we can also avoid having the same asset from different sources and with different versions. But other than that, seems like it's possible to use the same styles, HTML elements and JS library on the entire website, as well as isolated Sphinx documentation builds 👍

[rabahalishah]

I would like to contribute to this.

[sabderemane]

@rabahalishah feel free to work on this, no need to be assigned to work on an issue :)

[marksweb]

There's a class of code-block-caption which adds the styling and the copy button, but the JS doesn't appear to be loaded by default.

This class and snippet are hooked up to clippify, but they don't appear to be in use anywhere at the moment.

https://github.com/django/djangoproject.com/blob/main/djangoproject/static/js/main.js#L101

[Yadnyesh-Dashpute]

@VenkataBhaskarr Please Assign Me This Issue. I Want To Work On this Issue.

[marksweb]

@Yadnyesh-Dashpute you don't need to be assigned. People can see now that you will be working on this so go ahead and raise a PR when you have something to look at 👍

[Yadnyesh-Dashpute]

@marksweb Okay

[Om15102003]

I would like to work on this issue.

[marksweb]

@Om15102003 There's already an open PR for this here; #1434

If you find something you'd like to work on, just go ahead and work on it - there's no need to ask. Though it's worth looking to see if anybody has mentioned that they might be working on it or if there are linked PRs. Quite often someone might say they're going to look at something, but unless there's a PR we don't really know the status of that, so bare in mind how long it has been since someone talked about working on something.

[Fareed95]

Hello sir. I'm very new in opensource coding.. but I think I can resolve this problem . but I'm confused from which file is this issue is related to ?? would you please guide me ??

[varshithreddy7]

I will like to contribute this issue

[08preeti]

The code provided is for adding a [Click to copy]functionality. When users click the "Click to copy" button next to a command or piece of text, the text is automatically copied to their clipboard.

<title>Click to Copy Example</title> <style> .command-container { position: relative; display: inline-block; margin-top: 10px; } .copy-button { position: absolute; top: 0; right: 0; padding: 5px; cursor: pointer; background-color: #f3f3f3; border: 1px solid #ccc; border-radius: 3px; } </style>

Example Django Command

python manage.py migrate

Click to copy

<script> function copyToClipboard(elementId) { const textToCopy = document.getElementById(elementId).innerText; const tempTextArea = document.createElement("textarea"); tempTextArea.value = textToCopy; document.body.appendChild(tempTextArea); tempTextArea.select(); document.execCommand("copy"); document.body.removeChild(tempTextArea); alert("Command copied to clipboard!"); } </script>