From 285a342752fe7f771ea813904e5e44b634289c13 Mon Sep 17 00:00:00 2001
From: Calum <contact@mineblock11.dev>
Date: Tue, 12 Dec 2023 19:19:34 +0000
Subject: [PATCH] Implement #69

---
 .vitepress/theme/index.ts  | 20 +++++++++++++++++---
 .vitepress/theme/style.css |  8 ++++++++
 package.json               |  1 +
 pnpm-lock.yaml             |  7 +++++++
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index def4cfc..63660cd 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -1,7 +1,8 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
-import type { Theme } from 'vitepress'
+import { h, nextTick, onMounted, watch } from 'vue'
+import { useRoute, type Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import mediumZoom from 'medium-zoom';
 import './style.css'
 
 export default {
@@ -13,5 +14,18 @@ export default {
   },
   enhanceApp({ app, router, siteData }) {
     // ...
-  }
+  },
+  setup() {
+    const route = useRoute();
+    const initZoom = () => {
+      mediumZoom('.main img', { background: 'var(--vp-c-bg)' });
+    };
+    onMounted(() => {
+      initZoom();
+    });
+    watch(
+      () => route.path,
+      () => nextTick(() => initZoom())
+    );
+  },
 } satisfies Theme
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index cf0d75e..50f8e28 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -78,6 +78,14 @@
   background-color: var(--vp-c-bg-alt);
 }
 
+.medium-zoom-overlay {
+  z-index: 10000;
+}
+
+.medium-zoom-image {
+  z-index: 10001;
+}
+
 .VPNavBar:not(.top):not(.has-sidebar) {
   border-bottom: none !important;
   animation: nav-box-shadow 200ms ease-out forwards;
diff --git a/package.json b/package.json
index 7897b26..629d653 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "vue": "^3.3.11"
   },
   "dependencies": {
+    "medium-zoom": "^1.1.0",
     "vitepress": "1.0.0-rc.31"
   }
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0c286e5..9171b40 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  medium-zoom:
+    specifier: ^1.1.0
+    version: 1.1.0
   vitepress:
     specifier: 1.0.0-rc.31
     version: 1.0.0-rc.31(@algolia/client-search@4.20.0)(search-insights@2.11.0)
@@ -983,6 +986,10 @@ packages:
       unist-util-visit: 5.0.0
     dev: false
 
+  /medium-zoom@1.1.0:
+    resolution: {integrity: sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==}
+    dev: false
+
   /micromark-util-character@2.0.1:
     resolution: {integrity: sha512-3wgnrmEAJ4T+mGXAUfMvMAbxU9RDG43XmGce4j6CwPtVxB3vfwXSZ6KhFwDzZ3mZHhmPimMAXg71veiBGzeAZw==}
     dependencies: