@danilosimonatto/ionicons-minimal-weather-widget 0.1.0

package/LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2026 Danilo Simonatto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+

package/README.md

@@ -0,0 +1,61 @@
+# Ionicons Minimal Weather Widget
+
+A tiny, framework-agnostic weather widget custom element powered by Ionicons. Displays current weather for a city using beautiful icons.
+
+## Install
+
+```sh
+npm install @danilosimonatto/ionicons-minimal-weather-widget
+# or
+yarn add @danilosimonatto/ionicons-minimal-weather-widget
+```
+
+## Usage
+
+Just include the bundled JS file on your site/app:
+
+```js
+import "@danilosimonatto/ionicons-minimal-weather-widget";
+```
+
+You can then use the custom element in your HTML:
+
+```html
+<weather-widget
+	city="Milan"
+	scale="C"
+	icon-style="filled"
+	api-key="YOUR_OPENWEATHER_API_KEY"
+></weather-widget>
+```
+
+## Options
+
+| Attribute    | Type                             | Description                                        | Example      |
+| ------------ | -------------------------------- | -------------------------------------------------- | ------------ |
+| `city`       | `string` (required)              | City name to fetch weather for                     | `Milan`      |
+| `scale`      | `"C"`/`"F"`                      | Temperature units. Celsius (default) or Fahrenheit | `F`          |
+| `icon-style` | `"filled"`/`"outline"`/`"sharp"` | Ionicon style (default: `filled`)                  | `outline`    |
+| `api-key`    | `string` (required)              | OpenWeatherMap API key                             | `yourApiKey` |
+
+## Example
+
+```html
+<weather-widget
+	city="San Francisco"
+	scale="F"
+	icon-style="outline"
+	api-key="YOUR_OPENWEATHER_API_KEY"
+></weather-widget>
+```
+
+## Features
+
+- 🌀 Framework-agnostic — use anywhere (Astro, React, Vue, plain HTML, etc.)
+- ⛅ Uses Ionicons for beautiful weather icons
+- 🎨 Customizable icon style and units
+- 🔐 Uses your OpenWeather API key via the `api-key` attribute
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@danilosimonatto/ionicons-minimal-weather-widget",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "author": "Danilo Simonatto",
+  "files": [
+    "weather-widget.js",
+    "weather-widget.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./weather-widget.d.ts",
+      "default": "./weather-widget.js"
+    }
+  },
+  "dependencies": {
+    "ionicons": "^8.0.13"
+  }
+}

package/weather-widget.d.ts

@@ -0,0 +1,37 @@
+export {};
+
+type WeatherScale = "C" | "F";
+type IoniconStyle = "outline" | "filled" | "sharp";
+
+/**
+ * Type definitions for the framework-agnostic `<weather-widget>` custom element.
+ *
+ * This file is meant to be shipped alongside `weather-widget.js` when publishing to npm,
+ * so TypeScript users get autocomplete + type-checking.
+ */
+declare class WeatherWidgetElement extends HTMLElement {
+	static observedAttributes: readonly [
+		"city",
+		"scale",
+		"icon-style",
+		"api-key"
+	];
+
+	/** City name to search (required). Example: "Milan" */
+	get city(): string;
+
+	/** Temperature scale (defaults to "C") */
+	get scale(): WeatherScale;
+
+	/** Ionicon style (defaults to "filled") */
+	get iconStyle(): IoniconStyle;
+
+	/** Optional OpenWeather API key override */
+	get apiKey(): string;
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"weather-widget": WeatherWidgetElement;
+	}
+}

package/weather-widget.js

