From e2c40468b6b94982e28444dd5ef8be085e65ff83 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Fri, 27 Feb 2026 10:14:35 +0100
Subject: [PATCH] feat: add fullscreen lightbox for article images

Alpine.js component that lets visitors click any image inside
article content to view it fullscreen with keyboard navigation
(arrow keys, Escape to close) and prev/next buttons.
---
 _includes/layouts/base.njk |  1 +
 _includes/layouts/post.njk | 19 ++++++++-
 js/lightbox.js             | 80 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 js/lightbox.js

diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index f1fd24a..5d47014 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -72,6 +72,7 @@
   {# Alpine.js components — MUST load before Alpine core (Alpine.data() registration via alpine:init) #}
   <script src="/js/comments.js?v={{ '/js/comments.js' | hash }}" defer></script>
   <script src="/js/fediverse-interact.js?v={{ '/js/fediverse-interact.js' | hash }}" defer></script>
+  <script src="/js/lightbox.js?v={{ '/js/lightbox.js' | hash }}" defer></script>
   <script defer src="/js/vendor/alpine-collapse.min.js?v={{ '/js/vendor/alpine-collapse.min.js' | hash }}"></script>
   <script defer src="/js/vendor/alpine.min.js?v={{ '/js/vendor/alpine.min.js' | hash }}"></script>
   <style>[x-cloak] { display: none !important; }</style>
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
index 76ee848..6f8e38c 100644
--- a/_includes/layouts/post.njk
+++ b/_includes/layouts/post.njk
@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 withBlogSidebar: true
 ---
-<article class="h-entry post">
+<article class="h-entry post" x-data="lightbox" @keydown.window="onKeydown($event)">
   {% if title %}
   <h1 class="p-name text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-3 sm:mb-4">{{ title }}</h1>
   {% endif %}
@@ -245,6 +245,23 @@ withBlogSidebar: true
     "image": ["{% if postImage.startsWith('http') %}{{ postImage }}{% elif '/' in postImage and postImage[0] == '/' %}{{ site.url }}{{ postImage }}{% else %}{{ site.url }}/{{ postImage }}{% endif %}"]{% endif %}
   }
   </script>
+
+  {# Lightbox overlay for article images #}
+  <template x-teleport="body">
+    <div x-show="open" x-transition.opacity.duration.200ms
+         class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/90 backdrop-blur-sm"
+         @click.self="close()">
+      <button @click="close()" class="absolute top-4 right-4 text-white/70 hover:text-white text-3xl leading-none p-2 z-10" aria-label="Close">&times;</button>
+      <template x-if="images.length > 1">
+        <button @click="prev()" class="absolute left-4 top-1/2 -translate-y-1/2 text-white/70 hover:text-white text-4xl leading-none p-2 z-10" aria-label="Previous">&lsaquo;</button>
+      </template>
+      <template x-if="images.length > 1">
+        <button @click="next()" class="absolute right-4 top-1/2 -translate-y-1/2 text-white/70 hover:text-white text-4xl leading-none p-2 z-10" aria-label="Next">&rsaquo;</button>
+      </template>
+      <img :src="src" :alt="alt" class="max-h-[90vh] max-w-[90vw] object-contain" @click.stop>
+      <div x-show="alt" x-text="alt" class="absolute bottom-4 left-1/2 -translate-x-1/2 text-white/80 text-sm max-w-2xl text-center px-4 py-2 bg-black/50 rounded-lg"></div>
+    </div>
+  </template>
 </article>
 
 {# Comments section #}
diff --git a/js/lightbox.js b/js/lightbox.js
new file mode 100644
index 0000000..d8df430
--- /dev/null
+++ b/js/lightbox.js
@@ -0,0 +1,80 @@
+/**
+ * Alpine.js lightbox component for article images.
+ * Registers via alpine:init so it's available before Alpine starts.
+ * Click any image inside .e-content to view fullscreen.
+ * Navigate with arrow keys, close with Escape or click outside.
+ */
+document.addEventListener("alpine:init", () => {
+  Alpine.data("lightbox", () => ({
+    open: false,
+    src: "",
+    alt: "",
+    images: [],
+    currentIndex: 0,
+
+    init() {
+      const container = this.$root;
+      const imgs = container.querySelectorAll(
+        ".e-content img:not(.u-photo)"
+      );
+      this.images = Array.from(imgs);
+
+      this.images.forEach((img, i) => {
+        img.style.cursor = "zoom-in";
+        img.addEventListener("click", (e) => {
+          e.preventDefault();
+          this.show(i);
+        });
+      });
+    },
+
+    show(index) {
+      this.currentIndex = index;
+      const img = this.images[index];
+      // Use the largest source available
+      const picture = img.closest("picture");
+      if (picture) {
+        const source = picture.querySelector("source");
+        if (source) {
+          // Extract the URL from srcset (strip width descriptor)
+          const srcset = source.getAttribute("srcset") || "";
+          this.src = srcset.split(/\s+/)[0] || img.src;
+        } else {
+          this.src = img.src;
+        }
+      } else {
+        this.src = img.src;
+      }
+      this.alt = img.alt || "";
+      this.open = true;
+      document.body.style.overflow = "hidden";
+    },
+
+    close() {
+      this.open = false;
+      this.src = "";
+      document.body.style.overflow = "";
+    },
+
+    next() {
+      if (this.images.length > 1) {
+        this.show((this.currentIndex + 1) % this.images.length);
+      }
+    },
+
+    prev() {
+      if (this.images.length > 1) {
+        this.show(
+          (this.currentIndex - 1 + this.images.length) % this.images.length
+        );
+      }
+    },
+
+    onKeydown(e) {
+      if (!this.open) return;
+      if (e.key === "Escape") this.close();
+      if (e.key === "ArrowRight") this.next();
+      if (e.key === "ArrowLeft") this.prev();
+    },
+  }));
+});