Add am image zoom plugin for Docusaurus (#666)

docs/docusaurus.config.js

@@ -28,6 +28,10 @@ const config = {
   },
   staticDirectories: ['static', 'public'],
 
+  plugins: [
+    require.resolve('docusaurus-plugin-image-zoom')
+  ],
+
   presets: [
     [
       'classic',
@@ -114,6 +118,21 @@ const config = {
         disableSwitch: true,
         respectPrefersColorScheme: true,
       },
+
+      zoom: {
+        selector: '.markdown img',
+        background: {
+          light: 'rgb(255, 255, 255)',
+          dark: 'rgb(50, 50, 50)'
+        },
+        // options you can specify via https://github.com/francoischalifour/medium-zoom#usage
+        config: {
+          margin: 24,
+          background: '#242526',
+          scrollOffset: 0,
+        },
+      },
+
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,

docs/package-lock.json

@@ -12,6 +12,7 @@
         "@docusaurus/preset-classic": "2.0.1",
         "@mdx-js/react": "^1.6.22",
         "clsx": "^1.1.1",
+        "docusaurus-plugin-image-zoom": "^0.1.1",
         "mdx-mermaid": "^1.2.2",
         "mermaid": "^8.11.5",
         "prism-react-renderer": "^1.3.1",
@@ -7034,6 +7035,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/docusaurus-plugin-image-zoom": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/docusaurus-plugin-image-zoom/-/docusaurus-plugin-image-zoom-0.1.1.tgz",
+      "integrity": "sha512-cJXo5TKh9OR1gE4B5iS5ovLWYYDFwatqRm00iXFPOaShZG99l5tgkDKgbQPAwSL9wg4I+wz3aMwkOtDhMIpKDQ==",
+      "dependencies": {
+        "medium-zoom": "^1.0.6"
+      }
+    },
     "node_modules/dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -10295,6 +10304,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/medium-zoom": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/medium-zoom/-/medium-zoom-1.0.6.tgz",
+      "integrity": "sha512-UdiUWfvz9fZMg1pzf4dcuqA0W079o0mpqbTnOz5ip4VGYX96QjmbM+OgOU/0uOzAytxC0Ny4z+VcYQnhdifimg=="
+    },
     "node_modules/memfs": {
       "version": "3.4.7",
       "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.7.tgz",
@@ -21255,6 +21269,14 @@
         "@leichtgewicht/ip-codec": "^2.0.1"
       }
     },
+    "docusaurus-plugin-image-zoom": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/docusaurus-plugin-image-zoom/-/docusaurus-plugin-image-zoom-0.1.1.tgz",
+      "integrity": "sha512-cJXo5TKh9OR1gE4B5iS5ovLWYYDFwatqRm00iXFPOaShZG99l5tgkDKgbQPAwSL9wg4I+wz3aMwkOtDhMIpKDQ==",
+      "requires": {
+        "medium-zoom": "^1.0.6"
+      }
+    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -23651,6 +23673,11 @@
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
     },
+    "medium-zoom": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/medium-zoom/-/medium-zoom-1.0.6.tgz",
+      "integrity": "sha512-UdiUWfvz9fZMg1pzf4dcuqA0W079o0mpqbTnOz5ip4VGYX96QjmbM+OgOU/0uOzAytxC0Ny4z+VcYQnhdifimg=="
+    },
     "memfs": {
       "version": "3.4.7",
       "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.7.tgz",

docs/package.json

@@ -18,6 +18,7 @@
     "@docusaurus/preset-classic": "2.0.1",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
+    "docusaurus-plugin-image-zoom": "^0.1.1",
     "mdx-mermaid": "^1.2.2",
     "mermaid": "^8.11.5",
     "prism-react-renderer": "^1.3.1",