Readme updated with copy code button instructions

README.md

@@ -135,3 +135,9 @@ can install and use the `pandoc` converter:
 You'll still want to go through and double check / clean up the text, but that's a good starting point. Once the 
 document is converted from markdown to html, the file extension should be `.md` instead. If you use the 
 command above, this means you can just delete the `.shtml` version of the file and commit the new `.md` one. 
+
+
+### Adding "Copy Code" Button to code blocks in guides
+
+Add .copy to the class and you will have a small button in the top right corner of your code blocks that
+when clicked, will copy all of the code inside of the block.

_includes/head.html

@@ -30,6 +30,7 @@
 <script type="text/javascript" src="{{ '/assets/js/uw-style.js' | relative_url }}" defer></script>
 <script src="{{ '/assets/js/lunr.js' | relative_url }}" type="text/javascript" async></script>
 <script type="text/javascript" src="{{ '/assets/js/search_bar.js' | relative_url }}" defer></script>
+<script type="text/javascript" src="{{ '/assets/js/copy-content.js' | relative_url }}" defer></script>
 
 <link type="text/css" href="{{ '/assets/fonts/fonts.0.0.1.css' | relative_url }}" rel="stylesheet">
 <link type="text/css" href="{{ '/assets/css/style-v10.css' | relative_url }}" rel="stylesheet">

_uw-research-computing/helloworld.md

@@ -90,7 +90,8 @@ request_disk = 1GB
 # Tell HTCondor to run 3 instances of our job:
 queue 3
 ```
-{:.sub}
+{:.sub .copy}
+
 
 > For a \"template\" version of this submit file without the comments,
 > [click here](/uw-research-computing/files/template.sub).
@@ -110,7 +111,7 @@ echo "Hello CHTC from Job $1 running on `whoami`@`hostname`"
 # keep this job running for a few minutes so you'll see it in the queue:
 sleep 180
 ```
-{:.file}
+{:.file .copy}
 
 
 By using the \"\$1\" variable in our executable, we are telling HTCondor to fetch the value of the agrument in the first position in the submit file and to insert it in location of \"\$1\" in our executable file. 
@@ -128,7 +129,7 @@ More information on special variables like \"\$1\", \"\$2\", and \"\$@\" can be
 ```
 [alice@submit]$ condor_submit hello-chtc.sub
 ```
-{:.term}
+{:.term .copy}
 
 
 The `condor_submit` command actually submits your jobs to HTCondor. If
@@ -139,15 +140,15 @@ appears as:
 Submitting job(s).....
 3 job(s) submitted to cluster 436950.
 ```
-{:.term}
+{:.term .copy}
 
 
 **4.** To check on the status of your jobs, run the following command:
 
 ``` 
 [alice@submit]$ condor_q
 ```
-{:.term}
+{:.term .copy}
 
 The output of `condor_q` should look like this:
 
@@ -158,7 +159,7 @@ alice  ID: 436950     4/5  15:34     _     _       3      3  436950.0-2
 
 3 jobs; 0 completed, 0 removed, 3 idle, 0 running, 0 held, 0 suspended
 ```
-{:.term}
+{:.term .copy}
 
 You can run the `condor_q` command periodically to see the progress of
 your jobs. By default, `condor_q` shows jobs grouped into batches by
@@ -197,7 +198,7 @@ total 28
 -rw-rw-r-- 1 alice alice  241 Apr  5 15:33 hello-chtc.sh
 -rw-rw-r-- 1 alice alice 1387 Apr  5 15:33 hello-chtc.sub
 ```
-{:.term}
+{:.term .copy}
 
 **Useful information is provided in the user log and the output files.**
 
@@ -249,15 +250,15 @@ submission of the 3 jobs will look something like this:
         Job terminated of its own accord at 2023-08-18T18:46:33Z with exit-code 0.
 ...
 ```
-{:.file}
+{:.file .copy}
 
 And, if you look at one of the output files, you should see something
 like this:
 
 ``` 
 Hello CHTC from Job 0 running on [email protected]
 ```
-{:.file}
+{:.file .copy}
 
 **Congratulations.** You\'ve run your first jobs in the CHTC!
 
@@ -274,7 +275,7 @@ To remove a specific job, specify the job ID number from the queue
 ``` 
 [alice@submit]$ condor_rm 845638.0
 ```
-{:.term}
+{:.term .copy}
 
 You can even remove all of the jobs of the same cluster by specifying
 only the Cluster value for that batch. 
@@ -283,7 +284,7 @@ To remove **all of your jobs**:
 ``` 
 [alice@submit]$ condor_rm $USER
 ```
-{:.term}
+{:.term .copy}
 
 **B. The Importance of Testing**
 ----------------------------

assets/js/copy-content.js

@@ -0,0 +1,59 @@
+async function copyCode(div, button) {
+    let code = div.querySelector("code");
+    let text = code.innerText;
+    let previousButtonText = button.innerText;
+
+    await navigator.clipboard.writeText(text);
+
+    // Creating "code copied" text to appear after the button is pressed
+    button.innerText = "Code Copied";
+    setTimeout(() => {
+        button.innerText = previousButtonText;
+    }, 1000);
+}
+
+function createButton() {
+    let copyButtonLabel = "Copy Code";
+
+    // Get all divs named copy
+    let divs = document.getElementsByClassName("copy");
+
+    // Loop through each div
+    Array.from(divs).forEach((div) => {
+        // Creating button, styling and placing in top right corner
+        let button = document.createElement("button");
+        button.innerText = copyButtonLabel;
+        button.style.display = "none";
+        button.style.position = "absolute";
+        button.style.top = "7px";
+        button.style.right = "7px";
+        button.style.borderRadius = "8px";
+        button.style.padding = "3.5px";
+
+        // Appending button to the div
+        div.appendChild(button);
+
+        // Adding styles to the div
+        div.style.position = "relative";
+        div.style.margin = "5px 0";
+        div.style.padding = "1rem 0 1rem 1rem";
+
+        // Adding event listeners to show/hide button on hover
+        div.addEventListener("mouseenter", function () {
+            button.style.display = "block";
+        });
+
+        div.addEventListener("mouseleave", function () {
+            button.style.display = "none";
+        });
+
+        // Adding event listener to copy code when button is clicked
+        button.addEventListener("click", async () => {
+            await copyCode(div, button);
+        });
+    });
+}
+
+createButton();
+
+