fix(training): load TeSS listings in the browser

[yasinmiran]

Fixes #335.

The training page fetched TeSS at build time, so it only ever showed the listings as they were on the day of the last deploy. That deploy ran on Aug 24, and both upcoming events were created on TeSS this morning, which is why elixir.no says nothing is coming up while a local build, fetching fresh, shows them.

I moved the fetch into the browser. Each section is a small React island (src/components/tess-listings.tsx) that calls TeSS on load, shows a skeleton while it waits, and falls back to a link to TeSS if three tries don't get an answer. The request sends Accept: application/json and nothing else. That keeps it a simple CORS request, which matters because TeSS answers a preflight with a 403; the JSON responses themselves carry access-control-allow-origin: *, so the browser takes them without complaint.

While checking this I found a second bug, fixed in its own commit. The past events query uses include_expired=true, which adds ended events to the upcoming ones instead of returning only ended events, and sort=new orders by creation date, so a redeploy today would have put both new events at the top of "Past training events". It now sorts by start date and drops anything that hasn't ended.

Side effects worth knowing:

• builds don't touch TeSS anymore, so CI is back to its pre-fix(training): fetch TeSS listings at build time #332 time and a TeSS outage can't affect a deploy
• retries went from 5 x 20s to 3 x 15s, since someone is now waiting on the page
• the listings aren't in the static HTML, so Pagefind doesn't index them (same as with the old widget)
• test-pages.mjs can't see these hrefs now, so safeUrl in src/lib/tess.ts is the only thing keeping a non-http(s) URL from the feed out of the page

Testing:

• astro check 0 errors, 303 pages built, test:slugs and test:pages pass
• in Chromium against a local preview: 2 upcoming, 10 materials, 10 past with none in the future; the materials filter works and announces an empty match; with TeSS blocked all three sections show the fallback after ~3s; no horizontal overflow at 320px in dark mode

[Copilot]

Copilot review overview

🟡 Changes recommended

The new React hook does not guard against state updates after unmount, which can produce runtime warnings and should be fixed before merging.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 1

Open (1)

• Guard async useTess state updates after unmount · New

What changed in this PR

Moves TeSS listings on /training from build-time fetching to client-side fetching via small React “islands”, so production always reflects current TeSS data and deploys/CI aren’t impacted by TeSS availability.

Changes:

• Replace build-time TeSS fetch/rendering in src/pages/training/index.astro with React islands (TessEvents, TessMaterials) hydrated in the browser.
• Update TeSS helper logic to use shorter retries/timeouts for interactive page loads and fix “past events” ordering/filtering.
• Remove the now-unused tess-unavailable.astro component and centralize TeSS “browse” URLs.

File	Description
src/​pages/​training/​index.astro	Switches TeSS sections to client-side React islands and uses centralized TeSS browse links.
src/​lib/​tess.ts	Adjusts retry/backoff for browser usage, fixes past-events sorting/filtering, and adds browseLinks.
src/​components/​tess-unavailable.astro	Removes build-time unavailable component no longer used by /training.
src/​components/​tess-listings.tsx	Adds React islands for events/materials with loading/empty/unavailable states and a client-side materials filter.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.