Switch image zoom solution

Scofield-Idehen · Mar 5, 2022 · 0c320f3 · 0c320f3
1 parent fd9d02a
commit 0c320f3
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 189 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -44,6 +44,14 @@ module.exports = {
     hotjar: {
       applicationId: '2809821',
     },
+    imageZoom: {
+      selector: '.markdown :not(a) > img',
+      // Optional medium-zoom options
+      // see: https://www.npmjs.com/package/medium-zoom#options
+      options: {
+        background: 'rgba(0, 0, 0, 0.6)',
+      },
+    },
     imageSlider: {
       videoPlaceholder: '/img/infographics/video-placeholder.png',
     },
@@ -440,6 +448,7 @@ module.exports = {
     ],
   ],
   plugins: [
+    'plugin-image-zoom',
     [
       '@jlvandenhout/docusaurus-plugin-docs-editor',
       {

diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "docusaurus-plugin-matomo": "^0.0.3",
     "file-loader": "^6.2.0",
     "hast-util-is-element": "1.1.0",
+    "plugin-image-zoom": "flexanalytics/plugin-image-zoom",
     "raw-loader": "^4.0.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

diff --git a/src/components/FullscreenImage/index.tsx b/src/components/FullscreenImage/index.tsx
diff --git a/src/components/FullscreenImage/styles.css b/src/components/FullscreenImage/styles.css
diff --git a/src/theme/MDXComponents/index.tsx b/src/theme/MDXComponents/index.tsx
diff --git a/src/theme/MDXComponents/styles.css b/src/theme/MDXComponents/styles.css
diff --git a/src/theme/Root/index.tsx b/src/theme/Root/index.tsx
diff --git a/yarn.lock b/yarn.lock
@@ -8952,6 +8952,7 @@ __metadata:
     hast-util-is-element: 1.1.0
     husky: ">=6"
     lint-staged: ">=10"
+    plugin-image-zoom: flexanalytics/plugin-image-zoom
     prettier: ^2.4.1
     raw-loader: ^4.0.2
     react: ^17.0.1
@@ -10403,6 +10404,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"medium-zoom@npm:^1.0.4":
+  version: 1.0.6
+  resolution: "medium-zoom@npm:1.0.6"
+  checksum: 728b9f661262fd084da26f401ffe9bf98afc6d14ad93d4bfb08b95d32f9c4494a97dc8cb3a62353e8d350dc09c84a3f6f686a0fec321bfb609e5ba5e24bdb9d2
+  languageName: node
+  linkType: hard
+
 "memfs@npm:^3.1.2, memfs@npm:^3.2.2":
   version: 3.4.1
   resolution: "memfs@npm:3.4.1"
@@ -11658,6 +11666,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+plugin-image-zoom@flexanalytics/plugin-image-zoom:
+  version: 0.0.0
+  resolution: "plugin-image-zoom@https://github.com/flexanalytics/plugin-image-zoom.git#commit=86f6f0b4f927ded94dcfdc18c0a9ee702ffd8d06"
+  dependencies:
+    medium-zoom: ^1.0.4
+  checksum: ff6997b073451775c82b83de175605cea958cae425792e2aec50bfe905170e9f798a5af53f674a032c2cc22d3efb6545dd80cb793e172927adb5716e0de09e90
+  languageName: node
+  linkType: hard
+
 "portfinder@npm:^1.0.28":
   version: 1.0.28
   resolution: "portfinder@npm:1.0.28"