js: Define function for copy to clipboard and provide it in onClick

Instead of looping through all the code blocks at onload, just put an
onClick tag in the HTML template, which calls a global function.

This also improves the semantics since we aren't abusing href to be
javascript.

Also improves the writeText function call, since that method actually
returns a Promise which we should be waiting on. It technically worked
before because Promise starts executing instantly in JS, without being
awaited.

assets/js/bobatheme.js

@@ -1,25 +1,22 @@
 // code block copy to clipboard
-window.onload = () => {
+async function copy_to_clipboard(button) {
-    document.querySelectorAll(".code-block").forEach(codeBlock => {
+    const codeBlock = button.parentElement.parentElement;
-        const button = codeBlock.querySelector(".code-header > .code-copy-button");
 
-        // lang will not be unset because we default it to text
+    // lang will not be unset because we default it to textoriginalCopyText
-        // clone it so it doesn't change the actual DOM element
+    // clone it so it doesn't change the actual DOM element
-        const codeElem = codeBlock.querySelector("code[data-lang]").cloneNode(true);
+    const codeElem = codeBlock.querySelector("code[data-lang]").cloneNode(true);
-        // bashsession: remove command output lines
+    // bashsession: remove command output lines
-        codeElem.querySelectorAll(".go").forEach(e => e.parentNode.removeChild(e));
+    codeElem.querySelectorAll(".go").forEach(e => e.parentNode.removeChild(e));
-        // bashsession: remove prompt symbol
+    // bashsession: remove prompt symbol
-        codeElem.querySelectorAll(".gp").forEach(e => e.parentNode.removeChild(e));
+    codeElem.querySelectorAll(".gp").forEach(e => e.parentNode.removeChild(e));
-        const rawCode = codeElem.innerText;
+    const rawCode = codeElem.innerText;
 
-        const originalCopyText = button.innerHTML;
+    await navigator.clipboard.writeText(rawCode);
-        button.onclick = event => {
+
-            navigator.clipboard.writeText(rawCode);
+    // TODO: maybe we could add a fancier indicator, like a flash or something
-            // TODO: maybe we could add a fancier indicator, like a flash or something
+    const originalCopyText = button.innerHTML;
-            event.target.innerHTML = "Copied!";
+    button.innerHTML = "Copied!";
-            setTimeout(() => {
+    setTimeout(() => {
-                event.target.innerHTML = originalCopyText;
+        button.innerHTML = originalCopyText;
-            }, 3000);
+    }, 3000);
-        }
-    });
 }

layouts/_markup/render-codeblock.html

@@ -5,7 +5,8 @@
 <div class="code-block">
     <div class="code-block-header">
         <pre class="code-block-type">{{ $type }}</pre>
-        <a href="javascript:void(0)" class="code-block-copy-button">
+        {{/* https://blog.udemy.com/javascript-href/ */}}
+        <a href="javascript:null" onClick="javascript:copy_to_clipboard(this)" class="code-block-copy-button">
             {{ i18n "copy_to_clipboard" }}
         </a>
     </div>