feat(webapp): mermaid fences render as diagrams, in the viewer and on share pages (BEA-91) (#143)

A ```mermaid fence rendered as a wall of `graph TD` source on both surfaces.
It now renders as an SVG in the hub file viewer and on public /s/<token>
markdown share pages.

Mermaid ships inside the binary (no CDN, so air-gapped self-hosters keep
working) and is imported lazily: a document with no fence downloads none of
it. A fence that doesn't parse — the common case for hand-written wiki
diagrams — keeps today's <pre><code> plus a small note, and one bad fence
never stops the good ones beside it. A blocked or offline chunk lands in the
same place.

The share page is the harder half: it is server-rendered Go HTML with no
JavaScript, and its `sandbox allow-scripts` CSP makes the origin opaque, so a
module script and every import() it makes arrive with `Origin: null`. The CSP
is unchanged and gains no allow-same-origin; instead the real-asset branch of
frontend() now sets Access-Control-Allow-Origin, which only ever touches files
that are already public and cookie-less. The script tag itself is injected
only when the rendered document actually contains a fence.

Also fixes an embed bug this change surfaced: `//go:embed static` silently
skips names beginning with `_`, and Vite's first shared chunk is
`_commonjsHelpers-<hash>.js`. The build passed, the commit looked right, and
the served app was blank. It is `all:static` now, with a test that every file
on disk is in the binary.
This commit is contained in:
Snow Lee (Sungwon)
2026-08-10 14:18:18 -07:00
committed by GitHub
parent 4031495c81
commit 2875e033be
86 changed files with 5070 additions and 30 deletions
+11 -1
View File
@@ -15,6 +15,13 @@ classDiagram
}
note for ErrorBoundary "ErrorBoundary.tsx — the app's floor, mounted in main.tsx ABOVE QueryClientProvider so it covers every route. React unmounts the whole tree when a render throws and nothing catches it, and the address bar keeps the URL, so a reload reproduces the blank page: a permanent client-side DoS that another member's CONTENT can reach (a link in a teammate's markdown reaching decodePath, a folder named `constructor` reaching ProjectIcon). Deliberately the smallest thing that works — no reporting, no retry machine, no per-route boundaries"
class shareMermaid {
<<second Vite entry>>
src/share-mermaid.ts → static/share-mermaid.js
picks DARK/LIGHT from prefers-color-scheme
}
note for shareMermaid "The only script the server-rendered /s/ share page ever loads, and only when shares.go finds a mermaid fence in the document. Built as a SECOND rollup input with a fixed, unhashed name at the static root — sharedMarkdownShell is a Go const and cannot know a content hash, and server.go marks assets/ immutable for a year, so an unhashed file there would pin a stale bundle in shared caches. Mermaid's own chunks keep their hashed assets/ names, which is why the share page needs the ACAO header: its sandbox origin is opaque"
class App {
mode from /api/config
}
@@ -101,8 +108,10 @@ classDiagram
+heat.ts placeLabels LABEL_MAX (scatter danger-dot labels)
+sniff.ts sniffBytes BlobText MAX_BYTES
+csv.ts parseDelimited Csv CSV_ROWS
+mermaid.ts hasMermaid renderMermaid Palette DARK LIGHT
+utils.ts
}
note for lib "mermaid.ts is the one exception to 'pure, no React, unit-tested on node': it needs a DOM and a browser-only library, so its coverage is Playwright. html in → html out, so neither caller can be tempted to patch a live subtree. It imports mermaid only when hasMermaid() says a document has a fence — that gate is what keeps a diagram-free page from downloading any of it — and every failure (unparseable fence, render throw, chunk that never loads) returns the untouched &lt;pre&gt;&lt;code&gt; instead of throwing"
note for lib "pure, no React, unit-tested on node (npm test) — the line diff is ~40 lines, cheaper than auditing a diff package. heat.ts is the one read-count arithmetic: every surface (file header, folder listing, Dashboard bar) totals and splits through it, so they cannot disagree; useBrowse re-exports it"
note for lib "csv.ts parses .csv/.tsv for FileView's table view — ~50 lines against RFC 4180, so no papaparse. It NEVER throws: null means 'not a table' (unterminated quote, no delimiter) and the caller falls back to the plain-text preview, which is why the fallback is a type-level guarantee rather than a try/catch someone can forget"
@@ -116,8 +125,9 @@ classDiagram
Browser --> components
HubApp --> components
components --> nav : linkProps navigate
components --> lib : diffText groupRuns hotPathSplit placeLabels parseDelimited
components --> lib : diffText groupRuns hotPathSplit placeLabels parseDelimited renderMermaid
hooks --> lib : re-exports heat.ts, sniffBytes
shareMermaid --> lib : renderMermaid
hooks --> api
Browser --> hooks
HubApp --> hooks
+9
View File
@@ -283,6 +283,14 @@ classDiagram
+Token +Project +Path +Creator +Expires
}
class mermaidTag {
&lt;&lt;shares.go, the .md branch&gt;&gt;
body contains language-mermaid?
→ module script tag, else ""
sharedMarkdownShell verb 2 of 4
}
note for mermaidTag "A share page is a zero-JavaScript document and stays one unless the document it renders actually has a diagram — the server already holds the rendered HTML, so it can decide. The tag is a MODULE, which only loads because frontend() now sets Access-Control-Allow-Origin on real assets: under this page's `sandbox allow-scripts` the origin is opaque, so a module and every import() it makes are fetched with Origin: null. The CSP itself is unchanged, and no allow-same-origin was added — the sandbox is what keeps shared content off the hub's origin"
class DeviceRegistry {
-repo DeviceRepo
-byKey devKey → row
@@ -432,6 +440,7 @@ classDiagram
projectPerm ..> Project : Perms + Default
projectPerm ..> Directory : org role
ShareDB ..> Share
ShareDB ..> mermaidTag : markdown shares only
DeviceRegistry ..> DeviceInfo
DeviceRegistry *-- devKey : (account, id)
RemoteSource ..> sourcedOp : attribution comes from the journal key