ZombiesWeb
Overview
A fan website for Call of Duty Zombies players, built for speed — users browse it on a phone or second monitor while actively playing, so every millisecond matters. Astro's static-first architecture keeps pages as plain HTML by default, hydrating React only where interactivity is needed. The centerpiece is the Kronorium: a pan, drag, and zoom lore timeline built with React Flow. It maps the full CoD Zombies narrative across every map, with events rendered as custom nodes and color-coded by story thread (Aether in gold, Chaos in crimson). Directional edges let fans trace exactly how the two storylines branch and converge across decades of in-game lore. The Map Guides section provides fast-loading, mobile-friendly references for each map — easter egg steps, buildable parts, and key locations — so players can navigate without leaving their game.
Implementation
// production excerpt// Static-first + a locked-down CSP. React hydrates only on interactive islands.
export default defineConfig({
output: "static",
integrations: [react(), tailwind()],
vite: {
plugins: [{
name: "security-headers",
configureServer(server) {
server.middlewares.use((_req, res, next) => {
res.setHeader(
"Content-Security-Policy",
"default-src 'self'; img-src 'self' data:; script-src 'self'; " +
"frame-ancestors 'none'; base-uri 'self'",
);
res.setHeader("X-Frame-Options", "DENY");
res.setHeader("Referrer-Policy", "no-referrer");
next();
});
},
}],
},
});Static-first output with a locked-down CSP — React hydrates only where it must.
