feature: image zoom (#599)

* image zoom

* update config

Author: Benbentwo

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)'
+          }
+        }
+      }
     }),
 };
 

package-lock.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",