fix download button

Author: kaitlynmichael

assets/css/index.css

@@ -521,25 +521,17 @@ select {
   @apply w-10 h-10;
 }
 
-/* YAML embed container styles */
-.yaml-embed-container {
-  @apply relative;
-}
-
-.yaml-embed-container .download-yaml-btn {
-  @apply absolute top-2 right-2 z-10;
-  @apply bg-redis-yellow-500 hover:bg-redis-ink-900 hover:text-white;
-  @apply text-redis-ink-900 text-xs font-mono px-3 py-1 rounded;
-  @apply border border-redis-pen-600 transition-colors;
-  @apply flex items-center gap-1;
+/* YAML embed download button styles */
+.download-yaml-btn {
+  @apply transition-colors;
 }
 
-.yaml-embed-container .download-yaml-btn:disabled {
+.download-yaml-btn:disabled {
   @apply opacity-75 cursor-not-allowed;
 }
 
-.yaml-embed-container .download-yaml-btn svg {
-  @apply w-3 h-3;
+.download-yaml-btn svg {
+  @apply w-4 h-4;
 }
 
 #download-redis > h3,

layouts/partials/scripts.html

@@ -13,6 +13,11 @@
                 } else {
                     wrapper.style = 'position:absolute;top:10px;right:10px;z-index:1;display:flex;align-items:center;gap:6px;';
                 }
+
+                // Check if this is a YAML embed with download functionality
+                const yamlContainer = block.closest('.yaml-embed-container');
+                const downloadFilename = yamlContainer ? yamlContainer.getAttribute('data-download-filename') : null;
+
                 // Create the copy button
                 const button = document.createElement('button');
                 button.innerHTML = `
@@ -51,9 +56,30 @@
                     });
                 });
 
-                // Append button and message
+                // Append copy button
                 wrapper.appendChild(button);
                 wrapper.appendChild(tooltipContainer);
+
+                // Add download button if this is a YAML embed
+                if (downloadFilename) {
+                    const downloadButton = document.createElement('button');
+                    downloadButton.className = 'download-yaml-btn text-neutral-400 hover:text-slate-100 bg-slate-600 h-7 w-7 p-1 rounded rounded-mx';
+                    downloadButton.title = 'Download YAML file';
+                    downloadButton.innerHTML = `
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 16l-6-6h4V4h4v6h4l-6 6zm-6 2h12v2H6v-2z"/>
+                        </svg>
+                    `;
+
+                    downloadButton.addEventListener('click', () => {
+                        if (typeof downloadYaml === 'function') {
+                            downloadYaml(downloadFilename, downloadButton);
+                        }
+                    });
+
+                    wrapper.appendChild(downloadButton);
+                }
+
                 block.style.position = 'relative';
                 block.appendChild(wrapper);
             });

layouts/shortcodes/embed-yaml.html

@@ -2,26 +2,90 @@
 {{$filename := .Get 1}}
 {{$content := printf "./content/embeds/%s" $file | readFile}}
 
-<!-- Container for YAML content and download button -->
-<div class="yaml-embed-container relative">
-  <!-- Download button positioned in top-right -->
-  {{ if $filename }}
-  <div class="absolute top-2 right-2 z-10">
-    <button onclick="downloadYaml('{{ $filename }}', this)" class="download-yaml-btn bg-redis-yellow-500 hover:bg-redis-ink-900 hover:text-white text-redis-ink-900 text-xs font-mono px-3 py-1 rounded border border-redis-pen-600 transition-colors flex items-center gap-1" title="Download YAML file">
-      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M12 16l-6-6h4V4h4v6h4l-6 6zm-6 2h12v2H6v-2z"/>
-      </svg>
-      Download
-    </button>
-  </div>
-  {{ end }}
-
+<!-- Container for YAML content -->
+<div class="yaml-embed-container"{{ if $filename }} data-download-filename="{{ $filename }}"{{ end }}>
   <!-- YAML content -->
   <div class="yaml-content">
     {{ $content | markdownify }}
   </div>
 </div>
 
+{{ if $filename }}
+<script>
+function downloadYaml(filename, button) {
+  try {
+    // Get the YAML content from the code block
+    const container = button.closest('.yaml-embed-container') || button.closest('div.highlight').parentElement;
+    const codeElement = container.querySelector('code');
+
+    if (!codeElement) {
+      console.error('Could not find YAML content to download');
+      return;
+    }
+
+    // Extract the YAML content (remove any syntax highlighting spans)
+    let yamlContent = '';
+
+    // Try different methods to get clean text content
+    if (codeElement.textContent) {
+      yamlContent = codeElement.textContent.trim();
+    } else if (codeElement.innerText) {
+      yamlContent = codeElement.innerText.trim();
+    } else {
+      // Fallback for complex highlighting - look for line elements
+      const lines = codeElement.querySelectorAll('.cl, .line');
+      if (lines.length > 0) {
+        yamlContent = Array.from(lines).map(line => line.textContent || line.innerText || '').join('\n');
+      } else {
+        // Last resort - get all text content
+        yamlContent = codeElement.textContent || codeElement.innerText || '';
+      }
+    }
+
+    if (!yamlContent.trim()) {
+      console.error('No YAML content found to download');
+      return;
+    }
+
+    // Create and trigger download
+    const blob = new Blob([yamlContent], { type: 'text/yaml;charset=utf-8' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.style.display = 'none';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+
+    // Visual feedback
+    const originalText = button.innerHTML;
+    button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>';
+    button.disabled = true;
+
+    setTimeout(() => {
+      button.innerHTML = originalText;
+      button.disabled = false;
+    }, 2000);
+
+  } catch (error) {
+    console.error('Error downloading YAML file:', error);
+
+    // Show error feedback
+    const originalText = button.innerHTML;
+    button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>';
+    button.disabled = true;
+
+    setTimeout(() => {
+      button.innerHTML = originalText;
+      button.disabled = false;
+    }, 3000);
+  }
+}
+</script>
+{{ end }}
+
 {{ if $filename }}
 <script>
 function downloadYaml(filename, button) {