feat: add image zoom to improve image viewing experience

Signed-off-by: reidliu41 <reid201711@gmail.com>

Author: reidliu41

docs/mkdocs/javascript/image_zoom.js

@@ -0,0 +1,13 @@
+/**
+ * Image Zoom
+ * --------------
+ * Enables smooth click-to-zoom for images using medium-zoom.
+ * Skips images with `.no-zoom` class.
+ */
+
+document$.subscribe(() => {
+  mediumZoom('article img:not(.no-zoom)', {
+    background: 'rgba(0, 0, 0, 0.8)',
+    margin: 24,
+  });
+});

mkdocs.yaml

@@ -128,6 +128,8 @@ extra_javascript:
   - https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML
   - mkdocs/javascript/edit_and_feedback.js
   - mkdocs/javascript/slack_and_forum.js
+  - https://cdn.jsdelivr.net/npm/medium-zoom@1.0.6/dist/medium-zoom.min.js
+  - mkdocs/javascript/image_zoom.js
 
 # Makes the url format end in .html rather than act as a dir
 # So index.md generates as index.html and is available under URL /index.html