mirror of
https://github.com/runbear-io/beardrive.git
synced 2026-08-25 08:08:08 +02:00
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:
@@ -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 <pre><code> 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
|
||||
|
||||
@@ -283,6 +283,14 @@ classDiagram
|
||||
+Token +Project +Path +Creator +Expires
|
||||
}
|
||||
|
||||
class mermaidTag {
|
||||
<<shares.go, the .md branch>>
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user