addressing review comments from Robert Young <[email protected]>

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

Author: k-wall

_includes/asciidoctor-scripts/clipboard.html

@@ -6,16 +6,16 @@
     document.querySelectorAll("code").forEach((codeElem) => {
         if (codeElem.textContent && codeElem.closest('.listingblock')) {
             let selectableCode = codeElem.textContent;
-            if (codeElem.getAttribute("data-lang") === "terminal") {
+            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 the console prompt
-                    codeLines[idx] = codeLines[idx].replace("$ ", "")
+                    // line is a shell command, remove any console prompt
+                    codeLines[idx] = codeLines[idx].replace(/^\$ +/, "")
                 }
                 selectableCode = codeLines.join("\n");
             }
             let clipboardBtn =  document.createElement("button");
-            clipboardBtn.setAttribute('data-clipboard-text', selectableCode);
+            clipboardBtn.dataset.clipboardText = selectableCode;
             clipboardBtn.className = "clipboardBtn";
             codeElem.parentNode.insertBefore(clipboardBtn, codeElem.nextSibling);
             atLeastOne = true;

_sass/kroxylicious.scss

@@ -335,13 +335,25 @@ b.conum * {
   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;
-  float: right;
-  vertical-align: top;
+  display: inline-block;
+  position: absolute;
+  top: 6px;
+  right: 6px;
   cursor:pointer;
   width: 13px;
   height: 15px;
   background-size:contain;
   border: none;
-}
+  opacity: 0;
+}