docs: add zoom functionality on images (#2403)

* Add zoom functionality on images

* Fixes in zooming images

* yarn.lock issue fix

www/docs/docusaurus.config.js

@@ -32,7 +32,8 @@ const config = {
       {
         apiKey: process.env.SEGMENT_API_KEY || "temp"
       }
-    ]
+    ],
+    require.resolve("docusaurus-plugin-image-zoom")
   ],
   themeConfig: {
     colorMode: {
@@ -54,6 +55,13 @@ const config = {
       theme: require("prism-react-renderer/themes/vsDark"),
       darkTheme: require("prism-react-renderer/themes/vsDark"),
     },
+    zoom: {
+      selector: '.markdown img',
+      background: {
+        light: 'rgb(255, 255, 255)',
+        dark: 'rgb(50, 50, 50)'
+      }
+    },
     navbar: {
       hideOnScroll: true,
       logo: {

www/docs/package.json

@@ -23,6 +23,7 @@
     "@svgr/webpack": "6.2.1",
     "algoliasearch-helper": "^3.8.2",
     "clsx": "^1.1.1",
+    "docusaurus-plugin-image-zoom": "^0.1.1",
     "docusaurus-plugin-segment": "^1.0.3",
     "docusaurus2-dotenv": "^1.4.0",
     "file-loader": "^6.2.0",

www/docs/src/css/custom.css

@@ -196,6 +196,14 @@ article {
   font-weight: 400;
 }
 
+.medium-zoom-overlay {
+  z-index: var(--ifm-z-index-overlay);
+}
+
+.medium-zoom-image--opened {
+  z-index: var(--ifm-z-index-overlay);
+}
+
 /* Medusa logo */
 .sidebar-bg img {
  width: 100px;