feature: image zoom

docs/.vitepress/config/index.ts

@@ -25,7 +25,8 @@ import markdownItMark from "markdown-it-mark" // @ts-expect-error
 import markdownItVideo from "@vrcd-community/markdown-it-video"
 import markdownItFootnote from "markdown-it-footnote"
 import { align } from "@mdit/plugin-align"
-import { figure } from "@mdit/plugin-figure"
+// @ts-expect-error
+import figure from "markdown-it-image-figures"
 
 // refer https://vitepress.dev/reference/site-config for details
 export default withPwa(
@@ -241,7 +242,12 @@ export default withPwa(
           })
           .use(markdownItFootnote)
           .use(align)
-          .use(figure)
+          .use(figure, {
+            lazy: true,
+            async: true,
+            classes: "doc-content-image",
+            figcaption: "alt",
+          })
       },
     },
 

docs/.vitepress/theme/components/ImagePreviewRegister.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { onMounted, watch, nextTick } from 'vue'
+import { useRoute } from 'vitepress'
+import mediumZoom from 'medium-zoom'
+
+// https://bddxg.top/article/note/vitepress%E4%BC%98%E5%8C%96/%E7%82%B9%E5%87%BB%E5%9B%BE%E7%89%87%E6%94%BE%E5%A4%A7.html
+
+const route = useRoute()
+const initZoom = () => {
+    mediumZoom('.doc-content-image', { background: 'var(--vp-c-bg-soft)' })
+}
+onMounted(() => {
+    initZoom()
+})
+watch(
+    () => route.path,
+    () => nextTick(() => initZoom())
+)
+</script>

docs/.vitepress/theme/css/components.css

@@ -43,3 +43,11 @@ figcaption {
 .vp-doc img {
   margin: 0 auto;
 }
+
+.medium-zoom-overlay {
+  z-index: 9990 !important;
+}
+
+.medium-zoom-image {
+  z-index: 9999 !important;
+}

docs/.vitepress/theme/index.ts

@@ -1,29 +1,31 @@
-import { h } from 'vue'
+import { h } from "vue"
 
-import DefaultTheme from 'vitepress/theme'
-import type { Theme } from 'vitepress'
+import DefaultTheme from "vitepress/theme"
+import type { Theme } from "vitepress"
 
-import Home from './components/Home.vue'
-import CreatorsHome from './components/CreatorsHome.vue'
-import RegisterSW from './components/RegisterSW.vue'
-import ToOfficialDocs from './components/ToOfficialDocs.vue'
+import Home from "./components/Home.vue"
+import CreatorsHome from "./components/CreatorsHome.vue"
+import RegisterSW from "./components/RegisterSW.vue"
+import ToOfficialDocs from "./components/ToOfficialDocs.vue"
+import ImagePreviewRegister from "./components/ImagePreviewRegister.vue"
 
-import './css/theme.css'
-import './css/components.css'
+import "./css/theme.css"
+import "./css/components.css"
 import "vue-draggable-resizable/style.css"
 
 const customTheme: Theme = {
-    extends: DefaultTheme,
-    enhanceApp({ app }) {
-        app.component('Home', Home)
-        app.component('CreatorsHome', CreatorsHome)
-    },
-    Layout() {
-        return h(DefaultTheme.Layout, null, {
-            'layout-bottom': () => h(RegisterSW),
-            'aside-outline-after': () => h(ToOfficialDocs)
-        })
-    }
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component("Home", Home)
+    app.component("CreatorsHome", CreatorsHome)
+  },
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      "layout-bottom": () => h(RegisterSW),
+      "aside-outline-after": () => h(ToOfficialDocs),
+      "doc-bottom": () => h(ImagePreviewRegister),
+    })
+  },
 }
 
-export default customTheme;
+export default customTheme

package.json

@@ -11,7 +11,6 @@
   "packageManager": "[email protected]",
   "devDependencies": {
     "@mdit/plugin-align": "^0.8.0",
-    "@mdit/plugin-figure": "^0.8.0",
     "@tsconfig/node18": "^18.2.4",
     "@types/imagemin-gifsicle": "^7.0.4",
     "@types/imagemin-svgo": "^10.0.5",
@@ -30,9 +29,11 @@
     "markdown-it-abbr": "^2.0.0",
     "markdown-it-block-embed": "^0.0.3",
     "markdown-it-footnote": "^4.0.0",
+    "markdown-it-image-figures": "^2.1.1",
     "markdown-it-mark": "^4.0.0",
     "markdown-it-sub": "^2.0.0",
     "markdown-it-sup": "^2.0.0",
+    "medium-zoom": "^1.1.0",
     "sharp": "^0.33.3",
     "svgo": "^3.2.0",
     "vite-plugin-pwa": "^0.19.7",

yarn.lock

@@ -1999,20 +1999,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdit/plugin-figure@npm:^0.8.0":
-  version: 0.8.0
-  resolution: "@mdit/plugin-figure@npm:0.8.0"
-  dependencies:
-    "@types/markdown-it": "npm:^13.0.7"
-  peerDependencies:
-    markdown-it: ^14.0.0
-  peerDependenciesMeta:
-    markdown-it:
-      optional: true
-  checksum: 4a3cd9595fed99deb07d0551e125b74e4c8266b172cb55c735ad82f5628bf285a4f98630d81c4a3eacc265ed3c912cf323e1a65b3750f50f904ab02345f827b3
-  languageName: node
-  linkType: hard
-
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -5588,6 +5574,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"markdown-it-image-figures@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "markdown-it-image-figures@npm:2.1.1"
+  peerDependencies:
+    markdown-it: "*"
+  checksum: e5f41d63427197d7d66101e484cfbf8b402c6498d47c6ecca4f52114e2630a48f43bbc4fb63e0de143fa6b8259a4d67fbf4ab18e989d702e5f784484c820fd56
+  languageName: node
+  linkType: hard
+
 "markdown-it-mark@npm:^4.0.0":
   version: 4.0.0
   resolution: "markdown-it-mark@npm:4.0.0"
@@ -5630,6 +5625,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"medium-zoom@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "medium-zoom@npm:1.1.0"
+  checksum: e27692851ce65f03877a1c9f56de16a2c10ea720278b47f06b8a0ff503cef91762e683790d2b7bd3e9136fff36bf4f583e677173f0f0c4070a391a5d849ebbcd
+  languageName: node
+  linkType: hard
+
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"
@@ -7851,7 +7853,6 @@ __metadata:
   resolution: "vrchat-docs-localization@workspace:."
   dependencies:
     "@mdit/plugin-align": "npm:^0.8.0"
-    "@mdit/plugin-figure": "npm:^0.8.0"
     "@tsconfig/node18": "npm:^18.2.4"
     "@types/imagemin-gifsicle": "npm:^7.0.4"
     "@types/imagemin-svgo": "npm:^10.0.5"
@@ -7870,9 +7871,11 @@ __metadata:
     markdown-it-abbr: "npm:^2.0.0"
     markdown-it-block-embed: "npm:^0.0.3"
     markdown-it-footnote: "npm:^4.0.0"
+    markdown-it-image-figures: "npm:^2.1.1"
     markdown-it-mark: "npm:^4.0.0"
     markdown-it-sub: "npm:^2.0.0"
     markdown-it-sup: "npm:^2.0.0"
+    medium-zoom: "npm:^1.1.0"
     sharp: "npm:^0.33.3"
     svgo: "npm:^3.2.0"
     vite-plugin-pwa: "npm:^0.19.7"