image zoom feature

docs/.vitepress/theme/custom.css

@@ -8,6 +8,14 @@
 	letter-spacing: -0.045rem;
 }
 
+.medium-zoom-overlay {
+	z-index: 30;
+}
+
+.medium-zoom-image--opened {
+	z-index: 31;
+}
+
 /**
  * Colors: Solid
  * -------------------------------------------------------------------------- */

docs/.vitepress/theme/index.js

@@ -1,4 +1,24 @@
 import DefaultTheme from 'vitepress/theme'
+import { onMounted, watch, nextTick } from 'vue'
+import { useRoute } from 'vitepress'
+import mediumZoom from 'medium-zoom'
+
 import './custom.css'
 
-export default DefaultTheme
+export default {
+	...DefaultTheme,
+
+	setup() {
+		const route = useRoute()
+		const initZoom = () => {
+			mediumZoom('.main img', { background: 'var(--vp-c-bg)' })
+		}
+		onMounted(() => {
+			initZoom()
+		})
+		watch(
+			() => route.path,
+			() => nextTick(() => initZoom())
+		)
+	},
+}

package.json

@@ -7,5 +7,8 @@
 	},
 	"devDependencies": {
 		"vitepress": "^1.0.0"
+	},
+	"dependencies": {
+		"medium-zoom": "^1.1.0"
 	}
 }

yarn.lock

@@ -619,6 +619,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/mark.js/-/mark.js-8.11.1.tgz#180f1f9ebef8b0e638e4166ad52db879beb2ffc5"
   integrity sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==
 
+medium-zoom@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.1.0.tgz#6efb6bbda861a02064ee71a2617a8dc4381ecc71"
+  integrity sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==
+
 minisearch@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/minisearch/-/minisearch-6.3.0.tgz#985a2f1ca3c73c2d65af94f0616bfe57164b0b6b"