plugins: make images zoom when clicked

Use docusaurus-plugin-image-zoom plugin to make images zoomable when clicked. Signed-off-by: Mike Szczys <[email protected]>
golioth · Jun 6, 2024 · 485e5d2 · 485e5d2
1 parent 4eca1b4
commit 485e5d2
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 1 deletion.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -35,7 +35,7 @@ const config = {
     ],
   ],
 
-  plugins: [ ],
+  plugins: [ 'docusaurus-plugin-image-zoom' ],
 
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
@@ -150,6 +150,16 @@ const config = {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
       },
+      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/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -18,6 +18,7 @@
     "@docusaurus/preset-classic": "^3.1.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^1.1.1",
+    "docusaurus-plugin-image-zoom": "^2.0.0",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"