From 4eeb16eae1e96066318dc9c515e1d2a0b99c7535 Mon Sep 17 00:00:00 2001 From: zoltan-baba Date: Thu, 9 Jul 2026 12:02:56 +0200 Subject: [PATCH 1/2] feat: add click-to-zoom lightbox for doc images Wire in docusaurus-plugin-image-zoom so readers can click any doc image to view it enlarged, since screenshots were previously only viewable at their inline size. Co-Authored-By: Claude Sonnet 5 --- docusaurus.config.ts | 11 +++++++ package-lock.json | 68 ++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 80 insertions(+) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index c863f2bc..e14723ba 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -319,6 +319,7 @@ const config: Config = { }, ], changelogFeedPlugin, + 'docusaurus-plugin-image-zoom', function webpackFallbacks() { // eslint-disable-next-line @typescript-eslint/no-require-imports const webpack = require('webpack'); @@ -420,6 +421,16 @@ const config: Config = { darkTheme: prismThemes.dracula, additionalLanguages: ['yaml', 'bash', 'json', 'ruby', 'swift', 'kotlin', 'groovy', 'dart'], }, + zoom: { + selector: '.markdown img', + background: { + light: 'var(--sys-bg-surface)', + dark: '#1a1a2e', + }, + config: { + margin: 24, + }, + }, } satisfies Preset.ThemeConfig, }; diff --git a/package-lock.json b/package-lock.json index e8201bb3..816f99b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@mdx-js/react": "^3.0.0", "buffer": "^6.0.3", "clsx": "^2.0.0", + "docusaurus-plugin-image-zoom": "^3.0.1", "docusaurus-plugin-openapi-docs": "^5.0.2", "docusaurus-theme-openapi-docs": "^5.0.2", "prism-react-renderer": "^2.3.0", @@ -4244,6 +4245,7 @@ "resolved": "https://registry.npmjs.org/@docusaurus/theme-classic/-/theme-classic-3.10.1.tgz", "integrity": "sha512-VU1RK0qb2pab0si4r7HFK37cYco8VzqLj3u1PspVipSr/z/GPVKHO4/HXbnePqHoWDk8urjyGSeatH0NIMBM1A==", "license": "MIT", + "peer": true, "dependencies": { "@docusaurus/core": "3.10.1", "@docusaurus/logger": "3.10.1", @@ -11604,6 +11606,19 @@ "node": ">=6" } }, + "node_modules/docusaurus-plugin-image-zoom": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/docusaurus-plugin-image-zoom/-/docusaurus-plugin-image-zoom-3.0.1.tgz", + "integrity": "sha512-mQrqA99VpoMQJNbi02qkWAMVNC4+kwc6zLLMNzraHAJlwn+HrlUmZSEDcTwgn+H4herYNxHKxveE2WsYy73eGw==", + "license": "MIT", + "dependencies": { + "medium-zoom": "^1.1.0", + "validate-peer-dependencies": "^2.2.0" + }, + "peerDependencies": { + "@docusaurus/theme-classic": ">=3.0.0" + } + }, "node_modules/docusaurus-plugin-openapi-docs": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/docusaurus-plugin-openapi-docs/-/docusaurus-plugin-openapi-docs-5.0.2.tgz", @@ -15366,6 +15381,12 @@ "node": ">= 0.6" } }, + "node_modules/medium-zoom": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/medium-zoom/-/medium-zoom-1.1.0.tgz", + "integrity": "sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==", + "license": "MIT" + }, "node_modules/memfs": { "version": "4.57.2", "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.57.2.tgz", @@ -18318,6 +18339,27 @@ "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", "license": "MIT" }, + "node_modules/path-root": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz", + "integrity": "sha512-QLcPegTHF11axjfojBIoDygmS2E3Lf+8+jI6wOVmNVenrKSo3mFdSGiIgdSHenczw3wPtlVMQaFVwGmM7BJdtg==", + "license": "MIT", + "dependencies": { + "path-root-regex": "^0.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/path-root-regex": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz", + "integrity": "sha512-4GlJ6rZDhQZFE0DPVKh0e9jmZ5egZfxTkp7bcRDuPlJXbAwhxcl2dINPUAsjLdejqaLsCeg8axcLjIbvBjN4pQ==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/path-to-regexp": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz", @@ -20588,6 +20630,7 @@ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz", "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==", "license": "MIT", + "peer": true, "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" @@ -21318,6 +21361,18 @@ "node": ">=4" } }, + "node_modules/resolve-package-path": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/resolve-package-path/-/resolve-package-path-4.0.3.tgz", + "integrity": "sha512-SRpNAPW4kewOaNUt8VPqhJ0UMxawMwzJD8V7m1cJfdSTK9ieZwS6K7Dabsm4bmLFM96Z5Y/UznrpG5kt1im8yA==", + "license": "MIT", + "dependencies": { + "path-root": "^0.1.1" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/resolve-pathname": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", @@ -23653,6 +23708,19 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/validate-peer-dependencies": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/validate-peer-dependencies/-/validate-peer-dependencies-2.2.0.tgz", + "integrity": "sha512-8X1OWlERjiUY6P6tdeU9E0EwO8RA3bahoOVG7ulOZT5MqgNDUO/BQoVjYiHPcNe+v8glsboZRIw9iToMAA2zAA==", + "license": "MIT", + "dependencies": { + "resolve-package-path": "^4.0.3", + "semver": "^7.3.8" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/validate.io-array": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/validate.io-array/-/validate.io-array-1.0.6.tgz", diff --git a/package.json b/package.json index 022ede13..5e3d5830 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@mdx-js/react": "^3.0.0", "buffer": "^6.0.3", "clsx": "^2.0.0", + "docusaurus-plugin-image-zoom": "^3.0.1", "docusaurus-plugin-openapi-docs": "^5.0.2", "docusaurus-theme-openapi-docs": "^5.0.2", "prism-react-renderer": "^2.3.0", From 0713c3657c86be824cc2af4229e370e38cfbabf3 Mon Sep 17 00:00:00 2001 From: zoltan-baba Date: Thu, 9 Jul 2026 12:50:07 +0200 Subject: [PATCH 2/2] fix: scope lightbox to non-linked images and reuse theme background var The zoom selector matched every img in .markdown, including the one markdown image that's wrapped in a link (the MCP install badge), so clicking it opened the lightbox instead of navigating cleanly. Also swap the hardcoded dark background for the existing --ifm-background-color var so it can't drift from the site's actual theme colors. Co-Authored-By: Claude Sonnet 5 --- docusaurus.config.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index e14723ba..de32a95e 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -422,10 +422,10 @@ const config: Config = { additionalLanguages: ['yaml', 'bash', 'json', 'ruby', 'swift', 'kotlin', 'groovy', 'dart'], }, zoom: { - selector: '.markdown img', + selector: '.markdown img:not(a > img)', background: { - light: 'var(--sys-bg-surface)', - dark: '#1a1a2e', + light: 'var(--ifm-background-color)', + dark: 'var(--ifm-background-color)', }, config: { margin: 24,