Content-only page transitions + dependency security overrides
- Persistent ShellComponent hosts the router-outlet so header/footer mount once (no re-mount flash); pages nest under a shell route. page-shell is now content-only; page-layout removed. - Native withViewTransitions() cross-fades only the routed content (chrome gets stable view-transition-names); respects prefers-reduced-motion. - package.json overrides pin patched transitive dev/build deps: npm audit 16 (3 high/9 mod/4 low) -> 5 low; shipped app stays at 0 (npm audit --omit=dev). No Angular downgrade, no breaking Babel 8 bump. jsdom 28 -> 29. - README: page-transitions section + honest dependency-security note. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
22
README.md
22
README.md
@@ -118,14 +118,34 @@ loading/empty/error handling is automatic and consistent across the app.
|
||||
|
||||
---
|
||||
|
||||
## Page transitions
|
||||
|
||||
The chrome (`templates/shell` — header + footer) is **persistent**: it mounts once and
|
||||
hosts the `<router-outlet>`, so navigating doesn't re-create it (no white flash). Only
|
||||
the routed content cross-fades, via Angular's native **`withViewTransitions()`** — the
|
||||
header/footer get a stable `view-transition-name` in `styles.scss` so they're excluded
|
||||
from the fade. `prefers-reduced-motion` disables the animation; non-Chromium browsers
|
||||
degrade to an instant navigation.
|
||||
|
||||
## Tech notes
|
||||
|
||||
- Angular 22 (standalone components, signals, `httpResource`, control flow `@if/@for`).
|
||||
- Angular 22 (standalone components, signals, `httpResource`, view transitions,
|
||||
control flow `@if/@for`).
|
||||
- Styling: `@rijkshuisstijl-community/{design-tokens,components-css}` (Utrecht + RHC CSS,
|
||||
pre-themed Rijkshuisstijl) — imported in `src/styles.scss`, no hand-written theme.
|
||||
- Mock data: JSON in `public/mock/`, timing/outcome shaped by `core/scenario.interceptor.ts`.
|
||||
- `.npmrc` sets `legacy-peer-deps=true` because `@storybook/angular`'s peer range lags
|
||||
Angular 22; the builder runs fine (build verified).
|
||||
|
||||
### Dependency security
|
||||
|
||||
The **shipped app has 0 known vulnerabilities** (`npm audit --omit=dev`). All advisories
|
||||
live in dev/build tooling (Storybook + the Angular build chain) and never reach the
|
||||
bundle. `package.json` `overrides` pin patched transitive versions, taking the full
|
||||
audit from 16 (incl. 3 high) down to **5 low** — the remainder all cascade from
|
||||
`@babel/core`'s low-severity sourceMappingURL issue, which only "fixes" by jumping to
|
||||
Babel 8 (a breaking change across the Storybook/Babel chain) and is deliberately left.
|
||||
We do **not** run `npm audit fix --force`: its proposed fix downgrades Angular 22 → 21.
|
||||
|
||||
### Deliberately out of scope (POC)
|
||||
Real auth/DigiD, real backend, i18n, NgRx, licensed Rijkshuisstijl fonts/logo.
|
||||
|
||||
Reference in New Issue
Block a user