Add zoomable images throughout the docs

Fixes: https://github.com/moderneinc/moderne-docs/issues/140

docs/administrator-documentation/moderne-platform/references/lossless-semantic-trees.md

@@ -1,6 +1,8 @@
 # Lossless semantic trees
 
-![LST comparison](./assets/LST-comparison.png)
+<figure>
+  ![](./assets/LST-comparison.png)
+</figure>
 
 A Lossless Semantic Tree (LST) is a tree representation of code. Unlike the traditional [Abstract Syntax Tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree) (AST), OpenRewrite's LST offers a unique set of characteristics that make it possible to perform accurate transformations and searches across a repository:
 

docs/user-documentation/moderne-platform/getting-started/running-your-first-recipe.md

@@ -92,7 +92,9 @@ On the results page, you will see a summary of your recipe criteria and an indic
 
 Each result shows the number of files searched and how many changes were detected.
 
-To see the proposed changes, click on either the ![](./assets/diff-button.png) button under `Actions` or the name of the repository (e.g. _openrewrite/rewrite_).
+import diff from './assets/diff-button.png';
+
+To see the proposed changes, click on either the <img src={diff} /> button under `Actions` or the name of the repository (e.g. _openrewrite/rewrite_).
 
 ## Step 7: View the results
 

package.json

@@ -23,6 +23,7 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-medium-image-zoom": "^5.2.10",
     "react-player": "^2.16.0"
   },
   "devDependencies": {

src/css/custom.css

@@ -42,3 +42,8 @@ figure figcaption {
 .reactPlayer {
   margin: auto;
 }
+
+/* Zoomed image background */
+[data-rmiz-modal-content] {
+  background-color: black;
+}

src/theme/MDXComponents/Img/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'clsx';
+import type {Props} from '@theme/MDXComponents/Img';
+import Zoom from 'react-medium-image-zoom'
+import 'react-medium-image-zoom/dist/styles.css'
+
+import styles from './styles.module.css';
+
+function transformImgClassName(className?: string): string {
+  return clsx(className, styles.img);
+}
+
+export default function ZoomableImage(props: Props) {
+  return (
+    <Zoom>
+      <img
+        decoding="async"
+        loading="lazy"
+        {...props}
+        className={transformImgClassName(props.className)}
+      />
+    </Zoom>
+  )
+} 

src/theme/MDXComponents/Img/styles.module.css

@@ -0,0 +1,3 @@
+.img {
+  height: auto;
+}

yarn.lock

@@ -7656,6 +7656,11 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@types/react" "*"
 
+react-medium-image-zoom@^5.2.10:
+  version "5.2.10"
+  resolved "https://registry.yarnpkg.com/react-medium-image-zoom/-/react-medium-image-zoom-5.2.10.tgz#5e913804bc282a165b18d46a06aa3035bcc7b946"
+  integrity sha512-JBYf4u0zsocezIDtrjwStD+8sX+c8XuLsdz+HxPbojRj0sCicua0XOQKysuPetoFyX+YgStfj+vEtZ+699O/pg==
+
 react-player@^2.16.0:
   version "2.16.0"
   resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.16.0.tgz#89070700b03f5a5ded9f0b3165d4717390796481"