\n \n \n \n","label",[168,67],"frontend","pulls","branches","forks","envVars",{"_176":26,"_178":26},"connections",{"_176":26,"_177":26},"count","unfilledCount","emptyCount",{"_32":234,"_13":168,"_65":160,"_42":-5,"_34":35,"_161":39,"_162":86,"_36":235,"_38":26,"_68":236,"_164":-5,"_69":24,"_166":-5,"_192":237,"_17":238},{"_32":227,"_13":228,"_65":229,"_42":160,"_34":35,"_161":39,"_162":86,"_36":230,"_38":26,"_68":206,"_164":231,"_69":24,"_166":-5,"_192":232,"_17":233},{"_32":159,"_13":67,"_65":66,"_42":160,"_34":35,"_161":39,"_162":86,"_36":224,"_38":26,"_68":21,"_164":165,"_69":24,"_166":-5,"_192":225,"_17":226},{"_32":217,"_13":218,"_65":219,"_42":160,"_34":35,"_161":39,"_162":86,"_36":220,"_38":26,"_68":206,"_164":221,"_69":24,"_166":-5,"_192":222,"_17":223},{"_32":210,"_13":211,"_65":212,"_42":160,"_34":35,"_161":39,"_162":86,"_36":213,"_38":26,"_68":21,"_164":214,"_69":24,"_166":-5,"_192":215,"_17":216},{"_32":202,"_13":203,"_65":204,"_42":160,"_34":35,"_161":39,"_162":86,"_36":205,"_38":26,"_68":206,"_164":207,"_69":24,"_166":-5,"_192":208,"_17":209},{"_32":195,"_13":196,"_65":197,"_42":-5,"_34":35,"_161":39,"_162":86,"_36":198,"_38":26,"_68":21,"_164":199,"_69":24,"_166":-5,"_192":200,"_17":201},{"_32":187,"_13":188,"_65":84,"_42":-5,"_34":35,"_161":39,"_162":86,"_36":189,"_38":26,"_68":190,"_164":191,"_69":24,"_166":-5,"_192":193,"_17":194},"1ec0140e-4c83-11f1-8655-ee650bb23af1","index.ts",["D",1778426146463],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\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 const lat = c.req.query(\"lat\");\n const lon = c.req.query(\"lon\");\n const units = c.req.query(\"units\") || \"celsius\";\n\n if (!lat || !lon) return c.json({ error: \"lat and lon required\" }, 400);\n\n const tempUnit = units === \"fahrenheit\" ? \"&temperature_unit=fahrenheit\" : \"\";\n const windUnit = units === \"fahrenheit\" ? \"&wind_speed_unit=mph\" : \"\";\n\n const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&hourly=temperature_2m,apparent_temperature,precipitation_probability,wind_speed_10m,weather_code&daily=temperature_2m_max,temperature_2m_min,apparent_temperature_max,apparent_temperature_min,precipitation_probability_max,wind_speed_10m_max,weather_code,sunrise,sunset&past_days=1&forecast_days=2${tempUnit}${windUnit}&timezone=auto`;\n\n const res = await fetch(url);\n const data = await res.json();\n return c.json(data);\n});\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;","children",[],[188],"1ec00694-4c83-11f1-8655-ee650bb23af1","README.md","019e1275-6ee5-7639-8d85-a557b2b35a3f",["D",1778426146463],"# Like Yesterday\n\nA weather app that tells you what matters: **how today compares to yesterday**.\n\nInspired by [this tweet from @genmon](https://x.com/genmon/status/2053031372453749006):\n\n> Why doesn't my weather app tell me the weather yesterday? I can never plan based on numerical temperature, wind etc. Too much thought. All I want is to see: oh yeah like yesterday but a little warmer. And I know what I wore yesterday so I can adjust easily.\n\n## How it works\n\n```mermaid\ngraph LR\n A[Browser Geolocation] --> B[Open-Meteo API]\n B --> C[Yesterday + Today + Tomorrow]\n C --> D[Diff Engine]\n D --> E[Natural language comparison]\n E --> F[Beautiful UI]\n```\n\n- Uses **browser geolocation** to find you automatically\n- Fetches from **Open-Meteo** (free, no API key needed) with `past_days=1` and `forecast_days=2`\n- Generates a **natural language comparison** like *\"A touch warmer than yesterday, and drier\"*\n- Shows a **side-by-side hourly chart** overlaying yesterday and today\n- Every detail card includes a **relative comparison** to yesterday\n\n## Features\n\n- Yesterday / Today / Tomorrow at a glance\n- Hero comparison sentence — the main event\n- Hourly temperature overlay chart with current-hour indicator\n- Rain, wind, conditions — all compared to yesterday\n- °C / °F toggle\n- Reverse geocoded location name\n- Staggered fade-in animations\n- Mobile-responsive\n\n## Stack\n\n- **Frontend**: React 18, Canvas API for the chart\n- **Backend**: Hono on Val Town\n- **Data**: Open-Meteo (free, open-source weather API)\n- **Geocoding**: OpenStreetMap Nominatim\n- **Fonts**: Instrument Serif + DM Sans",[],[196],"1ebff820-4c83-11f1-8655-ee650bb23af1","weather-codes.ts","019e1275-6ee5-7639-8d85-9fc5d25f1050",["D",1778426146463],"script","// WMO Weather interpretation codes\n// https://open-meteo.com/en/docs\n\nconst emojiMap: Record = {\n 0: \"☀️\", // Clear sky\n 1: \"🌤️\", // Mainly clear\n 2: \"⛅\", // Partly cloudy\n 3: \"☁️\", // Overcast\n 45: \"🌫️\", // Foggy\n 48: \"🌫️\", // Depositing rime fog\n 51: \"🌦️\", // Light drizzle\n 53: \"🌦️\", // Moderate drizzle\n 55: \"🌧️\", // Dense drizzle\n 56: \"🌧️\", // Light freezing drizzle\n 57: \"🌧️\", // Dense freezing drizzle\n 61: \"🌧️\", // Slight rain\n 63: \"🌧️\", // Moderate rain\n 65: \"🌧️\", // Heavy rain\n 66: \"🌧️\", // Light freezing rain\n 67: \"🌧️\", // Heavy freezing rain\n 71: \"🌨️\", // Slight snow\n 73: \"🌨️\", // Moderate snow\n 75: \"❄️\", // Heavy snow\n 77: \"🌨️\", // Snow grains\n 80: \"🌦️\", // Slight showers\n 81: \"🌧️\", // Moderate showers\n 82: \"⛈️\", // Violent showers\n 85: \"🌨️\", // Slight snow showers\n 86: \"🌨️\", // Heavy snow showers\n 95: \"⛈️\", // Thunderstorm\n 96: \"⛈️\", // Thunderstorm with slight hail\n 99: \"⛈️\", // Thunderstorm with heavy hail\n};\n\nconst descMap: Record = {\n 0: \"Clear sky\",\n 1: \"Mainly clear\",\n 2: \"Partly cloudy\",\n 3: \"Overcast\",\n 45: \"Foggy\",\n 48: \"Foggy\",\n 51: \"Light drizzle\",\n 53: \"Drizzle\",\n 55: \"Heavy drizzle\",\n 56: \"Freezing drizzle\",\n 57: \"Freezing drizzle\",\n 61: \"Light rain\",\n 63: \"Rain\",\n 65: \"Heavy rain\",\n 66: \"Freezing rain\",\n 67: \"Freezing rain\",\n 71: \"Light snow\",\n 73: \"Snow\",\n 75: \"Heavy snow\",\n 77: \"Snow grains\",\n 80: \"Light showers\",\n 81: \"Showers\",\n 82: \"Heavy showers\",\n 85: \"Snow showers\",\n 86: \"Heavy snow showers\",\n 95: \"Thunderstorm\",\n 96: \"Thunderstorm\",\n 99: \"Severe thunderstorm\",\n};\n\nexport function getWeatherEmoji(code: number): string {\n return emojiMap[code] || \"🌡️\";\n}\n\nexport function getWmoDescription(code: number): string {\n return descMap[code] || \"Unknown\";\n}",[],[168,203],"1ebfb770-4c83-11f1-8655-ee650bb23af1","style.css","019e1275-6ee5-7639-8d85-98814b03a580",["D",1778426146463],"* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n:root {\n --bg: #F6F1EB;\n --bg-card: #FFFCF7;\n --text: #2C2416;\n --text-muted: #8C7E6A;\n --text-light: #B5A998;\n --accent-warm: #D4763A;\n --accent-cool: #4A7C8F;\n --accent-warm-bg: #FFF0E5;\n --accent-cool-bg: #E5F0F5;\n --border: #E5DDD2;\n --border-light: #EDE7DE;\n --warmer: #C95D2A;\n --cooler: #3A6B7E;\n --same: #8C7E6A;\n --chart-yesterday: #B5A998;\n --chart-today: #D4763A;\n --chart-tomorrow: #4A7C8F;\n --title-bg: #EBE5DC;\n}\n\nbody {\n font-family: 'DM Sans', sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n -webkit-font-smoothing: antialiased;\n}\n\n.app {\n max-width: 540px;\n margin: 0 auto;\n padding: 48px 24px 80px;\n}\n\n/* Header */\n.header {\n text-align: center;\n margin-bottom: 36px;\n}\n\n/* Title block — elegant code block */\n.title-block {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--title-bg);\n border: 1px solid var(--border);\n padding: 10px 14px 10px 18px;\n border-radius: 10px;\n margin-bottom: 8px;\n}\n\n.title-url {\n font-family: 'JetBrains Mono', ui-monospace, monospace;\n font-size: 1.15rem;\n font-weight: 500;\n color: var(--text);\n letter-spacing: -0.01em;\n line-height: 1;\n}\n\n.title-copy-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: 1px solid var(--border);\n border-radius: 6px;\n padding: 5px;\n cursor: pointer;\n color: var(--text-light);\n transition: all 0.15s ease;\n}\n\n.title-copy-btn:hover {\n background: var(--bg-card);\n border-color: var(--text-muted);\n color: var(--text);\n}\n\n.title-copy-btn.copied {\n color: #4A8B5C;\n border-color: rgba(74, 139, 92, 0.3);\n}\n\n.remix-link {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n font-size: 0.78rem;\n color: var(--text-muted);\n text-decoration: none;\n letter-spacing: 0.02em;\n padding: 4px 0;\n transition: color 0.15s;\n margin-bottom: 4px;\n}\n\n.remix-link:hover {\n color: var(--text);\n}\n\n.remix-link svg {\n opacity: 0.6;\n}\n\n.remix-link:hover svg {\n opacity: 1;\n}\n\n.location-btn {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n background: none;\n border: none;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.85rem;\n color: var(--text-muted);\n margin-top: 6px;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n font-weight: 500;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: 6px;\n transition: all 0.15s ease;\n}\n\n.location-btn:hover {\n background: var(--border-light);\n color: var(--text);\n}\n\n.location-btn svg {\n opacity: 0.5;\n transition: opacity 0.15s;\n}\n\n.location-btn:hover svg {\n opacity: 1;\n}\n\n.header .date-line {\n font-size: 0.8rem;\n color: var(--text-light);\n margin-top: 2px;\n letter-spacing: 0.02em;\n}\n\n/* Location Picker */\n.picker {\n text-align: center;\n padding: 80px 0 40px;\n}\n\n.picker-title {\n font-family: 'JetBrains Mono', ui-monospace, monospace;\n font-size: 1.15rem;\n font-weight: 500;\n color: var(--text);\n background: var(--title-bg);\n border: 1px solid var(--border);\n display: inline-block;\n padding: 10px 18px;\n border-radius: 10px;\n margin-bottom: 32px;\n}\n\n.picker-input-wrap {\n position: relative;\n max-width: 360px;\n margin: 0 auto;\n}\n\n.picker-input {\n width: 100%;\n padding: 14px 18px;\n font-family: 'DM Sans', sans-serif;\n font-size: 1rem;\n color: var(--text);\n background: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: 12px;\n outline: none;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.picker-input:focus {\n border-color: var(--text-muted);\n box-shadow: 0 2px 12px rgba(44, 36, 22, 0.06);\n}\n\n.picker-input::placeholder {\n color: var(--text-light);\n}\n\n.picker-spinner {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n height: 16px;\n border: 2px solid var(--border);\n border-top-color: var(--text-muted);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n}\n\n.picker-results {\n list-style: none;\n max-width: 360px;\n margin: 8px auto 0;\n background: var(--bg-card);\n border: 1px solid var(--border-light);\n border-radius: 12px;\n overflow: hidden;\n text-align: left;\n}\n\n.picker-result {\n padding: 12px 18px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n gap: 2px;\n transition: background 0.1s ease;\n border-bottom: 1px solid var(--border-light);\n}\n\n.picker-result:last-child {\n border-bottom: none;\n}\n\n.picker-result:hover {\n background: var(--border-light);\n}\n\n.picker-result-name {\n font-size: 0.92rem;\n font-weight: 500;\n color: var(--text);\n}\n\n.picker-result-detail {\n font-size: 0.75rem;\n color: var(--text-muted);\n}\n\n.picker-divider {\n display: flex;\n align-items: center;\n gap: 16px;\n max-width: 360px;\n margin: 24px auto;\n color: var(--text-light);\n font-size: 0.75rem;\n letter-spacing: 0.04em;\n}\n\n.picker-divider::before,\n.picker-divider::after {\n content: '';\n flex: 1;\n height: 1px;\n background: var(--border-light);\n}\n\n.picker-geo-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: var(--bg-card);\n border: 1px solid var(--border);\n padding: 12px 24px;\n border-radius: 10px;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.88rem;\n color: var(--text);\n cursor: pointer;\n transition: all 0.15s ease;\n font-weight: 500;\n}\n\n.picker-geo-btn:hover:not(:disabled) {\n border-color: var(--text-muted);\n box-shadow: 0 2px 8px rgba(44, 36, 22, 0.06);\n}\n\n.picker-geo-btn:disabled {\n opacity: 0.7;\n cursor: wait;\n}\n\n.picker-geo-spinner {\n display: inline-block;\n width: 14px;\n height: 14px;\n border: 2px solid var(--border);\n border-top-color: var(--text-muted);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n}\n\n.picker-error {\n font-size: 0.8rem;\n color: var(--warmer);\n margin-top: 12px;\n}\n\n/* Hero comparison */\n.hero {\n text-align: center;\n padding: 32px 24px;\n margin-bottom: 28px;\n position: relative;\n}\n\n.hero::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 40px;\n height: 1px;\n background: var(--border);\n}\n\n.hero::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 40px;\n height: 1px;\n background: var(--border);\n}\n\n.hero-comparison {\n font-family: 'Instrument Serif', serif;\n font-size: 1.75rem;\n line-height: 1.35;\n color: var(--text);\n font-weight: 400;\n max-width: 400px;\n margin: 0 auto;\n}\n\n.hero-comparison em {\n font-style: italic;\n}\n\n.hero-comparison .warmer {\n color: var(--warmer);\n}\n\n.hero-comparison .cooler {\n color: var(--cooler);\n}\n\n.hero-comparison .same {\n color: var(--same);\n}\n\n.hero-subtext {\n font-size: 0.82rem;\n color: var(--text-muted);\n margin-top: 10px;\n line-height: 1.5;\n}\n\n/* Day cards */\n.days-row {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 12px;\n margin-bottom: 28px;\n}\n\n.day-card {\n background: var(--bg-card);\n border: 1px solid var(--border-light);\n border-radius: 12px;\n padding: 18px 14px;\n text-align: center;\n transition: transform 0.15s ease;\n}\n\n.day-card.today {\n border-color: var(--border);\n box-shadow: 0 2px 12px rgba(44, 36, 22, 0.06);\n}\n\n.day-label {\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--text-muted);\n font-weight: 500;\n margin-bottom: 10px;\n}\n\n.day-icon {\n font-size: 1.8rem;\n margin-bottom: 6px;\n line-height: 1;\n}\n\n.day-temp {\n font-family: 'Instrument Serif', serif;\n font-size: 2rem;\n font-weight: 400;\n line-height: 1;\n margin-bottom: 4px;\n}\n\n.day-temp-unit {\n font-size: 1rem;\n color: var(--text-muted);\n}\n\n.day-range {\n font-size: 0.75rem;\n color: var(--text-muted);\n margin-top: 4px;\n}\n\n.day-feels {\n font-size: 0.72rem;\n color: var(--text-light);\n margin-top: 3px;\n}\n\n.day-diff {\n display: inline-block;\n font-size: 0.7rem;\n font-weight: 500;\n margin-top: 8px;\n padding: 3px 10px;\n border-radius: 20px;\n letter-spacing: 0.02em;\n}\n\n.day-diff.warmer {\n background: var(--accent-warm-bg);\n color: var(--warmer);\n}\n\n.day-diff.cooler {\n background: var(--accent-cool-bg);\n color: var(--cooler);\n}\n\n.day-diff.same {\n background: var(--border-light);\n color: var(--same);\n}\n\n/* Chart */\n.chart-section {\n background: var(--bg-card);\n border: 1px solid var(--border-light);\n border-radius: 12px;\n padding: 20px 20px 14px;\n margin-bottom: 28px;\n}\n\n.chart-title {\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--text-muted);\n font-weight: 500;\n margin-bottom: 14px;\n}\n\n.chart-container {\n position: relative;\n width: 100%;\n height: 160px;\n}\n\n.chart-container canvas {\n width: 100% !important;\n height: 100% !important;\n}\n\n.chart-legend {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--border-light);\n}\n\n.legend-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 0.72rem;\n color: var(--text-muted);\n}\n\n.legend-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n}\n\n/* Details row */\n.details-section {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-bottom: 28px;\n}\n\n.detail-card {\n background: var(--bg-card);\n border: 1px solid var(--border-light);\n border-radius: 12px;\n padding: 14px;\n}\n\n.detail-label {\n font-size: 0.68rem;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--text-light);\n font-weight: 500;\n margin-bottom: 5px;\n}\n\n.detail-value {\n font-family: 'Instrument Serif', serif;\n font-size: 1.35rem;\n color: var(--text);\n}\n\n.detail-comparison {\n font-size: 0.72rem;\n color: var(--text-muted);\n margin-top: 3px;\n}\n\n/* Unit toggle */\n.unit-toggle {\n display: flex;\n justify-content: center;\n gap: 0;\n margin-bottom: 24px;\n}\n\n.unit-btn {\n background: none;\n border: 1px solid var(--border);\n padding: 6px 16px;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.75rem;\n color: var(--text-muted);\n cursor: pointer;\n transition: all 0.15s ease;\n letter-spacing: 0.03em;\n}\n\n.unit-btn:first-child {\n border-radius: 6px 0 0 6px;\n}\n\n.unit-btn:last-child {\n border-radius: 0 6px 6px 0;\n border-left: none;\n}\n\n.unit-btn.active {\n background: var(--text);\n color: var(--bg-card);\n border-color: var(--text);\n}\n\n/* Footer */\n.footer {\n text-align: center;\n padding-top: 20px;\n border-top: 1px solid var(--border-light);\n}\n\n.footer p {\n font-size: 0.72rem;\n color: var(--text-light);\n line-height: 1.6;\n}\n\n.footer a {\n color: var(--text-muted);\n text-decoration: none;\n border-bottom: 1px solid var(--border);\n transition: border-color 0.15s;\n}\n\n.footer a:hover {\n border-color: var(--text-muted);\n}\n\n/* Loading state */\n.loading {\n text-align: center;\n padding: 120px 24px;\n}\n\n.loading h2 {\n font-family: 'JetBrains Mono', ui-monospace, monospace;\n font-size: 1rem;\n font-weight: 500;\n color: var(--text);\n background: var(--title-bg);\n border: 1px solid var(--border);\n display: inline-block;\n padding: 8px 16px;\n border-radius: 8px;\n margin-bottom: 12px;\n}\n\n.loading p {\n font-size: 0.85rem;\n color: var(--text-muted);\n}\n\n.loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--border);\n border-top-color: var(--text-muted);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n margin: 20px auto;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n.error {\n text-align: center;\n padding: 80px 24px;\n}\n\n.error h2 {\n font-family: 'Instrument Serif', serif;\n font-size: 1.5rem;\n font-weight: 400;\n margin-bottom: 8px;\n}\n\n.error p {\n font-size: 0.85rem;\n color: var(--text-muted);\n margin-bottom: 20px;\n}\n\n.error button {\n background: var(--text);\n color: var(--bg-card);\n border: none;\n padding: 10px 24px;\n border-radius: 8px;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.82rem;\n cursor: pointer;\n}\n\n/* Fade in animation */\n@keyframes fadeUp {\n from {\n opacity: 0;\n transform: translateY(12px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.fade-in {\n animation: fadeUp 0.5s ease forwards;\n}\n\n.fade-in-delay-1 { animation-delay: 0.1s; opacity: 0; }\n.fade-in-delay-2 { animation-delay: 0.2s; opacity: 0; }\n.fade-in-delay-3 { animation-delay: 0.3s; opacity: 0; }\n.fade-in-delay-4 { animation-delay: 0.4s; opacity: 0; }\n.fade-in-delay-5 { animation-delay: 0.5s; opacity: 0; }\n\n/* Mobile — tighten vertical rhythm */\n@media (max-width: 480px) {\n .app {\n padding: 24px 16px 48px;\n }\n .header {\n margin-bottom: 24px;\n }\n .title-url {\n font-size: 0.9rem;\n }\n .title-block {\n padding: 8px 12px 8px 14px;\n gap: 8px;\n }\n .hero {\n padding: 20px 16px;\n margin-bottom: 20px;\n }\n .hero-comparison {\n font-size: 1.35rem;\n }\n .unit-toggle {\n margin-bottom: 16px;\n }\n .days-row {\n gap: 8px;\n margin-bottom: 20px;\n }\n .day-card {\n padding: 14px 8px;\n }\n .day-label {\n margin-bottom: 6px;\n font-size: 0.65rem;\n }\n .day-icon {\n font-size: 1.4rem;\n margin-bottom: 4px;\n }\n .day-temp {\n font-size: 1.5rem;\n }\n .day-feels {\n font-size: 0.68rem;\n }\n .day-diff {\n font-size: 0.65rem;\n margin-top: 6px;\n padding: 2px 8px;\n }\n .chart-section {\n padding: 16px 14px 12px;\n margin-bottom: 20px;\n }\n .chart-container {\n height: 140px;\n }\n .details-section {\n gap: 8px;\n margin-bottom: 20px;\n }\n .detail-card {\n padding: 12px;\n }\n .picker {\n padding: 40px 0 32px;\n }\n}\n\n/* Desktop — more breathing room */\n@media (min-width: 768px) {\n .app {\n max-width: 620px;\n padding: 64px 40px 100px;\n }\n .header {\n margin-bottom: 52px;\n }\n .title-url {\n font-size: 1.25rem;\n }\n .title-block {\n padding: 12px 16px 12px 22px;\n }\n .hero {\n padding: 44px 32px;\n margin-bottom: 40px;\n }\n .hero-comparison {\n font-size: 2rem;\n max-width: 460px;\n }\n .unit-toggle {\n margin-bottom: 36px;\n }\n .days-row {\n gap: 16px;\n margin-bottom: 36px;\n }\n .day-card {\n padding: 24px 18px;\n border-radius: 14px;\n }\n .day-temp {\n font-size: 2.2rem;\n }\n .day-icon {\n font-size: 2rem;\n margin-bottom: 10px;\n }\n .chart-section {\n padding: 28px 28px 20px;\n margin-bottom: 36px;\n border-radius: 14px;\n }\n .chart-container {\n height: 200px;\n }\n .details-section {\n gap: 16px;\n margin-bottom: 40px;\n }\n .detail-card {\n padding: 20px;\n border-radius: 14px;\n }\n .detail-value {\n font-size: 1.5rem;\n }\n .footer {\n padding-top: 28px;\n }\n}",[],[168,211],"1ebf5d8e-4c83-11f1-8655-ee650bb23af1","index.tsx","019e1275-6ee5-7639-8d85-94d29c1e2a4b",["D",1778426146463],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport ReactDOM from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { getWeatherEmoji, getWmoDescription } from \"./weather-codes.ts\";\nimport { generateComparison } from \"./comparison.ts\";\n\nconst VAL_URL = \"https://www.val.town/x/dcm31/like-yesterday\";\n\ninterface SavedLocation {\n name: string;\n lat: number;\n lon: number;\n}\n\ninterface GeoResult {\n id: number;\n name: string;\n admin1?: string;\n country: string;\n country_code: string;\n latitude: number;\n longitude: number;\n}\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature_2m: number[];\n apparent_temperature: number[];\n precipitation_probability: number[];\n wind_speed_10m: number[];\n weather_code: number[];\n };\n daily: {\n time: string[];\n temperature_2m_max: number[];\n temperature_2m_min: number[];\n apparent_temperature_max: number[];\n apparent_temperature_min: number[];\n precipitation_probability_max: number[];\n wind_speed_10m_max: number[];\n weather_code: number[];\n sunrise: string[];\n sunset: string[];\n };\n hourly_units: { temperature_2m: string };\n daily_units: { temperature_2m_max: string };\n}\n\n// --- Storage helpers ---\nfunction looksLikeCoords(name: string): boolean {\n return /^-?\\d+\\.\\d+,\\s*-?\\d+\\.\\d+$/.test(name.trim());\n}\n\nfunction loadLocation(): SavedLocation | null {\n try {\n const raw = localStorage.getItem(\"ly_location\");\n if (!raw) return null;\n const loc = JSON.parse(raw);\n if (looksLikeCoords(loc.name)) loc.name = \"My location\";\n return loc;\n } catch { return null; }\n}\nfunction saveLocation(loc: SavedLocation) {\n localStorage.setItem(\"ly_location\", JSON.stringify(loc));\n}\nfunction loadUnits(): \"celsius\" | \"fahrenheit\" {\n try {\n return (localStorage.getItem(\"ly_units\") as any) || \"celsius\";\n } catch { return \"celsius\"; }\n}\nfunction saveUnits(u: string) {\n localStorage.setItem(\"ly_units\", u);\n}\n\n// --- Title Block ---\nfunction TitleBlock() {\n const [copied, setCopied] = useState(false);\n\n async function copyUrl() {\n try {\n await navigator.clipboard.writeText(window.location.origin);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n } catch {}\n }\n\n return (\n <>\n

