Added copy-code buttons to code blocks.

Used Bryces code, although I add the buttons when load event triggered. Slight differences to the CSS. Need to tidy it up properly. (Aka move into own file)

src/_data/site.json

@@ -19,7 +19,8 @@
   "words_per_minute": 200,
   "head_scripts": [
     "/assets/js/progress.js",
-    "/assets/js/scroll-to-top.js"
+    "/assets/js/scroll-to-top.js",
+    "/assets/js/copy-code-button.js"
   ],
   "comments": {
     "provider": "disqus",

src/assets/css/main.scss.liquid

@@ -143,6 +143,63 @@ pre {
 
 $github-color: #fff !default;
 
+div.highlight {
+	position: relative;
+}
+
+.codeblock {
+  outline: 4px #7e1c1c solid;
+  border-radius: 5px;
+}
+
+// === for copy-code-to-clipboard
+
+// h/t https://simplernerd.com/hugo-add-copy-to-clipboard-button/
+
+.clipboard-button {
+	position: absolute;
+	top: 2px;
+	right: 2px;
+	padding: 6px 8px 4px 8px;
+	margin: 5px;
+//	color: gray-500;
+//	border-color: gray-500;
+//	background-color: gray-100;
+	border: 1px solid;
+	border-radius: 6px;
+	font-size: 0.8em;
+	z-index: 1;
+	opacity: 0;
+	transition: 0.1s;
+}
+.clipboard-button > svg {
+//	fill: gray-500;
+}
+.clipboard-button:hover {
+	cursor: pointer;
+	border-color: #01b139;
+	background-color: #87d09e;
+	opacity: 1;
+}
+.clipboard-button:hover > svg {
+	fill: #1900ff;
+}
+.clipboard-button:focus {
+	outline: 0;
+}
+// .highlight {
+//   position: relative;
+// }
+.highlight:hover > .clipboard-button {
+	opacity: 1;
+	transition: 0.2s;
+}
+
+.highlight {
+	line-height: 1.5;
+}
+
+
 //@import "progress.css"; // for progress bar
 //@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
 @import "minimal-mistakes/skins/_{{ site.minimal_mistakes_skin | default: 'default' }}.scss"; // skin

src/assets/css/orig-main.scss

@@ -1,8 +0,0 @@
----
-# Only the main Sass file needs front matter (the dashes are enough)
----
-
-@charset "utf-8";
-
-@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
-@import "minimal-mistakes"; // main partials

src/assets/js/copy-code-button.js

@@ -0,0 +1,57 @@
+/*
+h/t to...
+- https://www.brycewray.com/posts/2023/02/code-copying-code-eleventy-edition/ & Bryce's gitrepo
+- https://github.com/brycewray/eleventy_site/blob/main/src/assets/js/copy-code-button.js
+- https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/
+- https://aaronluna.dev/blog/add-copy-button-to-code-blocks-hugo-chroma/
+- https://simplernerd.com/hugo-add-copy-to-clipboard-button/
+- https://digitaldrummerj.me/hugo-add-copy-code-snippet-button/
+*/
+
+const svgCopy =
+    '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg><span class="sr-only"> Click to copy code</span>';
+const svgCheck =
+    '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(25, 0, 255)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg><span class="sr-only"> Copied!</span>';
+
+const addCopyButtons = (clipboard) => {
+    // 1. Look for pre > code elements in the DOM
+    document.querySelectorAll("pre > code").forEach((codeBlock) => {
+        // 2. Create a button that will trigger a copy operation
+        const button = document.createElement("button");
+        button.className = "clipboard-button";
+        button.type = "button";
+        button.innerHTML = svgCopy;
+        button.addEventListener("click", () => {
+            clipboard.writeText(codeBlock.innerText).then(
+                () => {
+                    button.blur();
+                    button.innerHTML = svgCheck;
+                    setTimeout(() => (button.innerHTML = svgCopy), 2000);
+                },
+                (error) => (button.innerHTML = "Error")
+            );
+        });
+        // 3. Append the button directly before the pre tag
+        //    (with content-searching fix in place for Prism)
+        const pre = codeBlock.parentNode;
+        pre.parentNode.insertBefore(button, pre);
+    });
+};
+
+function addCopyButtonsAfterLoad() {
+    console.log("Loaded");
+    if (navigator && navigator.clipboard) {
+        addCopyButtons(navigator.clipboard);
+    } else {
+        const script = document.createElement("script");
+        script.src =
+            "https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js";
+        script.integrity =
+            "sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94=";
+        script.crossOrigin = "anonymous";
+        script.onload = () => addCopyButtons(clipboard);
+        document.body.appendChild(script);
+    }
+}
+
+window.addEventListener("load", addCopyButtonsAfterLoad);