feat: add img zoom

.vitepress/theme/Layout.vue

@@ -2,7 +2,7 @@
 import { useData } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { nextTick, provide } from 'vue'
-
+import { useMediumZoom } from './useMediumZoom';
 const { isDark } = useData()
 
 const enableTransitions = () =>
@@ -36,7 +36,10 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }) => {
       pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
     }
   )
+  
 })
+
+useMediumZoom()
 </script>
 
 <template>

.vitepress/theme/index.js

@@ -1,5 +1,6 @@
 // https://vitepress.dev/guide/custom-theme
-import { h, watch } from 'vue'
+import { watch } from 'vue'
+import { createMediumZoomProvider } from './useMediumZoom'
 // import Theme from 'vitepress/theme'
 import DefaultTheme from 'vitepress/theme-without-fonts'
 import Layout from './Layout.vue'
@@ -14,6 +15,7 @@ let homePageStyle = undefined
 export default {
   ...DefaultTheme,
   Layout: Layout,
+
   enhanceApp(ctx) {
     DefaultTheme.enhanceApp(ctx)
     ctx.app.component('Download', Download)
@@ -21,12 +23,12 @@ export default {
     ctx.app.component('Parallax', Parallax)
     if (typeof window === 'undefined')
       return
-
     watch(
       () => ctx.router.route.data.relativePath,
       () => updateHomePageStyle(location.pathname === '/' || location.pathname === '/contributors'),
       { immediate: true },
     )
+    createMediumZoomProvider(ctx.app, ctx.router)
   },
 }
 

.vitepress/theme/style.css

@@ -205,4 +205,12 @@ mjx-container {
 
 mjx-container > svg {
   display: inline-block;
+}
+
+.medium-zoom-overlay {
+  z-index: 99;
+}
+
+.medium-zoom-image {
+  z-index: 99;
 }

.vitepress/theme/useMediumZoom.js

@@ -0,0 +1,24 @@
+import mediumZoom from 'medium-zoom'
+import { inject, nextTick, onMounted, watch } from 'vue'
+
+export const mediumZoomSymbol = Symbol('mediumZoom')
+
+export function useMediumZoom() {
+  return onMounted(() => inject(mediumZoomSymbol)?.refresh())
+}
+
+export function createMediumZoomProvider(app, router) {
+  if (import.meta.env.SSR)
+    return
+  const zoom = mediumZoom()
+  zoom.refresh = () => {
+    zoom.detach()
+    zoom.attach(':not(a) > img:not(.no-zoom)')
+    zoom.update({ background: 'var(--vp-c-bg)' })
+  }
+  app.provide(mediumZoomSymbol, zoom)
+  watch(
+    () => router.route.path,
+    () => nextTick(() => zoom.refresh()),
+  )
+}