From 2758cc94be417227597b017061c5b780a28af44e Mon Sep 17 00:00:00 2001
From: "@andatoshiki" <hello@toshiki.dev>
Date: Wed, 13 Sep 2023 19:57:53 -0700
Subject: [PATCH] fix(optimize): ammend medium zoom components by ejecting vue
 components ith custom setup script with fading variables in stylesheets but
 applying native vue & vuepress components to directly register zooming
 environment on page load without refresh to initiate

---
 .../theme/components/MediumZoom.vue           |  4 ++--
 docs/.vitepress/theme/index.ts                | 21 ++++++++++++-------
 docs/components.d.ts                          | 20 +++++++++---------
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/docs/.vitepress/theme/components/MediumZoom.vue b/docs/.vitepress/theme/components/MediumZoom.vue
index efff85f7..3b4e58c9 100644
--- a/docs/.vitepress/theme/components/MediumZoom.vue
+++ b/docs/.vitepress/theme/components/MediumZoom.vue
@@ -1,4 +1,4 @@
-<script setup>
+<!-- <script setup>
 import { onMounted } from 'vue'
 import mediumZoom from 'medium-zoom'
 
@@ -15,4 +15,4 @@ onMounted(() => {
 .medium-zoom-image {
     z-index: 21;
 }
-</style>
+</style> -->
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 20f81141..035a895d 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,7 +1,6 @@
 // vitepress custom theme component configs
 
 // deafult deps and packages for configuration
-import { onMounted } from 'vue'
 import { h, App } from 'vue'
 import { useData } from 'vitepress'
 import Theme from 'vitepress/theme'
@@ -10,6 +9,9 @@ import mediumZoom from 'medium-zoom'
 import vitepressNprogress from '@andatoshiki/vitepress-plugin-nprogress'
 import '@andatoshiki/vitepress-plugin-nprogress/lib/css/index.css'
 
+import { nextTick, onMounted, watch } from 'vue'
+import { inBrowser, useRoute } from 'vitepress'
+
 import '@andatoshiki/vitepress-plugin-shiki-twoslash/styles.css'
 
 // custom styles import
@@ -77,15 +79,18 @@ export default {
 
     // medium zoom custom markdown attributes components
     setup() {
+        const route = useRoute()
+        const initZoom = () => {
+          mediumZoom('.main img', { background: 'var(--vp-c-bg)' }) // Should there be a new?
+        }
         onMounted(() => {
-            // medium zoom for images manually added with data-zoomable attribute
-            // mediumZoom('[data-zoomable]', {
-            //     background: 'var(--vp-c-bg)',
-            //     scrollOffset: 40,
-            // })
-            mediumZoom('.main img', { background: 'var(--vp-c-bg)' }) // register global component to make image zoom globally with the class
+          initZoom()
         })
-    },
+        watch(
+          () => route.path,
+          () => nextTick(() => initZoom()),
+        )
+      },
 
     enhanceApp(ctx) {
         // custom component tag/slot
diff --git a/docs/components.d.ts b/docs/components.d.ts
index 0d1df86d..f946c4b7 100644
--- a/docs/components.d.ts
+++ b/docs/components.d.ts
@@ -8,14 +8,14 @@ import '@vue/runtime-core'
 export {}
 
 declare module '@vue/runtime-core' {
-    export interface GlobalComponents {
-        AsideSponsors: typeof import('./.vitepress/theme/components/AsideSponsors.vue')['default']
-        CardLink: typeof import('./.vitepress/theme/components/CardLink.vue')['default']
-        CodeTitle: typeof import('./.vitepress/theme/components/layout/CodeTitle.vue')['default']
-        Comment: typeof import('./.vitepress/theme/components/layout/Comment.vue')['default']
-        Copyright: typeof import('./.vitepress/theme/components/Copyright.vue')['default']
-        Footer: typeof import('./.vitepress/theme/components/layout/Footer.vue')['default']
-        MediumZoom: typeof import('./.vitepress/theme/components/MediumZoom.vue')['default']
-        Mermaid: typeof import('./.vitepress/theme/components/Mermaid.vue')['default']
-    }
+  export interface GlobalComponents {
+    AsideSponsors: typeof import('./.vitepress/theme/components/AsideSponsors.vue')['default']
+    CardLink: typeof import('./.vitepress/theme/components/CardLink.vue')['default']
+    CodeTitle: typeof import('./.vitepress/theme/components/layout/CodeTitle.vue')['default']
+    Comment: typeof import('./.vitepress/theme/components/layout/Comment.vue')['default']
+    Copyright: typeof import('./.vitepress/theme/components/Copyright.vue')['default']
+    Footer: typeof import('./.vitepress/theme/components/layout/Footer.vue')['default']
+    MediumZoom: typeof import('./.vitepress/theme/components/MediumZoom.vue')['default']
+    Mermaid: typeof import('./.vitepress/theme/components/Mermaid.vue')['default']
+  }
 }