feat(docs): enable click-to-zoom image viewer

Wire vitepress-plugin-image-viewer + viewerjs into the theme so demo
screenshots can be zoomed, panned, and downloaded full-screen.

Author: areyoubugcoder

.vitepress/theme/index.ts

@@ -1,11 +1,20 @@
 import DefaultTheme from "vitepress/theme";
+import { useRoute } from "vitepress";
+import imageViewer from "vitepress-plugin-image-viewer";
+import vImageViewer from "vitepress-plugin-image-viewer/lib/vImageViewer.vue";
+import "viewerjs/dist/viewer.min.css";
 import "./custom.css";
 import CopyPath from "./components/CopyPath.vue";
-import type { App } from 'vue';
+import type { App } from "vue";
 
 export default {
   ...DefaultTheme,
   enhanceApp({ app }: { app: App }) {
-    app.component('CopyPath', CopyPath)
-  }
+    app.component("CopyPath", CopyPath);
+    app.component("vImageViewer", vImageViewer);
+  },
+  setup() {
+    const route = useRoute();
+    imageViewer(route);
+  },
 };

package.json

@@ -13,6 +13,8 @@
     "vitepress": "2.0.0-alpha.12"
   },
   "dependencies": {
+    "viewerjs": "^1.11.7",
+    "vitepress-plugin-image-viewer": "^1.1.6",
     "vue": "^3.5.22"
   }
 }