diff --git a/src/_data/site.json b/src/_data/site.json
index beec37c..72fb4f2 100644
--- a/src/_data/site.json
+++ b/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",
diff --git a/src/assets/css/main.scss.liquid b/src/assets/css/main.scss.liquid
index 3d6fca6..016c908 100644
--- a/src/assets/css/main.scss.liquid
+++ b/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
diff --git a/src/assets/css/orig-main.scss b/src/assets/css/orig-main.scss
deleted file mode 100644
index 23346e7..0000000
--- a/src/assets/css/orig-main.scss
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/src/assets/js/copy-code-button.js b/src/assets/js/copy-code-button.js
new file mode 100644
index 0000000..b7311a2
--- /dev/null
+++ b/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 =
+ ' Click to copy code';
+const svgCheck =
+ ' Copied!';
+
+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);