add image zoomable support

docs/.vitepress/theme/_custom_code.scss

@@ -2,4 +2,12 @@
     a {
         display: none;
     }
-}
+}
+
+.medium-zoom-overlay {
+  z-index: 20;
+}
+
+.medium-zoom-image {
+  z-index: 21;
+}

docs/.vitepress/theme/index.js

@@ -1,10 +1,26 @@
 import DefaultTheme from "vitepress/theme";
 import queryHack from "../custom_scripts/search_query_hack";
+import { onMounted, watch, nextTick } from 'vue';
+import { useRoute } from 'vitepress';
+import mediumZoom from 'medium-zoom';
 import "./custom.scss";
 
 export default {
   ...DefaultTheme,
   enhanceApp({ app }) {
     queryHack();
   },
+  setup() {
+    const route = useRoute();
+    const initZoom = () => {
+      mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' }); 
+    };
+    onMounted(() => {
+      initZoom();
+    });
+    watch(
+      () => route.path,
+      () => nextTick(() => initZoom())
+    );
+  },
 };

docs/kagi/plans/plan-types.md

@@ -10,9 +10,9 @@ next:
 
 Kagi offers several individual subscriptions plans.
 
-![Individual Plans](media/individual_plans.png)
+![Individual Plans](media/individual_plans.png){data-zoomable}
 
-* The **Trial** plan is limited to 100 total searches. This plan is suited for those interested in exploring Kagi and curious about paid search engines.  
+* The **Trial** plan is limited to 100 total searches. This plan is suited for those interested in exploring Kagi and curious about paid search engines.
 * The **Starter** plan offers 300 searches for USD $5 per month. This plan is suited for users who are new to paid search engines and are looking to own their search experience.
 * The **Professional** plan offers unlimited searches for USD $10 per month. This plan is suited for internet professionals and developers who are prolific and advanced search users.
 * The [**Ultimate**](./ultimate-plan.md) plan offers unlimited searches, exclusive and early access to Kagi features and services for USD $25 per month and offers the most power to the user.

package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@docsearch/js": "^3.5.1",
     "esbuild": "^0.19.3",
+    "medium-zoom": "^1.0.8",
     "vitepress": "^1.0.0-beta.7",
     "vitepress-plugin-pagefind": "^0.2.4"
   },