@nu-appdev/northwestern-starlight-theme 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -7,18 +7,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.1] - 2026-03-25
+
+### Fixed
+
+- Scrollbar gutter reserved space on splash pages, leaving a gap next to the topbar. Now only applied on pages with a scrollbar.
+- Mermaid toolbar buttons use Northwestern purple focus rings instead of the browser default.
+- Mermaid fullscreen close button dropped the red danger style and matches the other overlay buttons.
+
+### Changed
+
+- Mermaid overlay buttons sized and styled to match the header theme toggle.
+
+### Added
+
+- Fullscreen mermaid viewer supports touch: one-finger pan, pinch-to-zoom, two-finger pan.
+- Mermaid toolbar stays visible on touch devices (`hover: none`) since hover is unavailable.
+- SVG downloads use descriptive filenames derived from the site title, page slug, and diagram type (e.g., `northwestern-starlight-theme_examples-mermaid-flowchart.svg`).
+
 ## [1.1.0] - 2026-03-25
 
 ### Added
 
-- Automatic favicon — the theme ships Northwestern's official favicon and applies it without touching `public/`. Consumers can still override it with their own `favicon` in Starlight config.
-- `homepage.imageWidth` option to control hero image size. Defaults to `500px`, useful for wide lockup images that need more space.
+- Automatic favicon shipped with the theme, applied without touching `public/`. Override with `favicon` in Starlight config.
+- `homepage.imageWidth` option for hero image size. Defaults to `500px`; set higher for wide lockup images.
 
 ### Fixed
 
 - `showTitle: false` now works in the centered hero layout (previously only worked in split layout).
 - Search result titles and headings no longer appear white-on-white in light mode. The `.header a` selector was too broad and bled into Pagefind's search modal.
-- Search input focus ring now uses the Northwestern purple treatment instead of the browser's default blue outline.
+- Search input focus ring uses Northwestern purple instead of the browser default.
 
 ### Changed
 
@@ -34,6 +52,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - OpenAPI plugin compatibility with method badge preservation
 - Reduced motion support for transitions
 
-[Unreleased]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.1.0...HEAD
+[Unreleased]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.1.1...HEAD
+[1.1.1]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.1.0...v1.1.1
 [1.1.0]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/releases/tag/v1.0.0

package/README.md

@@ -5,7 +5,7 @@
 
 <p align="center">
     <a href="https://nodejs.org"><img src="https://img.shields.io/badge/Node-22+-339933?style=flat&logo=node.js&logoColor=white" alt="Node Version"></a>
-    <a href="https://astro.build"><img src="https://img.shields.io/badge/Astro-5.x+-BC52EE?style=flat&logo=astro&logoColor=white" alt="Astro Version"></a>
+    <a href="https://astro.build"><img src="https://img.shields.io/badge/Astro-5.x%20%7C%206.x-BC52EE?style=flat&logo=astro&logoColor=white" alt="Astro Version"></a>
     <a href="https://starlight.astro.build"><img src="https://img.shields.io/badge/Starlight-0.32+-FF5D01?style=flat&logo=astro&logoColor=white" alt="Starlight Version"></a>
 </p>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nu-appdev/northwestern-starlight-theme",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A Northwestern-branded theme for Astro Starlight",
   "license": "MIT",
   "author": "Danny Foster <danny@northwestern.edu>",

package/src/scripts/mermaid-toolbar.ts

@@ -3,7 +3,7 @@
  *
  * Features:
  *   - Hover toolbar: fullscreen, download SVG, copy mermaid source
- *   - Fullscreen overlay: pan/zoom, download, copy, zoom indicator, diagram title
+ *   - Fullscreen overlay: pan/zoom, download, copy
  *   - Keyboard: +/- zoom, 0 reset, arrows pan, Escape close
  *   - Double-click to zoom in
  *   - Smooth open/close animation
@@ -22,7 +22,6 @@ declare global {
     }
 }
 
-// ---- Icon paths ----
 const ICONS = {
     fullscreen: ["M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"],
     download: ["M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4", "M7 10l5 5 5-5", "M12 15V3"],
@@ -97,7 +96,6 @@ function createZoomButton(
 
 type MermaidThemeMode = "light" | "dark";
 
-// ---- Store original mermaid source before rendering ----
 const mermaidSources = new Map<Element, string>();
 const renderedThemes = new WeakMap<HTMLElement, MermaidThemeMode>();
 let mermaidRuntimePromise: Promise<typeof import("mermaid")["default"]> | undefined;
@@ -176,7 +174,6 @@ async function renderMermaidDiagrams(force = false) {
     }
 }
 
-// ---- Success feedback (green check) ----
 function showSuccess(btn: HTMLButtonElement, label = "Copied!") {
     const originalTitle = btn.title;
     const originalIcon = btn.querySelector("svg");
@@ -197,7 +194,6 @@ function showSuccess(btn: HTMLButtonElement, label = "Copied!") {
     }, 1500);
 }
 