\n likeyesterday.val.run\n \n

\n \n \n Remix on Val Town\n \n

\n \n );\n}\n\n// --- Location Picker ---\nfunction LocationPicker({ onSelect }: { onSelect: (loc: SavedLocation) => void }) {\n const [query, setQuery] = useState(\"\");\n const [results, setResults] = useState([]);\n const [searching, setSearching] = useState(false);\n const [geoLocating, setGeoLocating] = useState(false);\n const [geoError, setGeoError] = useState(\"\");\n const debounceRef = useRef(null);\n\n const search = useCallback(async (q: string) => {\n if (q.length < 2) { setResults([]); return; }\n setSearching(true);\n try {\n const res = await fetch(\n `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(q)}&count=5&language=en`\n );\n const data = await res.json();\n setResults(data.results || []);\n } catch {\n setResults([]);\n } finally {\n setSearching(false);\n }\n }, []);\n\n function handleInput(val: string) {\n setQuery(val);\n if (debounceRef.current) clearTimeout(debounceRef.current);\n debounceRef.current = setTimeout(() => search(val), 300) as any;\n }\n\n function selectResult(r: GeoResult) {\n const name = r.admin1\n ? `${r.name}, ${r.admin1}, ${r.country_code.toUpperCase()}`\n : `${r.name}, ${r.country_code.toUpperCase()}`;\n onSelect({ name, lat: r.latitude, lon: r.longitude });\n }\n\n async function useMyLocation() {\n setGeoLocating(true);\n setGeoError(\"\");\n try {\n const pos = await new Promise((resolve, reject) => {\n navigator.geolocation.getCurrentPosition(resolve, reject, { timeout: 10000 });\n });\n const { latitude, longitude } = pos.coords;\n let name = \"My location\";\n try {\n const geoRes = await fetch(\n `https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=json&zoom=10`\n );\n const geo = await geoRes.json();\n const city = geo.address?.city || geo.address?.town || geo.address?.village || geo.address?.county || \"\";\n const country = geo.address?.country_code?.toUpperCase() || \"\";\n if (city) name = `${city}, ${country}`;\n } catch {}\n onSelect({ name, lat: latitude, lon: longitude });\n } catch (e: any) {\n if (e.code === 1) setGeoError(\"Location access denied by your browser.\");\n else setGeoError(\"Couldn't get your location. Try searching instead.\");\n } finally {\n setGeoLocating(false);\n }\n }\n\n return (\n

