feat(backstage.io): Allow to zoom images like Medium

microsite/README.md

@@ -204,3 +204,8 @@ For more information about custom pages, click [here](https://docusaurus.io/docs
 # Full Documentation
 
 Full documentation can be found on the [website](https://docusaurus.io/).
+
+## Additional notes
+
+- If you want to make images zoomable on click, add the `data-zoomable` attribute to your `img` element.
+  - In a docs or blog `.md` file, convert `![This is image](/microsite/static/img/code.png)` syntax to `<img data-zoomable src="/microsite/static/img/code.png" alt="This is image" />`

microsite/siteConfig.js

@@ -86,7 +86,11 @@ const siteConfig = {
   },
 
   // Add custom scripts here that would be placed in <script> tags.
-  scripts: ['https://buttons.github.io/buttons.js'],
+  scripts: [
+    'https://buttons.github.io/buttons.js',
+    'https://unpkg.com/medium-zoom@1.0.6/dist/medium-zoom.min.js',
+    '/js/medium-zoom.js',
+  ],
 
   // On page navigation for the current documentation page.
   onPageNav: 'separate',

microsite/static/css/custom.css

@@ -1094,3 +1094,8 @@ code {
     margin: 0 1.5em;
   }
 }
+
+/* Zoomed images using the medium-zoom library should be on top of screen. */
+.medium-zoom-image {
+  z-index: 10000;
+}

microsite/static/js/medium-zoom.js

@@ -0,0 +1,11 @@
+// Ref: https://github.com/francoischalifour/medium-zoom#options
+window.addEventListener(
+  'load',
+  () => {
+    mediumZoom('[data-zoomable]', {
+      margin: 20,
+      background: '#000',
+    });
+  },
+  false,
+);