From a4d9aadb8a553c58b81942b628293f17e4e2e921 Mon Sep 17 00:00:00 2001
From: Mykhailo Rohalskyy <mykhailo.rohalskyy@crowdin.ua>
Date: Tue, 7 Jul 2026 13:14:39 +0300
Subject: [PATCH] feat: add click-to-zoom for article screenshots

Attach medium-zoom to images in .sl-markdown-content so UI screenshots
open in an enlarged overlay on click (Esc/click/scroll to close).
Skips images wrapped in links; scoped to article pages via Footer.
---
 package.json                   |  1 +
 pnpm-lock.yaml                 |  8 ++++++
 src/components/Footer.astro    |  3 +++
 src/components/ImageZoom.astro | 49 ++++++++++++++++++++++++++++++++++
 4 files changed, 61 insertions(+)
 create mode 100644 src/components/ImageZoom.astro

diff --git a/package.json b/package.json
index 8c5d7e4a8..902a97774 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "astro-og-canvas": "^0.10.1",
     "canvaskit-wasm": "^0.40.0",
     "github-slugger": "^2.0.0",
+    "medium-zoom": "^1.1.0",
     "redoc": "2.5.2",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-external-links": "^3.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d444ea8dd..3c4c2f85f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       github-slugger:
         specifier: ^2.0.0
         version: 2.0.0
+      medium-zoom:
+        specifier: ^1.1.0
+        version: 1.1.0
       redoc:
         specifier: 2.5.2
         version: 2.5.2(core-js@3.49.0)(mobx@6.16.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(styled-components@6.4.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7))
@@ -2387,6 +2390,9 @@ packages:
   mdn-data@2.27.1:
     resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
 
+  medium-zoom@1.1.0:
+    resolution: {integrity: sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==}
+
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
@@ -6177,6 +6183,8 @@ snapshots:
 
   mdn-data@2.27.1: {}
 
+  medium-zoom@1.1.0: {}
+
   micromark-core-commonmark@2.0.3:
     dependencies:
       decode-named-character-reference: 1.3.0
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index ed9c5af9c..bc9b81c1a 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,6 +1,7 @@
 ---
 import Default from '@astrojs/starlight/components/Footer.astro';
 import Feedback from '~/components/Feedback.astro';
+import ImageZoom from '~/components/ImageZoom.astro';
 import { getRelativeLocaleUrl } from 'astro:i18n';
 import { isStarlightHomepage } from '~/utils/starlightRoute';
 
@@ -49,3 +50,5 @@ const showFeedback = !isHomepage &&
         </div>
     </div>
 )}
+
+{showFeedback && <ImageZoom />}
diff --git a/src/components/ImageZoom.astro b/src/components/ImageZoom.astro
new file mode 100644
index 000000000..e25a5e48f
--- /dev/null
+++ b/src/components/ImageZoom.astro
@@ -0,0 +1,49 @@
+---
+// Click-to-zoom for UI screenshots inside article content.
+// Attaches medium-zoom to images in `.sl-markdown-content`, skipping images
+// that are wrapped in a link (those stay clickable).
+---
+
+<script>
+    import mediumZoom from 'medium-zoom';
+
+    let zoom: ReturnType<typeof mediumZoom> | undefined;
+
+    function setupImageZoom() {
+        const images = [...document.querySelectorAll<HTMLImageElement>('.sl-markdown-content img')]
+            .filter((img) => !img.closest('a'));
+
+        if (!images.length) return;
+
+        if (!zoom) {
+            zoom = mediumZoom(images, {
+                margin: 24,
+                background: 'rgba(0, 0, 0, 0.8)',
+            });
+        } else {
+            zoom.detach();
+            zoom.attach(images);
+        }
+    }
+
+    // Module scripts are deferred, so the content is already in the DOM.
+    setupImageZoom();
+
+    // Re-attach after client-side navigation (if View Transitions get enabled).
+    document.addEventListener('astro:page-load', setupImageZoom);
+</script>
+
+<style is:global>
+    .sl-markdown-content .medium-zoom-image {
+        cursor: zoom-in;
+    }
+
+    .medium-zoom-overlay,
+    .medium-zoom-image--opened {
+        z-index: 1000;
+    }
+
+    .medium-zoom-image--opened {
+        cursor: zoom-out;
+    }
+</style>