From 22153cabbfde8ef5f56f523bac59f69053951eb1 Mon Sep 17 00:00:00 2001 From: somarc <8710267+somarc@users.noreply.github.com> Date: Wed, 13 May 2026 23:38:13 -0400 Subject: [PATCH 1/3] feat: add mermaid rendering, bus table block, and metadata block - delayed.js: detect mermaid syntax in pre>code blocks and render via mermaid.js (handles Helix pipeline stripping pre.mermaid class) - blocks/bus: reconstruct data table stripped to div rows by pipeline, restoring Bus/Latency/Mechanism/TriggeredBy/Consistency/InspectWith headers - blocks/metadata: hide metadata block that pipeline leaves visible - lazy-styles.css: mermaid SVG sizing and pre reset - Fix pre-existing lint errors in video-hero (for-of loop, hex color, comment) Co-Authored-By: Claude Sonnet 4.6 --- blocks/bus/bus.css | 32 ++++++++++++++++++++++++++++++++ blocks/bus/bus.js | 24 ++++++++++++++++++++++++ blocks/metadata/metadata.js | 3 +++ blocks/video-hero/video-hero.css | 3 ++- blocks/video-hero/video-hero.js | 7 ++++--- scripts/delayed.js | 26 +++++++++++++++++++++++++- styles/lazy-styles.css | 17 +++++++++++++++++ 7 files changed, 107 insertions(+), 5 deletions(-) create mode 100644 blocks/bus/bus.css create mode 100644 blocks/bus/bus.js create mode 100644 blocks/metadata/metadata.js diff --git a/blocks/bus/bus.css b/blocks/bus/bus.css new file mode 100644 index 0000000..07731d5 --- /dev/null +++ b/blocks/bus/bus.css @@ -0,0 +1,32 @@ +.bus { + overflow-x: auto; + margin: 1.5rem 0; +} + +.bus table { + width: 100%; + border-collapse: collapse; + font-size: 0.875rem; +} + +.bus th, +.bus td { + padding: 0.625rem 0.875rem; + text-align: left; + border: 1px solid var(--border-color, rgb(255 255 255 / 12%)); + vertical-align: top; +} + +.bus thead th { + background: var(--light-color, rgb(255 255 255 / 8%)); + font-weight: 600; + white-space: nowrap; +} + +.bus td:first-child { + font-weight: 600; +} + +.bus tbody tr:hover td { + background: rgb(255 255 255 / 3%); +} diff --git a/blocks/bus/bus.js b/blocks/bus/bus.js new file mode 100644 index 0000000..548fc07 --- /dev/null +++ b/blocks/bus/bus.js @@ -0,0 +1,24 @@ +const COLUMNS = ['Bus', 'Latency', 'Mechanism', 'Triggered By', 'Consistency Model', 'Inspect With']; + +export default function decorate(block) { + const table = document.createElement('table'); + + const thead = table.createTHead(); + const headerRow = thead.insertRow(); + COLUMNS.forEach((col) => { + const th = document.createElement('th'); + th.textContent = col; + headerRow.append(th); + }); + + const tbody = table.createTBody(); + [...block.children].forEach((row) => { + const tr = tbody.insertRow(); + [...row.children].forEach((cell) => { + const td = tr.insertCell(); + td.innerHTML = cell.innerHTML; + }); + }); + + block.replaceChildren(table); +} diff --git a/blocks/metadata/metadata.js b/blocks/metadata/metadata.js new file mode 100644 index 0000000..5c3a5c5 --- /dev/null +++ b/blocks/metadata/metadata.js @@ -0,0 +1,3 @@ +export default function decorate(block) { + (block.closest('.metadata-wrapper') || block.parentElement).hidden = true; +} diff --git a/blocks/video-hero/video-hero.css b/blocks/video-hero/video-hero.css index a1b2520..f4b09e1 100644 --- a/blocks/video-hero/video-hero.css +++ b/blocks/video-hero/video-hero.css @@ -56,6 +56,7 @@ width: 100%; margin: 0 auto; padding: 48px 56px; + /* Dark halo behind text — keeps video vivid around edges, text readable at center */ background: radial-gradient(ellipse 100% 100% at 50% 50%, rgb(7 13 26 / 72%) 15%, transparent 80%); border-radius: 12px; @@ -85,7 +86,7 @@ } .video-hero p { - color: #ddeeff; + color: #def; font-size: var(--body-font-size-m); max-width: 600px; margin: 0 auto 0.6em; diff --git a/blocks/video-hero/video-hero.js b/blocks/video-hero/video-hero.js index e2e9d83..49dad66 100644 --- a/blocks/video-hero/video-hero.js +++ b/blocks/video-hero/video-hero.js @@ -3,14 +3,15 @@ export default function decorate(block) { // Pull video src from any anchor pointing at a video file let videoSrc = null; - for (const row of rows) { + rows.some((row) => { const a = row.querySelector('a[href]'); if (a && /\.(mp4|webm|ogg)(\?|#|$)/i.test(a.href)) { videoSrc = a.href; row.remove(); - break; + return true; } - } + return false; + }); // Flatten remaining rows into the content overlay div const content = document.createElement('div'); diff --git a/scripts/delayed.js b/scripts/delayed.js index 28fa26c..d3c7b94 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -1 +1,25 @@ -// add delayed functionality here +import { loadScript } from './aem.js'; + +const MERMAID_KEYWORDS = [ + 'flowchart', 'sequenceDiagram', 'graph ', 'gantt', 'classDiagram', + 'stateDiagram', 'erDiagram', 'journey', 'gitGraph', 'mindmap', 'timeline', +]; + +const mermaidEls = [...document.querySelectorAll('pre > code')] + .filter((code) => { + const text = code.textContent.trimStart(); + return MERMAID_KEYWORDS.some((kw) => text.startsWith(kw)); + }) + .map((code) => { + const pre = document.createElement('pre'); + pre.className = 'mermaid'; + pre.textContent = code.textContent; + code.parentElement.replaceWith(pre); + return pre; + }); + +if (mermaidEls.length > 0) { + await loadScript('https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js'); + window.mermaid.initialize({ startOnLoad: false, theme: 'dark' }); + await window.mermaid.run({ nodes: mermaidEls }); +} diff --git a/styles/lazy-styles.css b/styles/lazy-styles.css index cfe0d0d..e29c330 100644 --- a/styles/lazy-styles.css +++ b/styles/lazy-styles.css @@ -77,3 +77,20 @@ main blockquote { background-color: rgb(0 212 200 / 20%); color: #fff; } + +/* Mermaid diagrams */ +pre.mermaid { + background: transparent; + border: none; + text-align: center; + padding: 1rem 0; +} + +pre.mermaid::before { + display: none; +} + +pre.mermaid svg { + max-width: 100%; + height: auto; +} From a8e993af3e08d18ea537c07dda5d78dc98fdbbf8 Mon Sep 17 00:00:00 2001 From: somarc <8710267+somarc@users.noreply.github.com> Date: Wed, 13 May 2026 23:41:51 -0400 Subject: [PATCH 2/3] fix: switch mermaid to v10 to support unquoted subgraph titles mermaid@11 enforces stricter parsing that rejects `subgraph Title` syntax used in the lenses; v10 handles it correctly. Co-Authored-By: Claude Sonnet 4.6 --- scripts/delayed.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/delayed.js b/scripts/delayed.js index d3c7b94..412e900 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -19,7 +19,7 @@ const mermaidEls = [...document.querySelectorAll('pre > code')] }); if (mermaidEls.length > 0) { - await loadScript('https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js'); + await loadScript('https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js'); window.mermaid.initialize({ startOnLoad: false, theme: 'dark' }); await window.mermaid.run({ nodes: mermaidEls }); } From 12870b2c3614d62673aef2ecdd39126a756aa2de Mon Sep 17 00:00:00 2001 From: somarc <8710267+somarc@users.noreply.github.com> Date: Wed, 13 May 2026 23:45:43 -0400 Subject: [PATCH 3/3] fix: normalize em/en dashes before mermaid parse mermaid's edge-label lexer rejects Unicode em/en dashes; replace with ASCII hyphen before calling mermaid.run() so authored content doesn't need to avoid these characters. Co-Authored-By: Claude Sonnet 4.6 --- scripts/delayed.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/scripts/delayed.js b/scripts/delayed.js index 412e900..cfb466c 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -13,7 +13,10 @@ const mermaidEls = [...document.querySelectorAll('pre > code')] .map((code) => { const pre = document.createElement('pre'); pre.className = 'mermaid'; - pre.textContent = code.textContent; + // Normalize Unicode dashes that mermaid's lexer rejects inside edge labels + pre.textContent = code.textContent + .replaceAll('—', '-') + .replaceAll('–', '-'); code.parentElement.replaceWith(pre); return pre; });