Add copy to clipboard for code snippets (#1548)

* Add copy to clipboard for code snippets

Author: paoloredis

assets/css/index.css

@@ -1073,4 +1073,25 @@ a[href*="#no-click"], img[src*="#no-click"] {
 
 .dd-item .highlight:hover {
   color: #5961ff;
+}
+
+.copy-button {
+  background-color: #eee;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.copy-button svg {
+  width: 16px;
+  height: 16px;
+  fill: #333;
+}
+
+.copy-button:hover {
+  background-color: #ddd;
 }

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/develop/list.html

@@ -93,5 +93,6 @@ <h1>
       </section>
     </div>
     {{ partial "docs-toc.html" . }}
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}

layouts/develop/single.html

@@ -37,5 +37,6 @@ <h1>
       </section>
     </div>
     {{ partial "docs-toc.html" . }}
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}

layouts/integrate/list.html

@@ -72,7 +72,7 @@ <h1 class="text-xl leading-tight px-6 py-4">
         {{ end }}
       </div>
     </div>
-    
     {{ partial "commands-nav.html" . }}
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}

layouts/integrate/single.html

@@ -36,5 +36,6 @@ <h1>{{ .Title }}</h1>
       </section>
     </div>
     {{ partial "docs-toc.html" . }}
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}

layouts/integration/list.html

@@ -48,5 +48,6 @@ <h1>{{ .Title }}</h1>
       </section>
     </div>
     {{ partial "docs-toc.html" . }}
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}

layouts/integration/single.html

@@ -36,5 +36,6 @@ <h1>{{ .Title }}</h1>
       </section>
     </div>
     {{ partial "docs-toc.html" . }}
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}

layouts/partials/scripts.html

@@ -1,5 +1,68 @@
-<!-- Code for version selectors -->
+<!-- Code for copy to clipboard button -->
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+
+        // 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');
+
+                if (block.parentElement.classList.contains("expand-content")) {
+                    wrapper.style = 'position:absolute;top:10px;right:20px;z-index:1;display:flex;align-items:center;gap:6px;';
+                } else {
+                    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 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(button);
+                wrapper.appendChild(tooltipContainer);
+                block.style.position = 'relative';
+                block.appendChild(wrapper);
+            });
+        }
+    });
+</script>
+
+
+<!-- Code for version selectors -->
 <script>
     window.onload = function(){
         var currentUrl = window.location.href