From b67e3f4671ca32305f4d438b7aedcb76f68bb919 Mon Sep 17 00:00:00 2001
From: BBaoVanC <bbaovanc@bbaovanc.com>
Date: Fri, 18 Sep 2026 14:21:47 -0500
Subject: [PATCH] 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                | 39 +++++++++++++--------------
 layouts/_markup/render-codeblock.html |  3 ++-
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/assets/js/bobatheme.js b/assets/js/bobatheme.js
index 2abfd28..3e4f7fe 100644
--- a/assets/js/bobatheme.js
+++ b/assets/js/bobatheme.js
@@ -1,25 +1,22 @@
 // code block copy to clipboard
-window.onload = () => {
-    document.querySelectorAll(".code-block").forEach(codeBlock => {
-        const button = codeBlock.querySelector(".code-header > .code-copy-button");
+async function copy_to_clipboard(button) {
+    const codeBlock = button.parentElement.parentElement;
 
-        // 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;
+    // 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;
 
-        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);
-        }
-    });
+    await navigator.clipboard.writeText(rawCode);
+
+    // TODO: maybe we could add a fancier indicator, like a flash or something
+    const originalCopyText = button.innerHTML;
+    button.innerHTML = "Copied!";
+    setTimeout(() => {
+        button.innerHTML = originalCopyText;
+    }, 3000);
 }
diff --git a/layouts/_markup/render-codeblock.html b/layouts/_markup/render-codeblock.html
index b62fc68..4f6013f 100644
--- a/layouts/_markup/render-codeblock.html
+++ b/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>