change name

README.md

@@ -1,4 +1,4 @@
-# OMbrella
+# Drizzli
 
 An open-source, high-performance weather forecast website built with SvelteKit and powered by the [Open-Meteo APIs](https://open-meteo.com/).
 
@@ -66,8 +66,8 @@ here.)
 ### Example: Caddy
 
 ```caddy
-ombrella.example.com {
+drizzli.example.com {
-	root * /srv/ombrella
+	root * /srv/drizzli
 	file_server
 	try_files {path} {path}/ /404.html
 	header {
@@ -81,8 +81,8 @@ ombrella.example.com {
 
 ```nginx
 server {
-	server_name ombrella.example.com;
+	server_name drizzli.example.com;
-	root /srv/ombrella;
+	root /srv/drizzli;
 	error_page 404 /404.html;
 	add_header Cross-Origin-Opener-Policy "same-origin" always;
 	add_header Cross-Origin-Embedder-Policy "require-corp" always;

package-lock.json

@@ -1,11 +1,11 @@
 {
-	"name": "ombrella",
+	"name": "drizzli",
 	"version": "0.0.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "ombrella",
+			"name": "drizzli",
 			"version": "0.0.1",
 			"devDependencies": {
 				"@eslint/compat": "^2.1.0",

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "ombrella",
+	"name": "drizzli",
 	"private": true,
 	"version": "0.0.1",
 	"type": "module",

src/lib/assets/favicon.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
-	<title>OMbrella</title>
+	<title></title>
 	<defs>
 		<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
 			<stop offset="0" stop-color="#e0f2fe" />

src/lib/components/charts/ChartToolbar.svelte

@@ -43,7 +43,7 @@
 
 	let {
 		charts = [],
-		fileName = 'ombrella-chart',
+		fileName = 'drizzli-chart',
 		class: className = '',
 		controls
 	}: Props = $props();

src/lib/components/navigation/weather-nav.svelte

@@ -61,7 +61,7 @@
 				? 'justify-center'
 				: 'px-4'}"
 			onclick={onMobileClose}
-			aria-label="OMbrella home"
+			aria-label="Drizzli home"
 		>
 			<div
 				class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground"
@@ -87,7 +87,7 @@
 			</div>
 			{#if !collapsed}
 				<span class="text-sm font-bold tracking-tight whitespace-nowrap text-sidebar-foreground">
-					OMbrella
+					Drizzli
 				</span>
 			{/if}
 		</a>

src/routes/+page.svelte

@@ -1,3 +1,3 @@
 <svelte:head>
-	<title>OMbrella</title>
+	<title>Drizzli</title>
 </svelte:head>

src/routes/page.svelte.spec.ts

@@ -8,6 +8,6 @@ describe('/+page.svelte', () => {
 		render(Page);
 
 		const title = document.querySelector('title');
-		expect(title?.textContent).toBe('OMbrella');
+		expect(title?.textContent).toBe('Drizzli');
 	});
 });

src/routes/weather/maps/+page.svelte

@@ -3,20 +3,28 @@
 
 	import { storedLocation } from '$lib/stores/settings';
 
-	// a #zoom/lat/lng(/bearing/pitch) hash on OUR url is piped through to the
+	// Hash piping, both directions:
-	// map, so map positions can be bookmarked/shared via ombrella links
+	// - inbound: a #zoom/lat/lng(/bearing/pitch) hash on OUR url seeds the
-	// (the reverse direction is not possible: the iframe is cross-origin, so
+	//   map, so positions can be bookmarked/shared via drizzli links
-	// its internal hash changes are unreadable from here)
+	// - outbound: the (cross-origin) map posts its hash here on every moveend;
+	//   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);
 
+	const MAP_HASH_RE = /^#\d+(\.\d+)?\/-?\d+(\.\d+)?\/-?\d+(\.\d+)?/;
+
 	onMount(() => {
-		const readHash = () => {
+		const initialHash = window.location.hash;
-			const hash = window.location.hash;
+		hashOverride = MAP_HASH_RE.test(initialHash) ? initialHash : null;
-			hashOverride = /^#\d+(\.\d+)?\/-?\d+(\.\d+)?\/-?\d+(\.\d+)?/.test(hash) ? hash : 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;
+			history.replaceState(history.state, '', hash);
 		};
-		readHash();
+		window.addEventListener('message', onMessage);
-		window.addEventListener('hashchange', readHash);
+		return () => window.removeEventListener('message', onMessage);
-		return () => window.removeEventListener('hashchange', readHash);
 	});
 
 	// the embedded map understands maplibre's #zoom/lat/lng hash, so the iframe

src/routes/weather/week/[location]/+page.svelte

@@ -120,8 +120,8 @@
 </script>
 
 <svelte:head>
-	<title>OMbrella | Weather</title>
+	<title>Drizzli | Weather</title>
-	<link rel="canonical" href="https://ombrella.servert.ch/weather/week" />
+	<link rel="canonical" href="https://drizz.li/weather/week" />
 	<meta name="description" content="7-day weather forecast with detailed hourly data" />
 </svelte:head>