docs: add copy env variables and labels to clipboard button (#46)

Author: DeepSpace2

docs/configuration.md

@@ -1,5 +1,9 @@
 # Configuration
 
+!!! tip
+
+    Hover over any variable or label to reveal a 'copy to clipboard' button
+
 ## Environment Variables
 
 ### Required

docs/css/copy-to-clipboard.css

@@ -0,0 +1,39 @@
+.copy-to-clipboard-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.copy-to-clipboard-button {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s, color 0.2s;
+  color: var(--md-typeset-color);
+  line-height: 0;
+  border-radius: 4px;
+}
+
+.copy-to-clipboard-button:hover {
+  background-color: var(--md-code-bg-color);
+  color: var(--md-accent-fg-color);
+}
+
+.copy-to-clipboard-wrapper:hover .copy-to-clipboard-button,
+.copy-to-clipboard-td:hover .copy-to-clipboard-button {
+  opacity: 1;
+}
+
+.copy-to-clipboard-button svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.copy-to-clipboard-button.copy-success {
+  color: #4CCD50;
+  opacity: 1;
+}

docs/js/copy-to-clipboard.js

@@ -0,0 +1,76 @@
+/* Subscribe to the document$ observable provided by MkDocs Material */
+document$.subscribe(function() {
+  const codeElements = document.querySelectorAll("table td:first-child code");
+
+  codeElements.forEach(code => {
+    if (code.closest(".copy-to-clipboard-wrapper")) return;
+
+    const td = code.closest("td");
+    if (!td) return;
+
+    td.classList.add("copy-to-clipboard-td");
+
+    const wrapper = document.createElement("span");
+    wrapper.classList.add("copy-to-clipboard-wrapper");
+    
+    code.parentNode.insertBefore(wrapper, code);
+    wrapper.appendChild(code);
+    
+    const button = document.createElement("button");
+    button.type = "button";
+    button.setAttribute("aria-label", "Copy to clipboard");
+    button.setAttribute("title", "Copy to clipboard");
+    button.classList.add("copy-to-clipboard-button");
+    button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12V1Z"/></svg>';
+    
+    wrapper.appendChild(button);
+    
+    button.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const textToCopy = code.textContent.trim();
+      
+      const fallbackCopy = () => {
+        const textArea = document.createElement("textarea");
+        textArea.value = textToCopy;
+        textArea.style.position = "fixed";
+        textArea.style.left = "-9999px";
+        textArea.style.top = "0";
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        try {
+          document.execCommand('copy');
+          return true;
+        } catch (err) {
+          console.error('Fallback copy failed', err);
+          return false;
+        }
+        document.body.removeChild(textArea);
+      };
+
+      if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(textToCopy)
+          .then(() => showSuccess(button))
+          .catch(() => {
+            if (fallbackCopy()) showSuccess(button);
+          });
+      } else if (fallbackCopy()) {
+        showSuccess(button);
+      }
+    });
+  });
+
+  function showSuccess(button) {
+    const originalHTML = button.innerHTML;
+    
+    button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59 21 7Z"/></svg>';
+    button.classList.add("copy-success");
+    
+    setTimeout(() => {
+      button.innerHTML = originalHTML;
+      button.classList.remove("copy-success");
+    }, 1500);
+  }
+});

mkdocs.yml

@@ -10,6 +10,9 @@ nav:
   - Contributing: contributing.md
 extra_css:
   - css/theme.css
+  - css/copy-to-clipboard.css
+extra_javascript:
+  - js/copy-to-clipboard.js
 theme:
   name: material
   logo: assets/logo_icon.svg
@@ -58,7 +61,9 @@ extra:
     provider: mike
 markdown_extensions:
   - abbr
+  - admonition
   - attr_list
+  - pymdownx.details
   - pymdownx.emoji:
       emoji_index: !!python/name:material.extensions.emoji.twemoji
       emoji_generator: !!python/name:material.extensions.emoji.to_svg