-// ---- Clipboard helper ----
 async function copyToClipboard(text: string, btn: HTMLButtonElement) {
     try {
         await navigator.clipboard.writeText(text);
@@ -207,7 +203,6 @@ async function copyToClipboard(text: string, btn: HTMLButtonElement) {
     }
 }
 
-// ---- Inline toolbar injection ----
 function initMermaidToolbar(): number {
     const diagrams = document.querySelectorAll<HTMLElement>(".mermaid");
     if (!diagrams.length) return 0;
@@ -244,7 +239,7 @@ function initMermaidToolbar(): number {
             const action = btn.dataset.action;
             if (action === "fullscreen") openFullscreen(svg, container, index);
             else if (action === "download-svg") {
-                downloadSvg(svg, index);
+                downloadSvg(svg, container, index);
                 showSuccess(btn, "Downloaded!");
             } else if (action === "copy-source" && source) copyToClipboard(source, btn);
         });
@@ -252,7 +247,6 @@ function initMermaidToolbar(): number {
     return injected;
 }
 
-// ---- Fullscreen overlay ----
 function openFullscreen(svg: SVGElement, container: HTMLElement, index: number) {
     const overlay = document.createElement("div");
     overlay.className = "nu-mermaid-overlay";
@@ -287,7 +281,6 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
 
     overlay.appendChild(controls);
 
-    // Viewport
     const viewport = document.createElement("div");
     viewport.className = "nu-mermaid-viewport";
 
@@ -297,7 +290,6 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
     const cloned = svg.cloneNode(true) as SVGElement;
     cloned.removeAttribute("style");
 
-    // Calculate initial fit
     const viewBox = svg.getAttribute("viewBox");
     let vbWidth = 800;
     let vbHeight = 600;
@@ -309,7 +301,7 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
 
     function calcFitScale(mode: "both" | "width" | "height" = "both"): number {
         const maxW = window.innerWidth * 0.92;
-        const maxH = (window.innerHeight - 120) * 0.92; // account for title + controls
+        const maxH = (window.innerHeight - 120) * 0.92; // account for controls bar
         if (mode === "width") return maxW / vbWidth;
         if (mode === "height") return maxH / vbHeight;
         return Math.min(maxW / vbWidth, maxH / vbHeight);
@@ -323,7 +315,6 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
     viewport.appendChild(wrapper);
     overlay.appendChild(viewport);
 
-    // Add to DOM with animation
     overlay.style.opacity = "0";
     document.body.appendChild(overlay);
     document.body.style.overflow = "hidden";
@@ -356,7 +347,6 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
         updateTransform();
     }
 
-    // Mouse wheel zoom
     viewport.addEventListener(
         "wheel",
         (e) => {
@@ -367,7 +357,6 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
         { passive: false },
     );
 
-    // Pan with mouse drag
     viewport.addEventListener("mousedown", (e) => {
         isPanning = true;
         startX = e.clientX - panX;
@@ -391,13 +380,75 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
     window.addEventListener("mousemove", onMouseMove);
     window.addEventListener("mouseup", onMouseUp);
 
-    // Double-click to zoom in
+    let lastTouchDist = 0;
+    let lastTouchX = 0;
+    let lastTouchY = 0;
+    let isTouchPanning = false;
+
+    viewport.addEventListener(
+        "touchstart",
+        (e) => {
+            if (e.touches.length === 1) {
+                isTouchPanning = true;
+                lastTouchX = e.touches[0].clientX;
+                lastTouchY = e.touches[0].clientY;
+            } else if (e.touches.length === 2) {
+                isTouchPanning = false;
+                lastTouchDist = Math.hypot(
+                    e.touches[0].clientX - e.touches[1].clientX,
+                    e.touches[0].clientY - e.touches[1].clientY,
+                );
+                lastTouchX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+                lastTouchY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+            }
+            e.preventDefault();
+        },
+        { passive: false },
+    );
+
+    viewport.addEventListener(
+        "touchmove",
+        (e) => {
+            if (e.touches.length === 1 && isTouchPanning) {
+                panX += e.touches[0].clientX - lastTouchX;
+                panY += e.touches[0].clientY - lastTouchY;
+                lastTouchX = e.touches[0].clientX;
+                lastTouchY = e.touches[0].clientY;
+                updateTransform();
+            } else if (e.touches.length === 2) {
+                const dist = Math.hypot(
+                    e.touches[0].clientX - e.touches[1].clientX,
+                    e.touches[0].clientY - e.touches[1].clientY,
+                );
+                const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+                const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+
+                if (lastTouchDist > 0) {
+                    zoomTo(scale * (dist / lastTouchDist));
+                    panX += midX - lastTouchX;
+                    panY += midY - lastTouchY;
+                    updateTransform();
+                }
+
+                lastTouchDist = dist;
+                lastTouchX = midX;
+                lastTouchY = midY;
+            }
+            e.preventDefault();
+        },
+        { passive: false },
+    );
+
+    viewport.addEventListener("touchend", () => {
+        isTouchPanning = false;
+        lastTouchDist = 0;
+    });
+
     viewport.addEventListener("dblclick", (e) => {
         e.preventDefault();
         zoomTo(scale * 1.5);
     });
 
-    // Control buttons
     controls.addEventListener("click", (e) => {
         const btn = (e.target as HTMLElement).closest<HTMLButtonElement>(".nu-mermaid-overlay-btn");
         if (!btn) return;
@@ -408,13 +459,12 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
         else if (action === "zoom-out") zoomTo(scale * 0.7);
         else if (action === "zoom-reset") resetView();
         else if (action === "download-svg") {
-            downloadSvg(svg, index);
+            downloadSvg(svg, container, index);
             showSuccess(btn, "Downloaded!");
         } else if (action === "copy-svg") copyToClipboard(svg.outerHTML, btn);
         else if (action === "copy-source" && source) copyToClipboard(source, btn);
     });
 
-    // Keyboard shortcuts
     const onKeydown = (e: KeyboardEvent) => {
         if (e.key === "Escape") close();
         else if (e.key === "+" || e.key === "=") zoomTo(scale * 1.2);
@@ -450,24 +500,60 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
             window.removeEventListener("mouseup", onMouseUp);
             document.body.style.overflow = "";
             overlay.remove();
-        }, 150);
+        }, 200);
     }
 }
 