likeyesterday.val.run

\n\n

\n handleInput(e.target.value)}\n autoFocus\n />\n {searching &&

}\n

\n\n {results.length > 0 && (\n

selectResult(r)}>\n {r.name}\n \n {[r.admin1, r.country].filter(Boolean).join(\", \")}\n \n

\n )}\n\n

\n or\n

\n\n \n\n {geoError &&

{geoError}

}\n

\n );\n}\n\n// --- Main App ---\nfunction App() {\n const [location, setLocation] = useState(loadLocation);\n const [data, setData] = useState(null);\n const [error, setError] = useState(null);\n const [loading, setLoading] = useState(false);\n const [units, setUnits] = useState<\"celsius\" | \"fahrenheit\">(loadUnits);\n const [editingLocation, setEditingLocation] = useState(false);\n\n useEffect(() => {\n if (location) {\n fetchWeather(location);\n }\n }, [location, units]);\n\n function handleLocationSelect(loc: SavedLocation) {\n saveLocation(loc);\n setLocation(loc);\n setEditingLocation(false);\n }\n\n function handleUnitsChange(u: \"celsius\" | \"fahrenheit\") {\n saveUnits(u);\n setUnits(u);\n }\n\n async function fetchWeather(loc: SavedLocation) {\n setLoading(true);\n setError(null);\n try {\n const res = await fetch(`/api/weather?lat=${loc.lat}&lon=${loc.lon}&units=${units}`);\n const json = await res.json();\n if (json.error) throw new Error(json.error);\n setData(json);\n } catch (e: any) {\n setError(e.message || \"Failed to fetch weather\");\n } finally {\n setLoading(false);\n }\n }\n\n if (!location || editingLocation) {\n return ;\n }\n\n if (loading || !data) {\n return (\n

