js: Fix copy to clipboard button stuck as "Copied" when clicked twice

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

assets/js/bobatheme.tmpl.js

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

layouts/_partials/head.html

@@ -19,9 +19,11 @@
         <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous" media="print" onload="this.media='all'">
     {{ end }}
 
-    {{ with resources.Get "js/bobatheme.js" | fingerprint "sha512" }}
+    {{ with resources.Get "js/bobatheme.tmpl.js" }}
+        {{ with resources.ExecuteAsTemplate "js/bobatheme.js" $ . | fingerprint "sha512" }}
             <script defer src="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
         {{ end }}
+    {{ end }}
     {{ if not hugo.IsServer }}
         <script defer data-domain="bbaovanc.com" src="https://plausible.bbaovanc.com/js/bobalytics.outbound-links.js"></script>
         <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>