From e1f8a47553043745f86ef332ed9c50149e2d1101 Mon Sep 17 00:00:00 2001
From: paoloredis <paolo.lazzari@redis.com>
Date: Mon, 12 May 2025 11:31:54 +0200
Subject: [PATCH 1/4] Add copy to clipboard for code snippets

---
 assets/css/index.css          | 21 +++++++++++++++
 layouts/partials/scripts.html | 50 ++++++++++++++++++++++++++++++++++-
 2 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/assets/css/index.css b/assets/css/index.css
index 951cc11b38..ddfacb6699 100644
--- a/assets/css/index.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index a82336776b..90504229e2 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,5 +1,53 @@
-<!-- Code for version selectors -->
+<!-- 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"/>
+                </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);
+                });
+            });
+
+            // Append button and message
+            wrapper.appendChild(message);
+            wrapper.appendChild(button);
+            block.style.position = 'relative';
+            block.appendChild(wrapper);
+        });
+    });
+</script>
+
+
+<!-- Code for version selectors -->
 <script>
     window.onload = function(){
         var currentUrl = window.location.href

From 7b0985efe0882dcbbbee999bb8ea7b992b9d32bc Mon Sep 17 00:00:00 2001
From: paoloredis <paolo.lazzari@redis.com>
Date: Mon, 12 May 2025 11:46:15 +0200
Subject: [PATCH 2/4] Add script in develop, integrate and integration layouts
 as well

---
 layouts/develop/list.html       | 1 +
 layouts/develop/single.html     | 1 +
 layouts/integrate/list.html     | 2 +-
 layouts/integrate/single.html   | 1 +
 layouts/integration/list.html   | 1 +
 layouts/integration/single.html | 1 +
 6 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/layouts/develop/list.html b/layouts/develop/list.html
index 82b50f81cd..510732555a 100644
--- a/layouts/develop/list.html
+++ b/layouts/develop/list.html
@@ -51,5 +51,6 @@ <h1>
       </section>
     </div>
     {{ partial "docs-toc.html" . }}
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}
diff --git a/layouts/develop/single.html b/layouts/develop/single.html
index a157d84ad3..733bdface5 100644
--- a/layouts/develop/single.html
+++ b/layouts/develop/single.html
@@ -37,5 +37,6 @@ <h1>
       </section>
     </div>
     {{ partial "docs-toc.html" . }}
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}
diff --git a/layouts/integrate/list.html b/layouts/integrate/list.html
index 793e67a8cb..d0f5665363 100644
--- a/layouts/integrate/list.html
+++ b/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 }}
diff --git a/layouts/integrate/single.html b/layouts/integrate/single.html
index 786f266dfb..8a1a883499 100644
--- a/layouts/integrate/single.html
+++ b/layouts/integrate/single.html
@@ -36,5 +36,6 @@ <h1>{{ .Title }}</h1>
       </section>
     </div>
     {{ partial "docs-toc.html" . }}
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}
diff --git a/layouts/integration/list.html b/layouts/integration/list.html
index 1147bc0478..411eb1ef79 100644
--- a/layouts/integration/list.html
+++ b/layouts/integration/list.html
@@ -48,5 +48,6 @@ <h1>{{ .Title }}</h1>
       </section>
     </div>
     {{ partial "docs-toc.html" . }}
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}
diff --git a/layouts/integration/single.html b/layouts/integration/single.html
index a561346c87..41c035db84 100644
--- a/layouts/integration/single.html
+++ b/layouts/integration/single.html
@@ -36,5 +36,6 @@ <h1>{{ .Title }}</h1>
       </section>
     </div>
     {{ partial "docs-toc.html" . }}
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}

From 4b3ad263a73060e5cb2f2dab2e79ee9958f672f6 Mon Sep 17 00:00:00 2001
From: paoloredis <paolo.lazzari@redis.com>
Date: Tue, 13 May 2025 10:28:51 +0200
Subject: [PATCH 3/4] Update copy to clipboard button and add it to commands as
 well

---
 layouts/commands/list.html    |  2 +-
 layouts/commands/single.html  |  2 +-
 layouts/partials/scripts.html | 85 ++++++++++++++++++++---------------
 3 files changed, 50 insertions(+), 39 deletions(-)

diff --git a/layouts/commands/list.html b/layouts/commands/list.html
index e19ce379e1..fa1a38b351 100644
--- a/layouts/commands/list.html
+++ b/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 }}
diff --git a/layouts/commands/single.html b/layouts/commands/single.html
index 1b36b4b60a..36500e0f58 100644
--- a/layouts/commands/single.html
+++ b/layouts/commands/single.html
@@ -130,6 +130,6 @@ <h2>History</h2>
       </dl>
       {{ end }}
     </aside>
-
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 90504229e2..3b47b2b0e8 100644
--- a/layouts/partials/scripts.html
+++ b/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>
 

From 5acef9761bd7d7ed11f3a47b623769710a8b4f85 Mon Sep 17 00:00:00 2001
From: paoloredis <paolo.lazzari@redis.com>
Date: Wed, 14 May 2025 15:35:24 +0200
Subject: [PATCH 4/4] Increase right padding if scrollbar is present

---
 layouts/partials/scripts.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 3b47b2b0e8..caaee46967 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -7,8 +7,12 @@
             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;';
 
+                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 = `