Add code copy button

templates/article.html

@@ -91,6 +91,7 @@
     type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
     crossorigin="anonymous"></script>
   <script src="{{base_url}}/js/webflow.js" type="text/javascript"></script>
+  <script src="{{base_url}}/js/code_copy.js" type="text/javascript"></script>
 </body>
 
 </html>

templates/css/compute-c23f91.webflow.css

@@ -5,7 +5,7 @@
 }
 
 body {
-  font-family: 'Arimo', sans-serif;
+  font-family: 'Arimo', 'Arial', sans-serif;
 }
 
 code {
@@ -328,4 +328,4 @@ article>* {
   .text-block {
     font-size: 6vw;
   }
-}
+}

templates/js/code_copy.js

@@ -0,0 +1,32 @@
+const copyButtonLabel = "Copy Code";
+
+// use a class selector if available
+let blocks = document.querySelectorAll("pre");
+
+blocks.forEach((block) => {
+  // only add button if browser supports Clipboard API
+  if (navigator.clipboard) {
+    let button = document.createElement("button");
+
+    button.innerText = copyButtonLabel;
+    block.appendChild(button);
+
+    button.addEventListener("click", async () => {
+      await copyCode(block);
+    });
+  }
+});
+
+async function copyCode(block, button) {
+  let code = block.querySelector("code");
+  let text = code.innerText;
+
+  await navigator.clipboard.writeText(text);
+
+  // visual feedback that task is completed
+  button.innerText = "Code Copied";
+
+  setTimeout(() => {
+    button.innerText = copyButtonLabel;
+  }, 700);
+}