feature: image zoom (#599)

* image zoom * update config
cloudposse · Dec 1, 2023 · ca64ddb · ca64ddb
1 parent 1429cc4
commit ca64ddb
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 4 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -104,6 +104,9 @@ const config = {
         containerId: process.env.GOOGLE_TAG_MANAGER || 'GTM-ABCD123'
       },
     ],
+    [
+      'docusaurus-plugin-image-zoom', {},
+    ],
   ],
   organizationName: 'cloudposse',
   projectName: 'docs',
@@ -316,6 +319,16 @@ const config = {
         darkTheme: darkCodeTheme,
         additionalLanguages: ['hcl', 'bash', 'rego'],
       },
+      zoom: {
+        selector: '.markdown :not(em) > img',
+        config: {
+          // options you can specify via https://github.com/francoischalifour/medium-zoom#usage
+          background: {
+            light: 'rgb(255, 255, 255)',
+            dark: 'rgb(50, 50, 50)'
+          }
+        }
+      }
     }),
 };
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "@mdx-js/react": "^1.6.22",
     "asciinema-player": "^3.0.1",
     "clsx": "^1.2.1",
+    "docusaurus-plugin-image-zoom": "^1.0.1",
     "docusaurus-plugin-sass": "^0.2.3",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",