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"> <html lang="en" data-bs-theme="dark" data-bs-core="default">
<head> <head>
<meta charset="UTF-8" /> <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="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark"> <meta name="color-scheme" content="dark">
<meta name="description" content="A New Tab Page." /> <meta name="description" content="A New Tab Page." />

View file

@ -2,281 +2,281 @@
"0":{ "0":{
"day":{ "day":{
"description":"Sunny", "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":{ "night":{
"description":"Clear", "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":{ "1":{
"day":{ "day":{
"description":"Mainly Sunny", "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":{ "night":{
"description":"Mainly Clear", "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":{ "2":{
"day":{ "day":{
"description":"Partly Cloudy", "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":{ "night":{
"description":"Partly Cloudy", "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":{ "3":{
"day":{ "day":{
"description":"Cloudy", "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":{ "night":{
"description":"Cloudy", "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":{ "45":{
"day":{ "day":{
"description":"Foggy", "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":{ "night":{
"description":"Foggy", "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":{ "48":{
"day":{ "day":{
"description":"Rime Fog", "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":{ "night":{
"description":"Rime Fog", "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":{ "51":{
"day":{ "day":{
"description":"Light Drizzle", "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":{ "night":{
"description":"Light Drizzle", "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":{ "53":{
"day":{ "day":{
"description":"Drizzle", "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":{ "night":{
"description":"Drizzle", "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":{ "55":{
"day":{ "day":{
"description":"Heavy Drizzle", "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":{ "night":{
"description":"Heavy Drizzle", "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":{ "56":{
"day":{ "day":{
"description":"Light Freezing Drizzle", "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":{ "night":{
"description":"Light Freezing Drizzle", "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":{ "57":{
"day":{ "day":{
"description":"Freezing Drizzle", "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":{ "night":{
"description":"Freezing Drizzle", "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":{ "61":{
"day":{ "day":{
"description":"Light Rain", "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":{ "night":{
"description":"Light Rain", "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":{ "63":{
"day":{ "day":{
"description":"Rain", "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":{ "night":{
"description":"Rain", "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":{ "65":{
"day":{ "day":{
"description":"Heavy Rain", "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":{ "night":{
"description":"Heavy Rain", "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":{ "66":{
"day":{ "day":{
"description":"Light Freezing Rain", "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":{ "night":{
"description":"Light Freezing Rain", "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":{ "67":{
"day":{ "day":{
"description":"Freezing Rain", "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":{ "night":{
"description":"Freezing Rain", "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":{ "71":{
"day":{ "day":{
"description":"Light Snow", "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":{ "night":{
"description":"Light Snow", "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":{ "73":{
"day":{ "day":{
"description":"Snow", "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":{ "night":{
"description":"Snow", "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":{ "75":{
"day":{ "day":{
"description":"Heavy Snow", "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":{ "night":{
"description":"Heavy Snow", "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":{ "77":{
"day":{ "day":{
"description":"Snow Grains", "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":{ "night":{
"description":"Snow Grains", "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":{ "80":{
"day":{ "day":{
"description":"Light Showers", "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":{ "night":{
"description":"Light Showers", "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":{ "81":{
"day":{ "day":{
"description":"Showers", "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":{ "night":{
"description":"Showers", "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":{ "82":{
"day":{ "day":{
"description":"Heavy Showers", "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":{ "night":{
"description":"Heavy Showers", "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":{ "85":{
"day":{ "day":{
"description":"Light Snow Showers", "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":{ "night":{
"description":"Light Snow Showers", "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":{ "86":{
"day":{ "day":{
"description":"Snow Showers", "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":{ "night":{
"description":"Snow Showers", "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":{ "95":{
"day":{ "day":{
"description":"Thunderstorm", "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":{ "night":{
"description":"Thunderstorm", "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":{ "96":{
"day":{ "day":{
"description":"Light Thunderstorms With Hail", "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":{ "night":{
"description":"Light Thunderstorms With Hail", "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":{ "99":{
"day":{ "day":{
"description":"Thunderstorm With Hail", "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":{ "night":{
"description":"Thunderstorm With Hail", "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"; import desc from "./desc.json";
const favicon = document.getElementById("favicon") as HTMLLinkElement;
const fetchWeather = async (lat: number, long: number) => { 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 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(); const res = await req.json();
@ -31,6 +33,7 @@ export default () => {
setWeather(`${weather.current.temperature_2m}°C`); setWeather(`${weather.current.temperature_2m}°C`);
setSrc(weatherDesc.image); setSrc(weatherDesc.image);
favicon.href = weatherDesc.image;
setWttrDesc(`${weatherDesc.description} & ${dayOrNight}`); setWttrDesc(`${weatherDesc.description} & ${dayOrNight}`);
} }