Give the status page nectenda.com's header, footer and design system #137

Merged

cruelacid merged 1 commit from worktree-status-page-style into main

2026-09-24 10:24:24 +01:00

cruelacid commented

2026-09-24 10:18:25 +01:00

Owner

Task: NEC-90

Makes status.nectenda.com (Uptime Kuma 2.5.5) look like part of nectenda.com: the site's sticky header with its menus and Install button, the site's footer, and the Nectenda Design System in both themes. It also adds System Status as the first footer link on nectenda.com.

This PR doesn't touch production Kuma. The look is applied separately, with node deploy/kuma-monitor.mjs status-page (use --dry-run first). Merging this does redeploy nectenda.com with the new footer link.

Stylesheet: deploy/ops/status-page.css is generated by deploy/ops/build-status-css.mjs from:
- the site's tokens;
- the site's header rules;
- the mark and wordmark, embedded so the page keeps its name when the site is down;
- a hand-written layer that holds no colour or typeface of its own.
Header is the site's markup, carried in the page description. Kuma's sanitiser keeps it byte for byte, except that it strips obsidian:// links, so Install goes to the community directory page.
Apply command: kuma-monitor.mjs status-page reads the config through the authenticated socket and refuses to save without domainNameList.
13 tests, each mutation-checked. They fail on:
- a stale stylesheet;
- a colour or typeface written into the layer;
- fonts loaded from anywhere but nectenda.com;
- the footer or the header menu drifting from site/build.mjs;
- Install not using the site's fallback link;
- the domain guard being removed.
Docs: deploy/README.md gains "Status page styling". deploy/UPGRADES.md notes the styling as something to rehearse on the next Kuma major.

The user reviewed and approved the design locally at three checkpoints, in both themes and at desktop and phone widths.

Found along the way and not fixed here: our Kuma socket clients can lose a race against Kuma's connection handler and hang at login. That includes the deploy banner. It gets its own PR.

Changelog

NONE

🤖 Generated with Claude Code

https://claude.ai/code/session_014jXw5B2oryJCk6KxdkjZJR

Task: NEC-90 Makes status.nectenda.com (Uptime Kuma 2.5.5) look like part of nectenda.com: the site's sticky header with its menus and Install button, the site's footer, and the Nectenda Design System in both themes. It also adds **System Status** as the first footer link on nectenda.com. **This PR doesn't touch production Kuma.** The look is applied separately, with `node deploy/kuma-monitor.mjs status-page` (use `--dry-run` first). Merging this does redeploy nectenda.com with the new footer link. - **Stylesheet:** `deploy/ops/status-page.css` is generated by `deploy/ops/build-status-css.mjs` from: - the site's tokens; - the site's header rules; - the mark and wordmark, embedded so the page keeps its name when the site is down; - a hand-written layer that holds no colour or typeface of its own. - **Header** is the site's markup, carried in the page description. Kuma's sanitiser keeps it byte for byte, except that it strips `obsidian://` links, so Install goes to the community directory page. - **Apply command:** `kuma-monitor.mjs status-page` reads the config through the authenticated socket and refuses to save without `domainNameList`. - **13 tests**, each mutation-checked. They fail on: - a stale stylesheet; - a colour or typeface written into the layer; - fonts loaded from anywhere but nectenda.com; - the footer or the header menu drifting from `site/build.mjs`; - Install not using the site's fallback link; - the domain guard being removed. - **Docs:** `deploy/README.md` gains "Status page styling". `deploy/UPGRADES.md` notes the styling as something to rehearse on the next Kuma major. The user reviewed and approved the design locally at three checkpoints, in both themes and at desktop and phone widths. Found along the way and **not fixed here**: our Kuma socket clients can lose a race against Kuma's connection handler and hang at login. That includes the deploy banner. It gets its own PR. ## Changelog NONE 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_014jXw5B2oryJCk6KxdkjZJR

cruelacid added the

area:ops

label

2026-09-24 10:18:25 +01:00

cruelacid added 1 commit

2026-09-24 10:18:25 +01:00

Give the status page nectenda.com's header, footer and design system

Release note / release-note (pull_request) Successful in 15s

Details

CI / build (pull_request) Successful in 4m23s

Details

CI / e2e (pull_request) Successful in 5m25s

Details

CI / promote (pull_request) Has been skipped

Details

Deploy site / deploy (push) Successful in 53s

Details

CI / build (push) Successful in 4m40s

Details

CI / e2e (push) Successful in 4m53s

Details

CI / promote (push) Successful in 30s

Details

c613f05b1c

status.nectenda.com was stock Uptime Kuma. It now reads as part of
nectenda.com: the site's sticky header with its menus and Install button,
the site's footer, and the Nectenda Design System's colour, type, surfaces
and status semantics in both themes.

Kuma keeps a status page's look in its own database, so the repository is
the source of truth and `kuma-monitor.mjs status-page` puts it there. The
command keeps the domainNameList guard that stops a save from deleting the
custom domain, and has a --dry-run. The CSS is generated
(deploy/ops/build-status-css.mjs):
- from site/static/tokens.css, rewritten for Kuma's body.dark and the
  heartbeat canvas, which reads its colours from <html>;
- from the site's own header rules in style.css;
- from the mark and wordmark, embedded so the page keeps its name when the
  site is down;
- and from a hand-written layer that holds no colour or typeface of its own.
The header is the site's markup in the page description, which Kuma's
sanitiser keeps byte for byte apart from obsidian:// links. Install
therefore goes to the community directory page.

Tests fail when the committed CSS is stale, when the layer names a colour
or typeface, or when the footer or header menu drifts from site/build.mjs.
Each was mutation-checked.

The site's footer gains System Status, first, linking to the status page,
and the status page's footer matches it.

Task: NEC-90

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014jXw5B2oryJCk6KxdkjZJR

cruelacid merged commit c613f05b1c into main

2026-09-24 10:24:24 +01:00