Fix unstyled bulletin board on Vercel (cleanUrls/trailingSlash)

vercel.json sets cleanUrls + trailingSlash, so board.html is served at
/board/. Its relative asset paths (nostr-client.css, board.js, locales.js,
vendor/...) then resolved to /board/... and 404'd, leaving the page as raw
unstyled HTML stuck on "Loading…". Use root-absolute paths instead, and
point the back link at "/". Add an e2e guard asserting board.html assets are
root-absolute (the dev server can't reproduce Vercel's URL rewrites).

Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
thePR0M3TH3ANandClaude Opus 4.8 committed 2026-06-09 21:38:26 -04:00
1 parent 98086a0ad4
commit 0044b4b797
2 files changed
+21 -5

No files matched your search

+13
View File
@@ -176,6 +176,19 @@ test.describe("VoxVera static client", () => {
await expect(headers.nth(0).locator(".sort-indicator")).toContainText("▲");
});
test("bulletin board assets use root-absolute paths (cleanUrls/trailingSlash safe)", async ({ page }) => {
await page.goto("/board.html");
const refs = await page.evaluate(() =>
Array.from(document.querySelectorAll("link[href], script[src]"))
.map((n) => n.getAttribute("href") || n.getAttribute("src")));
expect(refs.length).toBeGreaterThan(0);
// Vercel serves this page at /board/ — relative asset paths would resolve
// to /board/... and 404, leaving the page unstyled with no scripts.
for (const ref of refs) {
expect(ref, `asset "${ref}" must be root-absolute or external`).toMatch(/^(https?:|\/)/);
}
});
test("bulletin board language selector localizes the page", async ({ page }) => {
await page.goto("/board.html");
await expect(page.locator("#board-title")).toHaveText("Bulletin Board");
+8 -5
View File
@@ -4,7 +4,10 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VoxVera — Bulletin Board</title>
<link rel="stylesheet" href="nostr-client.css">
<!-- Root-absolute asset paths: with Vercel cleanUrls + trailingSlash this
page is served at /board/, so relative paths would resolve to
/board/... and 404. -->
<link rel="stylesheet" href="/nostr-client.css">
</head>
<body class="board-page">
<header class="topbar">
@@ -13,7 +16,7 @@
<p id="board-subtitle">Most recent flyers published to the relays.</p>
</div>
<div class="topbar-controls">
<a id="board-back" class="board-back" href="./">Back to VoxVera</a>
<a id="board-back" class="board-back" href="/">Back to VoxVera</a>
<select id="board-lang" aria-label="Language"></select>
</div>
</header>
@@ -24,8 +27,8 @@
<tbody id="board-rows"></tbody>
</table>
</main>
<script src="locales.js"></script>
<script src="vendor/nostr-tools/nostr.bundle.js"></script>
<script src="board.js"></script>
<script src="/locales.js"></script>
<script src="/vendor/nostr-tools/nostr.bundle.js"></script>
<script src="/board.js"></script>
</body>
</html>