From 01e222f7ed749e4c02c47ee84025a3ad9d172261 Mon Sep 17 00:00:00 2001
From: Luan <8280546+mozedz@users.noreply.github.com>
Date: Wed, 15 Nov 2023 16:21:57 +0700
Subject: [PATCH] add image zoomable support

---
 docs/.vitepress/theme/_custom_code.scss | 10 +++++++++-
 docs/.vitepress/theme/index.js          | 16 ++++++++++++++++
 docs/kagi/plans/plan-types.md           |  4 ++--
 package-lock.json                       |  6 ++++++
 package.json                            |  1 +
 5 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/docs/.vitepress/theme/_custom_code.scss b/docs/.vitepress/theme/_custom_code.scss
index 44ea87cb..8bde5ab2 100644
--- a/docs/.vitepress/theme/_custom_code.scss
+++ b/docs/.vitepress/theme/_custom_code.scss
@@ -2,4 +2,12 @@
     a {
         display: none;
     }
-}
\ No newline at end of file
+}
+
+.medium-zoom-overlay {
+  z-index: 20;
+}
+
+.medium-zoom-image {
+  z-index: 21;
+}
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 7baed432..d50aec60 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -1,5 +1,8 @@
 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 {
@@ -7,4 +10,17 @@ export default {
   enhanceApp({ app }) {
     queryHack();
   },
+  setup() {
+    const route = useRoute();
+    const initZoom = () => {
+      mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' }); 
+    };
+    onMounted(() => {
+      initZoom();
+    });
+    watch(
+      () => route.path,
+      () => nextTick(() => initZoom())
+    );
+  },
 };
diff --git a/docs/kagi/plans/plan-types.md b/docs/kagi/plans/plan-types.md
index 55c4cbfb..d9131757 100644
--- a/docs/kagi/plans/plan-types.md
+++ b/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.
diff --git a/package-lock.json b/package-lock.json
index 2c24c751..b5e3e7e9 100644
--- a/package-lock.json
+++ b/package-lock.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"
       },
@@ -1249,6 +1250,11 @@
       "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
       "integrity": "sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ=="
     },
+    "node_modules/medium-zoom": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/medium-zoom/-/medium-zoom-1.0.8.tgz",
+      "integrity": "sha512-CjFVuFq/IfrdqesAXfg+hzlDKu6A2n80ZIq0Kl9kWjoHh9j1N9Uvk5X0/MmN0hOfm5F9YBswlClhcwnmtwz7gA=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
diff --git a/package.json b/package.json
index 290528fe..bf27936f 100644
--- a/package.json
+++ b/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"
   },