Skip to content

Update the "What's New" home-page feed

The home page of the SyRF web app shows a permanent "What's New" section with the latest release featured at the top and earlier releases collapsed underneath. The section is driven by a static JSON feed shipped with the web app — updating it for a new release is a content-only change, no Angular code required.

Files

File Purpose
src/services/web/src/assets/data/whats-new.json The feed itself. Edit this for each release.
src/services/web/src/assets/data/whats-new.schema.json JSON Schema describing valid feeds. The feed references it via $schema so VS Code gives you completions and validation.
src/services/web/src/app/info/home/whats-new/ The Angular component that renders the feed. You only touch this if the shape of the data needs to change.

Release workflow

When cutting a new release:

  1. Open src/services/web/src/assets/data/whats-new.json.
  2. Move the current latest object into the top of the past array, converting it to the past-release shape (date, title, body, and optional userGuidePath).
  3. Replace the latest object with the new release. Use a fresh id (e.g. 2026-05).
  4. Set userGuidePath to the path of the What's New page in the user guide (e.g. whats-new/may-2026/). No leading slash, no scheme — the UserGuideUrlPipe prepends the environment-appropriate base URL (production vs. staging vs. preview).
  5. Add 2–4 highlights. Keep each title short (one bold-voiced sentence, no trailing full stop — the template adds one) and each body to one or two sentences in user-facing language.
  6. Commit. The feed ships on the next web deployment.

Hiding the section

Set latest to null:

{
  "$schema": "./whats-new.schema.json",
  "latest": null,
  "past": []
}

The section renders nothing. Useful between releases or during a quiet period.

Rolling back

Because the feed is just a static asset, rolling back is as simple as reverting the commit. No database migration, no cache invalidation — users pick up the previous feed on their next page load.

Design decisions

  • Why a JSON feed, not a hard-coded component? Non-engineers (e.g. product owner, designer) can update the home-page release section by editing a single JSON file in the repo. The bar to ship a release note is a PR, not an Angular build.
  • Why static asset, not an API endpoint? A new service is overkill for one file that changes ~monthly. Serving from /assets/data/whats-new.json uses the same edge-cached path as the web app itself, so there's zero extra infrastructure.
  • Why a past array? The home page and latest-release announcement now share one feed, so users do not see a current release at the top of the page and an outdated hardcoded archive farther down.
  • Why no loading spinner? If the fetch is slow or fails the section simply stays hidden. The home page is not meant to be blocked by release notes that are nice to have; an invisible failure mode is the correct failure mode here.

Testing your changes

Unit tests cover latest-release rendering, past-release rendering, empty archive handling, and error-handling logic:

cd src/services/web
pnpm exec ng test --no-watch --include="src/app/info/home/whats-new/**/*.spec.ts"

For a local visual check, run the dev server and inspect the home page:

cd src/services/web
pnpm start
# open http://localhost:4200/

Changing the feed shape

If a release genuinely needs something the current schema can't express (an image, a link list, a carousel of multiple releases) update in this order:

  1. Update whats-new.schema.json with the new shape.
  2. Update the TypeScript interfaces in whats-new.component.ts to match.
  3. Update the template and tests.
  4. Only then change whats-new.json.

Keep the feed backwards-compatible where practical — old feeds served from CDN caches should still render without crashing the home page.