Fix image zoom darkens documentation page (#957)

docusaurus.config.js

@@ -27,6 +27,17 @@ module.exports = {
       theme: prismThemes.dracula,
       darkTheme: prismThemes.dracula,
     },
+    imageZoom: {
+      // CSS selector to apply the plugin to, defaults to '.markdown img'
+      selector: '.markdown img',
+      // Optional medium-zoom options
+      // see: https://www.npmjs.com/package/medium-zoom#options
+      options: {
+        margin: 24,
+        background: "transparent"
+      },
+    },
+
     //algolia algolia: {
       //algolia appId: 'ALGOLIA_APP_ID', // The application ID provided by Algolia
       //algolia apiKey: 'ALGOLIA_APP_KEY',  // Public API key
@@ -265,6 +276,6 @@ module.exports = {
         id: 'none', // GTM Container ID
       }
     ],
-    path.resolve(__dirname, 'src/zoom-plugin')
+    require.resolve('plugin-image-zoom'),
   ],
 };

package-lock.json

@@ -19,6 +19,7 @@
         "clsx": "^1.1.1",
         "joi": "^17.4.0",
         "medium-zoom": "^1.0.6",
+        "plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
         "prism-react-renderer": "^2.1.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
@@ -13707,6 +13708,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/plugin-image-zoom": {
+      "version": "1.1.0",
+      "resolved": "git+ssh://git@github.com/flexanalytics/plugin-image-zoom.git#8e1b866c79ed6d42cefc4c52f851f1dfd1d0c7de",
+      "license": "MIT",
+      "dependencies": {
+        "medium-zoom": "^1.0.8"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.47",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",

package.json

@@ -26,6 +26,7 @@
     "@mdx-js/react": "^3.0.0",
     "clsx": "^1.1.1",
     "medium-zoom": "^1.0.6",
+    "plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

src/css/custom.css

@@ -556,10 +556,7 @@ html[data-theme="dark"] .footer__link-item:hover {
 
 
 /* ===MARKDOWN=== */
-.markdown img.medium-zoom-image[src*="png"],
+
-.markdown img.medium-zoom-image[src*="gif"]  {
-  border:1px solid #2c3246;
-}
 .getting-started-buttons > .col {
   margin-top: 1rem;
 }
@@ -573,11 +570,26 @@ html[data-theme="dark"] .footer__link-item:hover {
   white-space: normal;
 }
 
+/* IMAGE ZOOM */
 /* disable medium-zoom-image on svg icons */
 .markdown img.medium-zoom-image[src*="svg"] {
   pointer-events: none;
 }
 
+.markdown img.medium-zoom-image[src*="png"],
+.markdown img.medium-zoom-image[src*="gif"]  {
+  border:1px solid #2c3246;
+}
+
+html[data-theme=light] .medium-zoom--opened .medium-zoom-overlay {background: white !important; opacity: 0.4}
+html[data-theme=dark] .medium-zoom--opened .medium-zoom-overlay {background: black !important; opacity: 0.6}
+
+html[data-theme=light] .medium-zoom-image.medium-zoom-image--opened {border-radius: 6px; border: 1px solid #666;}
+html[data-theme=dark] .medium-zoom-image.medium-zoom-image--opened {border-radius: 6px; border: 1px solid #333;}
+
+.medium-zoom--opened .medium-zoom-overlay {z-index: 1000;}
+.medium-zoom-image.medium-zoom-image--opened {z-index: 1001;}
+
 /* table */
 .markdown table {
   border-spacing: 0;

src/zoom-plugin/index.js

@@ -1,18 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const path = require('path');
-
-module.exports = function(context, options) {
-  return {
-    name: 'docusaurus-plugin-image-zoom',
-
-    getClientModules(options) {
-      return [path.resolve(__dirname, './zoom')];
-    },
-  };
-};

src/zoom-plugin/zoom.js

@@ -1,46 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import siteConfig from '@generated/docusaurus.config';
-import mediumZoom from 'medium-zoom'
-
-const {themeConfig} = siteConfig;
-
-export default (function () {
-
-    if (typeof window === 'undefined') {
-        return null;
-    }
-
-    const selector = (themeConfig && themeConfig.zoomSelector) || '.markdown img';
-
-    setTimeout(() => {
-        mediumZoom(selector, {
-                margin: 48,
-                background: '#00000090',
-            }
-        );
-    }, 1000);
-
-
-    return {
-        onRouteUpdate({location}) {
-
-            if (location && location.hash && location.hash.length) {
-                return;
-            }
-
-            setTimeout(() => {
-                mediumZoom(selector, {
-                    margin: 48,
-                    background: '#00000090',
-                });
-            }, 1000);
-
-        },
-    };
-})();