feat: add favicon element handling for dynamic weather updates

This commit is contained in:
wont-stream 2025-04-09 22:32:00 -04:00
parent 2f60206e25
commit 9a35a3f0d4
3 changed files with 60 additions and 57 deletions

View file

@ -2,7 +2,7 @@
<html lang="en" data-bs-theme="dark" data-bs-core="default">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" id="favicon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark">
<meta name="description" content="A New Tab Page." />

View file

@ -2,281 +2,281 @@
"0":{
"day":{
"description":"Sunny",
"image":"http://openweathermap.org/img/wn/01d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/01d@2x.png"
},
"night":{
"description":"Clear",
"image":"http://openweathermap.org/img/wn/01n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/01n@2x.png"
}
},
"1":{
"day":{
"description":"Mainly Sunny",
"image":"http://openweathermap.org/img/wn/01d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/01d@2x.png"
},
"night":{
"description":"Mainly Clear",
"image":"http://openweathermap.org/img/wn/01n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/01n@2x.png"
}
},
"2":{
"day":{
"description":"Partly Cloudy",
"image":"http://openweathermap.org/img/wn/02d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/02d@2x.png"
},
"night":{
"description":"Partly Cloudy",
"image":"http://openweathermap.org/img/wn/02n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/02n@2x.png"
}
},
"3":{
"day":{
"description":"Cloudy",
"image":"http://openweathermap.org/img/wn/03d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/03d@2x.png"
},
"night":{
"description":"Cloudy",
"image":"http://openweathermap.org/img/wn/03n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/03n@2x.png"
}
},
"45":{
"day":{
"description":"Foggy",
"image":"http://openweathermap.org/img/wn/50d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/50d@2x.png"
},
"night":{
"description":"Foggy",
"image":"http://openweathermap.org/img/wn/50n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/50n@2x.png"
}
},
"48":{
"day":{
"description":"Rime Fog",
"image":"http://openweathermap.org/img/wn/50d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/50d@2x.png"
},
"night":{
"description":"Rime Fog",
"image":"http://openweathermap.org/img/wn/50n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/50n@2x.png"
}
},
"51":{
"day":{
"description":"Light Drizzle",
"image":"http://openweathermap.org/img/wn/09d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09d@2x.png"
},
"night":{
"description":"Light Drizzle",
"image":"http://openweathermap.org/img/wn/09n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09n@2x.png"
}
},
"53":{
"day":{
"description":"Drizzle",
"image":"http://openweathermap.org/img/wn/09d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09d@2x.png"
},
"night":{
"description":"Drizzle",
"image":"http://openweathermap.org/img/wn/09n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09n@2x.png"
}
},
"55":{
"day":{
"description":"Heavy Drizzle",
"image":"http://openweathermap.org/img/wn/09d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09d@2x.png"
},
"night":{
"description":"Heavy Drizzle",
"image":"http://openweathermap.org/img/wn/09n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09n@2x.png"
}
},
"56":{
"day":{
"description":"Light Freezing Drizzle",
"image":"http://openweathermap.org/img/wn/09d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09d@2x.png"
},
"night":{
"description":"Light Freezing Drizzle",
"image":"http://openweathermap.org/img/wn/09n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09n@2x.png"
}
},
"57":{
"day":{
"description":"Freezing Drizzle",
"image":"http://openweathermap.org/img/wn/09d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09d@2x.png"
},
"night":{
"description":"Freezing Drizzle",
"image":"http://openweathermap.org/img/wn/09n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09n@2x.png"
}
},
"61":{
"day":{
"description":"Light Rain",
"image":"http://openweathermap.org/img/wn/10d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/10d@2x.png"
},
"night":{
"description":"Light Rain",
"image":"http://openweathermap.org/img/wn/10n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/10n@2x.png"
}
},
"63":{
"day":{
"description":"Rain",
"image":"http://openweathermap.org/img/wn/10d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/10d@2x.png"
},
"night":{
"description":"Rain",
"image":"http://openweathermap.org/img/wn/10n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/10n@2x.png"
}
},
"65":{
"day":{
"description":"Heavy Rain",
"image":"http://openweathermap.org/img/wn/10d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/10d@2x.png"
},
"night":{
"description":"Heavy Rain",
"image":"http://openweathermap.org/img/wn/10n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/10n@2x.png"
}
},
"66":{
"day":{
"description":"Light Freezing Rain",
"image":"http://openweathermap.org/img/wn/10d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/10d@2x.png"
},
"night":{
"description":"Light Freezing Rain",
"image":"http://openweathermap.org/img/wn/10n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/10n@2x.png"
}
},
"67":{
"day":{
"description":"Freezing Rain",
"image":"http://openweathermap.org/img/wn/10d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/10d@2x.png"
},
"night":{
"description":"Freezing Rain",
"image":"http://openweathermap.org/img/wn/10n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/10n@2x.png"
}
},
"71":{
"day":{
"description":"Light Snow",
"image":"http://openweathermap.org/img/wn/13d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/13d@2x.png"
},
"night":{
"description":"Light Snow",
"image":"http://openweathermap.org/img/wn/13n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/13n@2x.png"
}
},
"73":{
"day":{
"description":"Snow",
"image":"http://openweathermap.org/img/wn/13d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/13d@2x.png"
},
"night":{
"description":"Snow",
"image":"http://openweathermap.org/img/wn/13n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/13n@2x.png"
}
},
"75":{
"day":{
"description":"Heavy Snow",
"image":"http://openweathermap.org/img/wn/13d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/13d@2x.png"
},
"night":{
"description":"Heavy Snow",
"image":"http://openweathermap.org/img/wn/13n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/13n@2x.png"
}
},
"77":{
"day":{
"description":"Snow Grains",
"image":"http://openweathermap.org/img/wn/13d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/13d@2x.png"
},
"night":{
"description":"Snow Grains",
"image":"http://openweathermap.org/img/wn/13n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/13n@2x.png"
}
},
"80":{
"day":{
"description":"Light Showers",
"image":"http://openweathermap.org/img/wn/09d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09d@2x.png"
},
"night":{
"description":"Light Showers",
"image":"http://openweathermap.org/img/wn/09n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09n@2x.png"
}
},
"81":{
"day":{
"description":"Showers",
"image":"http://openweathermap.org/img/wn/09d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09d@2x.png"
},
"night":{
"description":"Showers",
"image":"http://openweathermap.org/img/wn/09n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09n@2x.png"
}
},
"82":{
"day":{
"description":"Heavy Showers",
"image":"http://openweathermap.org/img/wn/09d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09d@2x.png"
},
"night":{
"description":"Heavy Showers",
"image":"http://openweathermap.org/img/wn/09n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/09n@2x.png"
}
},
"85":{
"day":{
"description":"Light Snow Showers",
"image":"http://openweathermap.org/img/wn/13d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/13d@2x.png"
},
"night":{
"description":"Light Snow Showers",
"image":"http://openweathermap.org/img/wn/13n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/13n@2x.png"
}
},
"86":{
"day":{
"description":"Snow Showers",
"image":"http://openweathermap.org/img/wn/13d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/13d@2x.png"
},
"night":{
"description":"Snow Showers",
"image":"http://openweathermap.org/img/wn/13n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/13n@2x.png"
}
},
"95":{
"day":{
"description":"Thunderstorm",
"image":"http://openweathermap.org/img/wn/11d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/11d@2x.png"
},
"night":{
"description":"Thunderstorm",
"image":"http://openweathermap.org/img/wn/11n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/11n@2x.png"
}
},
"96":{
"day":{
"description":"Light Thunderstorms With Hail",
"image":"http://openweathermap.org/img/wn/11d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/11d@2x.png"
},
"night":{
"description":"Light Thunderstorms With Hail",
"image":"http://openweathermap.org/img/wn/11n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/11n@2x.png"
}
},
"99":{
"day":{
"description":"Thunderstorm With Hail",
"image":"http://openweathermap.org/img/wn/11d@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/11d@2x.png"
},
"night":{
"description":"Thunderstorm With Hail",
"image":"http://openweathermap.org/img/wn/11n@2x.png"
"image":"https://wsrv.nl/?l=9w=24&url=https://openweathermap.org/img/wn/11n@2x.png"
}
}
}

View file

@ -3,6 +3,8 @@ import { ChevronLeft, ChevronRight } from 'lucide-preact';
import desc from "./desc.json";
const favicon = document.getElementById("favicon") as HTMLLinkElement;
const fetchWeather = async (lat: number, long: number) => {
const req = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${long}&current=temperature_2m,is_day,weather_code&timezone=${Intl.DateTimeFormat().resolvedOptions().timeZone}`)
const res = await req.json();
@ -31,6 +33,7 @@ export default () => {
setWeather(`${weather.current.temperature_2m}°C`);
setSrc(weatherDesc.image);
favicon.href = weatherDesc.image;
setWttrDesc(`${weatherDesc.description} & ${dayOrNight}`);
}