595a3b13d8
The server-rendered SEO pages shared base.html.j2's nav but carried no JS, so
they lacked the °F/°C toggle and account/bell, and their temperatures were baked
as dual-unit strings that couldn't respond to a toggle.
- Load units.js + account.js + climate.js on base.html.j2, so every SEO page gets
the same header as the interactive pages (nav + °F/°C toggle + account + bell).
- Emit each temperature as <span class="temp" data-temp-f> (default °F text, real
for crawlers/no-JS); climate.js rewrites them to the active unit on load and on
toggle. Tint classes stay pinned to absolute °F. Drops the inline "(NN°C)".
- Make account.js base-aware: derive the app base from import.meta.url so its
api/v2 fetches and the alerts links resolve from deep /climate/{slug} URLs
instead of 404ing. Equivalent on the depth-1 interactive pages.
- Default the unit from the browser locale for first-time visitors (no stored
pref): en-US → °F, everyone else → °C. A stored choice always wins.
18 lines
877 B
JavaScript
18 lines
877 B
JavaScript
// Client-side temperature converter for the server-rendered climate/city/record
|
|
// pages. Those pages render every temperature as `<span class="temp"
|
|
// data-temp-f="72.3">72°F</span>` (see content.py `_temp`/`_temp_bare`) so the
|
|
// value is real in the HTML for crawlers and no-JS visitors. Here we rewrite each
|
|
// span to the active unit on load and whenever the °F/°C toggle changes — reusing
|
|
// the same unit machinery as the interactive pages. Importing units.js also boots
|
|
// its toggle-injection IIFE, so this one script gives the pages a working toggle.
|
|
import { fmtTemp, onUnitChange } from "./units.js";
|
|
|
|
function paint() {
|
|
for (const el of document.querySelectorAll(".temp[data-temp-f]")) {
|
|
const f = parseFloat(el.dataset.tempF);
|
|
if (!Number.isNaN(f)) el.textContent = fmtTemp(f, !el.hasAttribute("data-bare"));
|
|
}
|
|
}
|
|
|
|
paint();
|
|
onUnitChange(paint);
|