the home site for me: also iteration 3 or 4 of my site
dunkirk.sh
1// Based on https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html
2document.addEventListener("DOMContentLoaded", () => {
3 const blocks = document.querySelectorAll("pre[class^='language-']");
4
5 for (const block of blocks) {
6 if (navigator.clipboard) {
7 // Code block header title
8 const title = document.createElement("span");
9 title.style.color = "var(--accent-text)";
10 const lang = block.getAttribute("data-lang");
11 const comment =
12 block.previousElementSibling &&
13 (block.previousElementSibling.tagName === "blockquote" ||
14 block.previousElementSibling.nodeName === "BLOCKQUOTE")
15 ? block.previousElementSibling
16 : null;
17 if (comment) block.previousElementSibling.remove();
18 title.innerHTML =
19 lang + (comment ? ` (${comment.textContent.trim()})` : "");
20
21 // Copy button icon
22 const icon = document.createElement("i");
23 icon.classList.add("icon");
24
25 // Copy button
26 const button = document.createElement("button");
27 const copyCodeText = "Copy code"; // Use hardcoded text instead of getElementById
28 button.setAttribute("title", copyCodeText);
29 button.appendChild(icon);
30
31 // Code block header
32 const header = document.createElement("div");
33 header.classList.add("header");
34 header.appendChild(title);
35 header.appendChild(button);
36
37 // Container that holds header and the code block itself
38 const container = document.createElement("div");
39 container.classList.add("pre-container");
40 container.appendChild(header);
41
42 // Move code block into the container
43 block.parentNode.insertBefore(container, block);
44 container.appendChild(block);
45
46 button.addEventListener("click", async () => {
47 await copyCode(block, header, button); // Pass the button here
48 });
49 }
50 }
51
52 async function copyCode(block, header, button) {
53 const code = block.querySelector("code");
54 const text = code.innerText;
55
56 await navigator.clipboard.writeText(text);
57
58 header.classList.add("active");
59 button.setAttribute("disabled", true);
60
61 header.addEventListener(
62 "animationend",
63 () => {
64 header.classList.remove("active");
65 button.removeAttribute("disabled");
66 },
67 { once: true },
68 );
69 }
70});