Test

package.json

@@ -22,6 +22,7 @@
     "@mdx-js/react": "^3.0.1",
     "clsx": "^2.1.1",
     "docusaurus-lunr-search": "^3.3.2",
+    "medium-zoom": "^1.1.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",

src/theme/Root.js

@@ -1,10 +1,34 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import mediumZoom from 'medium-zoom';
+import { useLocation } from '@docusaurus/router';
 import { VoucherProvider } from '../utilities/contexts/VoucherContext';
 
-export default function Root({children}) {
-    return (
-        <VoucherProvider>
-            { children }
-        </VoucherProvider>
-    );
-}
+export default function Root({ children }) {
+  const location = useLocation();
+
+  useEffect(() => {
+    const applyMediumZoom = () => {
+      mediumZoom('img');
+    };
+
+    const intervalId = setInterval(() => {
+      if (document.readyState === 'complete') {
+        applyMediumZoom();
+        clearInterval(intervalId);
+      }
+    }, 100); 
+
+    window.addEventListener('docusaurus.onRouteDidUpdate', applyMediumZoom);
+
+    return () => {
+      clearInterval(intervalId);
+      window.removeEventListener('docusaurus.onRouteDidUpdate', applyMediumZoom);
+    };
+  }, [location.pathname]);
+
+  return (
+    <VoucherProvider>
+      {children}
+    </VoucherProvider>
+  );
+}