Add copy button to all codeblocks

layouts/posts/single.html

@@ -0,0 +1,12 @@
+{{ define "main" }}
+<div id="main">
+    <div class="container">
+        {{ partial "header_image.html" . }}
+        {{ partial "content.html" . }}
+    </div>
+</div>
+{{ end }}
+
+{{ define "scripts_extra" }}
+{{ partial "script.html" "js/code-copy.js" }}
+{{ end }}

static/src/js/code-copy.js

@@ -0,0 +1,61 @@
+(() => {
+    "use strict";
+
+    if (!document.queryCommandSupported("copy")) {
+        return;
+    }
+
+    function flashCopyMessage(el, msg) {
+        el.textContent = msg;
+        setTimeout(() => {
+            el.textContent = "Copy";
+        }, 1000);
+    }
+
+    function selectText(node) {
+        let selection = window.getSelection();
+        let range = document.createRange();
+        if (node.childElementCount === 2) {
+            // Skip the title.
+            range.selectNodeContents(node.children[1]);
+        } else {
+            // ignore linenumbers
+            let _ln = node.getElementsByClassName("chroma");
+            let _node = node.getElementsByTagName("pre")[1]
+            if (_ln.length >= 1) {
+                range.selectNodeContents(_node);
+            } else {
+                range.selectNodeContents(node);
+            }
+        }
+        selection.removeAllRanges();
+        selection.addRange(range);
+        return selection;
+    }
+
+    function addCopyButton(containerEl) {
+        let copyBtn = document.createElement("button");
+        copyBtn.className = "copy-button";
+        copyBtn.textContent = "Copy";
+
+        let codeEl = containerEl.firstElementChild;
+        copyBtn.addEventListener("click", () => {
+            try {
+                let selection = selectText(codeEl);
+                document.execCommand("copy");
+                selection.removeAllRanges();
+
+                flashCopyMessage(copyBtn, "Copied!");
+            } catch (e) {
+                console && console.log(e);
+                flashCopyMessage(copyBtn, "Failed :'(");
+            }
+        });
+
+        containerEl.appendChild(copyBtn);
+    }
+
+    // Add copy button to code blocks
+    let highlightBlocks = document.getElementsByClassName("highlight");
+    Array.prototype.forEach.call(highlightBlocks, addCopyButton);
+})();

static/src/scss/style.scss

@@ -262,3 +262,34 @@ img {
         }
     }
 }
+
+.highlight {
+  position: relative;
+}
+
+.copy-button {
+  position: absolute;
+  bottom: 7px;
+  right: 7px;
+  border: 0;
+  border-radius: 4px;
+  padding: 1px;
+  font-size: 0.7em;
+  line-height: 1.8;
+  color: #fff;
+  background-color: #666;
+  min-width: 55px;
+  text-align: center;
+}
+
+.copy-button:hover {
+  background-color: #777;
+}
+
+.highlight .copy-button {
+  display: none;
+}
+
+.highlight:hover .copy-button {
+  display: inline;
+}