Swim Events Countdown (v2)

A small site that shows countdowns to upcoming swimming events. This is version 2, rebuilt on the Accessible Astro Starter (barebones preset). Version 1 (Vue + Parcel) lives in CuttingEdgeDevelopment/swim-events.

Preview

Technologies & Tools

Astro, Tailwind CSS, Accessible Astro Components, Supabase, Simple Analytics

How it works

The page is static. In the browser, src/scripts/events.ts loads all rows from the Supabase events table, then works out each countdown from the visitor's local date (src/lib/countdown.ts). "Update events" fetches them again.

Each event has a country: the Olympic (IOC) code, e.g. SUI, checked against the countries table. When it's left empty, it's taken from the code in location ("Basel (SUI)"), and common mix-ups such as MCO for Monaco (MON) are corrected on save (supabase/migrations/). The same codes, names and flags are in src/lib/countries.ts; the round flags in public/flags/ are copied from circle-flags with npm run flags.

Getting started

Requires Node 24.19 or newer.

1. Create a .env file:

   PUBLIC_SUPABASE_URL=https://<project>.supabase.co
   PUBLIC_SUPABASE_KEY=<publishable / anon key>
   

   Both are required; the build fails without them.
2. Run:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Builds the production site to ./dist/
npm run preview	Previews the build locally
npm run flags	Copies the country flags to public/flags/

Deployment

Netlify builds the site using netlify.toml. Set PUBLIC_SUPABASE_URL and PUBLIC_SUPABASE_KEY in the site's environment variables.

Events check

.github/workflows/events-check.yml loads the events once a day (06:00 UTC) the same way the site does. When that fails, it opens an "Events failed to load" issue assigned to the site owner, comments on it while the problem lasts, and closes it once events load again. It needs the same PUBLIC_SUPABASE_URL and PUBLIC_SUPABASE_KEY as repository variables (Settings → Secrets and variables → Actions → Variables). Run it by hand from the Actions tab to test.

Affiliate Disclosure

Simple Analytics: they give me 50% of the first year's revenue. You as a new customer will get one month of extra trial.

License

MIT, see LICENSE. Built on the Accessible Astro Starter by Incluud, also MIT (LICENSE.accessible-astro-starter). Flags from circle-flags by HatScripts, MIT (public/flags/LICENSE).