From db264ac2f9f23ef29dfb9d88aed7245443928474 Mon Sep 17 00:00:00 2001
From: Francisco Javier Arceo <farceo@redhat.com>
Date: Wed, 1 Jul 2026 14:24:03 -0700
Subject: [PATCH] feat: Add click-to-zoom lightbox for blog post images

Clicking any image in a blog post now opens a fullscreen overlay
with the image centered on a dark backdrop. Close with click or Escape.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>
---
 infra/website/src/pages/blog/[slug].astro | 66 ++++++++++++++++++++++-
 1 file changed, 65 insertions(+), 1 deletion(-)

diff --git a/infra/website/src/pages/blog/[slug].astro b/infra/website/src/pages/blog/[slug].astro
index 90e8572d0b2..a8ab3da8559 100644
--- a/infra/website/src/pages/blog/[slug].astro
+++ b/infra/website/src/pages/blog/[slug].astro
@@ -223,6 +223,7 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
     height: auto;
     border-radius: 4px;
     margin: 32px 0;
+    cursor: zoom-in;
   }
 
   /* Hero Image */
@@ -339,4 +340,67 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
       font-size: 18px;
     }
   }
-</style> 
+</style>
+
+<script>
+  const overlay = document.createElement('div');
+  overlay.className = 'lightbox-overlay';
+  const img = document.createElement('img');
+  overlay.appendChild(img);
+  document.body.appendChild(overlay);
+
+  function open(src: string, alt: string) {
+    img.src = src;
+    img.alt = alt;
+    overlay.classList.add('active');
+    document.body.style.overflow = 'hidden';
+  }
+
+  function close() {
+    overlay.classList.remove('active');
+    document.body.style.overflow = '';
+  }
+
+  overlay.addEventListener('click', close);
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') close();
+  });
+
+  document.querySelectorAll('.blog-content img').forEach((el) => {
+    el.addEventListener('click', () => {
+      const image = el as HTMLImageElement;
+      open(image.src, image.alt);
+    });
+  });
+</script>
+
+<style is:global>
+  .lightbox-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    background: rgba(0, 0, 0, 0.85);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: zoom-out;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+  }
+
+  .lightbox-overlay.active {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .lightbox-overlay img {
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain;
+    border-radius: 4px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+</style>
+