Added copy code button functionality in code blocks

src/components/CopyCodeButton/CopyCodeButton.jsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import './CopyCodeButton.scss';
+
+export default function CopyCodeButton({ text }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy code:', err);
+    }
+  };
+
+  return (
+    <button
+      className="copy-code-button"
+      onClick={handleCopy}
+      title="Copy code to clipboard"
+      aria-label="Copy code to clipboard"
+    >
+      {copied ? '✓ Copied!' : 'Copy'}
+    </button>
+  );
+}
+
+CopyCodeButton.propTypes = {
+  text: PropTypes.string.isRequired,
+};

src/components/CopyCodeButton/CopyCodeButton.scss

@@ -0,0 +1,45 @@
+.copy-code-button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #666;
+  background-color: #f5f5f5;
+  border: 1px solid #d0d0d0;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  z-index: 10;
+  font-family: inherit;
+  white-space: nowrap;
+
+  &:hover {
+    background-color: #e8e8e8;
+    border-color: #999;
+    color: #333;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &:focus {
+    outline: 2px solid #0066cc;
+    outline-offset: 2px;
+  }
+
+  /* Dark mode support */
+  @media (prefers-color-scheme: dark) {
+    color: #999;
+    background-color: #2a2a2a;
+    border-color: #444;
+
+    &:hover {
+      background-color: #3a3a3a;
+      border-color: #666;
+      color: #ccc;
+    }
+  }
+}

src/components/Page/Page.jsx

@@ -1,5 +1,6 @@
 // Import External Dependencies
 import { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { useLocation } from 'react-router-dom';
 
@@ -9,6 +10,7 @@ import Markdown from '../Markdown/Markdown';
 import Contributors from '../Contributors/Contributors';
 import { PlaceholderString } from '../Placeholder/Placeholder';
 import AdjacentPages from './AdjacentPages';
+import CopyCodeButton from '../CopyCodeButton/CopyCodeButton';
 
 // Load Styling
 import './Page.scss';
@@ -81,6 +83,48 @@ export default function Page(props) {
     };
   }, [contentLoaded, pathname, hash]);
 
+  // Enhance code blocks with copy buttons for /concepts routes
+  useEffect(() => {
+    if (contentLoaded && pathname.startsWith('/concepts')) {
+      const enhanceCodeBlocks = () => {
+        const allPreBlocks = document.querySelectorAll('pre');
+
+        allPreBlocks.forEach((pre) => {
+          if (pre.dataset.copyButtonAdded) {
+            return;
+          }
+
+          pre.style.position = 'relative';
+
+          const codeText = pre.textContent || pre.innerText;
+
+          const buttonWrapper = document.createElement('div');
+          buttonWrapper.className = 'copy-button-wrapper';
+          buttonWrapper.style.position = 'absolute';
+          buttonWrapper.style.top = '8px';
+          buttonWrapper.style.right = '8px';
+          buttonWrapper.style.zIndex = '10';
+          buttonWrapper.style.pointerEvents = 'auto';
+
+          ReactDOM.render(<CopyCodeButton text={codeText} />, buttonWrapper);
+
+          pre.appendChild(buttonWrapper);
+          pre.dataset.copyButtonAdded = 'true';
+        });
+      };
+
+      // Run immediately and after delays to catch dynamically rendered content
+      enhanceCodeBlocks();
+      const timer1 = setTimeout(() => enhanceCodeBlocks(), 300);
+      const timer2 = setTimeout(() => enhanceCodeBlocks(), 1000);
+
+      return () => {
+        clearTimeout(timer1);
+        clearTimeout(timer2);
+      };
+    }
+  }, [contentLoaded, pathname]);
+
   const numberOfContributors = contributors.length;
   const loadRelated = contentLoaded && related && related.length !== 0;
   const loadContributors =

webpack.common.mjs

@@ -1,7 +1,8 @@
 import path from 'path';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import webpack from 'webpack';
-import h from 'hastscript';
+import * as _hastscript from 'hastscript';
+const h = _hastscript?.default ?? _hastscript?.h ?? _hastscript;
 import remarkResponsiveTable from './src/remark-plugins/remark-responsive-table/remark-responsive-table.mjs';
 import gfm from 'remark-gfm';
 import slug from './src/remark-plugins/remark-slug/index.mjs';