Add mkdocs-glightbox for clicking on screenshots to enlarge them

docs/css/style.css

@@ -30,6 +30,48 @@ img[alt='pypi-downloads'], img[alt='npm-downloads'] {
     filter: drop-shadow(1px 1px 5px white);
 }
 
+/*
+ * Make it discoverable that images open in a lightbox (mkdocs-glightbox): hovering one shows a
+ * zoom-in cursor and a magnifier badge in its top right corner. The badge is drawn on the link
+ * glightbox wraps around the image, so it disappears together with the plugin if it is ever
+ * removed, and never covers an image that is not clickable.
+ */
+:root {
+    --wfo-magnify-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5m-.5 2h1v2h2v1h-2v2H9v-2H7V9h2z"/></svg>');
+}
+
+.md-typeset a.glightbox {
+    cursor: zoom-in;
+    display: inline-block;
+    line-height: 0;
+    position: relative;
+}
+
+.md-typeset a.glightbox::after {
+    background: rgba(0, 0, 0, .55) var(--wfo-magnify-icon) center / 1.1rem no-repeat;
+    border-radius: .2rem;
+    content: "";
+    height: 1.7rem;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    right: .5rem;
+    top: .5rem;
+    transition: opacity 125ms;
+    width: 1.7rem;
+}
+
+.md-typeset a.glightbox:hover::after,
+.md-typeset a.glightbox:focus-visible::after {
+    opacity: 1;
+}
+
+/* Dim the page behind the lightbox rather than blacking it out (glightbox defaults to .92 alpha). */
+.goverlay {
+    background: rgba(0, 0, 0, .6);
+    backdrop-filter: blur(2px);
+}
+
 /*
  * Label search results with the project they belong to.
  *

mkdocs.yml

@@ -153,5 +153,14 @@ plugins:
   # orchestrator-ui-library plugins
   - termynal
   - awesome-pages
+  # Click a screenshot to open it full size in a lightbox. Listed last so it runs after the plugins
+  # that inject HTML, and thus also covers images pulled in from the sub-projects. Images already
+  # wrapped in a link (badges, for instance) are left alone; add the "off-glb" class to opt an
+  # individual image out.
+  - glightbox:
+      draggable: false
+      zoomable: true
+      skip_classes:
+        - off-glb
   # workfloworchestrator.org general plugin that has to be loaded after awesome-pages
   - macros

pyproject.toml

@@ -5,6 +5,7 @@ requires-python = ">=3.13,<3.15"
 dependencies = [
     "mkdocs>=1.6.1",
     "mkdocs-drawio>=1.12.0",
+    "mkdocs-glightbox>=0.5.2",
     "mkdocs-material[imaging]>=9.7.0",
     "mkdocs-monorepo-plugin",
     # orchestrator-core docs plugins