Extract all inline page renderers from app.ts into lazy-loaded modules and remove 500+ lines of duplicated replay viewer code. Every route now uses dynamic import() so page code loads on-demand. Changes: - Remove duplicated replay viewer (renderReplayPage, initReplayViewer) from app.ts — now uses lazy import from pages/replay.ts - Extract Watch Hub, Compete Hub, Season Detail, Docs, and 404 pages into their own modules (pages/watch-hub.ts, compete-hub.ts, season-detail.ts, docs.ts, not-found.ts) - app.ts is now a pure routing module (~120 lines) with only lazy loaders - Update vite.config.ts manualChunks: add replay-page, home, leaderboard chunks; add node_modules guard to prevent vendor code in page chunks - All §16.7 budget targets pass: app.js 1.6KB (target 30KB), replay 13KB (target 80KB), sandbox 8.4KB (target 20KB), agentation separate Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
20 lines
557 B
TypeScript
20 lines
557 B
TypeScript
// 404 page
|
|
|
|
export function renderNotFoundPage(): void {
|
|
const app = document.getElementById('app');
|
|
if (!app) return;
|
|
|
|
app.innerHTML = `
|
|
<div class="not-found-page">
|
|
<h1>404</h1>
|
|
<p>Page not found</p>
|
|
<a href="#/" class="btn primary">Go Home</a>
|
|
</div>
|
|
|
|
<style>
|
|
.not-found-page { text-align: center; padding: 100px 20px; }
|
|
.not-found-page h1 { font-size: 4rem; color: var(--text-primary); margin-bottom: 10px; }
|
|
.not-found-page p { color: var(--text-muted); margin-bottom: 20px; }
|
|
</style>
|
|
`;
|
|
}
|