feat: make weather fetching dynamic

src/components/Footer.astro

@@ -108,7 +108,23 @@ const currentYear = new Date().getFullYear();
             © {currentYear} All rights reserved.
           </p>
 
-          <div class="flex items-center space-x-2">
+          <div class="flex items-center">
+            <p class="text-xs text-neutral-500 dark:text-neutral-400">
+              Weather provided by
+            </p>
+            <a
+              href="https://open-meteo.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="group inline-flex items-center text-xs text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
+            >
+              <span class="relative ml-1">
+                Open-Meteo.
+              </span>
+            </a>
+
+            <div class="ml-4"></div>
+
             <span class="text-xs text-neutral-500 dark:text-neutral-400">Built with </span>
             <a
               href="https://astro.build"
@@ -116,24 +132,8 @@ const currentYear = new Date().getFullYear();
               rel="noopener noreferrer"
               class="group inline-flex items-center text-xs text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
             >
-              <svg class="mr-1 h-4 w-4 text-[#FF5D01]" viewBox="0 0 36 36" fill="none">
+              <span class="relative ml-1">
-                <path
+                Astro.
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M8.833 22.958c.622-1.185 1.832-1.918 3.18-1.918 2.292 0 4.145 1.86 4.145 4.153 0 1.34-.626 2.54-1.601 3.303 1.223-1.299 1.97-3.048 1.97-4.971 0-3.994-3.243-7.233-7.242-7.233-2.818 0-5.26 1.6-6.469 3.933.78-2.912 3.428-5.06 6.577-5.06 3.75 0 6.79 3.035 6.79 6.78 0 2.606-1.468 4.868-3.616 6.002a4.163 4.163 0 0 0 2.285-3.724c0-2.293-1.853-4.153-4.145-4.153-1.348 0-2.558.733-3.18 1.918l1.306-3.03Z"
-                  fill="currentColor"></path>
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M22.155 12.056c-.622 1.185-1.832 1.918-3.18 1.918-2.292 0-4.145-1.86-4.145-4.153 0-1.34.626-2.54 1.601-3.303-1.223 1.299-1.97 3.048-1.97 4.971 0 3.994 3.243 7.233 7.242 7.233 2.818 0 5.26-1.6 6.469-3.933-.78 2.912-3.428 5.06-6.577 5.06-3.75 0-6.79-3.035-6.79-6.78 0-2.606 1.468-4.868 3.616-6.002a4.163 4.163 0 0 0-2.285 3.724c0 2.293 1.853 4.153 4.145 4.153 1.348 0 2.558-.733 3.18-1.918l-1.306 3.03Z"
-                  fill="currentColor"></path>
-              </svg>
-              <span class="relative">
-                Astro
-                <span
-                  class="absolute bottom-0 left-0 h-0.5 w-0 bg-[#FF5D01] transition-all duration-300 group-hover:w-full"
-                >
-                </span>
               </span>
             </a>
           </div>

src/components/ui/sections/WeatherSection.astro

@@ -1,8 +1,8 @@
 ---
 import { getFiveDayForecast } from '@support/weather';
 
-const { latitude = "44.95", longitude = "-93.09", cityName = "St. Paul, Minnesota" } = Astro.props;
+const { latitude = "44.95", longitude = "-93.09", cityName = "St. Paul, Minnesota", timezone = "America/Chicago" } = Astro.props;
-const { forecastDays, error } = await getFiveDayForecast(latitude, longitude);
+const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, timezone);
 
 const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
 const bgColorClasses = 'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
@@ -16,7 +16,7 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
     </h1>
     <div class="smooth-reveal mx-auto mt-5 max-w-3xl text-center">
       <p class="text-lg text-pretty text-neutral-600 dark:text-neutral-400">
-        5 day forecast for {cityName}
+        Five day forecast for {cityName}
       </p>
     </div>
   </div>

src/lib/directusTypes.ts

@@ -28,6 +28,7 @@ export type Weather = {
   location: string;
   latitude: string;
   longitude: string;
+  timezone: string;
 }
 
 export type Post = {

src/pages/index.astro

@@ -45,10 +45,13 @@ const weather = await directus.request(readSingleton('site_weather'));
   <FeaturesSection />
 
   <WeatherSection
+    server:defer
     latitude={weather.latitude} 
     longitude={weather.longitude} 
     cityName={weather.location}
-  />
+    timezone={weather.timezone}
+  >
+  </WeatherSection>
 
   <LatestPosts />
 
@@ -109,5 +112,11 @@ const weather = await directus.request(readSingleton('site_weather'));
     };
 
     animateContent();
+
+    const observer = new MutationObserver(() => {
+      animateContent();
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
   });
 </script>

src/support/weather.ts

@@ -28,40 +28,38 @@ const getWeatherInfo = (code: number) => {
   return { label: 'Unknown', icon: '03d' };
 };
 
-const getDayName = (dateStr: string) => {
+export const getDayName = (dateStr: string) => {
-  return new Date(dateStr).toLocaleDateString('en-US', { weekday: 'short' });
+  const date = new Date(`${dateStr}T00:00:00`);
+  return date.toLocaleDateString('en-US', { weekday: 'short' });
 };
 
-async function getFiveDayForecast(latitude: string, longitude: string): Promise<WeatherResult> {
+async function getFiveDayForecast(latitude: string, longitude: string, timezone: string): Promise<WeatherResult> {
-  const url = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=weather_code,temperature_2m_max&timezone=auto&temperature_unit=fahrenheit`;
+  const url = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=weather_code,temperature_2m_max&timezone=${timezone}&temperature_unit=fahrenheit`;
+  let data: any;
 
   try {
     const response = await fetch(url);
     if (!response.ok) throw new Error("Weather service unavailable");
-    
+    data = await response.json();
-    const data = await response.json();
+
-    
+  } catch (e: unknown) {
-    const forecastDays = data.daily.time.map((date: string, index: number): DayForecast => {
+    return { forecastDays: [], error: "Failed to load weather" };
-      const code = data.daily.weather_code[index];
+  }
-      const info = getWeatherInfo(code);
+
-      
+  const forecastDays = data.daily.time
+    .slice(0, 5)
+    .map((date: string, index: number): DayForecast => {
       return {
         date,
         temp: Math.round(data.daily.temperature_2m_max[index]),
-        code,
+        code: data.daily.weather_code[index],
-        label: info.label,
+        label: getWeatherInfo(data.daily.weather_code[index]).label,
-        icon: info.icon,
+        icon: getWeatherInfo(data.daily.weather_code[index]).icon,
-        dayName: getDayName(date)
+        dayName: getDayName(date) 
       };
-    }).slice(0, 5);
+    });
 
-    return { forecastDays, error: null };
+  return { forecastDays, error: null };
-  } catch (e: unknown) {
-    return { 
-      forecastDays: [], 
-      error: e instanceof Error ? e.message : "An unexpected error occurred" 
-    };
-  }
 }
 
 export { getFiveDayForecast };