Add copy to clipboard button to code blocks within documentation

_includes/asciidoctor-scripts/clipboard.html

@@ -0,0 +1,29 @@
+
+<script src="/assets/scripts/clipboard.min.js"></script>
+
+<script>
+    let atLeastOne = false;
+    document.querySelectorAll("code").forEach((codeElem) => {
+        if (codeElem.textContent && codeElem.closest('.listingblock')) {
+            let selectableCode = codeElem.textContent;
+            if (codeElem.dataset.lang === "terminal") {
+                let codeLines = codeElem.textContent.split(/\n/);
+                for (let idx = 0; idx < codeLines.length; idx++) {
+                    // line is a shell command, remove any console prompt
+                    codeLines[idx] = codeLines[idx].replace(/^\$ +/, "")
+                }
+                selectableCode = codeLines.join("\n");
+            }
+            let clipboardBtn =  document.createElement("button");
+            clipboardBtn.dataset.clipboardText = selectableCode;
+            clipboardBtn.className = "clipboardBtn";
+            codeElem.parentNode.insertBefore(clipboardBtn, codeElem.nextSibling);
+            atLeastOne = true;
+        }
+    });
+
+    if (atLeastOne) {
+        new Clipboard('.clipboardBtn');
+    }
+</script>
+

_layouts/guide.html

@@ -35,5 +35,11 @@ <h1 class="card-title fs-3">
     </div>
   </div>
 </div>
+
+
+
+{% include asciidoctor-scripts/clipboard.html %}
 {% include asciidoctor-scripts/icons.html %}
 {% include asciidoctor-scripts/sectanchors.html %}
+
+

_sass/kroxylicious.scss

@@ -334,3 +334,26 @@ b.conum * {
 .kroxylicious-guide .sect1+.sect1 {
   border-top: 1px solid $kroxy-light;
 }
+
+.kroxylicious-guide pre.CodeRay {
+  /* enable clipboardButton to be absolutely positioned within the pre */
+  position: relative;
+}
+
+.kroxylicious-guide pre.CodeRay:hover .clipboardBtn {
+  opacity: 1.0;
+}
+
+.kroxylicious-guide .clipboardBtn {
+  background:url(/assets/theme/images/clippy.svg) no-repeat;
+  display: inline-block;
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  cursor:pointer;
+  width: 13px;
+  height: 15px;
+  background-size:contain;
+  border: none;
+  opacity: 0;
+}