Merge pull request #2 from echennells/feature/copy-buttons

Add copy buttons for shell commands

Author: Liongrass

_includes/copy_code_button.html

@@ -0,0 +1,156 @@
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Target only shell/bash command blocks (marked with ```shell in markdown)
+  const codeBlocks = document.querySelectorAll('.language-shell');
+
+  codeBlocks.forEach(function(block) {
+    // Skip if already has copy button
+    if (block.querySelector('.copy-btn')) return;
+
+    const pre = block.querySelector('pre');
+    if (!pre) return;
+
+    // Create copy button
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'copy-btn';
+    copyBtn.innerHTML = '📋';
+    copyBtn.setAttribute('data-tooltip', 'Copy');
+
+    // Position button
+    block.style.position = 'relative';
+    block.appendChild(copyBtn);
+
+    // Copy functionality
+    copyBtn.addEventListener('click', function() {
+      const code = (pre.textContent || pre.innerText).trim();
+
+      if (navigator.clipboard) {
+        navigator.clipboard.writeText(code).then(function() {
+          showSuccess(copyBtn);
+        }).catch(function() {
+          fallbackCopy(code, copyBtn);
+        });
+      } else {
+        fallbackCopy(code, copyBtn);
+      }
+    });
+  });
+
+  function showSuccess(button) {
+    const original = button.innerHTML;
+    button.innerHTML = '✅';
+    button.setAttribute('data-tooltip', 'Copied!');
+    button.style.backgroundColor = '#22c55e';
+
+    setTimeout(function() {
+      button.innerHTML = original;
+      button.setAttribute('data-tooltip', 'Copy');
+      button.style.backgroundColor = '';
+    }, 2000);
+  }
+
+  function fallbackCopy(text, button) {
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-9999px';
+    document.body.appendChild(textArea);
+    textArea.select();
+
+    try {
+      document.execCommand('copy');
+      showSuccess(button);
+    } catch (err) {
+      console.error('Copy failed:', err);
+    }
+
+    document.body.removeChild(textArea);
+  }
+});
+</script>
+
+<style>
+.copy-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: rgba(0, 0, 0, 0.7);
+  border: none;
+  border-radius: 4px;
+  color: white;
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 14px;
+  opacity: 0.7;
+  transition: all 0.2s ease;
+  z-index: 10;
+}
+
+.copy-btn:hover {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.copy-btn:active {
+  transform: scale(0.9);
+}
+
+/* Tooltip */
+.copy-btn::before {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  background: rgba(0, 0, 0, 0.9);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  transform: translateY(-4px);
+  z-index: 11;
+}
+
+.copy-btn::after {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  right: 8px;
+  border: 4px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.9);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  transform: translateY(-4px);
+}
+
+.copy-btn:hover::before,
+.copy-btn:hover::after {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(-8px);
+}
+
+/* Dark theme compatibility */
+[data-theme="dark"] .copy-btn {
+  background: rgba(255, 255, 255, 0.2);
+  color: #e5e5e5;
+}
+
+[data-theme="dark"] .copy-btn::before {
+  background: rgba(255, 255, 255, 0.95);
+  color: #1a1a1a;
+}
+
+[data-theme="dark"] .copy-btn::after {
+  border-top-color: rgba(255, 255, 255, 0.95);
+}
+
+[data-theme="light"] .copy-btn {
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+}
+</style>

_includes/head.html

@@ -32,7 +32,8 @@
   {% endif %}
 
   {%- include custom_head.html -%}
-  
+  {% include copy_code_button.html %}
+
   <!-- Lightning address -->
   <meta name="lightning" content="lnurlp:support@nodeacademy.org"/>
   <meta property="og:image" content="logo.png" />