-// ---- Download SVG ----
-function downloadSvg(svg: SVGElement, index: number) {
+function slugify(text: string): string {
+    return text
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-|-$/g, "");
+}
+
+function getSiteSlug(): string {
+    const parts = document.title.split("|");
+    const site = (parts.length > 1 ? parts[parts.length - 1] : parts[0]).trim();
+    return slugify(site);
+}
+
+function getPageSlug(): string {
+    const path = window.location.pathname.replace(/^\/|\/$/g, "");
+    return slugify(path) || "index";
+}
+
+function getDiagramType(container: Element): string {
+    const source = mermaidSources.get(container) ?? "";
+    const raw = source.trim().split(/[\s\n]/)[0];
+    // Strip version suffixes (-v2, -beta), then common trailing words (Diagram, Chart)
+    return slugify(raw.replace(/[-_](v\d+|beta)$/i, "").replace(/(diagram|chart)$/i, "")) || "diagram";
+}
+
+function buildFilename(container: Element, index: number): string {
+    const site = getSiteSlug();
+    const page = getPageSlug();
+    const type = getDiagramType(container);
+
+    // Count diagrams of same type on page to add suffix if needed
+    const allDiagrams = [...document.querySelectorAll<HTMLElement>(".mermaid:not(.nu-mermaid-fullscreen)")];
+    const sameType = allDiagrams.filter((d) => getDiagramType(d) === type);
+    const suffix = sameType.length > 1 ? `-${sameType.indexOf(container as HTMLElement) + 1}` : "";
+
+    return `${site}_${page}-${type}${suffix}.svg`;
+}
+
+function downloadSvg(svg: SVGElement, container: Element, index: number) {
     const clone = svg.cloneNode(true) as SVGElement;
     clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     const blob = new Blob([clone.outerHTML], { type: "image/svg+xml" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = `diagram-${index + 1}.svg`;
+    a.download = buildFilename(container, index);
     a.click();
     URL.revokeObjectURL(url);
 }
 
-// ---- Watch for mermaid renders ----
 function watchForMermaidRender() {
     const toolbarEnabled = window.__NU_MERMAID_TOOLBAR__ !== false;
     // Initial load: lazy render (only diagrams in/near viewport)

package/src/styles/mermaid-toolbar.css

@@ -12,9 +12,17 @@
         right: 0.5rem;
         z-index: 2;
         display: flex;
-        gap: 0.25rem;
+        gap: 1px;
         align-items: center;
+        padding: 0;
+        overflow: hidden;
+        background: var(--nu-border-color);
+        border: 1px solid var(--nu-border-color);
         opacity: 0;
+
+        /* stylelint-disable-next-line property-no-vendor-prefix -- Safari requires prefix */
+        -webkit-backdrop-filter: blur(12px) saturate(1.2);
+        backdrop-filter: blur(12px) saturate(1.2);
         transition: opacity var(--nu-transition-fast);
     }
 
@@ -23,6 +31,17 @@
         opacity: 1;
     }
 
+    /* Touch devices can't hover — keep toolbar visible */
+    @media (hover: none) {
+        .nu-mermaid-toolbar {
+            opacity: 0.8;
+        }
+
+        .mermaid:active .nu-mermaid-toolbar {
+            opacity: 1;
+        }
+    }
+
     .nu-mermaid-btn {
         box-sizing: border-box;
         display: inline-flex;
@@ -36,13 +55,17 @@
         line-height: 1;
         color: var(--nu-color-text-muted);
         cursor: pointer;
-        background: var(--nu-card-bg);
-        border: 1px solid var(--nu-border-color);
+        background: rgb(255 255 255 / 85%);
+        border: none;
         transition:
             color var(--nu-transition-fast),
             background var(--nu-transition-fast);
     }
 
+    :root:not([data-theme="light"]) .nu-mermaid-btn {
+        background: rgb(30 30 30 / 85%);
+    }
+
     .nu-mermaid-btn svg {
         display: block;
         flex-shrink: 0;
@@ -51,13 +74,18 @@
         pointer-events: none;
     }
 
+    .nu-mermaid-btn:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 0.25rem var(--nu-focus-shadow-color);
+    }
+
     .nu-mermaid-btn:hover {
         color: var(--nu-color-text);
-        background: #ebedf0;
+        background: var(--nu-hover-bg);
     }
 
     :root:not([data-theme="light"]) .nu-mermaid-btn:hover {
-        background: #3a3a3a;
+        background: var(--nu-hover-bg);
     }
 
     .nu-mermaid-btn.nu-mermaid-success {
@@ -72,7 +100,8 @@
 
     .nu-mermaid-overlay-controls .nu-mermaid-btn.nu-mermaid-success {
         color: #fff !important;
-        background: var(--nu-color-success) !important;
+        background: rgb(0 134 86 / 60%) !important;
+        border-color: rgb(0 134 86 / 80%) !important;
     }
 
     .nu-mermaid-overlay {
@@ -82,7 +111,7 @@
         display: flex;
         flex-direction: column;
         background: #f3f5f7;
-        transition: opacity 150ms ease;
+        transition: opacity 200ms ease;
     }
 
     :root:not([data-theme="light"]) .nu-mermaid-overlay {
@@ -90,29 +119,38 @@
     }
 
     .nu-mermaid-overlay-controls {
+        box-sizing: border-box;
         display: flex;
+        flex-shrink: 0;
         gap: 0.25rem;
         align-items: center;
         height: var(--sl-nav-height);
         padding: 0 1.5rem;
         background: var(--nu-topbar-bg);
+        border-bottom: 1px solid var(--nu-border-color);
     }
 
     .nu-mermaid-overlay-controls .nu-mermaid-btn {
-        width: 1.75rem;
-        height: 1.75rem;
-        color: var(--nu-color-text-muted);
-        background: var(--nu-card-bg);
-        border: 1px solid var(--nu-border-color);
+        width: auto;
+        height: auto;
+        padding: 0.5rem;
+        color: #fff;
+        background: rgb(255 255 255 / 15%);
+        border: 1px solid rgb(255 255 255 / 25%);
+    }
+
+    .nu-mermaid-overlay-controls .nu-mermaid-btn svg {
+        width: 16px;
+        height: 16px;
     }
 
     .nu-mermaid-overlay-controls .nu-mermaid-btn:hover {
-        color: var(--nu-color-text);
-        background: #ebedf0;
+        color: #fff;
+        background: rgb(255 255 255 / 25%);
     }
 
     :root:not([data-theme="light"]) .nu-mermaid-overlay-controls .nu-mermaid-btn:hover {
-        background: #3a3a3a;
+        background: rgb(255 255 255 / 25%);
     }
 
     .nu-mermaid-separator {
@@ -128,13 +166,13 @@
 
     .nu-mermaid-overlay-controls .nu-mermaid-close {
         color: #fff;
-        background: var(--nu-color-danger);
-        border-color: var(--nu-color-danger);
+        background: rgb(255 255 255 / 20%);
+        border-color: rgb(255 255 255 / 30%);
     }
 
     .nu-mermaid-overlay-controls .nu-mermaid-close:hover {
-        background: var(--nu-dark-orange);
-        border-color: var(--nu-dark-orange);
+        background: rgb(255 255 255 / 35%);
+        border-color: rgb(255 255 255 / 40%);
     }
 
     .nu-mermaid-viewport {
@@ -143,6 +181,7 @@
         align-items: center;
         justify-content: center;
         overflow: hidden;
+        touch-action: none;
         cursor: grab;
     }
 

package/src/styles/theme.css

@@ -7,10 +7,13 @@
 
 /* Unlayered — paints immediately to prevent white flash on load */
 html {
-    scrollbar-gutter: stable;
     background-color: #18181b;
 }
 
+html:not([data-has-hero]) {
+    scrollbar-gutter: stable;
+}
+
 html[data-theme="light"] {
     background-color: #f8fafc;
 }