@@ -0,0 +1,313 @@
+import { defineCustomElements } from "ionicons/loader";
+import { addIcons } from "ionicons";
+import {
+	sunny,
+	sunnyOutline,
+	sunnySharp,
+	moon,
+	moonOutline,
+	moonSharp,
+	partlySunny,
+	partlySunnyOutline,
+	partlySunnySharp,
+	cloudy,
+	cloudyOutline,
+	cloudySharp,
+	cloudyNight,
+	cloudyNightOutline,
+	cloudyNightSharp,
+	rainy,
+	rainyOutline,
+	rainySharp,
+	thunderstorm,
+	thunderstormOutline,
+	thunderstormSharp,
+	snow,
+	snowOutline,
+	snowSharp,
+	helpCircle,
+	helpCircleOutline,
+	helpCircleSharp,
+} from "ionicons/icons";
+
+let ioniconsInitPromise;
+function ensureIonicons() {
+	if (!ioniconsInitPromise) {
+		addIcons({
+			sunny,
+			sunnyOutline,
+			sunnySharp,
+			moon,
+			moonOutline,
+			moonSharp,
+			partlySunny,
+			partlySunnyOutline,
+			partlySunnySharp,
+			cloudy,
+			cloudyOutline,
+			cloudySharp,
+			cloudyNight,
+			cloudyNightOutline,
+			cloudyNightSharp,
+			rainy,
+			rainyOutline,
+			rainySharp,
+			thunderstorm,
+			thunderstormOutline,
+			thunderstormSharp,
+			snow,
+			snowOutline,
+			snowSharp,
+			helpCircle,
+			helpCircleOutline,
+			helpCircleSharp,
+		});
+		ioniconsInitPromise = defineCustomElements(window);
+	}
+	return ioniconsInitPromise;
+}
+
+const normalizeScale = (value) =>
+	String(value || "").toUpperCase() === "F" ? "F" : "C";
+
+const normalizeIconStyle = (value) => {
+	if (value === "outline" || value === "sharp" || value === "filled")
+		return value;
+	return "filled";
+};
+
+const styleIonicon = (baseName, style) => {
+	if (style === "filled") return baseName;
+	return `${baseName}-${style}`;
+};
+
+// OpenWeather icon code mapping to Ionicons
+const ICON_CODE_TO_IONICON = {
+	// 01d - sunny
+	"01d": "sunny",
+	"01n": "moon",
+
+	// 02d - partly-sunny
+	"02d": "partly-sunny",
+	"02n": "cloudy-night",
+
+	// 03d, 04d, 50d - cloudy
+	"03d": "cloudy",
+	"03n": "cloudy",
+	"04d": "cloudy",
+	"04n": "cloudy",
+	"50d": "cloudy",
+	"50n": "cloudy",
+
+	// 09d, 10d - rainy
+	"09d": "rainy",
+	"09n": "rainy",
+	"10d": "rainy",
+	"10n": "rainy",
+
+	// 11d - thunderstorm
+	"11d": "thunderstorm",
+	"11n": "thunderstorm",
+
+	// 13d - snow
+	"13d": "snow",
+	"13n": "snow",
+};
+
+const escapeHtml = (input) => {
+	return String(input)
+		.replaceAll("&", "&")
+		.replaceAll("<", "&lt;")
+		.replaceAll(">", "&gt;")
+		.replaceAll('"', "&quot;")
+		.replaceAll("'", "&#039;");
+};
+
+class WeatherWidgetElement extends HTMLElement {
+	static observedAttributes = ["city", "scale", "icon-style", "api-key"];
+
+	#abort = null;
+	#shadow = this.attachShadow({ mode: "open" });
+
+	connectedCallback() {
+		ensureIonicons().then(() => {
+			this.#renderShell();
+			this.#load();
+		});
+	}
+
+	disconnectedCallback() {
+		if (this.#abort) this.#abort.abort();
+	}
+
+	attributeChangedCallback() {
+		if (!this.isConnected) return;
+		this.#load();
+	}
+
+	get city() {
+		return (this.getAttribute("city") || "").trim();
+	}
+
+	get scale() {
+		return normalizeScale(this.getAttribute("scale"));
+	}
+
+	get iconStyle() {
+		return normalizeIconStyle(this.getAttribute("icon-style"));
+	}
+
+	get apiKey() {
+		return (this.getAttribute("api-key") || "").trim();
+	}
+
+	#renderShell() {
+		this.#shadow.innerHTML = `
+			<style>
+				:host {
+					display: inline-block;
+				}
+				.weather-widget {
+					display: inline-flex;
+					flex-direction: column;
+					gap: 8px;
+					padding: 1.5rem;
+					background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+					border-radius: 16px;
+					color: white;
+					text-align: center;
+					box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+					min-width: 250px;
+					font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+				}
+				.loading,
+				.error {
+					font-size: 1rem;
+					padding: 1rem;
+				}
+				.error {
+					color: #ffebee;
+					background: rgba(255, 0, 0, 0.2);
+					border-radius: 8px;
+				}
+				.weather-content {
+					display: flex;
+					flex-direction: column;
+					gap: 12px;
+				}
+				.city-name {
+					font-size: 1.5rem;
+					font-weight: 600;
+					text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+				}
+				.weather {
+					display: flex;
+					gap: 12px;
+					align-items: center;
+					justify-content: center;
+					font-size: 2.5rem;
+					font-weight: 700;
+				}
+				.icon {
+					font-size: 3rem;
+					text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+				}
+				.temperature {
+					text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+				}
+			</style>
+			<div class="weather-widget" part="root">
+				<div class="loading" part="loading">Loading…</div>
+			</div>
+		`;
+	}
+
+	#setInner(html) {
+		const root = this.#shadow.querySelector(".weather-widget");
+		if (!root) return;
+		root.innerHTML = html;
+	}
+
+	async #load() {
+		const city = this.city;
+		if (!city) {
+			this.#setInner(`<div class="error" part="error">Missing city</div>`);
+			return;
+		}
+
+		if (this.#abort) this.#abort.abort();
+		this.#abort = new AbortController();
+
+		this.#setInner(`<div class="loading" part="loading">Loading…</div>`);
+
+		try {
+			// Mirrors the old Vue component's behavior:
+			// - OpenWeatherMap geocoding -> lat/lon
+			// - OpenWeatherMap weather in metric
+			// - Convert to Fahrenheit client-side if needed
+			const apiKey = this.apiKey;
+			if (!apiKey) throw new Error("Missing API key");
+
+			// Step 1: Geocode
+			const geoUrl = new URL("https://api.openweathermap.org/geo/1.0/direct");
+			geoUrl.searchParams.set("q", city);
+			geoUrl.searchParams.set("limit", "1");
+			geoUrl.searchParams.set("appid", apiKey);
+
+			const geoRes = await fetch(geoUrl, { signal: this.#abort.signal });
+			if (!geoRes.ok) throw new Error("City not found");
+			const geoJson = await geoRes.json();
+			const geo = geoJson && geoJson[0];
+			if (!geo) throw new Error("City not found");
+
+			// Step 2: Weather (metric, then optional conversion)
+			const weatherUrl = new URL(
+				"https://api.openweathermap.org/data/2.5/weather"
+			);
+			weatherUrl.searchParams.set("lat", String(geo.lat));
+			weatherUrl.searchParams.set("lon", String(geo.lon));
+			weatherUrl.searchParams.set("units", "metric");
+			weatherUrl.searchParams.set("appid", apiKey);
+
+			const weatherRes = await fetch(weatherUrl, {
+				signal: this.#abort.signal,
+			});
+			if (!weatherRes.ok) throw new Error("Weather not available");
+			const weather = await weatherRes.json();
+
+			const celsius = weather?.main?.temp;
+			const temp =
+				this.scale === "F"
+					? Math.round((celsius * 9) / 5 + 32)
+					: Math.round(celsius);
+
+			const iconCode = weather?.weather?.[0]?.icon;
+			const baseIcon =
+				(iconCode && ICON_CODE_TO_IONICON[iconCode]) || "help-circle";
+			const iconName = styleIonicon(baseIcon, this.iconStyle);
+
+			const cityName = weather?.name || city;
+
+			this.#setInner(`
+				<div class="weather-content" part="content">
+					<div class="city-name" part="city">${escapeHtml(cityName)}</div>
+					<div class="weather" part="weather">
+						<ion-icon name="${iconName}" class="icon" aria-hidden="true"></ion-icon>
+						<span class="temperature" part="temperature">${temp}°${this.scale}</span>
+					</div>
+				</div>
+			`);
+		} catch (e) {
+			if (e instanceof DOMException && e.name === "AbortError") return;
+			const message =
+				e instanceof Error ? e.message : "Failed to fetch weather";
+			this.#setInner(
+				`<div class="error" part="error">${escapeHtml(message)}</div>`
+			);
+		}
+	}
+}
+
+if (!customElements.get("weather-widget")) {
+	customElements.define("weather-widget", WeatherWidgetElement);
+}