feat(site): the header, footer, sign-in page and motif of the school designs

[rubenvdlinde]

What

The portal site draws the header, footer, sign-in page and motif of the four school designs (De Wilgenboom, Vaartveld College, Esdoornveen, Warmtepompacademie) and Zuiddrecht. Plan items G-01, G-02, G-03, G-04, G-07, G-08, G-18.

• Motif under the header and over the footer, CSS only (css/site-theme.css, a linked sheet: no bundle cost, no layout shift), from thematiq's --cn-brand-stripe-*. A set without a stripe draws nothing. Zuiddrecht: a red line under the menu (its Kop board, canvas v13) and its red, blue, red bands 6 : 3 : 1 over the footer.
• Designed header for a portal that declares headerSearch.enabled or accountLabel: search box to the portal's search page, one button to the own area while signed out, a person chip (initials, name, session.organisationName) and "Uitloggen" while signed in, a menu button on a phone. Lazy chunk components/chrome/HeaderTools.vue. Other portals keep their header markup (the baseline header test still passes).
• Current menu item: bold with a 4px bar in the accent.
• Designed footer for a footer with cta or contact: brand column first (the set's light logo, text, outlined button), contact column, menus; bottom band one step darker. Other footers keep their order.
• Logo variants: site.php names the set's light logo and emblem (--nldesign-logo-inverse-url, --nldesign-emblem-url), resolved by PortalThemeResolver::logoVariantFileFor().
• Light hero with the emblem watermark when the set declares it.
• Sign-in page as role cards (lazy components/chrome/SignInPage.vue) for a portal with authentication.modeLabels or signInPage.
• Schema and content API: headerSearch, accountLabel, footer.cta, footer.contact, authentication.modeLabels, authentication.signInPage, projected by PortalShell on named keys; schema strings in l10n.
• For lane L2: gridContext().signInRoutes, so nlSignIn gets the portal's ways in.

OpenSpec: openspec/changes/site-chrome-follows-the-design. Contract for the learniq lane (which keys to fill, values per school): CHROME-CONTRACT in the build folder.

Depends on

• thematiq brand-motif-on-portals (feat(public-bridge): a portal gets the whole role layer, the brand motif and the accent from any set thematiq#1097) for the tokens. Without it this renders exactly as development does for every existing set (all new reads have fallbacks); the school sets only look right with both.
• No nextcloud-vue release needed (the stripe is CSS here).
• resident-menu-badges-and-cards (PR L13_PR) is stacked on this branch.

Verified

• npm run check:specs exit 0 apart from site-edit-mode "the site entry stays under its budget" (it measures js/portaliq-site.js and fails on any development build in js/, environmental; a production build is not run on this machine, CI measures the entry). New: tests/site-chrome.spec.mjs (12 tests); updated site-shell-blocks (footer shape), PortalShellTest, PortalThemeResolverTest, PortaliqRegisterConfigTest (the chrome keys validated against the real portal schema), PortalPageControllerTest.
• composer check:strict (once, then targeted re-runs of what it flagged): lint, phpcs, phpmd, psalm, phpstan clean; PHPUnit 2718 tests, 46 errors, all inherited (tests that need Nextcloud server classes, same count as development), the one failure it found is fixed (PortalPageControllerTest, re-run green).
• npm run lint 0 errors, npm run format 0, check:l10n-js 0, check:schema-l10n 0 uncovered, check:register pass.
• Live on :8091 (portaliq this branch, thematiq brand-motif-on-portals files, the wilgenboom portal switched to each set with the board's header, footer and sign-in text, restored afterwards): signed-out page, sign-in page and signed-in /mijn (DigiD stub) at 1440 and 390 for wilgenboom, vaartveld, esdoornveen, warmtepompacademie and zuiddrecht. Measured per set: the motif under the header and over the footer at the set's height (17, 9, 6, 5, 5 px), the set's logo in the header and its light logo in the footer, the account button in the primary colour, the cards per way in, the chip "FH Fatima Hulstkamp" with "Uitloggen".
• Deviations: Esdoornveen's slanted cut aligns to the viewport edge, not the content column (D-1); the academy participant card signs in with the account, not an e-mail link (D-6); the hero watermark is wired but no school home page exists yet on the instance (pages are the learniq lane's).

🤖 Generated with Claude Code

[github-actions]

Quality Report — ConductionNL/portaliq @ 8aa2e93

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
build		✅
check-specs		❌
check-manifest		✅
format		✅
check-l10n-js		✅
check-schema-l10n		❌
check-reuse		✅
composer			✅	✅ 108/108
npm			✅	✅ 984/984
app:check-code	⏭️
info.xml	✅
REUSE	✅
lockfile sync		✅
PHPUnit					❌
Newman					✅
Playwright					⏭️ deferred: E2E runs locally and on the promotion path only. This pull request targets development, so the suite is asked once per promotion into beta and main rather than once per push per open pull request. Run it locally with npx playwright test, or from the Actions tab on a branch with no open pull request into development.
Hydra gates					❌

---

Quality workflow — 2026-10-05 17:27 UTC

Download the full PDF report from the workflow artifacts.

[rubenvdlinde]

Three findings from the Zuiddrecht demo site work (#1206, #1208), which builds on this branch:

1. This PR changes the portal schema and does not move the register version. Development is at 0.64.0 and the import is gated on the version, so on an upgrade the new keys never reach an existing instance. feat(site): the Zuiddrecht example site, installed and removed with one command #1206 moves the register to 0.65.0 and the portal schema to 0.10.0, with a test. If this PR takes a number first, the higher one wins on merge.
2. With development merged in, check:ways-in-screens fails: "every button link in the site is covered" does not list FooterColumns.vue, chrome/HeaderTools.vue and chrome/SignInPage.vue.
3. Hydra gate-16 fails on five methods in the new chrome/ files: HeaderTools (hint, person) and SignInPage (iconPath, markText, panel).

The PR also conflicts with development at the moment. #1206 and #1208 show this PR's diff until it lands.

🤖 Generated with Claude Code

[github-actions]

Quality Report — ConductionNL/portaliq @ 3140f82

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
build		✅
check-specs		✅
check-manifest		✅
format		✅
check-l10n-js		✅
check-schema-l10n		✅
check-reuse		✅
composer			✅	✅ 108/108
npm			✅	✅ 984/984
app:check-code	⏭️
info.xml	✅
REUSE	✅
lockfile sync		✅
PHPUnit					❌
Newman					✅
Playwright					⏭️ deferred: E2E runs locally and on the promotion path only. This pull request targets development, so the suite is asked once per promotion into beta and main rather than once per push per open pull request. Run it locally with npx playwright test, or from the Actions tab on a branch with no open pull request into development.
Hydra gates					❌

---

Quality workflow — 2026-10-05 18:04 UTC

Download the full PDF report from the workflow artifacts.