9ad700a1a1
Closes #4282. mara: "scope looks good" — approving the plan posted there (manifest + icons + minimal shell-only service worker + iOS meta tags) and both explicit questions (network-first-with-offline-fallback, never cache /api/*). docs/web-ui/design-guide.md's "Layout & viewport" section already asserted swarm-ui is installable as a PWA — this is what actually backs it. - manifest.webmanifest: name/icons/start_url/standalone display, theme #cba6f7 / background #1e1e2e matching the mocha --purple/--bg values. - sw.js: plain JS, not TypeScript — the DOM lib swarm-ui's own tsconfig uses and the WebWorker lib a service worker's globals need are mutually exclusive in one tsc program, not worth a second tsconfig for a self-contained ~100-line file. Scoped to the app shell only, never touches /api/* at all, network-first with offline-fallback-to-cache (not cache-first) since main.js/main.css are unhashed filenames and a cache-first SW would risk wedging an operator on stale JS after a deploy. - index.html: manifest link, theme-color meta, iOS apple-mobile-web-app-* tags (Safari ignores the manifest spec). - main.tsx: feature-detected SW registration. - branding/hyperhive-maskable.svg: hyperhive.svg's own artwork already fills nearly its whole canvas, so a maskable icon needs a padded variant or an OS mask crops the outer ring/corner brackets — embeds the original via a scaled <image> ref rather than duplicating markup. - nix/packages/swarm-ui.nix: rasterizes icon-192/512/512-maskable.png from the branding SVGs at build time via librsvg, rather than checking in static PNGs. Verified for real: typecheck+build green, and a real headless-chromium tab driven over CDP confirms the service worker registers and becomes the active controller, and a simulated-offline reload still serves the full cached shell rather than a browser error page. nix build .#swarm-ui also verified green, including the rasterized icon output.
88 lines
3.6 KiB
Nix
88 lines
3.6 KiB
Nix
{
|
|
buildNpmPackage,
|
|
branding-svg,
|
|
branding-svg-maskable,
|
|
librsvg,
|
|
}:
|
|
|
|
# Static build of the swarm-level UI shell (project-bootstrap scope:
|
|
# empty start page, no functionality yet — see
|
|
# frontend/packages/swarm-ui/package.json for the full rationale).
|
|
# Stack: Preact + wouter + TypeScript + JSX, a real SPA shell with
|
|
# routing/deep-links, distinct from the per-hive dashboard's
|
|
# vanilla-JS + custom-element MPA.
|
|
#
|
|
# Deliberately its OWN package, not folded into `./frontend.nix`
|
|
# (which bundles dashboard + agent into `packages.default`'s closure):
|
|
# swarm-ui is swarm-scoped, same reasoning `swarm-controller`/`swarmctl`
|
|
# already use for staying out of `daemonBins` — a hive that doesn't run
|
|
# the swarm controller shouldn't carry swarm-ui bytes in its closure.
|
|
#
|
|
# Not yet consumed anywhere: swarm-controller only serves `/health`
|
|
# today (swarm-controller/README.md) — this just makes the static
|
|
# build a buildable, packageable artifact so the wiring (once auth
|
|
# against authelia is figured out) has something to point at.
|
|
#
|
|
# Shares `frontend/package-lock.json` with `./frontend.nix` (same repo,
|
|
# same npm workspace root) — `npmDepsHash` is read from
|
|
# `../../frontend/npm-deps-hash`, the same file `./frontend.nix` and
|
|
# `../checks.nix`'s `swarm-ui-typecheck` read, so all three stay in
|
|
# lockstep automatically instead of needing 3 separate hand-edits.
|
|
# Scoped to build only the `swarm-ui` workspace (not the whole
|
|
# `npm run build --workspaces` frontend.nix runs) via an explicit
|
|
# `npm run build --workspace=…` buildPhase, so a dashboard/agent-only
|
|
# change doesn't need to rebuild (or re-review the output of) this
|
|
# derivation. The favicon (`branding/hyperhive.svg`, same file
|
|
# `./frontend.nix` copies for the dashboard) is likewise copied in
|
|
# during install — it lives outside the npm tree.
|
|
|
|
# PWA icons: rasterized from the branding SVGs at build time via
|
|
# `librsvg`'s `rsvg-convert` rather than checking in static PNGs, so the
|
|
# SVG stays the one thing to update if the mark ever changes.
|
|
# `branding-svg-maskable` is a separate, padded source (see
|
|
# `branding/hyperhive-maskable.svg`'s own comment) — `hyperhive.svg`'s
|
|
# artwork already fills nearly its whole canvas, so a maskable icon needs
|
|
# real margin or an OS mask crops into it.
|
|
|
|
buildNpmPackage {
|
|
pname = "hyperhive-swarm-ui";
|
|
version = "0.0.0";
|
|
src = ../../frontend;
|
|
|
|
# See `./frontend.nix`'s comment on the same line.
|
|
npmDepsHash = builtins.readFile ../../frontend/npm-deps-hash;
|
|
|
|
nativeBuildInputs = [ librsvg ];
|
|
|
|
buildPhase = ''
|
|
runHook preBuild
|
|
npm run build --workspace=packages/swarm-ui
|
|
runHook postBuild
|
|
'';
|
|
|
|
dontNpmInstall = true;
|
|
installPhase = ''
|
|
runHook preInstall
|
|
mkdir -p $out
|
|
cp -r packages/swarm-ui/dist/. $out/
|
|
cp ${branding-svg} $out/favicon.svg
|
|
rsvg-convert -w 192 -h 192 ${branding-svg} -o $out/icon-192.png
|
|
rsvg-convert -w 512 -h 512 ${branding-svg} -o $out/icon-512.png
|
|
|
|
# `branding-svg-maskable` embeds `branding-svg` via a relative
|
|
# `<image>` reference (see that file's own comment) — each is passed
|
|
# in as its own single-file store path, so the sibling reference
|
|
# only resolves once both live together in one directory again.
|
|
mkdir -p "$TMPDIR/branding"
|
|
cp ${branding-svg} "$TMPDIR/branding/hyperhive.svg"
|
|
cp ${branding-svg-maskable} "$TMPDIR/branding/hyperhive-maskable.svg"
|
|
rsvg-convert -w 512 -h 512 "$TMPDIR/branding/hyperhive-maskable.svg" \
|
|
-o $out/icon-512-maskable.png
|
|
runHook postInstall
|
|
'';
|
|
|
|
meta = {
|
|
description = "hyperhive swarm-level UI static frontend build (bootstrap — empty start page)";
|
|
homepage = "https://forge.darkest.space/hyperhive/hyperhive";
|
|
};
|
|
}
|