feat: add copy code btn

_includes/head.html

@@ -45,6 +45,7 @@
     <script data-cfasync="false" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script data-cfasync="false" src="/js/app.js"></script>
     <script data-cfasync="false" defer src="/js/menu.js"></script>
+    <script data-cfasync="false" defer src="/js/copycode.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 
     <link rel="alternate" type="application/atom+xml" href="/feed.xml" title="Express Blog" />

css/style.css

@@ -344,14 +344,133 @@ code {
 pre {
   padding: 16px;
   border-radius: 3px;
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
   background-color: var(--code-bg);
+/* keyboard focus offset improve visibility */
+    &:focus {
+      border-width: 2px;
+      border-color: var(--hover-border);
+    }
 }
 
 pre code {
   padding: 0;
 }
 
+pre:has(code) {
+  position: relative;
+
+  &:is(:hover, :focus) {
+    button {
+      display: flex;
+    }
+  }
+  /* focus copy btn by keyboard */
+  &:focus-within button {
+    display: flex;
+  }
+}
+
+pre:has(code) button {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  border: none;
+  z-index: 100;
+  display: none;
+  cursor: pointer;
+  background-color: inherit;
+  padding: 2px;
+  border-radius: 5px;
+
+  &::after {
+  content: "";
+  background-color: var(--card-fg);
+  mask-image: url("../images/copy-btn.svg");
+  mask-size: 1.5rem;
+  mask-repeat: no-repeat;
+  width: 1.5rem;
+  height: 1.5rem;
+  }
+
+  &:is(:hover, :focus) {
+    background-color: var(--hover-bg);
+    outline: 2px solid var(--hover-border);
+  }
+
+  @media all and (max-width: 370px) { 
+    padding: 1px;
+
+    &::after {
+      mask-size: 1rem;
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+}
+
+pre:has(code) button.copied {
+  outline-color: var(--supported-fg);
+
+  &::after { 
+    background-color: var(--supported-fg);
+  }
+
+  &::before {
+    font-size: 0.85rem;
+    position: absolute;
+    left: -58px;
+    content: "copied!";
+
+    width: fit-content;
+    height: fit-content;
+    padding: 4px;
+    border-radius: 2px;
+    color: var(--card-fg);
+    background-color: var(--card-bg);
+    outline: 1px solid var(--supported-fg);
+  }
+
+  @media all and (max-width: 400px) { 
+    &::before {
+      left: -50px;
+      font-size: 0.7rem;
+      padding: 3px;
+    }
+  }
+}
+
+pre:has(code) button.failed {
+  outline-color: var(--eol-fg);
+
+  &::after { 
+    background-color: var(--eol-fg);
+  }
+
+  &::before {
+    font-size: 0.85rem;
+    position: absolute;
+    left: -58px;
+    content: "failed!";
+
+    width: fit-content;
+    height: fit-content;
+    padding: 4px;
+    border-radius: 2px;
+    color: var(--card-fg);
+    background-color: var(--card-bg);
+    outline: 1px solid var(--eol-fg);
+  }
+
+  @media all and (max-width: 400px) { 
+    &::before {
+      left: -50px;
+      font-size: 0.7rem;
+      padding: 3px;
+    }
+  }
+}
+
 /* top button */
 
 .scroll #top {

js/copycode.js

@@ -0,0 +1,58 @@
+const codeBlocks = document.querySelectorAll("pre:has(code)");
+
+codeBlocks.forEach((block) => {
+  // only add button if browser supports Clipboard API
+  if (!navigator.clipboard) return;
+
+  const button = document.createElement("button");
+  button.setAttribute("title", "copy code");
+  button.setAttribute("aria-label","click to copy code");
+  block.appendChild(button);
+  block.setAttribute("tabindex", 0); //add keyboard a11y for <pre></pre> 
+
+  button.addEventListener("click", async () => {
+    await copyCode(block, button);
+  });
+
+});
+
+async function copyCode(block, button) {
+    const code = block.querySelector("code");
+    const text = code.innerText;
+
+    try {
+      // success UI update
+      await navigator.clipboard.writeText(text);
+      // screen reader will  announce text is copied to clipboard
+      button.setAttribute("aria-live", "polite");
+      button.setAttribute("aria-label","code is copied!"); 
+      button.classList.add("copied");
+
+      // remove previous timer on multiple clicks (data-timer-id)
+      if (button.dataset.timerId) clearTimeout(button.dataset.timerId);
+
+      const timer = setTimeout(() => {
+        button.classList.remove("copied");
+        button.setAttribute("aria-label","click to copy code");
+      }, 1000);
+
+      button.dataset.timerId = timer;
+    }catch{
+      //  failed UI update
+      // screen reader will  announce text is copied to clipboard
+      button.setAttribute("aria-live", "polite");
+      button.setAttribute("aria-label","failed!"); 
+      button.classList.add("failed");
+
+      // remove previous timer on multiple clicks (data-timer-id)
+      if (button.dataset.timerId) clearTimeout(button.dataset.timerId);
+
+      const timer = setTimeout(() => {
+        button.classList.remove("failed");
+        button.setAttribute("aria-label","click to copy code");
+      }, 1000);
+
+
+      button.dataset.timerId = timer;
+    }
+  };