Replace image zoom plugin

HakuyaLabs · Dec 27, 2023 · 57f86a9 · 57f86a9
1 parent 147de99
commit 57f86a9
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 25 deletions.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -48,8 +48,8 @@ const config: Config = {
   ],
 
   plugins: [
-    'plugin-image-zoom',
-    'docusaurus-plugin-sass'
+    'docusaurus-plugin-sass',
+    'docusaurus-plugin-image-zoom'
   ],
 
   themes: [
@@ -102,19 +102,16 @@ const config: Config = {
         disableSwitch: false,
         respectPrefersColorScheme: true,
       },
-      imageZoom: {
-        // CSS selector to apply the plugin to, defaults to '.markdown img'
+      zoom: {
         selector: '.markdown img',
-        // Optional medium-zoom options
-        // see: https://www.npmjs.com/package/medium-zoom#options
-        options: {
-          margin: 24,
-          background: 'var(--ifm-background-surface-color)',
-          scrollOffset: 0,
-          // container: '#zoom-container',
-          // template: '#zoom-template',
+        background: {
+          light: 'var(--ifm-background-surface-color)',
+          dark: 'var(--ifm-background-surface-color)'
         },
-      },
+        config: {
+          // options you can specify via https://github.com/francoischalifour/medium-zoom#usage
+        }
+      }
     } satisfies Preset.ThemeConfig,
 };
 

diff --git a/package.json b/package.json
@@ -25,10 +25,10 @@
     "@mdx-js/react": "^3.0.0",
     "@types/react": "^18.2.45",
     "clsx": "^1.2.1",
+    "docusaurus-plugin-image-zoom": "^1.0.1",
     "docusaurus-plugin-sass": "^0.2.5",
     "dotenv": "^16.3.1",
     "node-scp": "^0.0.22",
-    "plugin-image-zoom": "^1.2.0",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -39,6 +39,11 @@
   "devDependencies": {
     "typescript": "^5.0"
   },
+  "overrides": {
+    "docusaurus-plugin-image-zoom": {
+      "@docusaurus/theme-classic": "^3.0.0"
+    }
+  },
   "browserslist": {
     "production": [
       ">0.5%",

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -124,3 +124,17 @@ display: flex;
   padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
   margin: 1em 0;
 }
+
+.medium-zoom-overlay{
+  z-index: 69;
+  perspective: 1000;     
+  backface-visibility: hidden;     
+  transform-style: preserve-3d; 
+}
+
+.medium-zoom-image--opened {
+  z-index: 79;
+  perspective: 1000;     
+  backface-visibility: hidden;     
+  transform-style: preserve-3d; 
+}
diff --git a/yarn.lock b/yarn.lock
@@ -5136,6 +5136,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"docusaurus-plugin-image-zoom@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "docusaurus-plugin-image-zoom@npm:1.0.1"
+  dependencies:
+    medium-zoom: "npm:^1.0.6"
+    validate-peer-dependencies: "npm:^2.2.0"
+  peerDependencies:
+    "@docusaurus/theme-classic": ">=2.2.0"
+  checksum: f95687dae6cc0bd301a6c11d7a32781dcb5cf39ff0bba133f8620a7bf77b18240cdfc6edfe2f45c219522bac908228f058aa5ecdd7c0871221cdc34743b11109
+  languageName: node
+  linkType: hard
+
 "docusaurus-plugin-sass@npm:^0.2.5":
   version: 0.2.5
   resolution: "docusaurus-plugin-sass@npm:0.2.5"
@@ -7861,7 +7873,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"medium-zoom@npm:^1.0.4":
+"medium-zoom@npm:^1.0.6":
   version: 1.1.0
   resolution: "medium-zoom@npm:1.1.0"
   checksum: 7d1f05e8eab045c33d7c04d4ee7bf04f5246cf7a720d7b5f5a51c36ab23666e363bcbb6bffae50b5948d5eb19361914cb0e26a1fce5c1fff7a266bc0217893f3
@@ -9144,6 +9156,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-root-regex@npm:^0.1.0":
+  version: 0.1.2
+  resolution: "path-root-regex@npm:0.1.2"
+  checksum: 27651a234f280c70d982dd25c35550f74a4284cde6b97237aab618cb4b5745682d18cdde1160617bb4a4b6b8aec4fbc911c4a2ad80d01fa4c7ee74dae7af2337
+  languageName: node
+  linkType: hard
+
+"path-root@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "path-root@npm:0.1.1"
+  dependencies:
+    path-root-regex: "npm:^0.1.0"
+  checksum: aed5cd290df84c46c7730f6a363e95e47a23929b51ab068a3818d69900da3e89dc154cdfd0c45c57b2e02f40c094351bc862db70c2cb00b7e6bd47039a227813
+  languageName: node
+  linkType: hard
+
 "path-scurry@npm:^1.10.1":
   version: 1.10.1
   resolution: "path-scurry@npm:1.10.1"
@@ -9227,15 +9255,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"plugin-image-zoom@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "plugin-image-zoom@npm:1.2.0"
-  dependencies:
-    medium-zoom: "npm:^1.0.4"
-  checksum: decbb9c5bd2e2eafdca6e96585afc5fad2c2cdee5bdca3b007bdfece56a07e96471225b5aa2bdc532088d3d083353a1d5871ef20adcdc8862dcace431bd42c52
-  languageName: node
-  linkType: hard
-
 "postcss-calc@npm:^8.2.3":
   version: 8.2.4
   resolution: "postcss-calc@npm:8.2.4"
@@ -10382,6 +10401,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve-package-path@npm:^4.0.3":
+  version: 4.0.3
+  resolution: "resolve-package-path@npm:4.0.3"
+  dependencies:
+    path-root: "npm:^0.1.1"
+  checksum: d2e7883a075b21fbf084f7615f9201e4d5aea6c22ba670dc66503a256c5eba5983d0822b9d51ef33303bfe9b0025916f622f6d780c42d7c020d826f8a9bc58fa
+  languageName: node
+  linkType: hard
+
 "resolve-pathname@npm:^3.0.0":
   version: 3.0.0
   resolution: "resolve-pathname@npm:3.0.0"
@@ -11733,6 +11761,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"validate-peer-dependencies@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "validate-peer-dependencies@npm:2.2.0"
+  dependencies:
+    resolve-package-path: "npm:^4.0.3"
+    semver: "npm:^7.3.8"
+  checksum: 0728592b335dbd5d1444019a4e36e34b4de3a8ade5a4970a5f87b40f881dedeff1a00eb3d79add155a4ab3b97c9990d11ed21d8a3d7dccadd129a5bdf5b02a5a
+  languageName: node
+  linkType: hard
+
 "value-equal@npm:^1.0.1":
   version: 1.0.1
   resolution: "value-equal@npm:1.0.1"
@@ -11791,10 +11829,10 @@ __metadata:
     "@mdx-js/react": "npm:^3.0.0"
     "@types/react": "npm:^18.2.45"
     clsx: "npm:^1.2.1"
+    docusaurus-plugin-image-zoom: "npm:^1.0.1"
     docusaurus-plugin-sass: "npm:^0.2.5"
     dotenv: "npm:^16.3.1"
     node-scp: "npm:^0.0.22"
-    plugin-image-zoom: "npm:^1.2.0"
     prism-react-renderer: "npm:^2.1.0"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"