summaryrefslogtreecommitdiff
path: root/doc/radar-four-cities-and-nav.md
diff options
context:
space:
mode:
authorSt33v <github@f3rr3t.com>2026-06-10 13:40:11 +1000
committerSt33v <github@f3rr3t.com>2026-06-10 13:40:11 +1000
commit324091e0335cca833c4422f8aaf04a1e9f6f20de (patch)
tree30bf1cc10848c773349addded902de7e360c97af /doc/radar-four-cities-and-nav.md
parentba84faaf144cd15af3aba2650c043467fe31ee06 (diff)
Memoir: radar follow-up session
Captures the TLS-fallthrough fix, two more radars, cross-page nav, mobile sizing, and the Radars button on synoptic — all on 2026-06-10, day after the initial rollout. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Diffstat (limited to 'doc/radar-four-cities-and-nav.md')
-rw-r--r--doc/radar-four-cities-and-nav.md97
1 files changed, 97 insertions, 0 deletions
diff --git a/doc/radar-four-cities-and-nav.md b/doc/radar-four-cities-and-nav.md
new file mode 100644
index 0000000..de8a39b
--- /dev/null
+++ b/doc/radar-four-cities-and-nav.md
@@ -0,0 +1,97 @@
+---
+title: "Radar follow-up — TLS, four cities, cross-page nav"
+date-created: "2026-06-10"
+type: "memoir"
+status: "complete"
+author:
+ - "st33v"
+ - "claude-opus-4-7"
+model:
+ - "claude-opus-4-7"
+tldr: "Short follow-up to the radar rollout the day before. Fixed an https→f3rr3t.com cert fall-through with certbot, added Canberra and Cairns, gave each radar page a nav strip with the others plus a Synoptic link, made the image fill mobile width without upscaling on desktop, and added a Radars button on the synoptic page."
+chat-url: "https://claude.ai/chat/..."
+session-kind: "infrastructure"
+side-quests: 0
+reader-targets:
+ - "st33v"
+ - "claude-code"
+related:
+ entities:
+ - "cremonde"
+ - "pestrel.com"
+ concepts: []
+ songs: []
+tags:
+ - "bom"
+ - "radar"
+ - "nginx"
+ - "tls"
+ - "css"
+provenance:
+ - "doc/bom-radar-rollout.md (previous day's memoir)"
+ - "doc/bom-radar-spec.md (v0.1)"
+---
+
+# Radar follow-up — TLS, four cities, cross-page nav
+
+## TL;DR
+
+The radar rollout left a few rough edges: HTTPS-curious browsers got bounced to f3rr3t.com because radar.pestrel.com had no TLS and no 443 default_server; the image was small on phones; only two radars; no easy way to move between them or back to the synoptic. Same-day fixes for all of them.
+
+## Context
+
+Continuing from `bom-radar-rollout.md` (2026-06-09). Sydney and Brisbane were live and looping; the next morning st33v reported the cert weirdness and asked for two more radars (IDR403 Canberra, IDR193 Cairns), mobile width, and inter-page navigation including a "Radars" button on the synoptic chart.
+
+## What was done
+
+### The HTTPS fall-through
+
+Diagnosis was quick once `/etc/nginx/conf.d/` was inspected: `radar.conf` only listened on port 80, and no server block on port 443 was marked `default_server`. So Chrome/Firefox's HTTPS-first upgrade for `radar.pestrel.com` hit 443 and nginx fell through to the alphabetically-first 443 block — `f3rr3t.conf`. User saw f3rr3t.com's cert + content, served from the same cremonde host.
+
+Fix: `sudo certbot --nginx -d radar.pestrel.com`, choosing redirect option 2. Pulled the resulting `radar.conf` back into the repo so the in-tree nginx config matches production.
+
+### Four cities
+
+Trivial extension thanks to the spec's product-code parameterisation: two more `ExecStart=-/opt/radar/radarFetch.sh IDRxxx` lines in `radar.service` and `radar-retry.service`, two more pages, two more dirs in setup.sh. No script changes.
+
+### Mobile sizing
+
+Original CSS used `img { max-width: 100%; max-height: 100vh; }`. `max-width` only constrains — doesn't expand — so on a 390px-wide phone the 512x512 BOM image stayed at 512 native and either overflowed or hit max-width and shrunk. Either way, not "filling width". Switched to:
+
+```css
+img { width: 100%; max-width: 512px; max-height: 100%; height: auto; }
+```
+
+`width: 100%` makes it fill the container; `max-width: 512px` caps it at native resolution so desktop never upscales. Confirmed working full-width on phone.
+
+### Cross-page nav
+
+Layout shifted from "single-img full-bleed" to column flex: top `<nav>` strip with five buttons (four radars + Synoptic), `<main>` fills below and centres the image. Current page's button gets `.current` styling (white text, brighter border). All four per-radar pages share the same template, varying only the active class and image src — duplicated rather than templated because there's no build step and four files isn't worth introducing one for.
+
+### Radars button on synoptic
+
+Fixed-position link, left edge, `top: 16.6%`, dark-translucent background, dashed-out left border for the "tab" look. Doesn't intrude on the chart; sits just above where the colour legend typically renders.
+
+## Resolutions
+
+- **TLS via certbot, not hand-rolled.** Matches the existing pestrel.com / f3rr3t.com pattern; certbot's renewal cron already runs.
+- **Duplicated HTML over templating.** Four near-identical files is cheaper than introducing a build step or server-side includes.
+- **`width: 100%; max-width: 512px`** as the canonical "fill to native, no upscale" idiom for these radar pages.
+- **Keep the landing page** at `radar.pestrel.com/` even though every per-radar page now has full nav. It's a clean neutral entry point.
+
+## Operational learnings
+
+- **No `default_server` on a TLS port is a routing trap.** If you have any cert-bearing 443 server block on a host, every other domain you point at that host will silently land on the alphabetically-first one until you give it its own cert (or set a `default_server` that returns 444). The radar→f3rr3t bounce was nginx behaving correctly with an incomplete config, not a bug.
+- **`max-width: 100%` is shrink-only.** To fill a container you need `width: 100%`. Combined with a `max-width: <native>` cap you get fill-without-upscale.
+- **HTTPS-first browser behaviour bites quietly.** Chrome and Firefox now try HTTPS even when the user typed http://. Any plain-HTTP subdomain on a TLS-equipped host is one inscrutable redirect away from looking broken.
+
+## Cheat sheet — when adding a future radar
+
+Now five files to touch instead of four:
+
+1. Add `ExecStart=-/opt/radar/radarFetch.sh IDRxxx` to `systemd/radar.service` and `radar-retry.service`.
+2. Write `radar.<city>.html` (copy any existing one, swap apng filename, swap the `.current` class).
+3. Add the new button to the nav block in every other `radar.<other>.html` (this scales O(n²) — consider a tiny build step if it hits six radars).
+4. Add the new button to `radar.index.html`.
+5. Add `install -d /srv/www/radar/<city>` and the html install line to `setup.sh`.
+