added copy code button functionality

Author: GoJo-Rika

blog.html

@@ -374,7 +374,7 @@ <h2 class="section-heading">Filter by Technology</h2>
     </div>
     <footer class="page-footer">
         <div class="container">
-            <p>© 2025 Mit Patel. All rights reserved.</p>
+            <p>© 2026 Mit Patel. All rights reserved.</p>
         </div>
 
         <script>

contact.html

@@ -168,7 +168,7 @@ <h3 class="contact-subheading">Send Me An Email</h3>
 
     <footer class="page-footer">
         <div class="container">
-            <p>© 2025 Mit Patel. All rights reserved.</p>
+            <p>© 2026 Mit Patel. All rights reserved.</p>
         </div>
     </footer>
 

css/post.css

@@ -1,83 +1,92 @@
 /* Main content area for the article */
 .post-content-main {
-    padding: 2rem;
+  padding: 2rem;
 }
 
 /* Headings within the article */
 .post-content-main h1 {
-    font-size: 2.5rem; /* Main title of the article if used */
-    margin: 0 0 1rem 0;
+  font-size: 2.5rem;
+  /* Main title of the article if used */
+  margin: 0 0 1rem 0;
 }
+
 .post-content-main h2 {
-    border-bottom: 1px solid var(--border-color);
-    /* Other heading styles remain the same */
-    font-size: 1.8rem;
-    margin-top: 2rem;
-    padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border-color);
+  /* Other heading styles remain the same */
+  font-size: 1.8rem;
+  margin-top: 2rem;
+  padding-bottom: 0.5rem;
 }
+
 .post-content-main h3 {
-    font-size: 1.4rem;
-    margin-top: 1.5rem;
+  font-size: 1.4rem;
+  margin-top: 1.5rem;
 }
 
 /* Paragraphs */
 .post-content-main p {
-    line-height: 1.7;
+  line-height: 1.7;
 }
 
 /* For Unordered Lists (bullet points) */
 .post-content-main ul {
-    list-style-type: disc;
-    padding-left: 40px;
-    margin-top: 0.5em;
-    margin-bottom: 1em;
+  list-style-type: disc;
+  padding-left: 40px;
+  margin-top: 0.5em;
+  margin-bottom: 1em;
 }
+
 .post-content-main li {
-    margin-bottom: 0.5em;
-    padding-left: 5px;
+  margin-bottom: 0.5em;
+  padding-left: 5px;
 }
 
 /* For Code Blocks (already uses dark background, let's refine for light theme) */
 .post-content-main pre {
-    background-color: var(--code-bg-color); /* This stays dark for contrast in both themes */
-    color: var(--code-text-color);
-    padding: 1.5rem;
-    border-radius: 8px;
-    overflow-x: auto;
-    font-family: 'Courier New', Courier, monospace;
-    font-size: 0.9em;
-    line-height: 1.5;
-    margin: 1.5em 0;
+  background-color: var(--code-bg-color);
+  /* This stays dark for contrast in both themes */
+  color: var(--code-text-color);
+  padding: 1.5rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.9em;
+  line-height: 1.5;
+  margin: 1.5em 0;
+  position: relative;
 }
 
 .post-content-main pre code {
-    padding: 0;
-    background: none;
-    color: inherit;
+  padding: 0;
+  background: none;
+  color: inherit;
 }
 
 /* For inline code snippets, now theme-aware */
