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

.github/styles/vocab.txt

@@ -230,3 +230,4 @@ yaml
 Zalando
 Zhou
 Zolotusky
+zoomable

docs/features/techdocs/architecture.md

@@ -9,7 +9,7 @@ description: Documentation on TechDocs Architecture
 When you deploy Backstage (with TechDocs enabled by default), you get a basic
 out-of-the box experience.
 
-![TechDocs Architecture diagram](../../assets/techdocs/architecture-basic.drawio.svg)
+<img data-zoomable src="../../assets/techdocs/architecture-basic.drawio.svg" alt="TechDocs Architecture diagram" />
 
 > Note: See below for our recommended deployment architecture which takes care
 > of stability, scalability and speed.
@@ -43,7 +43,7 @@ channel to talk about it.
 
 This is how we recommend deploying TechDocs in production environment.
 
-![TechDocs Architecture diagram](../../assets/techdocs/architecture-recommended.drawio.svg)
+<img data-zoomable src="../../assets/techdocs/architecture-recommended.drawio.svg" alt="TechDocs Architecture diagram" />
 
 The key difference in the recommended deployment approach is where the docs are
 built.

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/[email protected]/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,
+);