Skip to content

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

Open
@VenkataBhaskarr

Description

@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 :

Screenshot 2022-11-23 at 11 32 30 AM

After :

Screenshot 2022-11-23 at 9 30 01 PM

Activity

himanshu007-creator

himanshu007-creator commented on Nov 24, 2022

@himanshu007-creator

I would like to work on that issue

carltongibson

carltongibson commented on Nov 24, 2022

@carltongibson
Member

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

VenkataBhaskarr commented on Nov 26, 2022

@VenkataBhaskarr
Author

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 :

Screenshot 2022-11-26 at 10 56 32 AM

AFTER :

Screenshot 2022-11-26 at 10 56 24 AM

Maniktherana

Maniktherana commented on Jan 23, 2023

@Maniktherana
Contributor

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.

Screenshot 2023-01-23 at 4 08 48 PM

ghost

ghost commented on Apr 4, 2023

@ghost

import django
print(django.get_version())
4.2

benjaoming

benjaoming commented on Jul 21, 2023

@benjaoming
Contributor

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

rabahalishah commented on Aug 13, 2023

@rabahalishah

I would like to contribute to this.

sabderemane

sabderemane commented on Aug 24, 2023

@sabderemane
SponsorMember

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

marksweb

marksweb commented on Sep 21, 2023

@marksweb
SponsorContributor

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

Yadnyesh-Dashpute commented on Oct 31, 2023

@Yadnyesh-Dashpute

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

marksweb

marksweb commented on Oct 31, 2023

@marksweb
SponsorContributor

@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

Yadnyesh-Dashpute commented on Oct 31, 2023

@Yadnyesh-Dashpute
added a commit that references this issue on Nov 26, 2023

Fix django#1276: Add copy to clipboard for commands

4f6b446
Om15102003

Om15102003 commented on Dec 6, 2023

@Om15102003

I would like to work on this issue.

marksweb

marksweb commented on Dec 6, 2023

@marksweb
SponsorContributor

@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.

added a commit that references this issue on Dec 6, 2023

Fix django#1276: Add copy to clipboard for commands

3a45218
added 2 commits that reference this issue on Dec 6, 2023

Fixed django#1276 -- Added copy buttons to console and shell commands.

d2e3566

Fixed django#1276 -- Added copy buttons to console and shell commands.

91c8102
added a commit that references this issue on Dec 7, 2023

Fix django#1276: Add copy to clipboard for commands

04ba5fe
Fareed95

Fareed95 commented on Dec 13, 2023

@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

varshithreddy7 commented on Jun 4, 2024

@varshithreddy7

I will like to contribute this issue

08preeti

08preeti commented on Sep 4, 2024

@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>
parthhhgohel

parthhhgohel commented on Dec 13, 2024

@parthhhgohel

I have solution of this issue

divya5-11-04

divya5-11-04 commented on Jan 1, 2025

@divya5-11-04
<title>Click to Copy Example</title> <style> .command-box { display: flex; align-items: center; gap: 10px; background-color: #f4f4f4; border: 1px solid #ccc; padding: 10px; border-radius: 5px; font-family: monospace; } .copy-btn { background-color: #007acc; color: white; border: none; border-radius: 3px; padding: 5px 10px; cursor: pointer; } .copy-btn:hover { background-color: #005f99; } </style>
python manage.py runserver Copy
<div class="command-box">
    <span>django-admin startproject myproject</span>
    <button class="copy-btn" onclick="copyText(this)">Copy</button>
</div>

<script>
    function copyText(button) {
        const command = button.previousElementSibling.textContent;
        navigator.clipboard.writeText(command)
            .then(() => {
                button.textContent = "Copied!";
                setTimeout(() => (button.textContent = "Copy"), 2000);
            })
            .catch(err => {
                console.error("Error copying text: ", err);
            });
    }
</script>
This code snippets can be integrated in documentation where commands are given
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @carltongibson@benjaoming@marksweb@Maniktherana@sabderemane

      Issue actions

        Add Click to copy text for commands present in the official Django website. · Issue #1276 · django/djangoproject.com