Update copy to clipboard button and add it to commands as well

Author: paoloredis

layouts/commands/list.html

@@ -132,7 +132,7 @@ <h1 class="truncate font-mono font-medium text-lg mb-1.5 px-6">
         {{ end }}
       </div>
     </div>
-
     {{ partial "commands-nav.html" . }}
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}

layouts/commands/single.html

@@ -130,6 +130,6 @@ <h2>History</h2>
       </dl>
       {{ end }}
     </aside>
-
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}

layouts/partials/scripts.html

@@ -1,48 +1,59 @@
 <!-- Code for copy to clipboard button -->
 <script>
     document.addEventListener("DOMContentLoaded", function () {
-        document.querySelectorAll('div.highlight').forEach(block => {
-            // Create a wrapper for the button and message
-            const wrapper = document.createElement('div');
-            wrapper.style = 'position:absolute;top:10px;right:10px;z-index:1;display:flex;align-items:center;gap:6px;';
-
-            // Create the copy button
-            const button = document.createElement('button');
-            button.className = 'copy-button';
-            button.innerHTML = `
-                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M21 8C21 6.34315 19.6569 5 18 5H10C8.34315 5 7 6.34315 7 8V20C7 21.6569 8.34315 23 10 23H18C19.6569 23 21 21.6569 21 20V8ZM19 8C19 7.44772 18.5523 7 18 7H10C9.44772 7 9 7.44772 9 8V20C9 20.5523 9.44772 21 10 21H18C18.5523 21 19 20.5523 19 20V8Z" fill="#0F0F0F"/>
-                    <path d="M6 3H16C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1H6C4.34315 1 3 2.34315 3 4V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V4C5 3.44772 5.44772 3 6 3Z" fill="#0F0F0F"/>
+
+        // don't run script for tabbed code examples
+        if (!document.querySelector('.codetabs.cli.group.flex.justify-start.items-center.flex-wrap.box-border.rounded-lg.mt-0.mb-0.mx-auto.bg-slate-900')) {
+            document.querySelectorAll('div.highlight').forEach(block => {
+                // Create a wrapper for the button and message
+                const wrapper = document.createElement('div');
+                wrapper.style = 'position:absolute;top:10px;right:10px;z-index:1;display:flex;align-items:center;gap:6px;';
+
+                // Create the copy button
+                const button = document.createElement('button');
+                button.innerHTML = `
+                <button class="clipboard-button text-neutral-400 hover:text-slate-100 bg-slate-600 relative h-7 w-7 p-1 rounded rounded-mx" title="Copy to clipboard">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="currentColor">
+                    <path d="M9 43.95q-1.2 0-2.1-.9-.9-.9-.9-2.1V10.8h3v30.15h23.7v3Zm6-6q-1.2 0-2.1-.9-.9-.9-.9-2.1v-28q0-1.2.9-2.1.9-.9 2.1-.9h22q1.2 0 2.1.9.9.9.9 2.1v28q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h22v-28H15v28Zm0 0v-28 28Z"></path>
                 </svg>
             `;
 
-            // Create the "Copied!" message span
-            const message = document.createElement('span');
-            message.className = 'copied-message';
-            message.innerText = 'Copied to clipboard!';
-            message.style = 'opacity:0;transition:opacity 0.3s ease;font-size:0.75em;color:white;';
-
-            // Handle copy logic
-            button.addEventListener('click', () => {
-                const lines = block.querySelectorAll('span.cl');
-                const text = Array.from(lines).map(line => line.textContent).join('');
-
-                navigator.clipboard.writeText(text).then(() => {
-                    message.style.opacity = '1';
-                    setTimeout(() => {
-                        message.style.opacity = '0';
-                    }, 2000);
-                }).catch(err => {
-                    console.error("Copy failed", err);
+                // Create the tooltip container
+                const tooltipContainer = document.createElement('div');
+                tooltipContainer.className = 'tooltip relative inline-block';
+
+                // Create the tooltip span
+                const tooltip = document.createElement('span');
+                tooltip.className = 'tooltiptext hidden bg-slate-200 rounded rounded-mx text-slate-800 text-center text-xs p-1 absolute';
+                tooltip.style.bottom = '-0.6rem';
+                tooltip.style.left = '-5.5rem';
+                tooltip.textContent = 'Copied!';
+
+                tooltipContainer.appendChild(tooltip);
+                button.appendChild(tooltipContainer);
+
+                // Handle copy logic
+                button.addEventListener('click', () => {
+                    const lines = block.querySelectorAll('span.cl');
+                    const text = Array.from(lines).map(line => line.textContent).join('');
+
+                    navigator.clipboard.writeText(text).then(() => {
+                        tooltip.style.display = 'block';
+                        setTimeout(() => {
+                            tooltip.style.display = 'none';
+                        }, 2000);
+                    }).catch(err => {
+                        console.error("Copy failed", err);
+                    });
                 });
-            });
 
-            // Append button and message
-            wrapper.appendChild(message);
-            wrapper.appendChild(button);
-            block.style.position = 'relative';
-            block.appendChild(wrapper);
-        });
+                // Append button and message
+                wrapper.appendChild(button);
+                wrapper.appendChild(tooltipContainer);
+                block.style.position = 'relative';
+                block.appendChild(wrapper);
+            });
+        }
     });
 </script>