Support code-copying

Author: st0012

lib/rdoc/generator/template/aliki/css/rdoc.css

@@ -381,6 +381,95 @@ pre {
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
   margin: var(--space-4) 0;
+  position: relative;
+}
+
+/* Code block wrapper for copy button */
+.code-block-wrapper {
+  position: relative;
+  margin: var(--space-4) 0;
+}
+
+.code-block-wrapper pre {
+  margin: 0;
+}
+
+/* Copy button styling */
+.copy-code-button {
+  position: absolute;
+  top: var(--space-2);
+  right: var(--space-2);
+  padding: var(--space-2);
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  z-index: 10;
+}
+
+.copy-code-button:hover,
+.copy-code-button:focus {
+  opacity: 1;
+  background: var(--color-background-tertiary);
+  border-color: var(--color-border-emphasis);
+}
+
+.copy-code-button:active {
+  transform: scale(0.95);
+}
+
+.copy-code-button svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  color: var(--color-text-secondary);
+  transition: color var(--transition-fast);
+}
+
+.copy-code-button:hover svg {
+  color: var(--color-text-primary);
+}
+
+/* Copied state - subtle green checkmark */
+.copy-code-button.copied {
+  background: rgba(34, 197, 94, 0.1);
+  border-color: var(--color-green-500);
+  opacity: 1;
+}
+
+.copy-code-button.copied svg {
+  color: var(--color-green-600);
+}
+
+[data-theme="dark"] .copy-code-button.copied {
+  background: rgba(34, 197, 94, 0.15);
+  border-color: var(--color-green-400);
+}
+
+[data-theme="dark"] .copy-code-button.copied svg {
+  color: var(--color-green-400);
+}
+
+/* Mobile adjustments */
+@media (hover: none) {
+  .copy-code-button {
+    opacity: 0.7;
+  }
+
+  .copy-code-button:active {
+    opacity: 1;
+  }
 }
 
 pre code {

lib/rdoc/generator/template/aliki/js/aliki.js

@@ -361,6 +361,104 @@ function hookSearchModal() {
   }
 }
 
+/* ===== Code Block Copy Functionality ===== */
+
+function createCopyButton() {
+  var button = document.createElement('button');
+  button.className = 'copy-code-button';
+  button.type = 'button';
+  button.setAttribute('aria-label', 'Copy code to clipboard');
+  button.setAttribute('title', 'Copy code');
+
+  // Create clipboard icon SVG
+  var clipboardIcon = `
+    <svg viewBox="0 0 24 24">
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+    </svg>
+  `;
+
+  // Create checkmark icon SVG (for copied state)
+  var checkIcon = `
+    <svg viewBox="0 0 24 24">
+      <polyline points="20 6 9 17 4 12"></polyline>
+    </svg>
+  `;
+
+  button.innerHTML = clipboardIcon;
+  button.dataset.clipboardIcon = clipboardIcon;
+  button.dataset.checkIcon = checkIcon;
+
+  return button;
+}
+
+function wrapCodeBlocksWithCopyButton() {
+  // Copy buttons are generated dynamically rather than statically in rhtml templates because:
+  // - Code blocks are generated by RDoc's markup formatter (RDoc::Markup::ToHtml),
+  //   not directly in rhtml templates
+  // - Modifying the formatter would require extending RDoc's core internals
+
+  // Find all pre elements that are not already wrapped
+  var preElements = document.querySelectorAll('main pre:not(.code-block-wrapper pre)');
+
+  preElements.forEach(function(pre) {
+    // Skip if already wrapped
+    if (pre.parentElement.classList.contains('code-block-wrapper')) {
+      return;
+    }
+
+    // Create wrapper
+    var wrapper = document.createElement('div');
+    wrapper.className = 'code-block-wrapper';
+
+    // Insert wrapper before pre
+    pre.parentNode.insertBefore(wrapper, pre);
+
+    // Move pre into wrapper
+    wrapper.appendChild(pre);
+
+    // Create and add copy button
+    var copyButton = createCopyButton();
+    wrapper.appendChild(copyButton);
+
+    // Add click handler
+    copyButton.addEventListener('click', function() {
+      copyCodeToClipboard(pre, copyButton);
+    });
+  });
+}
+
+function copyCodeToClipboard(preElement, button) {
+  var code = preElement.textContent;
+
+  // Use the Clipboard API (supported by all modern browsers)
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(code).then(function() {
+      showCopySuccess(button);
+    }).catch(function() {
+      alert('Failed to copy code.');
+    });
+  } else {
+    alert('Failed to copy code.');
+  }
+}
+
+function showCopySuccess(button) {
+  // Change icon to checkmark
+  button.innerHTML = button.dataset.checkIcon;
+  button.classList.add('copied');
+  button.setAttribute('aria-label', 'Copied!');
+  button.setAttribute('title', 'Copied!');
+
+  // Revert back after 2 seconds
+  setTimeout(function() {
+    button.innerHTML = button.dataset.clipboardIcon;
+    button.classList.remove('copied');
+    button.setAttribute('aria-label', 'Copy code to clipboard');
+    button.setAttribute('title', 'Copy code');
+  }, 2000);
+}
+
 /* ===== Initialization ===== */
 
 document.addEventListener('DOMContentLoaded', function() {
@@ -371,4 +469,5 @@ document.addEventListener('DOMContentLoaded', function() {
   generateToc();
   hookTocActiveHighlighting();
   hookSearchModal();
+  wrapCodeBlocksWithCopyButton();
 });