Add CSS improvements to Mermaid diagrams

Author: hg1g

docs/mkdocs.yml

@@ -42,6 +42,12 @@ theme:
   icon:
     repo: fontawesome/brands/github
 
+extra_css:
+  - stylesheets/extra.css
+
+extra_javascript:
+  - javascripts/mermaid-zoom.js
+
 plugins:
   - search
   - offline

docs/src/index.md

@@ -74,21 +74,6 @@ async def me(user: CurrentUser):
     return {"id": user.id, "email": user.email}
 ```
 
-### Litestar
-
-```python
-from litestar import Litestar, get
-from hotosm_auth_litestar import setup_auth, AuthContext
-
-deps, route_handlers = setup_auth()
-
-@get("/me")
-async def me(auth: AuthContext) -> dict:
-    return {"id": auth.user.id, "email": auth.user.email}
-
-app = Litestar(route_handlers=[*route_handlers, me], dependencies=deps)
-```
-
 ### Django
 
 ```python
@@ -105,6 +90,21 @@ def my_view(request):
     return JsonResponse({"email": user.email})
 ```
 
+### Litestar
+
+```python
+from litestar import Litestar, get
+from hotosm_auth_litestar import setup_auth, AuthContext
+
+deps, route_handlers = setup_auth()
+
+@get("/me")
+async def me(auth: AuthContext) -> dict:
+    return {"id": auth.user.id, "email": auth.user.email}
+
+app = Litestar(route_handlers=[*route_handlers, me], dependencies=deps)
+```
+
 ### Frontend
 
 ```html

docs/src/javascripts/mermaid-zoom.js

@@ -0,0 +1,95 @@
+/**
+ * Zoom + pan for Mermaid diagrams.
+ * - Scroll wheel: zoom toward cursor
+ * - Drag: pan
+ * - Double-click: reset
+ */
+(function () {
+  'use strict';
+
+  function initZoom(container) {
+    const svg = container.querySelector('svg');
+    if (!svg || container.dataset.zoomReady) return;
+    container.dataset.zoomReady = '1';
+
+    // Mermaid wraps everything in a root <g>
+    const rootG = svg.querySelector(':scope > g');
+    if (!rootG) return;
+
+    let scale = 1;
+    let tx = 0;
+    let ty = 0;
+    let dragging = false;
+    let startX = 0;
+    let startY = 0;
+
+    function applyTransform() {
+      rootG.style.transformOrigin = '0 0';
+      rootG.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
+    }
+
+    // Scroll to zoom toward cursor position
+    container.addEventListener('wheel', function (e) {
+      e.preventDefault();
+      const rect = container.getBoundingClientRect();
+      const mx = e.clientX - rect.left;
+      const my = e.clientY - rect.top;
+
+      const factor = e.deltaY < 0 ? 1.1 : 0.9;
+      const newScale = Math.min(Math.max(scale * factor, 0.2), 6);
+
+      // Shift translate so zoom centers on cursor
+      tx = mx - (mx - tx) * (newScale / scale);
+      ty = my - (my - ty) * (newScale / scale);
+      scale = newScale;
+
+      applyTransform();
+    }, { passive: false });
+
+    // Drag to pan
+    container.addEventListener('mousedown', function (e) {
+      // Ignore right-click
+      if (e.button !== 0) return;
+      dragging = true;
+      startX = e.clientX - tx;
+      startY = e.clientY - ty;
+    });
+
+    window.addEventListener('mousemove', function (e) {
+      if (!dragging) return;
+      tx = e.clientX - startX;
+      ty = e.clientY - startY;
+      applyTransform();
+    });
+
+    window.addEventListener('mouseup', function () {
+      dragging = false;
+    });
+
+    // Double-click: reset to original position
+    container.addEventListener('dblclick', function () {
+      scale = 1;
+      tx = 0;
+      ty = 0;
+      rootG.style.transition = 'transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1)';
+      applyTransform();
+      setTimeout(function () {
+        rootG.style.transition = '';
+      }, 400);
+    });
+  }
+
+  function scanAll() {
+    document.querySelectorAll('.mermaid').forEach(initZoom);
+  }
+
+  // MkDocs Material renders Mermaid asynchronously — watch for SVG insertion
+  const observer = new MutationObserver(scanAll);
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', scanAll);
+  } else {
+    scanAll();
+  }
+})();

docs/src/stylesheets/extra.css

