99 lines
4.5 KiB
JavaScript
99 lines
4.5 KiB
JavaScript
#!/usr/bin/env node
|
|
// Site build for the delivery-arc page (CSP-clean: script-src 'self', no inline JS).
|
|
// Reads pilot/arc.tpl.html, splits the app <script> out to arc.js, injects the scene
|
|
// manifests, points heroes at /assets/ files, and wraps a full HTML document.
|
|
// Runs on bare node (the build image has no python). Artifact build = assemble-arc.py.
|
|
import { readFileSync, writeFileSync, mkdirSync } from "node:fs";
|
|
import { createHash } from "node:crypto";
|
|
import { dirname, join } from "node:path";
|
|
import { fileURLToPath } from "node:url";
|
|
|
|
const ROOT = join(dirname(fileURLToPath(import.meta.url)), "..");
|
|
const DIST = process.argv[2] || join(ROOT, "dist");
|
|
|
|
const man = t => JSON.stringify(JSON.parse(readFileSync(join(ROOT, "pilot", `manifest-${t}.json`), "utf8")));
|
|
|
|
let tpl = readFileSync(join(ROOT, "pilot/arc.tpl.html"), "utf8");
|
|
|
|
// split the app script (the last <script> block) out of the template
|
|
const i = tpl.lastIndexOf("<script>");
|
|
const j = tpl.lastIndexOf("</script>");
|
|
if (i < 0 || j < i) throw new Error("app script block not found");
|
|
let app = tpl.slice(i + 8, j)
|
|
.replace("__MAN_SURROUND__", man("surround"))
|
|
.replace("__MAN_NODE__", man("node"))
|
|
.replace("__MAN_POD__", man("pod"))
|
|
.replace("__MAN_TRAFFIC__", man("traffic"))
|
|
.replace("__MAN_ORBIT__", man("orbit"))
|
|
.replace("__MAN_DOCKER__", man("docker"))
|
|
.replace("__MAN_CLUSTER__", man("cluster"))
|
|
.replace("__MAN_GITOPS__", man("gitops"))
|
|
.replace("__MAN_SUPPLY__", man("supply"))
|
|
.replace("__MAN_HELM__", man("helm"));
|
|
let body = tpl.slice(0, i) + tpl.slice(j + 9);
|
|
|
|
const heroes = {
|
|
__HERO_SURROUND__: "course-00-surround.webp",
|
|
__HERO_NODE__: "course-III-node.webp",
|
|
__HERO_POD__: "course-III-pod.webp",
|
|
__HERO_TRAFFIC__: "course-IV-traffic.webp",
|
|
__HERO_ORBIT__: "course-V-orbit.webp",
|
|
__HERO_DOCKER__: "docker-layers.webp",
|
|
__HERO_CLUSTER__: "course-II-cluster.webp",
|
|
__HERO_GITOPS__: "course-VI-gitops.webp",
|
|
__HERO_SUPPLY__: "course-VII-supply-chain.webp",
|
|
__HERO_HELM__: "course-VIII-helm-press.webp",
|
|
__HERO_APPENDIX__: "appendix-dependency-ledger.webp",
|
|
};
|
|
// content-fingerprint everything under /assets/ (immutable-cached by nginx): a fresh
|
|
// index.html can then never pair with a stale script or image from a previous deploy.
|
|
mkdirSync(join(DIST, "assets"), { recursive: true });
|
|
const fp = buf => createHash("sha256").update(buf).digest("hex").slice(0, 8);
|
|
const emit = (srcPath, base, ext) => {
|
|
const buf = readFileSync(srcPath);
|
|
const name = `${base}.${fp(buf)}.${ext}`;
|
|
writeFileSync(join(DIST, "assets", name), buf);
|
|
return "/assets/" + name;
|
|
};
|
|
for (const [ph, file] of Object.entries(heroes)) {
|
|
const base = file.replace(/\.webp$/, "");
|
|
body = body.replace(ph, emit(join(ROOT, "assets/dist", file), base, "webp"));
|
|
}
|
|
body = body.replace("__DIAG_FLOW__", emit(join(ROOT, "assets/dist/delivery-flow.svg"), "delivery-flow", "svg"));
|
|
if (body.includes("__HERO_") || body.includes("__DIAG_") || app.includes("__MAN_")) throw new Error("unfilled placeholder");
|
|
|
|
const favicon = "data:image/svg+xml," + encodeURIComponent(
|
|
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" fill="#070b14"/><rect x="6" y="4" width="14" height="7" rx="1.5" fill="#3fbaf5"/><rect x="11" y="13" width="14" height="7" rx="1.5" fill="#7dd0f9"/><rect x="6" y="22" width="14" height="7" rx="1.5" fill="#e879f9"/></svg>`);
|
|
|
|
const gsapRef = emit(join(ROOT, "gsap.min.js"), "gsap.min", "js");
|
|
const stRef = emit(join(ROOT, "st.min.js"), "st.min", "js");
|
|
const appName = `arc.${fp(app)}.js`;
|
|
writeFileSync(join(DIST, "assets", appName), app);
|
|
const appRef = "/assets/" + appName;
|
|
|
|
const html = `<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>The Exploded Cluster</title>
|
|
<meta name="description" content="Interactive teardown of the toolchain around Kubernetes and OpenShift: GitOps, the image supply chain, and Helm - every scene one generated hero, sliced and scrubbed.">
|
|
<meta name="theme-color" content="#070b14">
|
|
<link rel="icon" href="${favicon}">
|
|
</head>
|
|
<body>
|
|
${body}
|
|
<script src="${gsapRef}"></script>
|
|
<script src="${stRef}"></script>
|
|
<script src="${appRef}"></script>
|
|
</body>
|
|
</html>
|
|
`;
|
|
|
|
writeFileSync(join(DIST, "index.html"), html);
|
|
|
|
// CSP gate: no inline <script> may survive into the served HTML
|
|
const inline = (html.match(/<script(?![^>]*src=)[^>]*>/gi) || []).length;
|
|
if (inline) throw new Error("inline <script> in index.html - CSP would block it");
|
|
console.log(`site build -> ${DIST}: index.html ${(html.length / 1024).toFixed(0)}KB, all assets fingerprinted (${appName})`);
|