cogapp-temperature

Two things about heat, sharing one bottom tab bar. Astro + Tailwind v4, styled with the Cogapp brand. Deploys to GitHub Pages at cogapplabs.github.io/cogapp-temperature.

• Office (/): live temperature and humidity for the Cogapp office, from two public Adafruit IO feeds.
• Heat & me (/heat): pick the conditions and medicines that apply to you, and see how each changes the way your body copes with hot weather, what helps, and which combinations need extra care.
• Advice (/heat/everyone): the hot weather advice and warning signs that apply to everybody.

The heat pages are general information, not medical advice, and never suggest changing a prescribed medicine. Every card links the guidance it came from.

Develop

npm install
npm run dev      # http://localhost:4321/cogapp-temperature

The feeds are public, so there is no API key and no .env to set up.

Scripts

• npm run build builds the static site to dist/.
• npm run preview serves the build locally.
• npm run check runs Biome (autofix) then Astro type checks.
• npm run lint runs Biome without writing.
• node scripts/axe-check.mjs [url] runs an axe-core accessibility check against a running dev/preview server. Run it per page.
• node scripts/check-picker.mjs, check-share.mjs, check-interactions.mjs are Playwright checks for the picker, URL sharing and interaction gating. They also need a server up, and a stale astro preview will 404 the newer routes.

Biome (lint + format) runs on staged files via Lefthook at pre-commit.

How it works

The office page ships an empty placeholder, then a small client script fetches both feeds on load and re-polls every 60 seconds. A circular timer in the header drains to the next poll, next to a manual refresh button. Each metric shows the current value, a comfort-band scale, a sparkline, and an expandable history chart. The comfort thresholds are general office-comfort guesses, not Adafruit's own dashboard bands.

The heat pages are fully static: content lives as JSON in research/, and every card is rendered at build time and hidden, so picking something reveals it with no fetch. The picker itself is one small React island, a combobox you can browse or type into. Your selection lives in the URL as ?p=..., so you can share or bookmark a profile, and a clean link always starts clean.

The whole site is an installable PWA and works offline. See CLAUDE.md for architecture detail.

Deploy

Pushing to main triggers .github/workflows/deploy.yml, which builds and publishes to GitHub Pages. Enable Pages (source: GitHub Actions) in the repo settings once.