From 1d7cbb845a8ac66ca285c3e64956093685d7b905 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F=28Relakkes?= =?UTF-8?q?=29?= Date: Sat, 4 Apr 2026 23:50:13 +0800 Subject: [PATCH] feat: enlarge hero image and add medium-zoom for image lightbox Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/.vitepress/theme/custom.css | 20 ++++++++++++++++++++ docs/.vitepress/theme/index.ts | 14 ++++++++++++++ package-lock.json | 7 +++++++ package.json | 1 + 4 files changed, 42 insertions(+) diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index cda033fc..2dd5e409 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -12,3 +12,23 @@ --vp-c-brand-3: #ea9a7a; --vp-c-brand-soft: rgba(217, 119, 87, 0.16); } + +/* Hero image larger */ +.VPHero .image-container { + max-width: 500px !important; + max-height: 500px !important; +} + +.VPHero .image-container .image-src { + max-width: 500px !important; + max-height: 500px !important; +} + +/* medium-zoom overlay */ +.medium-zoom-overlay { + z-index: 30; +} + +.medium-zoom-image--opened { + z-index: 31; +} diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 15492a8c..b5b24411 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -1,6 +1,20 @@ import DefaultTheme from 'vitepress/theme' +import mediumZoom from 'medium-zoom' +import { onMounted, watch, nextTick } from 'vue' +import { useRoute } from 'vitepress' import './custom.css' export default { extends: DefaultTheme, + setup() { + const route = useRoute() + const initZoom = () => { + mediumZoom('.main img', { background: 'var(--vp-c-bg)' }) + } + onMounted(() => initZoom()) + watch( + () => route.path, + () => nextTick(() => initZoom()) + ) + }, } diff --git a/package-lock.json b/package-lock.json index b1790c04..e1552c17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,6 +47,7 @@ "lodash-es": "^4.17.23", "lru-cache": "^11.2.7", "marked": "^17.0.5", + "medium-zoom": "^1.1.0", "p-map": "^7.0.4", "picomatch": "^4.0.4", "proper-lockfile": "^4.1.2", @@ -5416,6 +5417,12 @@ "node": ">= 0.8" } }, + "node_modules/medium-zoom": { + "version": "1.1.0", + "resolved": "https://registry.npmmirror.com/medium-zoom/-/medium-zoom-1.1.0.tgz", + "integrity": "sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==", + "license": "MIT" + }, "node_modules/merge-descriptors": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-2.0.0.tgz", diff --git a/package.json b/package.json index 6520e771..67c3b260 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "lodash-es": "^4.17.23", "lru-cache": "^11.2.7", "marked": "^17.0.5", + "medium-zoom": "^1.1.0", "p-map": "^7.0.4", "picomatch": "^4.0.4", "proper-lockfile": "^4.1.2",