likeyesterday.val.run

Fetching weather...

\n );\n }\n\n if (error) {\n return (\n

Hmm, something's off

{error}

\n \n

\n );\n }\n\n const d = data.daily;\n const unitLabel = data.daily_units?.temperature_2m_max === \"°F\" ? \"°F\" : \"°C\";\n const windUnit = units === \"fahrenheit\" ? \"mph\" : \"km/h\";\n\n const days = [\n {\n label: \"Yesterday\",\n high: Math.round(d.temperature_2m_max[0]),\n low: Math.round(d.temperature_2m_min[0]),\n feelsHigh: Math.round(d.apparent_temperature_max[0]),\n code: d.weather_code[0],\n rain: d.precipitation_probability_max[0],\n wind: Math.round(d.wind_speed_10m_max[0]),\n },\n {\n label: \"Today\",\n high: Math.round(d.temperature_2m_max[1]),\n low: Math.round(d.temperature_2m_min[1]),\n feelsHigh: Math.round(d.apparent_temperature_max[1]),\n code: d.weather_code[1],\n rain: d.precipitation_probability_max[1],\n wind: Math.round(d.wind_speed_10m_max[1]),\n },\n {\n label: \"Tomorrow\",\n high: Math.round(d.temperature_2m_max[2]),\n low: Math.round(d.temperature_2m_min[2]),\n feelsHigh: Math.round(d.apparent_temperature_max[2]),\n code: d.weather_code[2],\n rain: d.precipitation_probability_max[2],\n wind: Math.round(d.wind_speed_10m_max[2]),\n },\n ];\n\n const comparison = generateComparison(days[0], days[1], days[2], unitLabel, windUnit);\n\n const h = data.hourly;\n const yesterdayTemps = h.temperature_2m.slice(0, 24);\n const todayTemps = h.temperature_2m.slice(24, 48);\n const tomorrowTemps = h.temperature_2m.slice(48, 72);\n\n const diff = days[1].high - days[0].high;\n const diffClass = diff > 1 ? \"warmer\" : diff < -1 ? \"cooler\" : \"same\";\n\n const tomorrowDiff = days[2].high - days[1].high;\n const tomorrowDiffClass = tomorrowDiff > 1 ? \"warmer\" : tomorrowDiff < -1 ? \"cooler\" : \"same\";\n\n const formatDate = () => {\n return new Date().toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n month: \"long\",\n day: \"numeric\",\n });\n };\n\n return (\n

