[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_286":287,"_288":289},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_211":-5,"_20":212,"_22":213,"_214":215,"_216":217,"_26":218,"_24":219,"_220":221,"_222":223,"_224":51,"_225":226,"_227":75,"_228":-5,"_229":-5,"_230":231},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5,"_31":32,"_33":34,"_35":-5},"handle","vleytman","name","compact-weather","branchName","main","version","path","frontend","project",{"_36":165,"_13":14,"_38":166,"_49":-5,"_167":51,"_52":53,"_168":53,"_169":170,"_171":172,"_173":174,"_175":112,"_176":75,"_177":-5,"_178":-5,"_179":77,"_56":180,"_181":-5,"_182":-5,"_183":-5,"_184":-5,"_185":186,"_187":186,"_188":189,"_190":189,"_191":189,"_192":186,"_193":186,"_194":195,"_196":197,"_198":199,"_50":51},"tree",[107,108,109],"file",{"_36":104,"_70":71,"_66":69,"_13":19,"_80":-5,"_78":102,"_17":77,"_68":-5,"_38":105,"_72":73,"_83":-5,"_18":106},"contents",[60,61,62,63],"upstream",{"_36":37,"_38":39,"_40":41,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"pull","ahead",22,"behind",2,"envVars","id","961078ea-f528-11ef-aa68-569c3dd06744","createdAt",["D",1740674013689],"updatedAt",["D",1785420707976],"projectId","96102714-f528-11ef-aa68-569c3dd06744",91,"forkedBranchId","forkedBranchVersion","lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","deletedAt","isOwned",false,"privacy","public","userHandle","templates","orgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","react-hono-starter",{"_36":98,"_13":99,"_66":100,"_68":69,"_70":71,"_72":73,"_74":75,"_38":101,"_17":77,"_78":102,"_80":-5,"_82":51,"_83":-5,"_18":103},{"_36":92,"_13":93,"_66":94,"_68":69,"_70":71,"_72":73,"_74":75,"_38":95,"_17":77,"_78":24,"_80":96,"_82":51,"_83":-5,"_18":97},{"_36":85,"_13":86,"_66":87,"_68":69,"_70":71,"_72":88,"_74":75,"_38":89,"_17":73,"_78":24,"_80":90,"_82":51,"_83":-5,"_18":91},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_38":76,"_17":77,"_78":79,"_80":81,"_82":51,"_83":-5,"_18":84},"7c8cbcbe-eaf8-432b-a0f3-1132733fb19c","index.tsx","fileId","019e9818-1d57-7659-9ed7-54eb3e3f9932","parentId","019e9818-1d57-7659-9ed7-5abff0f8d516","branchId","d75622ef-6e18-4bcf-a6c4-bc4551d27a20","branchVersion",1,"latest",true,["D",1780668177660],0,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();","deleted","label",[19,65],"b10cb1ee-5ae4-4293-8931-67e54a8ba178","index.html","019e9818-1d57-7659-9ed7-5007f913addd",4,["D",1780668384704],"\n\n \n \n \n \n Compact Weather\n \n \n \n \n

\n \n \n \n\n",[19,86],"9b39aa26-54b9-4f92-9a0a-45251b59cf86","favicon.svg","019e9818-1d57-7659-9ed7-4f2a9111ec40",["D",1780668177660],"\n",[19,93],"6507efe3-2e90-44e5-bc5e-5d7c9d9d9ffe","components","019e9818-1d57-7659-9ed7-4a549c0d1685",["D",1780668177660],"directory",[19,99],"e0a21e60-502c-4891-acec-16436e2d1da4",["D",1780668177660],[19],{"_36":104,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":128,"_17":77,"_78":102,"_80":-5,"_82":51,"_83":-5,"_118":129,"_18":130},{"_36":121,"_13":122,"_66":123,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":124,"_17":77,"_78":24,"_80":125,"_82":51,"_83":-5,"_118":126,"_18":127},{"_36":110,"_13":111,"_66":112,"_68":-5,"_70":71,"_72":113,"_74":75,"_38":114,"_17":115,"_78":116,"_80":117,"_82":51,"_83":-5,"_118":119,"_18":120},"0e05d4d8-5a5f-4189-86bb-51581bc45773","index.ts","019e9818-1d57-7659-9ed7-61e467ccf2d8",16,["D",1780673632895],9,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\nconst DEFAULT_CITY = \"London\";\n\ntype WeatherKind =\n | \"clear-day\"\n | \"clear-night\"\n | \"partly-cloudy\"\n | \"cloudy\"\n | \"fog\"\n | \"rain\"\n | \"snow\"\n | \"storm\"\n | \"mixed\";\n\ntype WeatherProfile = {\n kind: WeatherKind;\n label: string;\n detail: string;\n accent: string;\n};\n\ntype WttrResponse = {\n current_condition?: Array<{\n observation_time: string;\n weatherCode: string;\n humidity: string;\n temp_C: string;\n windspeedKmph: string;\n weatherDesc?: Array<{ value: string }>;\n }>;\n nearest_area?: Array<{\n areaName?: Array<{ value: string }>;\n country?: Array<{ value: string }>;\n region?: Array<{ value: string }>;\n latitude?: string;\n longitude?: string;\n }>;\n weather?: Array<{\n astronomy?: Array<{\n sunrise?: string;\n sunset?: string;\n }>;\n }>;\n};\n\nfunction parseClockToMinutes(value: string) {\n const [timePart, period] = value.trim().split(/\\s+/);\n const [hoursRaw, minutesRaw] = timePart.split(\":\");\n let hours = Number(hoursRaw);\n const minutes = Number(minutesRaw);\n\n if (Number.isNaN(hours) || Number.isNaN(minutes)) {\n throw new Error(`Invalid clock value: ${value}`);\n }\n\n const suffix = period?.toUpperCase();\n if (suffix === \"PM\" && hours !== 12) {\n hours += 12;\n } else if (suffix === \"AM\" && hours === 12) {\n hours = 0;\n }\n\n return hours * 60 + minutes;\n}\n\nfunction isDaylight(observationTime: string, sunrise?: string, sunset?: string) {\n if (!sunrise || !sunset) {\n return true;\n }\n\n try {\n const current = parseClockToMinutes(observationTime);\n const start = parseClockToMinutes(sunrise);\n const end = parseClockToMinutes(sunset);\n return current >= start && current < end;\n } catch {\n return true;\n }\n}\n\nfunction locationLabel(place: { name: string; admin1?: string | null; country?: string | null }) {\n return [place.name, place.admin1, place.country].filter(Boolean).join(\", \");\n}\n\nfunction getWeatherProfile(code: number, isDay: boolean): WeatherProfile {\n if (code === 113) {\n return isDay\n ? {\n kind: \"clear-day\",\n label: \"Clear sky\",\n detail: \"Bright and open\",\n accent: \"from-amber-400/20 via-orange-400/10 to-sky-500/10\",\n }\n : {\n kind: \"clear-night\",\n label: \"Clear night\",\n detail: \"Calm and crisp\",\n accent: \"from-indigo-400/20 via-slate-500/10 to-sky-500/10\",\n };\n }\n\n if (code === 116) {\n return {\n kind: \"partly-cloudy\",\n label: \"Partly cloudy\",\n detail: \"Sunlight breaking through\",\n accent: \"from-cyan-400/15 via-blue-500/10 to-slate-400/10\",\n };\n }\n\n if ([119, 122].includes(code)) {\n return {\n kind: \"cloudy\",\n label: \"Cloudy\",\n detail: \"Heavy cloud cover\",\n accent: \"from-slate-400/15 via-slate-500/10 to-sky-500/10\",\n };\n }\n\n if ([143, 248, 260].includes(code)) {\n return {\n kind: \"fog\",\n label: \"Foggy\",\n detail: \"Low visibility\",\n accent: \"from-slate-300/15 via-slate-400/10 to-cyan-500/10\",\n };\n }\n\n if ([176, 179, 182, 185, 263, 266, 281, 284, 293, 296, 299, 302, 305, 308, 311, 314, 353, 356, 359, 362, 365].includes(code)) {\n return {\n kind: \"rain\",\n label: \"Rainy\",\n detail: \"Showers in the area\",\n accent: \"from-sky-400/20 via-blue-500/10 to-indigo-600/10\",\n };\n }\n\n if ([200, 386, 389, 392, 395].includes(code)) {\n return {\n kind: \"storm\",\n label: \"Thunderstorm\",\n detail: \"Unstable conditions\",\n accent: \"from-violet-500/20 via-slate-600/10 to-sky-500/10\",\n };\n }\n\n if ([227, 230, 323, 326, 329, 332, 335, 338, 350, 368, 371, 374, 377].includes(code)) {\n return {\n kind: \"snow\",\n label: \"Snowy\",\n detail: \"Cold precipitation\",\n accent: \"from-cyan-200/20 via-slate-400/10 to-blue-400/10\",\n };\n }\n\n return {\n kind: \"mixed\",\n label: \"Variable\",\n detail: \"Mixed conditions\",\n accent: \"from-slate-400/15 via-cyan-500/10 to-sky-500/10\",\n };\n}\n\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/api/weather\", async (c) => {\n try {\n const city = (c.req.query(\"city\") ?? DEFAULT_CITY).trim();\n const weatherUrl = new URL(`https://wttr.in/${encodeURIComponent(city)}`);\n weatherUrl.searchParams.set(\"format\", \"j1\");\n\n const weatherRes = await fetch(weatherUrl.toString(), {\n headers: {\n accept: \"application/json\",\n },\n });\n\n if (!weatherRes.ok) {\n return c.json({ error: \"Weather data is temporarily unavailable.\" }, 502);\n }\n\n const weather = await weatherRes.json() as WttrResponse;\n const current = weather.current_condition?.[0];\n const area = weather.nearest_area?.[0];\n const astronomy = weather.weather?.[0]?.astronomy?.[0];\n\n if (!current || !area) {\n return c.json({ error: \"Weather data is missing for that location.\" }, 502);\n }\n\n const cityName = area.areaName?.[0]?.value ?? city;\n const country = area.country?.[0]?.value ?? null;\n const admin1 = area.region?.[0]?.value ?? null;\n const latitude = Number(area.latitude);\n const longitude = Number(area.longitude);\n const weatherCode = Number(current.weatherCode);\n const sunrise = astronomy?.sunrise;\n const sunset = astronomy?.sunset;\n const isDay = codeIsClear(weatherCode) ? isDaylight(current.observation_time, sunrise, sunset) : true;\n const profile = getWeatherProfile(weatherCode, isDay);\n\n return c.json({\n city: cityName,\n location: locationLabel({ name: cityName, admin1, country }),\n country,\n admin1,\n latitude: Number.isNaN(latitude) ? null : latitude,\n longitude: Number.isNaN(longitude) ? null : longitude,\n timezone: null,\n current: {\n temperatureC: Number(current.temp_C),\n windKph: Number(current.windspeedKmph),\n humidityPct: Number.isNaN(Number(current.humidity)) ? null : Number(current.humidity),\n weatherCode,\n isDay: profile.kind === \"clear-day\" || profile.kind === \"clear-night\" ? isDay : true,\n time: current.observation_time,\n },\n });\n } catch (err) {\n console.error(\"/api/weather failed\", err);\n const message = err instanceof Error ? err.message : \"Weather lookup failed.\";\n return c.json({ error: message }, 500);\n }\n});\n\napp.onError((err, c) => {\n console.error(\"Unhandled app error\", err);\n return c.json({ error: err instanceof Error ? err.message : \"Internal server error.\" }, 500);\n});\n\nfunction codeIsClear(code: number) {\n return code === 113;\n}\n\nexport default app.fetch;\n","children",[],[111],"67688082-b7ad-43c1-866c-e67ad1bc58bb","README.md","019e9818-1d57-7659-9ed7-5d972fec3efd",["D",1780668177660],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[],[122],["D",1780668177660],[131,132,133,134],[19],{"_36":98,"_13":99,"_66":100,"_68":69,"_70":71,"_72":73,"_74":75,"_38":144,"_17":77,"_78":102,"_80":-5,"_82":51,"_83":-5,"_118":145,"_18":146},{"_36":92,"_13":93,"_66":94,"_68":69,"_70":71,"_72":73,"_74":75,"_38":141,"_17":77,"_78":24,"_80":96,"_82":51,"_83":-5,"_118":142,"_18":143},{"_36":85,"_13":86,"_66":87,"_68":69,"_70":71,"_72":88,"_74":75,"_38":138,"_17":73,"_78":24,"_80":90,"_82":51,"_83":-5,"_118":139,"_18":140},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_38":135,"_17":77,"_78":79,"_80":81,"_82":51,"_83":-5,"_118":136,"_18":137},["D",1780668177660],[],[19,65],["D",1780668384704],[],[19,86],["D",1780668177660],[],[19,93],["D",1780668177660],[147,148],[19,99],{"_36":156,"_13":157,"_66":158,"_68":100,"_70":71,"_72":159,"_74":75,"_38":160,"_17":161,"_78":79,"_80":162,"_82":51,"_83":-5,"_118":163,"_18":164},{"_36":149,"_13":150,"_66":151,"_68":100,"_70":71,"_72":73,"_74":75,"_38":152,"_17":77,"_78":79,"_80":153,"_82":51,"_83":-5,"_118":154,"_18":155},"effb9daf-1276-4d2e-8f80-67eb47cb5d8b","Counter.tsx","019e9818-1d57-7659-9ed7-46e266293237",["D",1780668177660],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[19,99,150],"5b2ebe47-1342-4504-acf5-0af06d012db8","App.tsx","019e9818-1d57-7659-9ed7-416109004207",23,["D",1780674024375],12,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst DEFAULT_CITY = \"New York\";\n\ntype OpenMeteoPlace = {\n name: string;\n latitude: number;\n longitude: number;\n country?: string;\n admin1?: string;\n};\n\ntype WeatherData = {\n city: string;\n locationLabel: string;\n latitude: number;\n longitude: number;\n temperature: number;\n apparentTemperature: number;\n relativeHumidity: number;\n windSpeed: number;\n precipitation: number;\n cloudCover: number;\n weatherCode: number;\n isDay: boolean;\n description: string;\n updatedAt: string;\n};\n\ntype Status = \"idle\" | \"loading\" | \"ready\" | \"error\";\n\nfunction locationLabel(place: OpenMeteoPlace) {\n return [place.name, place.admin1, place.country].filter(Boolean).join(\", \");\n}\n\nfunction weatherDescription(code: number) {\n if (code === 0) return \"Clear sky\";\n if ([1, 2].includes(code)) return \"Partly cloudy\";\n if (code === 3) return \"Overcast\";\n if ([45, 48].includes(code)) return \"Foggy\";\n if ([51, 53, 55, 56, 57].includes(code)) return \"Drizzle\";\n if ([61, 63, 65, 66, 67, 80, 81, 82].includes(code)) return \"Rain\";\n if ([71, 73, 75, 77, 85, 86].includes(code)) return \"Snow\";\n if ([95, 96, 99].includes(code)) return \"Thunderstorm\";\n return \"Changing conditions\";\n}\n\nasync function fetchWeather(city: string, signal?: AbortSignal): Promise {\n const trimmedCity = city.trim();\n if (!trimmedCity) {\n throw new Error(\"Enter a city name.\");\n }\n\n const geocodeUrl = new URL(\"https://geocoding-api.open-meteo.com/v1/search\");\n geocodeUrl.searchParams.set(\"name\", trimmedCity);\n geocodeUrl.searchParams.set(\"count\", \"1\");\n geocodeUrl.searchParams.set(\"language\", \"en\");\n geocodeUrl.searchParams.set(\"format\", \"json\");\n\n const geocodeResponse = await fetch(geocodeUrl, { signal });\n if (!geocodeResponse.ok) {\n throw new Error(`City lookup failed with HTTP ${geocodeResponse.status}.`);\n }\n\n const geocodeData = await geocodeResponse.json();\n const place = geocodeData.results?.[0] as OpenMeteoPlace | undefined;\n if (!place) {\n throw new Error(`No matching city found for \"${trimmedCity}\".`);\n }\n\n const forecastUrl = new URL(\"https://api.open-meteo.com/v1/forecast\");\n forecastUrl.searchParams.set(\"latitude\", String(place.latitude));\n forecastUrl.searchParams.set(\"longitude\", String(place.longitude));\n forecastUrl.searchParams.set(\n \"current\",\n \"temperature_2m,relative_humidity_2m,apparent_temperature,is_day,precipitation,weather_code,cloud_cover,wind_speed_10m\",\n );\n forecastUrl.searchParams.set(\"temperature_unit\", \"fahrenheit\");\n forecastUrl.searchParams.set(\"wind_speed_unit\", \"mph\");\n forecastUrl.searchParams.set(\"timezone\", \"auto\");\n\n const forecastResponse = await fetch(forecastUrl, { signal });\n if (!forecastResponse.ok) {\n throw new Error(`Weather request failed with HTTP ${forecastResponse.status}.`);\n }\n\n const forecastData = await forecastResponse.json();\n const current = forecastData.current;\n if (!current) {\n throw new Error(\"Open-Meteo did not return current weather data.\");\n }\n\n return {\n city: place.name,\n locationLabel: locationLabel(place),\n latitude: place.latitude,\n longitude: place.longitude,\n temperature: current.temperature_2m,\n apparentTemperature: current.apparent_temperature,\n relativeHumidity: current.relative_humidity_2m,\n windSpeed: current.wind_speed_10m,\n precipitation: current.precipitation,\n cloudCover: current.cloud_cover,\n weatherCode: current.weather_code,\n isDay: Boolean(current.is_day),\n description: weatherDescription(current.weather_code),\n updatedAt: current.time,\n };\n}\n\nfunction ConditionIcon({ code, isDay }: { code: number; isDay: boolean }) {\n const rain = [51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82].includes(code);\n const snow = [71, 73, 75, 77, 85, 86].includes(code);\n const storm = [95, 96, 99].includes(code);\n const fog = [45, 48].includes(code);\n const cloudy = [1, 2, 3].includes(code) || rain || snow || storm;\n\n return (\n \n );\n}\n\nfunction Stat({ label, value }: { label: string; value: string }) {\n return (\n

\n {label}\n {value}\n

\n );\n}\n\nexport function App() {\n const [city, setCity] = useState(DEFAULT_CITY);\n const [weather, setWeather] = useState(null);\n const [status, setStatus] = useState(\"idle\");\n const [error, setError] = useState(null);\n const controllerRef = useRef(null);\n\n async function loadWeather(nextCity: string) {\n controllerRef.current?.abort();\n const controller = new AbortController();\n controllerRef.current = controller;\n setStatus(\"loading\");\n setError(null);\n\n try {\n const data = await fetchWeather(nextCity, controller.signal);\n setWeather(data);\n setCity(data.city);\n setStatus(\"ready\");\n } catch (err) {\n if ((err as Error).name === \"AbortError\") return;\n setError(err instanceof Error ? err.message : \"Could not load weather.\");\n setStatus(\"error\");\n }\n }\n\n useEffect(() => {\n void loadWeather(DEFAULT_CITY);\n return () => controllerRef.current?.abort();\n }, []);\n\n function onSubmit(event: { preventDefault: () => void }) {\n event.preventDefault();\n void loadWeather(city);\n }\n\n const updatedAt = weather\n ? new Intl.DateTimeFormat(undefined, { dateStyle: \"medium\", timeStyle: \"short\" }).format(new Date(weather.updatedAt))\n : null;\n\n return (\n

\n \n

Live conditions

Compact Weather

\n Source\n

\n\n

{weather?.locationLabel ?? \"Looking up weather\"}

{weather ? `${Math.round(weather.temperature)}°F` : status === \"loading\" ? \"Loading\" : \"Weather\"}

{weather?.description ?? \"Current local conditions from Open-Meteo\"}

\n {weather ? :

}\n

\n\n \n\n {error ?

{error}

: null}\n\n

\n \n \n \n \n

\n\n \n

\n );\n}\n\nexport default App;\n\nconst styles = `\n :root {\n color: #f8fafc;\n background: #0f172a;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n }\n\n * { box-sizing: border-box; }\n body { margin: 0; min-height: 100vh; background: linear-gradient(135deg, #0f172a 0%, #155e75 52%, #164e63 100%); }\n main { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; }\n\n .shell {\n width: min(760px, 100%);\n border: 1px solid rgba(255, 255, 255, 0.18);\n border-radius: 8px;\n padding: clamp(20px, 4vw, 34px);\n background: rgba(15, 23, 42, 0.72);\n box-shadow: 0 28px 80px rgba(2, 6, 23, 0.42);\n backdrop-filter: blur(18px);\n }\n\n .topbar, .weather-panel, .search-row, .stats { display: flex; }\n .topbar { align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }\n .topbar a { color: #a7f3d0; text-decoration: none; font-weight: 700; }\n .eyebrow { margin: 0 0 6px; color: #67e8f9; font-size: 0.78rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }\n h1, h2, p { margin: 0; }\n h1 { font-size: clamp(2rem, 5vw, 3.9rem); line-height: 0.96; }\n\n .weather-panel { align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }\n .location { color: #bae6fd; font-size: clamp(1rem, 2.4vw, 1.2rem); font-weight: 700; }\n h2 { margin-top: 8px; font-size: clamp(4.2rem, 12vw, 7.5rem); line-height: 0.88; }\n .condition { margin-top: 14px; color: #d1fae5; font-size: clamp(1.05rem, 2.6vw, 1.4rem); }\n\n .icon-wrap { flex: 0 0 min(36vw, 180px); display: grid; place-items: center; }\n .condition-icon { width: min(36vw, 180px); height: min(36vw, 180px); filter: drop-shadow(0 24px 28px rgba(2, 6, 23, 0.3)); }\n .icon-placeholder { width: 132px; height: 132px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }\n\n .search { margin-top: 4px; }\n label { display: block; margin-bottom: 8px; color: #e0f2fe; font-size: 0.88rem; font-weight: 800; }\n .search-row { gap: 10px; align-items: stretch; }\n input, button { min-height: 46px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.18); font: inherit; }\n input { min-width: 0; flex: 1; padding: 0 14px; color: #f8fafc; background: rgba(15, 23, 42, 0.68); }\n input::placeholder { color: #94a3b8; }\n button { padding: 0 18px; color: #052e16; background: #86efac; border: 0; font-weight: 900; cursor: pointer; }\n button:disabled { cursor: wait; opacity: 0.72; }\n\n .error { margin-top: 12px; color: #fecaca; font-weight: 700; }\n .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }\n .stat { padding: 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); }\n .stat span { display: block; color: #bae6fd; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; }\n .stat strong { display: block; margin-top: 7px; color: #ffffff; font-size: 1.25rem; }\n\n footer { margin-top: 20px; color: #cbd5e1; font-size: 0.9rem; }\n\n @media (max-width: 620px) {\n main { padding: 18px 12px; place-items: start center; }\n .topbar { align-items: flex-start; }\n .weather-panel { align-items: flex-start; flex-direction: column; }\n .icon-wrap { align-self: center; }\n .search-row { flex-direction: column; }\n button { width: 100%; }\n .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n }\n`;\n",[],[19,99,157],"242bc840-ace8-4a6c-9b05-bf811b9ea470",["D",1780668177660],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789567199&sig=be2da3e537d6269cefeedcb88843ac66f83d7a4623f50e71633938e44918ec3c","userId","c2ff6847-db11-4af5-8280-787f3ae64187","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","09b37715-66bc-4bc0-ad73-e2010c200a88","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_210":206},"org",{"_11":12,"_204":-5,"_205":206,"_173":174,"_207":208,"_209":51},"branch",{"_17":159,"_13":16,"_36":71,"_42":165,"_45":37,"_46":200,"_201":53,"_202":43,"_203":57,"_58":14,"_54":12},89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZXp0V3ljUTFaa1ZmM2ljNlFTVnl2VjU5UFYifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":165,"_13":14,"_38":282,"_49":-5,"_167":51,"_52":53,"_168":53,"_169":170,"_171":172,"_173":174,"_175":112,"_176":75,"_177":-5,"_178":-5,"_179":77,"_56":180,"_181":-5,"_182":-5,"_183":-5,"_184":-5,"_185":186,"_187":186,"_188":189,"_190":189,"_191":189,"_192":186,"_193":186,"_194":283,"_196":284,"_198":285,"_50":51},[255,262,263],"files",[255,256,257,258,259,260,261,262,263],"counts",{"_246":77,"_247":73,"_248":77,"_35":249,"_250":251},[238,239,240,241],{"_36":104,"_70":71,"_66":69,"_13":19,"_80":-5,"_78":102,"_17":77,"_68":-5,"_38":236,"_72":73,"_83":-5,"_18":237},"upstreamProject",{"_36":43,"_13":59,"_169":170,"_171":172,"_52":53,"_194":234},"upstreamBranch",{"_36":37,"_38":232,"_40":233,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],{"_11":55,"_210":235},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789567199&sig=d8af4f1d5d6ef07a152f6225f86a0227f22fe92650a7f9572d94a5f64256bba9",["D",1780668177660],[19],{"_36":98,"_13":99,"_66":100,"_68":69,"_70":71,"_72":73,"_74":75,"_38":101,"_17":77,"_78":102,"_80":-5,"_82":51,"_83":-5,"_18":245},{"_36":92,"_13":93,"_66":94,"_68":69,"_70":71,"_72":73,"_74":75,"_38":95,"_17":77,"_78":24,"_80":96,"_82":51,"_83":-5,"_18":244},{"_36":85,"_13":86,"_66":87,"_68":69,"_70":71,"_72":88,"_74":75,"_38":89,"_17":73,"_78":24,"_80":90,"_82":51,"_83":-5,"_18":243},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_38":76,"_17":77,"_78":79,"_80":81,"_82":51,"_83":-5,"_18":242},[19,65],[19,86],[19,93],[19,99],"pulls","branches","forks",{"_252":77,"_254":77},"connections",{"_252":77,"_253":77},"count","unfilledCount","emptyCount",{"_36":104,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":128,"_17":77,"_78":102,"_80":-5,"_82":51,"_83":-5,"_118":280,"_18":281},{"_36":98,"_13":99,"_66":100,"_68":69,"_70":71,"_72":73,"_74":75,"_38":144,"_17":77,"_78":102,"_80":-5,"_82":51,"_83":-5,"_118":278,"_18":279},{"_36":156,"_13":157,"_66":158,"_68":100,"_70":71,"_72":159,"_74":75,"_38":160,"_17":161,"_78":79,"_80":162,"_82":51,"_83":-5,"_118":276,"_18":277},{"_36":149,"_13":150,"_66":151,"_68":100,"_70":71,"_72":73,"_74":75,"_38":152,"_17":77,"_78":79,"_80":153,"_82":51,"_83":-5,"_118":274,"_18":275},{"_36":92,"_13":93,"_66":94,"_68":69,"_70":71,"_72":73,"_74":75,"_38":141,"_17":77,"_78":24,"_80":96,"_82":51,"_83":-5,"_118":272,"_18":273},{"_36":85,"_13":86,"_66":87,"_68":69,"_70":71,"_72":88,"_74":75,"_38":138,"_17":73,"_78":24,"_80":90,"_82":51,"_83":-5,"_118":270,"_18":271},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_38":135,"_17":77,"_78":79,"_80":81,"_82":51,"_83":-5,"_118":268,"_18":269},{"_36":121,"_13":122,"_66":123,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":124,"_17":77,"_78":24,"_80":125,"_82":51,"_83":-5,"_118":266,"_18":267},{"_36":110,"_13":111,"_66":112,"_68":-5,"_70":71,"_72":113,"_74":75,"_38":114,"_17":115,"_78":116,"_80":117,"_82":51,"_83":-5,"_118":264,"_18":265},[],[111],[],[122],[],[19,65],[],[19,86],[],[19,93],[],[19,99,150],[],[19,99,157],[257,258],[19,99],[256,259,260,261],[19],["D",1780668177660],{"_11":12,"_210":206},{"_11":12,"_204":-5,"_205":206,"_173":174,"_207":208,"_209":51},{"_17":159,"_13":16,"_36":71,"_42":165,"_45":37,"_46":200,"_201":53,"_202":43,"_203":57,"_58":14,"_54":12},"ctx",{"_194":-5,"_229":319,"_320":321,"_322":323,"_324":51,"_325":51,"_326":51,"_327":75,"_328":-5,"_329":-7,"_330":-7,"_331":77,"_332":51,"_333":51,"_334":-5,"_335":51,"_336":51,"_337":51,"_338":-5},"ENV",{"_290":291,"_292":293,"_294":16,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]