/** @jsxImportSource https://esm.sh/react */ import React from "https://esm.sh/react"; import { renderToString } from "https://esm.sh/react-dom/server"; async function getWeather(latitude: number, longitude: number) { const url = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true&temperature_unit=fahrenheit`; try { const response = await fetch(url); if (!response.ok) { throw new Error(`Weather API responded with status: ${response.status}`); } const data = await response.json(); console.log(data.current_weather); return data.current_weather; } catch (error) { console.error("Error fetching weather:", error); return null; } } function getWeatherCondition(code: number): string { const conditions: { [key: number]: string } = { 0: "Clear sky", 1: "Mainly clear", 2: "Partly cloudy", 3: "Overcast", 45: "Foggy", 48: "Frosty fog", 51: "Light drizzle", 53: "Moderate drizzle", 55: "Heavy drizzle", 61: "Light rain", 63: "Moderate rain", 65: "Heavy rain", 71: "Light snow", 73: "Moderate snow", 75: "Heavy snow", 95: "Thunderstorm", }; return conditions[code] || "Unknown"; } function WeatherDisplay({ weather }: { weather: any }) { const currentDate = new Date().toLocaleDateString("en-US", { timeZone: "America/Los_Angeles", weekday: "long", year: "numeric", month: "long", day: "numeric", }); const currentTime = new Date().toLocaleTimeString("en-US", { timeZone: "America/Los_Angeles", hour: "numeric", minute: "numeric", }); return ( Current Weather

Current Weather

{currentTime}

{currentDate}

{weather ? (

Condition: {getWeatherCondition(weather.weathercode)}

{Math.round(weather.temperature)}°F

Wind Speed: {Math.round(weather.windspeed)} mph

) :

Unable to fetch weather data

}

); } async function generateImage(html: string): Promise { const apiKey = Deno.env.get("API_FLASH_KEY"); const encodedHtml = encodeURIComponent(html); const url = `https://api.apiflash.com/v1/urltoimage?access_key=${apiKey}&url=https://michaelwschultz-generateframeimage.web.val.run&width=800&height=480&format=png&fresh=true`; try { const response = await fetch(url); if (!response.ok) { throw new Error(`APIFlash responded with status: ${response.status}`); } return response; } catch (error) { console.error("Error generating image:", error); return new Response("Failed to generate image", { status: 500 }); } } export default async function(req: Request) { const url = new URL(req.url); const isImageRequest = url.searchParams.get("generate") === "image"; const latitude = 37.5296; const longitude = -122.0402; const weather = await getWeather(latitude, longitude); const html = renderToString(); if (isImageRequest) { const imageResponse = await generateImage(html); return new Response(imageResponse.body, { status: imageResponse.status, headers: { "Content-Type": "image/png", "Cache-Control": "no-store, max-age=0", }, }); } else { return new Response(html, { headers: { "Content-Type": "text/html", "Cache-Control": "no-store, max-age=0", }, }); } }

generateframeImage