static routing fixed
This commit is contained in:
Vincent van der Wal
@@ -31,6 +31,8 @@
|
||||
chartHeight?: number;
|
||||
/** Extra vertical padding in pixels added to the total min-height (default: 2) */
|
||||
extraPadding?: number;
|
||||
/** Minimum chart width in pixels; narrower viewports scroll sideways (default: 560) */
|
||||
minWidth?: number;
|
||||
/** Optional CSS class for the outer wrapper */
|
||||
class?: string;
|
||||
/** Slot content (charts go here) */
|
||||
@@ -42,6 +44,7 @@
|
||||
chartCount = 1,
|
||||
chartHeight = 300,
|
||||
extraPadding = 2,
|
||||
minWidth = 560,
|
||||
class: className = '',
|
||||
children
|
||||
}: Props = $props();
|
||||
@@ -51,7 +54,12 @@
|
||||
let minHeight = $derived(chartHeight * chartCount + extraPadding);
|
||||
</script>
|
||||
|
||||
<div class="chart-container relative {className}" style:min-height="{minHeight}px">
|
||||
<div class="chart-bleed">
|
||||
<div
|
||||
class="chart-container relative {className}"
|
||||
style:min-height="{minHeight}px"
|
||||
style:min-width="{minWidth}px"
|
||||
>
|
||||
<!-- Chart content area -->
|
||||
<div class="chart-content" in:fade={{ duration: 300 }} out:fade={{ duration: 300 }}>
|
||||
{#if children}
|
||||
@@ -86,18 +94,23 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.chart-container {
|
||||
/* Negative horizontal margin on mobile to use full width, reset on md+ */
|
||||
margin-left: -1.5rem;
|
||||
margin-right: -1.5rem;
|
||||
.chart-bleed {
|
||||
/* Bleed exactly into the page padding on mobile (main has p-5 =
|
||||
1.25rem) for edge-to-edge charts, and a bit past the content
|
||||
column on md+ (main has 2rem padding) for extra readability.
|
||||
Charts narrower than their min-width scroll sideways. */
|
||||
margin-left: -1.25rem;
|
||||
margin-right: -1.25rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.chart-container {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
.chart-bleed {
|
||||
margin-left: -1.5rem;
|
||||
margin-right: -1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* Translates drizzli's model ids (Open-Meteo API model names, see
|
||||
* src/routes/weather/options.ts) into domain values understood by the maps
|
||||
* viewer (open-meteo/maps, weather-map-layer src/domains.ts).
|
||||
*
|
||||
* The map advertises the domains it actually supports in its `om-maps:ready`
|
||||
* handshake; candidates are tried in order and the first advertised one wins.
|
||||
* Seamless API models list their seamless domain first, so they upgrade
|
||||
* automatically once the maps app ships seamless support; until then they fall
|
||||
* back to their widest-coverage member (a regional member could be entirely
|
||||
* off-screen). Models without an entry are tried under their own id; models
|
||||
* the map does not serve at all (best_match, bom, google, UKMO ensembles)
|
||||
* resolve to null.
|
||||
*/
|
||||
const modelDomainCandidates: Record<string, string[]> = {
|
||||
// DWD Germany
|
||||
icon_seamless: ['dwd_icon_seamless', 'dwd_icon'],
|
||||
icon_global: ['dwd_icon'],
|
||||
icon_eu: ['dwd_icon_eu'],
|
||||
icon_d2: ['dwd_icon_d2'],
|
||||
|
||||
// NOAA U.S.
|
||||
gfs_seamless: ['ncep_gfs_seamless', 'ncep_gfs013'],
|
||||
gfs_global: ['ncep_gfs013'],
|
||||
gfs_hrrr: ['ncep_hrrr_conus'],
|
||||
gfs_graphcast025: ['ncep_gfs_graphcast025'],
|
||||
|
||||
// Météo-France
|
||||
meteofrance_seamless: ['meteofrance_seamless', 'meteofrance_arpege_world025'],
|
||||
meteofrance_arpege_world: ['meteofrance_arpege_world025'],
|
||||
meteofrance_arome_france: ['meteofrance_arome_france0025'],
|
||||
|
||||
// UK Met Office
|
||||
ukmo_seamless: ['ukmo_seamless', 'ukmo_global_deterministic_10km'],
|
||||
|
||||
// KNMI Netherlands
|
||||
knmi_seamless: ['knmi_seamless', 'knmi_harmonie_arome_europe'],
|
||||
|
||||
// DMI Denmark (no DMI seamless domain in the maps project)
|
||||
dmi_seamless: ['dmi_harmonie_arome_europe'],
|
||||
|
||||
// MET Norway
|
||||
metno_seamless: ['metno_nordic_pp'],
|
||||
metno_nordic: ['metno_nordic_pp'],
|
||||
|
||||
// MeteoSwiss (CH2 covers a wider area than CH1)
|
||||
meteoswiss_icon_seamless: ['meteoswiss_icon_ch2'],
|
||||
|
||||
// KMA Korea (kma_ldps is not served by the maps project)
|
||||
kma_seamless: ['kma_gdps'],
|
||||
kma_ldps: ['kma_gdps'],
|
||||
|
||||
// JMA Japan
|
||||
jma_seamless: ['jma_seamless', 'jma_gsm'],
|
||||
|
||||
// GEM Canada (gdps/rdps carry resolution suffixes in newer map builds;
|
||||
// older builds advertise the plain names, so try both)
|
||||
gem_seamless: ['cmc_gem_seamless', 'cmc_gem_gdps_15km', 'cmc_gem_gdps'],
|
||||
gem_global: ['cmc_gem_gdps_15km', 'cmc_gem_gdps'],
|
||||
gem_regional: ['cmc_gem_rdps_10km', 'cmc_gem_rdps'],
|
||||
|
||||
// Ensemble models
|
||||
icon_seamless_eps: ['dwd_icon_eps'],
|
||||
icon_global_eps: ['dwd_icon_eps'],
|
||||
icon_eu_eps: ['dwd_icon_eu_eps'],
|
||||
icon_d2_eps: ['dwd_icon_d2_eps'],
|
||||
ncep_gefs_seamless: ['ncep_gefs025'],
|
||||
gem_global_ensemble: ['cmc_gem_geps']
|
||||
};
|
||||
|
||||
/** Resolve a model id to a maps domain the map advertised as supported. */
|
||||
export const mapsDomainForModel = (
|
||||
model: string,
|
||||
supportedDomains: ReadonlySet<string>
|
||||
): string | null => {
|
||||
for (const candidate of modelDomainCandidates[model] ?? [model]) {
|
||||
if (supportedDomains.has(candidate)) return candidate;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
@@ -1,7 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
import { storedLocation } from '$lib/stores/settings';
|
||||
import { storedLocation, storedModel, storedTheme } from '$lib/stores/settings';
|
||||
|
||||
import { mapsDomainForModel } from '$lib/utils/maps-domain';
|
||||
|
||||
// Hash piping, both directions:
|
||||
// - inbound: a #zoom/lat/lng(/bearing/pitch) hash on OUR url seeds the
|
||||
@@ -10,6 +12,16 @@
|
||||
// we mirror it into our url with replaceState. hashOverride is only set
|
||||
// once on mount, so these mirror updates never reload the iframe.
|
||||
let hashOverride = $state<string | null>(null);
|
||||
let iframeEl = $state<HTMLIFrameElement | null>(null);
|
||||
let mapReady = $state(false);
|
||||
|
||||
const postToMap = (message: Record<string, unknown>) => {
|
||||
iframeEl?.contentWindow?.postMessage(message, MAPS_ORIGIN);
|
||||
};
|
||||
|
||||
// Local maps dev server (open-meteo/maps); production: https://maps.open-meteo.com
|
||||
// Run drizzli on a different port so the map keeps 5173 to itself.
|
||||
const MAPS_ORIGIN = 'http://localhost:5173';
|
||||
|
||||
const MAP_HASH_RE = /^#\d+(\.\d+)?\/-?\d+(\.\d+)?\/-?\d+(\.\d+)?/;
|
||||
|
||||
@@ -18,10 +30,24 @@
|
||||
hashOverride = MAP_HASH_RE.test(initialHash) ? initialHash : null;
|
||||
|
||||
const onMessage = (event: MessageEvent) => {
|
||||
if (event.origin !== 'https://maps.open-meteo.com') return;
|
||||
const { type, hash } = (event.data ?? {}) as { type?: string; hash?: string };
|
||||
if (type !== 'om-maps:hash' || !hash || !MAP_HASH_RE.test(hash)) return;
|
||||
if (event.origin !== MAPS_ORIGIN) return;
|
||||
const { type, hash, domains } = (event.data ?? {}) as {
|
||||
type?: string;
|
||||
hash?: string;
|
||||
domains?: string[];
|
||||
};
|
||||
if (type === 'om-maps:hash') {
|
||||
if (!hash || !MAP_HASH_RE.test(hash)) return;
|
||||
history.replaceState(history.state, '', hash);
|
||||
} else if (type === 'om-maps:ready' && Array.isArray(domains)) {
|
||||
// The map is loaded and advertises which domains it can render;
|
||||
// switch it to the selected model and our theme. The domain is
|
||||
// omitted for best_match and models the map does not serve,
|
||||
// keeping the map's own default. Re-fires on iframe reloads.
|
||||
mapReady = true;
|
||||
const domain = mapsDomainForModel($storedModel, new Set(domains));
|
||||
postToMap({ type: 'om-maps:set', ...(domain && { domain }), theme: $storedTheme });
|
||||
}
|
||||
};
|
||||
window.addEventListener('message', onMessage);
|
||||
return () => window.removeEventListener('message', onMessage);
|
||||
@@ -31,11 +57,19 @@
|
||||
// opens focused on the selected location (zoomed out to regional scale);
|
||||
// picking a new location while on this page recenters the map
|
||||
const iframeSrc = $derived(
|
||||
`https://maps.open-meteo.com/${
|
||||
`${MAPS_ORIGIN}/${
|
||||
hashOverride ??
|
||||
`#6/${$storedLocation.latitude.toFixed(3)}/${$storedLocation.longitude.toFixed(3)}`
|
||||
}`
|
||||
);
|
||||
|
||||
// forward theme switches live; the initial theme travels with the
|
||||
// ready response above (the map ignores no-op updates)
|
||||
$effect(() => {
|
||||
const theme = $storedTheme;
|
||||
if (!mapReady) return;
|
||||
postToMap({ type: 'om-maps:set', theme });
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -51,6 +85,7 @@
|
||||
map; it only takes effect when this site itself is served with
|
||||
COOP/COEP headers (see README, Deployment) -->
|
||||
<iframe
|
||||
bind:this={iframeEl}
|
||||
src={iframeSrc}
|
||||
title="Open-Meteo Interactive Map"
|
||||
loading="lazy"
|
||||
|
||||
@@ -150,7 +150,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex w-full min-w-0 items-center gap-3 sm:w-auto">
|
||||
<ModelSelector
|
||||
selectedModel={params.models?.[0] ?? 'best_match'}
|
||||
onModelChange={(model) => {
|
||||
|
||||
@@ -210,7 +210,11 @@
|
||||
{#if cellData.length > 0}
|
||||
{@const hourly = data.hourly}
|
||||
{@const iconPx = is3h ? 38 : 26}
|
||||
<section class="overflow-hidden rounded-2xl border border-border/70 bg-card shadow-sm">
|
||||
<!-- Full-bleed to the viewport edges on mobile (main has p-5 = 1.25rem);
|
||||
a contained rounded card on md+ -->
|
||||
<section
|
||||
class="-mx-5 overflow-hidden border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border"
|
||||
>
|
||||
<!-- Card toolbar -->
|
||||
<div
|
||||
class="flex flex-wrap items-center justify-between gap-2 border-b border-border/70 bg-muted/40 px-4 py-2.5"
|
||||
@@ -244,7 +248,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative" bind:clientWidth={tableWidth}>
|
||||
<!-- Below the min-width the table scrolls sideways instead of squeezing;
|
||||
1h needs far more room than 3h (24 vs 8 columns) -->
|
||||
<div class="overflow-x-auto">
|
||||
<div
|
||||
class="relative {is3h ? 'min-w-[560px]' : 'min-w-[1100px]'}"
|
||||
bind:clientWidth={tableWidth}
|
||||
>
|
||||
<table class="w-full table-fixed border-collapse whitespace-nowrap">
|
||||
<caption class="sr-only">Hourly weather details for {locationName}</caption>
|
||||
<colgroup>
|
||||
@@ -275,7 +285,10 @@
|
||||
style="width:{100 - sunsetPercent}%"
|
||||
></div>
|
||||
<!-- Sunrise marker + label -->
|
||||
<div class="absolute inset-y-0 w-px bg-amber-500/70" style="left:{sunrisePercent}%">
|
||||
<div
|
||||
class="absolute inset-y-0 w-px bg-amber-500/70"
|
||||
style="left:{sunrisePercent}%"
|
||||
>
|
||||
<span
|
||||
class="absolute bottom-0.5 left-1 text-[10px] leading-none font-semibold whitespace-nowrap text-amber-700 dark:text-amber-300"
|
||||
>
|
||||
@@ -294,7 +307,10 @@
|
||||
</span>
|
||||
</div>
|
||||
<!-- Sunset marker + label -->
|
||||
<div class="absolute inset-y-0 w-px bg-indigo-400/70" style="left:{sunsetPercent}%">
|
||||
<div
|
||||
class="absolute inset-y-0 w-px bg-indigo-400/70"
|
||||
style="left:{sunsetPercent}%"
|
||||
>
|
||||
<span
|
||||
class="absolute right-1 bottom-0.5 inline-flex items-center gap-1 text-[10px] leading-none font-semibold whitespace-nowrap text-indigo-600 dark:text-indigo-300"
|
||||
>
|
||||
@@ -304,7 +320,9 @@
|
||||
height="12px"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use class="stroke-2" xlink:href="/images/weather-icons/wi-sunset.svg#Layer_1"
|
||||
<use
|
||||
class="stroke-2"
|
||||
xlink:href="/images/weather-icons/wi-sunset.svg#Layer_1"
|
||||
></use>
|
||||
</svg>
|
||||
<span class="align-middle">{formatTime(sunTimes.sunset)}</span>
|
||||
@@ -349,7 +367,9 @@
|
||||
class:icon-day={cell.isDaytime}
|
||||
class:icon-night={!cell.isDaytime}
|
||||
class:icon-dawn={!cell.isDaytime && cellData[i + 1]?.isDaytime}
|
||||
class:icon-dusk={cell.isDaytime && cellData[i + 1] && !cellData[i + 1].isDaytime}
|
||||
class:icon-dusk={cell.isDaytime &&
|
||||
cellData[i + 1] &&
|
||||
!cellData[i + 1].isDaytime}
|
||||
>
|
||||
{@render weatherIcon(getWeatherIconName(wCode, cell.isDaytime), iconPx)}
|
||||
</td>
|
||||
@@ -487,6 +507,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
@@ -511,11 +532,16 @@
|
||||
|
||||
/* ── Row header ─────────────────────────────────────────────── */
|
||||
.hdr {
|
||||
/* sticky + opaque background: stays readable while the table is
|
||||
scrolled sideways (z above the "now" overlay, which is z-10) */
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
padding: 4px 2px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
background: color-mix(in oklab, var(--color-muted) 45%, transparent);
|
||||
background: color-mix(in oklab, var(--color-muted) 45%, var(--color-card));
|
||||
border-right: 1px solid var(--color-border);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
>
|
||||
<Select.Trigger
|
||||
aria-label="{label} selection"
|
||||
class="group h-auto min-w-64 cursor-pointer gap-3 rounded-xl border-2 border-primary/35 bg-card py-2 ps-2.5 shadow-sm transition-colors hover:border-primary/70 hover:shadow-md data-[size=default]:h-auto data-[state=open]:border-primary sm:min-w-72"
|
||||
class="group h-auto min-w-0 flex-1 cursor-pointer gap-3 rounded-xl border-2 border-primary/35 bg-card py-2 ps-2.5 shadow-sm transition-colors hover:border-primary/70 hover:shadow-md data-[size=default]:h-auto data-[state=open]:border-primary sm:min-w-72 sm:flex-none"
|
||||
>
|
||||
<div
|
||||
class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary"
|
||||
|
||||
Reference in New Issue
Block a user