@@ -0,0 +1,105 @@
+/* =============================================
+   Mermaid diagrams — futuristic interactivity
+   ============================================= */
+
+/* Container */
+.mermaid {
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+  cursor: grab;
+  user-select: none;
+  border: 1px solid rgba(100, 180, 255, 0.12);
+  background: rgba(0, 10, 30, 0.03);
+  transition: border-color 0.3s ease;
+}
+
+[data-md-color-scheme="slate"] .mermaid {
+  background: rgba(0, 10, 30, 0.25);
+  border-color: rgba(100, 180, 255, 0.15);
+}
+
+.mermaid:hover {
+  border-color: rgba(100, 180, 255, 0.3);
+}
+
+.mermaid:active {
+  cursor: grabbing;
+}
+
+/* Zoom hint */
+.mermaid::after {
+  content: 'scroll · drag · dbl-click to reset';
+  position: absolute;
+  bottom: 8px;
+  right: 12px;
+  font-size: 10px;
+  font-family: var(--md-code-font-family);
+  color: rgba(100, 180, 255, 0.4);
+  pointer-events: none;
+  letter-spacing: 0.05em;
+}
+
+/* SVG root smooth transform */
+.mermaid svg {
+  display: block;
+}
+
+.mermaid svg > g {
+  transition: transform 0.05s linear;
+}
+
+/* ---- Node shapes ---- */
+.mermaid svg .node rect,
+.mermaid svg .node circle,
+.mermaid svg .node ellipse,
+.mermaid svg .node polygon,
+.mermaid svg .node path {
+  transition: filter 0.25s ease;
+}
+
+.mermaid svg .node:hover rect,
+.mermaid svg .node:hover circle,
+.mermaid svg .node:hover ellipse,
+.mermaid svg .node:hover polygon {
+  filter:
+    drop-shadow(0 0 5px rgba(64, 160, 255, 0.95))
+    drop-shadow(0 0 18px rgba(64, 160, 255, 0.55))
+    drop-shadow(0 0 40px rgba(64, 160, 255, 0.25));
+}
+
+/* ---- Cluster / subgraph ---- */
+.mermaid svg .cluster rect {
+  transition: filter 0.3s ease;
+}
+
+.mermaid svg .cluster:hover rect {
+  filter:
+    drop-shadow(0 0 6px rgba(80, 200, 255, 0.45))
+    drop-shadow(0 0 20px rgba(80, 200, 255, 0.2));
+}
+
+/* ---- Edges ---- */
+.mermaid svg .edgePath path {
+  transition: filter 0.2s ease, stroke-width 0.2s ease;
+}
+
+.mermaid svg .edgePath:hover path {
+  filter: drop-shadow(0 0 4px rgba(64, 160, 255, 0.7));
+  stroke-width: 2px;
+}
+
+/* ---- Labels ---- */
+.mermaid svg .node .label {
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+
+/* Dim non-hovered nodes slightly when any node is focused */
+.mermaid svg:has(.node:hover) .node:not(:hover) rect,
+.mermaid svg:has(.node:hover) .node:not(:hover) circle,
+.mermaid svg:has(.node:hover) .node:not(:hover) ellipse,
+.mermaid svg:has(.node:hover) .node:not(:hover) polygon {
+  opacity: 0.55;
+  transition: opacity 0.25s ease;
+}

frontend/public/docs/404.html

@@ -49,6 +49,8 @@
 
 
 
+      <link rel="stylesheet" href="/app/docs/stylesheets/extra.css">
+    
     <script>__md_scope=new URL("/app/docs/",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
 
 
@@ -909,6 +911,8 @@ <h1>404 - Not found</h1>
 
       <script src="/app/docs/assets/javascripts/bundle.79ae519e.min.js"></script>
 
+        <script src="/app/docs/javascripts/mermaid-zoom.js"></script>
+      
 
   </body>
 </html>

frontend/public/docs/admin.html

@@ -55,6 +55,8 @@
 
 
 
+      <link rel="stylesheet" href="stylesheets/extra.css">
+    
     <script>__md_scope=new URL(".",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
 
 
@@ -1316,6 +1318,8 @@ <h2 id="proxy-endpoints-login-backend">Proxy Endpoints (Login Backend)<a class="
 
       <script src="assets/javascripts/bundle.79ae519e.min.js"></script>
 
+        <script src="javascripts/mermaid-zoom.js"></script>
+      
 
   </body>
 </html>