feat:add-copybutton (#103)

Author: Vaibhav0527

UI/frontend/src/App.css

@@ -217,3 +217,35 @@ body {
     font-size: 1.4rem;
   }
 }
+pre {
+  position: relative;
+  background-color: #1e1e1e;
+  color: #f8f8f2;
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  font-family: 'Fira Code', monospace;
+}
+
+/* --- Copy Button --- */
+.copy-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  transform: translateY(-50%);
+  background-color: #2d2d2d;
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  padding: 4px 8px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s, background-color 0.2s;
+}
+
+.copy-btn:hover {
+  opacity: 1;
+  background-color: #3e3e3e;
+}
+

UI/frontend/src/App.jsx

@@ -1,20 +1,64 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import LessonPage from './pages/LessonPage';
 import { getAllLessons } from './utils/markdownloader';
 import './App.css';
 
 const App = () => {
-  // Get all lessons to find the first one for the default redirect
   const lessons = getAllLessons();
   const firstLesson = lessons.length > 0 ? lessons[0] : null;
 
+  useEffect(() => {
+    // Function to add copy buttons to all <pre><code> blocks
+    const addCopyButtons = (root = document) => {
+      const codeBlocks = root.querySelectorAll("pre");
+
+codeBlocks.forEach((block) => {
+  const code = block.querySelector(":scope > code"); // only direct child <code>
+  if (!code) return; // skip outer <pre> that doesn't directly contain code
+  if (block.querySelector(".copy-btn")) return; // avoid duplicates
+
+
+        block.style.position = "relative";
+
+        const button = document.createElement("button");
+        button.className =
+          "copy-btn absolute top-2 right-2 bg-gray-800 text-white text-xs px-2 py-1 rounded";
+        button.innerText = "Copy";
+
+        button.addEventListener("click", async () => {
+          const text = code.innerText || "";
+          await navigator.clipboard.writeText(text);
+          button.innerText = "Copied!";
+          setTimeout(() => (button.innerText = "Copy"), 2000);
+        });
+
+        block.appendChild(button);
+      });
+    };
+
+    // Initial run
+    addCopyButtons();
+
+    // Watch for dynamically loaded lessons
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === 1) addCopyButtons(node);
+        });
+      }
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <BrowserRouter>
       <Routes>
         {/* Redirect root to first lesson */}
-        <Route 
-          path="/" 
+        <Route
+          path="/"
           element={
             firstLesson ? (
               <Navigate to={`/lessons/${firstLesson.slug}`} replace />
@@ -24,15 +68,15 @@ const App = () => {
                 <p>Please add markdown files to the content folder.</p>
               </div>
             )
-          } 
+          }
         />
-        
+
         {/* Dynamic lesson route */}
         <Route path="/lessons/:slug" element={<LessonPage />} />
-        
+
         {/* 404 fallback */}
-        <Route 
-          path="*" 
+        <Route
+          path="*"
           element={
             <div style={{ padding: '2rem', textAlign: 'center' }}>
               <h1>404 - Page Not Found</h1>
@@ -43,11 +87,11 @@ const App = () => {
                 </a>
               )}
             </div>
-          } 
+          }
         />
       </Routes>
     </BrowserRouter>
   );
 };
 
-export default App;
+export default App;