Add copy-to-clipboard icon to the <code> blocks within the documentation.

the particular use-case I have in mind is quickstarts, but this also has general utility across the documentation.

Signed-off-by: Keith Wall <[email protected]>

Author: k-wall

_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.getAttribute("data-lang") === "terminal") {
+                let codeLines = codeElem.textContent.split(/\n/);
+                for (let idx = 0; idx < codeLines.length; idx++) {
+                    // line is a shell command, remove the console prompt
+                    codeLines[idx] = codeLines[idx].replace("$ ", "")
+                }
+                selectableCode = codeLines.join("\n");
+            }
+            let clipboardBtn =  document.createElement("button");
+            clipboardBtn.setAttribute('data-clipboard-text', 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,14 @@ b.conum * {
 .kroxylicious-guide .sect1+.sect1 {
   border-top: 1px solid $kroxy-light;
 }
+
+.kroxylicious-guide .clipboardBtn {
+  background:url(/assets/theme/images/clippy.svg) no-repeat;
+  float: right;
+  vertical-align: top;
+  cursor:pointer;
+  width: 13px;
+  height: 15px;
+  background-size:contain;
+  border: none;
+}