\n \n \n

{formatDate()}

\n\n

\n handleUnitsChange(\"celsius\")}\n >\n °C\n \n handleUnitsChange(\"fahrenheit\")}\n >\n °F\n \n

\n\n

{comparison.detail}

\n\n

\n {days.map((day, i) => (\n

{day.label}

{getWeatherEmoji(day.code)}

\n {day.high}{unitLabel}\n

{day.low}{unitLabel} — {day.high}{unitLabel}

Feels {day.feelsHigh}{unitLabel}

\n {i === 1 && diff !== 0 && (\n

\n {diff > 0 ? `+${diff}${unitLabel}` : `${diff}${unitLabel}`} vs yesterday\n

\n )}\n {i === 2 && tomorrowDiff !== 0 && (\n

\n {tomorrowDiff > 0 ? `+${tomorrowDiff}${unitLabel}` : `${tomorrowDiff}${unitLabel}`} vs today\n

\n )}\n

\n ))}\n

\n\n

Hourly temperature

\n \n

\n Yesterday\n

\n Today\n

\n Tomorrow\n

\n\n

Rain chance

{days[1].rain}%

\n {days[1].rain === days[0].rain\n ? \"Same as yesterday\"\n : days[1].rain > days[0].rain\n ? `Up from ${days[0].rain}% yesterday`\n : `Down from ${days[0].rain}% yesterday`}\n

Wind

{days[1].wind} {windUnit}

\n {Math.abs(days[1].wind - days[0].wind) <= 2\n ? \"Similar to yesterday\"\n : days[1].wind > days[0].wind\n ? `Windier than yesterday (${days[0].wind})`\n : `Calmer than yesterday (${days[0].wind})`}\n

Conditions

{getWmoDescription(days[1].code)}

\n {days[0].code === days[1].code\n ? \"Same as yesterday\"\n : `Yesterday: ${getWmoDescription(days[0].code)}`}\n

Tomorrow

{days[2].high}{unitLabel}

\n {getWmoDescription(days[2].code)}, {days[2].rain}% rain\n

\n\n \n

\n );\n}\n\nfunction TempChart({ yesterday, today, tomorrow, unitLabel }: { yesterday: number[]; today: number[]; tomorrow: number[]; unitLabel: string }) {\n const canvasRef = useRef(null);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n const dpr = window.devicePixelRatio || 1;\n const rect = canvas.getBoundingClientRect();\n canvas.width = rect.width * dpr;\n canvas.height = rect.height * dpr;\n ctx.scale(dpr, dpr);\n\n const w = rect.width;\n const h = rect.height;\n const pad = { top: 20, right: 12, bottom: 24, left: 32 };\n const chartW = w - pad.left - pad.right;\n const chartH = h - pad.top - pad.bottom;\n\n const allTemps = [...yesterday, ...today, ...tomorrow];\n const minT = Math.floor(Math.min(...allTemps) - 1);\n const maxT = Math.ceil(Math.max(...allTemps) + 1);\n const range = maxT - minT || 1;\n\n const toX = (i: number) => pad.left + (i / 23) * chartW;\n const toY = (t: number) => pad.top + (1 - (t - minT) / range) * chartH;\n\n ctx.strokeStyle = \"#EDE7DE\";\n ctx.lineWidth = 0.5;\n const steps = 4;\n for (let i = 0; i <= steps; i++) {\n const temp = minT + (range / steps) * i;\n const y = toY(temp);\n ctx.beginPath();\n ctx.moveTo(pad.left, y);\n ctx.lineTo(w - pad.right, y);\n ctx.stroke();\n ctx.fillStyle = \"#B5A998\";\n ctx.font = \"10px 'DM Sans', sans-serif\";\n ctx.textAlign = \"right\";\n ctx.fillText(`${Math.round(temp)}°`, pad.left - 6, y + 3);\n }\n\n ctx.fillStyle = \"#B5A998\";\n ctx.font = \"9px 'DM Sans', sans-serif\";\n ctx.textAlign = \"center\";\n [0, 6, 12, 18, 23].forEach((hr) => {\n const label = hr === 0 ? \"12a\" : hr === 6 ? \"6a\" : hr === 12 ? \"12p\" : hr === 18 ? \"6p\" : \"11p\";\n ctx.fillText(label, toX(hr), h - 4);\n });\n\n function drawLine(temps: number[], color: string, lineWidth: number, dashed = false) {\n ctx.strokeStyle = color;\n ctx.lineWidth = lineWidth;\n ctx.setLineDash(dashed ? [4, 4] : []);\n ctx.beginPath();\n temps.forEach((t, i) => {\n const x = toX(i);\n const y = toY(t);\n if (i === 0) ctx.moveTo(x, y);\n else ctx.lineTo(x, y);\n });\n ctx.stroke();\n ctx.setLineDash([]);\n }\n\n drawLine(yesterday, \"#B5A998\", 1.5, true);\n drawLine(tomorrow, \"#4A7C8F\", 1.5, true);\n drawLine(today, \"#D4763A\", 2);\n\n const currentHour = new Date().getHours();\n if (currentHour < today.length) {\n ctx.fillStyle = \"#D4763A\";\n ctx.beginPath();\n ctx.arc(toX(currentHour), toY(today[currentHour]), 4, 0, Math.PI * 2);\n ctx.fill();\n ctx.fillStyle = \"#FFFCF7\";\n ctx.beginPath();\n ctx.arc(toX(currentHour), toY(today[currentHour]), 1.5, 0, Math.PI * 2);\n ctx.fill();\n }\n }, [yesterday, today, tomorrow]);\n\n return (\n

\n );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[168,218],["D",1778426146463],[],[168,67],"1ebf191e-4c83-11f1-8655-ee650bb23af1","comparison.ts","019e1275-6ee5-7639-8d85-8c8a01dbad6f",["D",1778426146463],"// Generates natural-language comparisons between days\n// This is the heart of the app — weather as pattern recognition, not numbers\n\ninterface DayData {\n high: number;\n low: number;\n feelsHigh: number;\n code: number;\n rain: number;\n wind: number;\n}\n\nexport function generateComparison(\n yesterday: DayData,\n today: DayData,\n tomorrow: DayData,\n unitLabel: string,\n windUnit: string,\n): { headline: string; detail: string } {\n const diff = today.high - yesterday.high;\n const absDiff = Math.abs(diff);\n const feelsDiff = today.feelsHigh - yesterday.feelsHigh;\n\n // Temperature description\n let tempPhrase: string;\n let tempClass: string;\n\n if (absDiff <= 1) {\n tempPhrase = \"just like yesterday\";\n tempClass = \"same\";\n } else if (absDiff <= 3) {\n tempPhrase = diff > 0 ? \"a touch warmer\" : \"a touch cooler\";\n tempClass = diff > 0 ? \"warmer\" : \"cooler\";\n } else if (absDiff <= 6) {\n tempPhrase = diff > 0 ? \"noticeably warmer\" : \"noticeably cooler\";\n tempClass = diff > 0 ? \"warmer\" : \"cooler\";\n } else if (absDiff <= 10) {\n tempPhrase = diff > 0 ? \"much warmer\" : \"much cooler\";\n tempClass = diff > 0 ? \"warmer\" : \"cooler\";\n } else {\n tempPhrase = diff > 0 ? \"dramatically warmer\" : \"dramatically cooler\";\n tempClass = diff > 0 ? \"warmer\" : \"cooler\";\n }\n\n // Conditions change\n const conditionChanged = yesterday.code !== today.code;\n const isRainyToday = [51, 53, 55, 61, 63, 65, 80, 81, 82, 95, 96, 99].includes(today.code);\n const wasRainyYesterday = [51, 53, 55, 61, 63, 65, 80, 81, 82, 95, 96, 99].includes(yesterday.code);\n const isClearToday = [0, 1].includes(today.code);\n const wasClearYesterday = [0, 1].includes(yesterday.code);\n\n // Build headline\n let headline: string;\n\n if (absDiff <= 1 && !conditionChanged) {\n headline = `Just like yesterday. Same temperature, same skies.`;\n } else if (absDiff <= 1 && conditionChanged) {\n if (isRainyToday && !wasRainyYesterday) {\n headline = `Same warmth as yesterday, but bring an umbrella today.`;\n } else if (isClearToday && !wasClearYesterday) {\n headline = `Same temperature, but the sun's out today.`;\n } else {\n headline = `Same warmth, different skies.`;\n }\n } else {\n headline = `${capitalize(tempPhrase)} than yesterday`;\n if (isRainyToday && !wasRainyYesterday) {\n headline += `, and wetter`;\n } else if (!isRainyToday && wasRainyYesterday) {\n headline += `, and drier`;\n }\n headline += \".\";\n }\n\n // Build detail line\n const parts: string[] = [];\n\n if (absDiff > 1) {\n parts.push(`${today.high}${unitLabel} today vs ${yesterday.high}${unitLabel} yesterday`);\n }\n\n // Feels-like mismatch\n if (Math.abs(feelsDiff - diff) >= 3) {\n if (feelsDiff > diff) {\n parts.push(`feels even warmer with humidity`);\n } else {\n parts.push(`wind makes it feel cooler than the number suggests`);\n }\n }\n\n // Wind change\n const windDiff = today.wind - yesterday.wind;\n if (Math.abs(windDiff) > 5) {\n parts.push(windDiff > 0 ? `windier today` : `calmer winds today`);\n }\n\n // Rain\n if (today.rain > 50 && yesterday.rain <= 30) {\n parts.push(`rain likely today`);\n }\n\n // Tomorrow preview\n const tomorrowDiff = tomorrow.high - today.high;\n if (Math.abs(tomorrowDiff) > 2) {\n parts.push(\n tomorrowDiff > 0\n ? `tomorrow warms up to ${tomorrow.high}${unitLabel}`\n : `tomorrow drops to ${tomorrow.high}${unitLabel}`,\n );\n }\n\n const detail = parts.length > 0 ? capitalize(parts.join(\" · \")) : `${today.high}${unitLabel} today, ${yesterday.high}${unitLabel} yesterday`;\n\n return { headline, detail };\n}\n\nfunction capitalize(s: string): string {\n return s.charAt(0).toUpperCase() + s.slice(1);\n}",[],[168,228],"1ec0050e-4c83-11f1-8655-ee650bb23af1",["D",1778426146463],"directory",[180,181,182,183,184],[168],["D",1778426146463],["D",1789680697370],{"_11":12,"_127":72},{"_11":12,"_122":123,"_71":72,"_30":70,"_124":125,"_126":24},{"_38":39,"_13":16,"_32":35,"_112":74,"_113":62,"_114":63,"_115":78,"_116":117,"_118":119,"_120":14,"_121":12},"ctx",{"_51":-5,"_148":277,"_278":279,"_280":281,"_282":24,"_283":24,"_284":24,"_285":86,"_286":-5,"_287":-7,"_288":-7,"_289":26,"_290":24,"_291":24,"_292":-5,"_293":24,"_294":24,"_295":24,"_296":-5},"ENV",{"_248":249,"_250":251,"_252":16,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]

History · index.html