feat: add copy code btn (#1841)

* test: copy code btn

* add copy btn svg

* add copy code btn

* fix: keyboard a11y and improve design

* show "copied !" text on the copy btn

* remove space in copied text

* Remove text shift

* handle failed copy code

* Minimize delay

* remove outline on code blocks

* refactor copycode.js

* Remove border width

Co-authored-by: Sebastian Beltran <bjohansebas@gmail.com>

* Convert timerId into a Number()

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Carlos Stenzel <carlosstenzel@hotmail.com>
Co-authored-by: Sebastian Beltran <bjohansebas@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 4 people

_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,132 @@ 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-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 {

images/copy-btn.svg

@@ -0,0 +1,57 @@
+const codeBlocks = document.querySelectorAll("pre:has(code)");
+
+codeBlocks.forEach((block) => {
+  // Only add button if browser supports Clipboard API
+  if (!navigator.clipboard) return;
+
+  const button = createCopyButton();
+  block.appendChild(button);
+  block.setAttribute("tabindex", 0); // Add keyboard a11y for <pre></pre>
+
+  button.addEventListener("click", async () => {
+    await copyCode(block, button);
+  });
+});
+
+function createCopyButton() {
+  const button = document.createElement("button");
+  setButtonAttributes(button, {
+    type: "button", // button doesn't act as a submit button
+    title: "copy code",
+    "aria-label": "click to copy code",
+  });
+  return button;
+}
+
+function setButtonAttributes(button, attributes) {
+  for (const [key, value] of Object.entries(attributes)) {
+    button.setAttribute(key, value);
+  }
+}
+
+async function copyCode(block, button) {
+  const code = block.querySelector("code");
+  const text = code.innerText;
+
+  try {
+    await navigator.clipboard.writeText(text);
+    updateButtonState(button, "copied", "code is copied!");
+  } catch {
+    updateButtonState(button, "failed", "failed!");
+  }
+}
+
+function updateButtonState(button, statusClass, ariaLabel) {
+  button.setAttribute("aria-live", "polite");
+  button.setAttribute("aria-label", ariaLabel);
+  button.classList.add(statusClass);
+
+  // Clear any existing timer
+  if (button.dataset.timerId) clearTimeout(Number(button.dataset.timerId));
+  const timer = setTimeout(() => {
+    button.classList.remove(statusClass);
+    button.setAttribute("aria-label", "click to copy code");
+  }, 1000);
+
+  button.dataset.timerId = timer;
+}