-.post-content-main p > code, .post-content-main li > code {
-    background-color: var(--tag-bg-color); /* Use the tag background color */
-    color: var(--tag-text-color); /* Use the tag text color */
-    padding: 3px 6px;
-    border-radius: 4px;
-    font-family: 'Courier New', Courier, monospace;
+.post-content-main p>code,
+.post-content-main li>code {
+  background-color: var(--tag-bg-color);
+  /* Use the tag background color */
+  color: var(--tag-text-color);
+  /* Use the tag text color */
+  padding: 3px 6px;
+  border-radius: 4px;
+  font-family: 'Courier New', Courier, monospace;
 }
 
 /* For images */
 .post-content-main img {
-    max-width: 100%;
-    height: auto;
-    border-radius: 8px;
-    margin: 2em 0;
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 2em 0;
 }
 
 /* Ensure the tags in the sidebar stack nicely */
 aside .tech-stack {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
 /* ===== PREVIOUS / NEXT POST NAVIGATION ===== */
@@ -87,7 +96,8 @@ aside .tech-stack {
   margin-top: 2rem;
   padding-top: 2rem;
   border-top: 1px solid var(--border-color);
-  grid-column: 1 / -1; /* This makes it span both columns */
+  grid-column: 1 / -1;
+  /* This makes it span both columns */
 }
 
 .nav-link {
@@ -130,56 +140,70 @@ aside .tech-stack {
   justify-content: flex-end;
 }
 
-/* ===== PRISMJS COPY-TO-CLIPBOARD BUTTON STYLING ===== */
-div.code-toolbar {
-  position: relative;
-}
-
-div.code-toolbar > .toolbar {
+/* ===== CUSTOM COPY-TO-CLIPBOARD BUTTON STYLING ===== */
+.copy-code-btn {
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
-  transition: opacity 0.3s ease-in-out;
-  opacity: 0;
+  padding: 0.4rem;
+  background: transparent;
+  color: var(--code-text-color);
+  /* Contrasts with code block background */
+  border: none;
+  font-size: 1.1rem;
+  cursor: pointer;
+  opacity: 0.7;
+  /* Always clearly visible */
+  transition: opacity 0.2s, color 0.2s, background-color 0.2s;
+  border-radius: 4px;
 }
 
-div.code-toolbar:hover > .toolbar {
+.post-content-main pre:hover .copy-code-btn {
   opacity: 1;
 }
 
-.toolbar-item > .copy-to-clipboard-button {
-  cursor: pointer;
-  padding: 0.5rem 0.75rem;
-  background: #555;
-  color: #f0f0f0;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  font-family: sans-serif;
-  font-size: 0.8em;
-  transition: background-color 0.2s;
-}
-
-.toolbar-item > .copy-to-clipboard-button:hover {
-  background-color: #777;
+.copy-code-btn:hover {
+  background-color: rgba(128, 128, 128, 0.3);
 }
 
-.toolbar-item > .copy-to-clipboard-button:active {
-  background-color: var(--link-color);
+.copy-code-btn.copied {
+  color: var(--link-color);
+  opacity: 1;
 }
 
-.toolbar-item > .copy-to-clipboard-button[data-copy-state="copy"]::after {
-  content: 'Copy';
+/* ===== TOAST NOTIFICATION ===== */
+.toast-notification {
+  visibility: hidden;
+  min-width: 200px;
+  background-color: var(--text-color);
+  color: var(--bg-color);
+  text-align: center;
+  border-radius: 8px;
+  padding: 12px 16px;
+  position: fixed;
+  z-index: 1000;
+  left: 30px;
+  bottom: 30px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+  transition: visibility 0.3s, opacity 0.3s, transform 0.3s;
+  opacity: 0;
+  transform: translateY(20px);
 }
 
-.toolbar-item > .copy-to-clipboard-button[data-copy-state="copied"]::after {
-  content: 'Copied!';
+.toast-notification.show {
+  visibility: visible;
+  opacity: 1;
+  transform: translateY(0);
 }
 
 /* ===== GITHUB BUTTON IN POST SIDEBAR ===== */
 .sidebar-button {
   display: inline-block;
   width: 100%;
-  box-sizing: border-box; /* Ensures padding is included in the width */
+  box-sizing: border-box;
+  /* Ensures padding is included in the width */
   margin-top: 1rem;
   padding: 10px 15px;
   background-color: var(--card-bg-color);
@@ -204,26 +228,27 @@ div.code-toolbar:hover > .toolbar {
 
 /* ===== BLOG POST SERIES BOX IN SIDEBAR ===== */
 .series-navigation-sidebar {
-    padding: 1.25rem;
-    margin-bottom: 2rem;
-    border: 1px solid var(--border-color);
-    background-color: var(--card-bg-color);
-    border-radius: 8px;
-    text-align: center;
-    border-left: 4px solid var(--aside-accent-color);
+  padding: 1.25rem;
+  margin-bottom: 2rem;
+  border: 1px solid var(--border-color);
+  background-color: var(--card-bg-color);
+  border-radius: 8px;
+  text-align: center;
+  border-left: 4px solid var(--aside-accent-color);
 }
 
 .series-navigation-sidebar h4 {
-    margin-top: 0;
-    margin-bottom: 1rem;
-    font-size: 1rem;
-    font-weight: 600;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  font-weight: 600;
 }
 
 .series-navigation-sidebar .series-link {
-    display: block; /* Stack the links vertically if both are present */
-    margin: 0.5rem 0;
-    font-weight: 600;
-    text-decoration: none;
-    color: var(--link-color) !important;
+  display: block;
+  /* Stack the links vertically if both are present */
+  margin: 0.5rem 0;
+  font-weight: 600;
+  text-decoration: none;
+  color: var(--link-color) !important;
 }

index.html

@@ -282,7 +282,7 @@ <h3 class="competency-title-sidebar">Applied Natural Language Processing (NLP)</
 
     <footer class="page-footer">
       <div class="container">
-        <p>© 2025 Mit Patel. All rights reserved.</p>
+        <p>© 2026 Mit Patel. All rights reserved.</p>
       </div>
     </footer>
 

js/app.js

@@ -21,11 +21,65 @@ document.addEventListener('DOMContentLoaded', function () {
     applyTheme(savedTheme);
 
     // Listen for toggle clicks
-    themeToggle.addEventListener('click', function() {
+    themeToggle.addEventListener('click', function () {
         const currentTheme = localStorage.getItem('theme') || 'light';
         const newTheme = (currentTheme === 'dark') ? 'light' : 'dark';
         applyTheme(newTheme);
     });
+
+    // Custom Copy to Clipboard for Code Blocks
+    const codeBlocks = document.querySelectorAll('pre');
+
+    // Create Toast Element for notification
+    const toast = document.createElement('div');
+    toast.className = 'toast-notification';
+    toast.innerText = 'Copied to clipboard';
+    document.body.appendChild(toast);
+
+    codeBlocks.forEach(block => {
+        // Create the copy button using an icon
+        const copyButton = document.createElement('button');
+        copyButton.className = 'copy-code-btn';
+        copyButton.innerHTML = '<i class="far fa-copy"></i>';
+        copyButton.setAttribute('aria-label', 'Copy code to clipboard');
+
+        // Add the button to the pre block
+        block.appendChild(copyButton);
+
+        // Add the click event listener
+        copyButton.addEventListener('click', () => {
+            const code = block.querySelector('code');
+            let textToCopy = '';
+
+            if (code) {
+                textToCopy = code.innerText;
+            } else {
+                // Remove the button from the copied text if no inner code tag is found
+                const clone = block.cloneNode(true);
+                const btn = clone.querySelector('.copy-code-btn');
+                if (btn) clone.removeChild(btn);
+                textToCopy = clone.innerText;
+            }
+
+            navigator.clipboard.writeText(textToCopy).then(() => {
+                // Show toast notification
+                toast.classList.add('show');
+
+                // Change icon to a checkmark
+                copyButton.innerHTML = '<i class="fas fa-check"></i>';
+                copyButton.classList.add('copied');
+
+                setTimeout(() => {
+                    // Hide toast and revert icon
+                    toast.classList.remove('show');
+                    copyButton.innerHTML = '<i class="far fa-copy"></i>';
+                    copyButton.classList.remove('copied');
+                }, 2500);
+            }).catch(err => {
+                console.error('Failed to copy text: ', err);
+            });
+        });
+    });
 });