From c8892b54a623c4d65bd67b97b399772a7c0c0038 Mon Sep 17 00:00:00 2001 From: pollfly <75068813+pollfly@users.noreply.github.com> Date: Tue, 5 Nov 2024 12:28:45 +0200 Subject: [PATCH] Fix image zoom darkens documentation page (#957) --- docusaurus.config.js | 13 +++++++++++- package-lock.json | 9 ++++++++ package.json | 1 + src/css/custom.css | 20 +++++++++++++---- src/zoom-plugin/index.js | 18 ---------------- src/zoom-plugin/zoom.js | 46 ---------------------------------------- 6 files changed, 38 insertions(+), 69 deletions(-) delete mode 100644 src/zoom-plugin/index.js delete mode 100644 src/zoom-plugin/zoom.js diff --git a/docusaurus.config.js b/docusaurus.config.js index 0987d0ae..75e8f8de 100644 --- a/docusaurus.config.js +++ b/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'), ], }; diff --git a/package-lock.json b/package-lock.json index 1c28e1bc..ea0d8174 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 8c94c390..c3b20a07 100644 --- a/package.json +++ b/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", diff --git a/src/css/custom.css b/src/css/custom.css index affe22f8..cdf1e404 100644 --- a/src/css/custom.css +++ b/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; diff --git a/src/zoom-plugin/index.js b/src/zoom-plugin/index.js deleted file mode 100644 index a3173907..00000000 --- a/src/zoom-plugin/index.js +++ /dev/null @@ -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')]; - }, - }; -}; diff --git a/src/zoom-plugin/zoom.js b/src/zoom-plugin/zoom.js deleted file mode 100644 index 5e97a9bd..00000000 --- a/src/zoom-plugin/zoom.js +++ /dev/null @@ -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); - - }, - }; -})();