feat(copy): Adds a copy button to code block

_plugins/highlight-linedivs.rb

@@ -63,14 +63,21 @@ def render(context)
 "
 <div class=\"code-container\">
     <div class=\"code-window\">
-        <div class=\"window-controls\">
-            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\">
-                <g fill=\"none\" fillRule=\"evenodd\" transform=\"translate(1 1)\">
-                    <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#EC6A5E\" stroke=\"#EC6A5E\" strokeWidth=\".5\" />
-                    <circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#F4BF4F\" stroke=\"#F4BF4F\" strokeWidth=\".5\" />
-                    <circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#61C554\" stroke=\"#61C554\" strokeWidth=\".5\" />
-                </g>
-            </svg>
+        <div class=\"window-header\">
+            <div class=\"window-controls\">
+                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\">
+                    <g fill=\"none\" fillRule=\"evenodd\" transform=\"translate(1 1)\">
+                        <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#EC6A5E\" stroke=\"#EC6A5E\" strokeWidth=\".5\" />
+                        <circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#F4BF4F\" stroke=\"#F4BF4F\" strokeWidth=\".5\" />
+                        <circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#61C554\" stroke=\"#61C554\" strokeWidth=\".5\" />
+                    </g>
+                </svg>
+            </div>
+            <button class=\"window-copy\">
+                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\">
+                  <path d=\"M64 464H288c8.8 0 16-7.2 16-16V384h48v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h64v48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16zM224 304H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H224c-8.8 0-16 7.2-16 16V288c0 8.8 7.2 16 16 16zm-64-16V64c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64z\"/>
+                </svg>
+            </button>
         </div>
 "
         suffix = " " \

_sass/_highlight.scss

@@ -56,19 +56,31 @@ $background: var(--code-background);
       }
 }
 
-.window-controls {
+.window-header {
     position: relative;
     top: 9px;
-    margin-left: 14px;
-    margin-right: 0px;
     z-index: 2;
     text-align: initial;
+    height: 28.5px;
+
+    .window-controls {
+        float: left;
+        margin-left: 14px;
+        margin-right: 0px;
+    }
+
+    .window-copy {
+        color: #fbfbfb;
+        fill: #fbfbfb;
+        float: right;
+        margin-right: 14px;
+        cursor: pointer;
+    }
 }
 
 figure.highlight {
     position: relative;
 
-
     margin-block-start: 0;
     margin-inline-start: 0px;
 

darkmode.js

@@ -41,3 +41,29 @@ function initDarkMode() {
 }
 
 initDarkMode();
+
+// This assumes that you're using Rouge; if not, update the selector
+const codeBlocks = document.querySelectorAll('.highlight');
+const copyCodeButtons = document.querySelectorAll('.window-copy');
+
+copyCodeButtons.forEach((copyCodeButton, index) => {
+  const code = codeBlocks[index].innerText;
+
+  copyCodeButton.addEventListener('click', () => {
+    // Copy the code to the user's clipboard
+    window.navigator.clipboard.writeText(code);
+
+    // Update the button text visually
+    const { innerHTML: originalText } = copyCodeButton;
+    copyCodeButton.innerText = 'Copied!';
+
+    // (Optional) Toggle a class for styling the button
+    //copyCodeButton.classList.add('copied');
+
+    // After 2 seconds, reset the button to its initial UI
+    setTimeout(() => {
+      copyCodeButton.innerHTML = originalText;
+      //copyCodeButton.classList.remove('copied');
+    }, 1000);
+  });
+});