@heycys/gallery 0.1.1 → 0.1.2

package/packs/gallery/weather/component.json

@@ -0,0 +1,19 @@
+{
+  "id": "gallery/weather",
+  "apiVersion": 1,
+  "version": "1.2.0",
+  "name": { "zh": "天气", "en": "Weather" },
+  "description": { "zh": "一个城市现在的天气和接下来几天的预报，数据来自 Open-Meteo，要先允许联网", "en": "A city's weather now and for the days ahead, from Open-Meteo, once the reader lets it online" },
+  "words": "tianqi qiwen yubao weather forecast temperature 天气 气温 预报 温度 下雨",
+  "parts": {
+    "settings": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-weather-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[4, 2], [2, 2], [4, 4]], "resize": true },
+  "settings": [
+    { "key": "city", "label": { "zh": "城市", "en": "City" }, "type": "text", "default": "", "required": true },
+    { "key": "unit", "label": { "zh": "单位", "en": "Unit" }, "type": "select", "options": ["℃", "℉"], "default": "℃" }
+  ],
+  "needs": ["net:api.open-meteo.com", "net:geocoding-api.open-meteo.com"]
+}

package/packs/gallery/weather/example.html

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery/weather">
+  <script type="application/json">{"city":"上海","unit":"℃"}</script>
+</div>

package/packs/gallery/weather/kit.js

@@ -0,0 +1,312 @@
+// gallery/weather (天气): a city's weather now and for the days ahead, from Open-Meteo (open-meteo.com,
+// no key), for a custom page. Its settings, `city` (a name as the reader writes it: 上海, Berlin) and
+// `unit` (℃ or ℉), are the card's form (the grip at its top right › 设置…), kept in the data part `settings`, which the board
+// writes and this block only reads. The city is looked up by name (geocoding-api.open-meteo.com: its
+// first match, its coordinates), its weather fetched for them (api.open-meteo.com: now, and each day's
+// highest, lowest and sky for five days), both through context.fetch, the server fetching for it: its
+// needs name the two hosts, and nothing is fetched until the reader allows them (the kit then shows
+// 允许访问 on the card and starts the block again once the reader says yes). Fetched again as its settings
+// change (`source`) and every 30 minutes; the server keeps an answer a minute and gives what it kept
+// when the network is not there, which the card says by its time (更新于 …). Its face: the city and when,
+// the sky's picture, the temperature large, the sky's words and today's range, how it feels, the air's
+// humidity and the wind, and the days ahead, as much of it as the card's size holds (style.css,
+// container queries); what it says while there is nothing to show (no city yet, one not found, waiting
+// for the reader's consent, the network not there, this computer's network setup sending Open-Meteo's
+// names to an address of its own or of a private network, which the server refuses: code "private")
+// stands in the face's note. In the page's language. Its head is the cards' (the kit's card tokens): the
+// chip, a place's pin, before the city; each day ahead its lowest and highest at either end of a bar, the
+// bar drawn from the lowest to the highest of all the days shown, so that the days read against each other.
+
+const WORDS = {
+  zh: {
+    title: "天气",
+    pick: "写上一个城市",
+    where: "右上角手柄 › 设置…",
+    loading: "正在取天气…",
+    unknown: (/** @type {string} */ city) => `找不到「${city}」：换一个写法试试`,
+    consent: "允许联网之后显示天气",
+    offline: "现在连不上网，取不到天气",
+    private: "网络设置把天气服务指向了本地地址，取不到天气",
+    failed: "没能取到天气",
+    at: (/** @type {string} */ time) => `更新于 ${time}`,
+    feels: (/** @type {string} */ value) => `体感 ${value}`,
+    humidity: (/** @type {number} */ value) => `湿度 ${value}%`,
+    wind: (/** @type {number} */ value) => `风 ${value} km/h`,
+    today: "今天",
+    weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
+    sky: {
+      clear: "晴", mostly: "大部晴朗", partly: "多云", overcast: "阴", fog: "雾", drizzle: "毛毛雨", "freezing-drizzle": "冻毛毛雨",
+      rain: "雨", "light-rain": "小雨", "heavy-rain": "大雨", "freezing-rain": "冻雨", snow: "雪", "light-snow": "小雪", "heavy-snow": "大雪",
+      grains: "雪粒", showers: "阵雨", "snow-showers": "阵雪", thunder: "雷阵雨", hail: "雷阵雨伴冰雹", unknown: "天气未知",
+    },
+  },
+  en: {
+    title: "Weather",
+    pick: "Name a city",
+    where: "The grip at the top right › Settings…",
+    loading: "Fetching the weather…",
+    unknown: (/** @type {string} */ city) => `No place called “${city}”: try another spelling`,
+    consent: "Shown once it may go online",
+    offline: "Offline: no weather now",
+    private: "The network setup sends the weather service to a local address",
+    failed: "The weather could not be fetched",
+    at: (/** @type {string} */ time) => `Updated ${time}`,
+    feels: (/** @type {string} */ value) => `Feels ${value}`,
+    humidity: (/** @type {number} */ value) => `Humidity ${value}%`,
+    wind: (/** @type {number} */ value) => `Wind ${value} km/h`,
+    today: "Today",
+    weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    sky: {
+      clear: "Clear", mostly: "Mostly clear", partly: "Partly cloudy", overcast: "Overcast", fog: "Fog", drizzle: "Drizzle", "freezing-drizzle": "Freezing drizzle",
+      rain: "Rain", "light-rain": "Light rain", "heavy-rain": "Heavy rain", "freezing-rain": "Freezing rain", snow: "Snow", "light-snow": "Light snow", "heavy-snow": "Heavy snow",
+      grains: "Snow grains", showers: "Showers", "snow-showers": "Snow showers", thunder: "Thunderstorm", hail: "Thunderstorm with hail", unknown: "Unknown",
+    },
+  },
+};
+
+/** The language the page speaks: the UI's where Gallery says it (data-ge-language), else its lang's. */
+function languageOf(/** @type {HTMLElement} */ root) {
+  const ui = root.getAttribute("data-ge-language");
+  return (ui !== null ? ui === "en" : /^en(?:-|$)/i.test(root.lang)) ? "en" : "zh";
+}
+
+/**
+ * The sky a WMO weather code says (what Open-Meteo answers with), as { words (its key in WORDS' sky),
+ * picture (which of PICTURES draws it) }; `day` false draws a clear or mostly clear sky with the moon.
+ * @param {unknown} code
+ * @param {boolean} day
+ */
+function skyOf(code, day = true) {
+  const sun = day ? "sun" : "moon";
+  /** @type {Record<number, [string, string]>} */
+  const skies = {
+    0: ["clear", sun], 1: ["mostly", sun], 2: ["partly", day ? "partly" : "partly-night"], 3: ["overcast", "cloud"],
+    45: ["fog", "fog"], 48: ["fog", "fog"], 51: ["drizzle", "rain"], 53: ["drizzle", "rain"], 55: ["drizzle", "rain"], 56: ["freezing-drizzle", "rain"], 57: ["freezing-drizzle", "rain"],
+    61: ["light-rain", "rain"], 63: ["rain", "rain"], 65: ["heavy-rain", "rain"], 66: ["freezing-rain", "rain"], 67: ["freezing-rain", "rain"],
+    71: ["light-snow", "snow"], 73: ["snow", "snow"], 75: ["heavy-snow", "snow"], 77: ["grains", "snow"],
+    80: ["showers", "rain"], 81: ["showers", "rain"], 82: ["showers", "rain"], 85: ["snow-showers", "snow"], 86: ["snow-showers", "snow"],
+    95: ["thunder", "thunder"], 96: ["hail", "thunder"], 99: ["hail", "thunder"],
+  };
+  const [words, picture] = typeof code === "number" && skies[code] ? skies[code] : ["unknown", "cloud"];
+  return { words, picture };
+}
+
+/**
+ * The address a city's name is looked up at (Open-Meteo's geocoding: its first match, in `language`).
+ * @param {string} city
+ * @param {"zh" | "en"} language
+ */
+const searchAddress = (city, language) => `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(city)}&count=1&language=${language}&format=json`;
+
+/**
+ * The address of the weather at a place (its coordinates, to two decimals: one address for one place,
+ * which the server keeps), in `unit` (℃ or ℉): now, and five days, by the place's own clock.
+ * @param {{ latitude: number, longitude: number }} place
+ * @param {string} unit
+ */
+const forecastAddress = (place, unit) => `https://api.open-meteo.com/v1/forecast?latitude=${place.latitude.toFixed(2)}&longitude=${place.longitude.toFixed(2)}`
+  + "&current=temperature_2m,apparent_temperature,relative_humidity_2m,wind_speed_10m,weather_code,is_day"
+  + `&daily=weather_code,temperature_2m_max,temperature_2m_min&timezone=auto&forecast_days=5${unit === "℉" ? "&temperature_unit=fahrenheit" : ""}`;
+
+/**
+ * The first place a lookup's answer gives ({ name, latitude, longitude, region }), or null for none.
+ * @param {any} answer
+ */
+function placeOf(answer) {
+  const found = Array.isArray(answer?.results) ? answer.results[0] : null;
+  if (!found || typeof found.latitude !== "number" || typeof found.longitude !== "number") return null;
+  return { name: String(found.name ?? ""), latitude: found.latitude, longitude: found.longitude, region: String(found.admin1 ?? found.country ?? "") };
+}
+
+/** A temperature as the card writes it: whole degrees, a degree sign, a minus that is one. @param {unknown} value */
+const degrees = (value) => (typeof value === "number" && Number.isFinite(value) ? `${Math.round(value)}°`.replace(/^-/, "−") : "–");
+
+/**
+ * What the card says, in `language`, of `state`: { kind: "pick" } (no city), { kind: "loading", city },
+ * { kind: "unknown", city } (no such place), { kind: "consent", city }, { kind: "offline", city },
+ * { kind: "private", city } (the server refused the address this computer's resolver gave: one of this
+ * computer or of a private network, its network setup's doing), { kind: "failed", city }, or
+ * { kind: "weather", place, forecast (Open-Meteo's answer), at (when it was fetched, ISO) }. Its head
+ * (the city, and when), and either a note or the weather: the sky's picture and words, the temperature,
+ * today's range, the more line's pieces, and the days ahead.
+ * @param {any} state
+ * @param {"zh" | "en"} language
+ */
+function faceOf(state, language) {
+  const words = WORDS[language];
+  const head = { city: state.city || state.place?.name || words.title, at: "" };
+  if (state.kind !== "weather") {
+    /** @type {Record<string, string>} */
+    const notes = { pick: words.pick, loading: words.loading, consent: words.consent, offline: words.offline, private: words.private, failed: words.failed };
+    const note = state.kind === "unknown" ? words.unknown(state.city) : notes[state.kind] ?? words.failed;
+    return { head, note, hint: state.kind === "pick" || state.kind === "unknown" ? words.where : "", now: null, days: [] };
+  }
+  const { current = {}, daily = {} } = state.forecast ?? {};
+  const sky = skyOf(current.weather_code, current.is_day !== 0);
+  const fetched = typeof state.at === "string" ? new Date(state.at) : null;
+  const two = (/** @type {number} */ value) => String(value).padStart(2, "0");
+  head.at = fetched && !Number.isNaN(fetched.getTime()) ? words.at(`${two(fetched.getHours())}:${two(fetched.getMinutes())}`) : "";
+  const range = (/** @type {number} */ index) => `${degrees(daily.temperature_2m_max?.[index])} / ${degrees(daily.temperature_2m_min?.[index])}`;
+  const more = [
+    typeof current.apparent_temperature === "number" ? words.feels(degrees(current.apparent_temperature)) : null,
+    typeof current.relative_humidity_2m === "number" ? words.humidity(Math.round(current.relative_humidity_2m)) : null,
+    typeof current.wind_speed_10m === "number" ? words.wind(Math.round(current.wind_speed_10m)) : null,
+  ].filter((piece) => piece !== null);
+  const dates = Array.isArray(daily.time) ? daily.time : [];
+  const days = dates.slice(0, 5).map((/** @type {string} */ date, /** @type {number} */ index) => {
+    const [year, month, day] = String(date).split("-").map(Number);
+    const weekday = index === 0 ? words.today : words.weekdays[new Date(Date.UTC(year, month - 1, day)).getUTCDay()] ?? "";
+    const [high, low] = [daily.temperature_2m_max?.[index], daily.temperature_2m_min?.[index]];
+    return { weekday, picture: skyOf(daily.weather_code?.[index]).picture, sky: words.sky[skyOf(daily.weather_code?.[index]).words], range: range(index), high: degrees(high), low: degrees(low), span: typeof high === "number" && typeof low === "number" && Number.isFinite(high) && Number.isFinite(low) ? [low, high] : null };
+  });
+  return { head, note: "", hint: "", now: { picture: sky.picture, sky: words.sky[sky.words], temperature: degrees(current.temperature_2m), range: dates.length ? range(0) : "", more }, days };
+}
+
+// The sky's pictures, a 24 x 24 drawing each in the text's color (style.css colors the sun and the rain).
+const SUN = '<circle cx="12" cy="12" r="4.2" class="gallery-weather-sun"/><g class="gallery-weather-sun" stroke-linecap="round" stroke-width="1.8" fill="none"><path d="M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6"/></g>';
+const CLOUD = '<path class="gallery-weather-cloud" d="M7.5 19h9.3a4.2 4.2 0 0 0 .5-8.4 5.6 5.6 0 0 0-10.7 1.6A3.4 3.4 0 0 0 7.5 19z"/>';
+const PICTURES = {
+  sun: SUN,
+  moon: '<path class="gallery-weather-moon" d="M15.6 3.4a8.6 8.6 0 1 0 5 15.2A7.2 7.2 0 0 1 15.6 3.4z"/>',
+  partly: '<g transform="translate(-3 -4) scale(.8)">' + SUN + "</g>" + CLOUD,
+  "partly-night": '<path class="gallery-weather-moon" d="M9.6 2.6a6.2 6.2 0 1 0 6.2 8.6A5.2 5.2 0 0 1 9.6 2.6z"/>' + CLOUD,
+  cloud: CLOUD,
+  fog: '<g class="gallery-weather-cloud-line" stroke-linecap="round" stroke-width="1.9" fill="none"><path d="M4 8.5h16M6 12.5h12M4 16.5h16"/></g>',
+  rain: '<g transform="translate(0 -3)">' + CLOUD + '</g><g class="gallery-weather-rain" stroke-linecap="round" stroke-width="1.8" fill="none"><path d="M9 18.5l-1 3M13 18.5l-1 3M17 18.5l-1 3"/></g>',
+  snow: '<g transform="translate(0 -3)">' + CLOUD + '</g><g class="gallery-weather-snow"><circle cx="8.5" cy="20" r="1.1"/><circle cx="12.5" cy="21.5" r="1.1"/><circle cx="16.5" cy="20" r="1.1"/></g>',
+  thunder: '<g transform="translate(0 -3)">' + CLOUD + '</g><path class="gallery-weather-bolt" d="M12.5 14.5l-2.6 4.2h2.4l-1.2 4 3.8-5.4h-2.4l1.4-2.8z"/>',
+};
+
+/**
+ * An element of the face, of `kind` (its class).
+ * @template {keyof HTMLElementTagNameMap} K
+ * @param {K} tag
+ * @param {string} kind
+ */
+function made(tag, kind) {
+  const node = document.createElement(tag);
+  node.className = `gallery-weather-${kind}`;
+  return node;
+}
+
+/** A sky's picture, as an svg element. @param {string} picture */
+function pictureOf(picture) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("class", "gallery-weather-picture");
+  svg.innerHTML = PICTURES[/** @type {keyof typeof PICTURES} */ (picture)] ?? CLOUD;
+  return svg;
+}
+
+DocKit.component({
+  id: "gallery/weather",
+  on: ["source"],
+  mount(host, context) {
+    const language = languageOf(document.documentElement);
+    const face = made("div", "face");
+    host.append(face);
+    const draw = (/** @type {any} */ state) => {
+      const said = faceOf(state, language);
+      const head = made("p", "head");
+      const chip = made("span", "chip");
+      chip.setAttribute("aria-hidden", "true");
+      chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11a3 3 0 1 0 6 0 3 3 0 0 0-6 0"/><path d="M17.7 16.7l-4.3 4.2a2 2 0 0 1-2.8 0l-4.3-4.2a8 8 0 1 1 11.4 0z"/></svg>';
+      const city = made("span", "city");
+      city.textContent = said.head.city;
+      const at = made("span", "at");
+      at.textContent = said.head.at;
+      head.append(chip, city, at);
+      /** @type {HTMLElement[]} */
+      const parts = [head];
+      if (said.now) {
+        const now = made("div", "now");
+        const temperature = made("span", "temperature");
+        temperature.textContent = said.now.temperature;
+        const words = made("span", "words");
+        const sky = made("span", "sky");
+        sky.textContent = said.now.sky;
+        const range = made("span", "range");
+        range.textContent = said.now.range;
+        words.append(sky, range);
+        now.append(pictureOf(said.now.picture), temperature, words);
+        const more = made("p", "more");
+        more.replaceChildren(...said.now.more.map((piece) => {
+          const span = made("span", "piece");
+          span.textContent = piece;
+          return span;
+        }));
+        const days = made("ol", "days");
+        const spans = said.days.flatMap((day) => day.span ?? []);
+        const [lowest, highest] = [Math.min(...spans), Math.max(...spans)];
+        days.replaceChildren(...said.days.map((day) => {
+          const item = made("li", "day");
+          const weekday = made("span", "weekday");
+          weekday.textContent = day.weekday;
+          const range = made("span", "day-range");
+          const low = made("span", "low");
+          low.textContent = day.low;
+          const bar = made("span", "bar");
+          bar.setAttribute("aria-hidden", "true");
+          if (day.span && highest > lowest) {
+            const fill = made("span", "fill");
+            fill.style.setProperty("--from", String((day.span[0] - lowest) / (highest - lowest)));
+            fill.style.setProperty("--to", String((day.span[1] - lowest) / (highest - lowest)));
+            bar.append(fill);
+          }
+          const high = made("span", "high");
+          high.textContent = day.high;
+          range.append(low, bar, high);
+          const picture = pictureOf(day.picture);
+          picture.setAttribute("aria-label", day.sky);
+          picture.removeAttribute("aria-hidden");
+          picture.setAttribute("role", "img");
+          item.append(weekday, picture, range);
+          return item;
+        }));
+        parts.push(now, more, days);
+      } else {
+        const note = made("p", "note");
+        note.textContent = said.note;
+        parts.push(note);
+        if (said.hint) {
+          const hint = made("p", "hint");
+          hint.textContent = said.hint;
+          parts.push(hint);
+        }
+      }
+      face.replaceChildren(...parts);
+      face.dataset.kind = state.kind;
+    };
+    let asked = 0; // the latest load: an earlier one that answers later draws nothing
+    const load = async () => {
+      const mine = ++asked;
+      const settings = context.readJSON("settings");
+      if (settings === undefined) return; // no JSON: the instance has failed, and Gallery shows what it holds
+      const city = typeof settings?.city === "string" ? settings.city.trim() : "";
+      const unit = settings?.unit === "℉" ? "℉" : "℃";
+      if (!city) return draw({ kind: "pick" });
+      draw({ kind: "loading", city });
+      try {
+        const found = placeOf((await context.fetch(searchAddress(city, language))).data);
+        if (mine !== asked) return;
+        if (!found) return draw({ kind: "unknown", city });
+        const answer = await context.fetch(forecastAddress(found, unit));
+        if (mine !== asked) return;
+        draw({ kind: "weather", city, place: found, forecast: answer.data, at: answer.at });
+      } catch (error) {
+        if (mine !== asked) return;
+        const code = /** @type {DocFetchError} */ (error).code;
+        draw({ kind: code === "consent" || code === "offline" || code === "private" ? code : "failed", city });
+        if (!code) context.fail(error); // no refusal of the server's: the block's own mistake, which the kit says
+      }
+    };
+    load();
+    context.interval(load, 30 * 60_000);
+    return {
+      update(reason) {
+        if (reason === "source") load();
+      },
+    };
+  },
+});

package/packs/gallery/weather/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="12" fill="#ffffff" stroke="#e7e6e3"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#ebf2fa"/><g transform="translate(32 26) scale(.4167)" fill="none" stroke="#2e7cd1" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11a3 3 0 1 0 6 0 3 3 0 0 0-6 0"/><path d="M17.7 16.7l-4.3 4.2a2 2 0 0 1-2.8 0l-4.3-4.2a8 8 0 1 1 11.4 0z"/></g><rect x="50" y="28" width="22" height="6" rx="3" fill="#3b3a37"/><rect x="174" y="29" width="36" height="5" rx="2.5" fill="#c4c2bd"/><circle cx="40" cy="64" r="6.5" fill="#d98a1c"/><path d="M40 52.5v2.5M28.5 64H31M31.9 55.9l1.8 1.8M48.1 55.9l-1.8 1.8" stroke="#d98a1c" stroke-width="2" stroke-linecap="round"/><path d="M40 80h14a6.5 6.5 0 0 0 .8-12.9 8.6 8.6 0 0 0-16.5 2.5A5.2 5.2 0 0 0 40 80z" fill="#a3abb8"/><text x="64" y="80" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="30" font-weight="600" letter-spacing="-.5" fill="#3b3a37">18°</text><rect x="116" y="62" width="26" height="6" rx="3" fill="#3b3a37"/><rect x="116" y="73" width="40" height="5" rx="2.5" fill="#c4c2bd"/><rect x="30" y="93" width="34" height="5" rx="2.5" fill="#c4c2bd"/><circle cx="70" cy="95.5" r="1.3" fill="#c4c2bd"/><rect x="76" y="93" width="32" height="5" rx="2.5" fill="#c4c2bd"/><circle cx="114" cy="95.5" r="1.3" fill="#c4c2bd"/><rect x="120" y="93" width="40" height="5" rx="2.5" fill="#c4c2bd"/></svg>

package/packs/gallery/weather/style.css

@@ -0,0 +1,258 @@
+/* Every selector starts at the instance and goes down from it (a step at a time, >, but for the
+   pictures' parts), so that nothing here reaches the rest of the page. The face fills its card on a
+   custom page (the board draws the frame), in the kit's card tokens: its head (the chip, the city, when it
+   was fetched, muted, its end clear of the card's grip); the sky's picture, the temperature large, the
+   sky's words and today's range; how it feels, the humidity and the wind, muted, a dot between them; and
+   the days ahead, each its lowest and highest at the ends of a bar in the accent drawn against all the
+   days shown. As much as the card holds: the instance is a container of both its sides (a 2 x 2 card
+   shows the temperature and, under it, the sky's words and its range on one muted line, a 4 x 2 one its
+   range and the more line too, a 4 x 4 one the days ahead), the weather now in the middle of the room under
+   the head, but where the days ahead show: then it stands under the head, the days right after the more
+   line, their rows taller where the card has the room (to 44px), the room left over at the bottom. The
+   temperature is the cards' hero size. What it says while there is nothing to show is the cards' empty face: a quiet
+   picture (a place's pin) in a soft disc over a muted line, where to set the city under it, in the middle. The sun and
+   the rain have colors of their own, light and dark. */
+[data-doc-component="gallery/weather"] {
+  container-type: size;
+  --gallery-weather-sun: light-dark(#e09a2b, #f2b950);
+  --gallery-weather-rain: light-dark(#3a7bd5, #7aa9ec);
+  --gallery-weather-cloud: light-dark(#a3abb8, #7c8594);
+  > .gallery-weather-face {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gallery-face-gap);
+    box-sizing: border-box;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    color: var(--gallery-text);
+  }
+  > .gallery-weather-face > p { margin: 0; }
+  > .gallery-weather-face > .gallery-weather-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: none;
+    min-width: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+    font-size: var(--gallery-title-size);
+    line-height: var(--gallery-title-line);
+  }
+  > .gallery-weather-face > .gallery-weather-head > .gallery-weather-chip {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--gallery-chip-size);
+    height: var(--gallery-chip-size);
+    border-radius: var(--gallery-chip-radius);
+    background: var(--gallery-accent-soft);
+    color: var(--gallery-accent);
+  }
+  > .gallery-weather-face > .gallery-weather-head > .gallery-weather-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-weather-face > .gallery-weather-head > .gallery-weather-city {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-weight: 600;
+    color: var(--gallery-text-strong);
+  }
+  > .gallery-weather-face > .gallery-weather-head > .gallery-weather-at {
+    flex: none;
+    margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out;
+    font-size: var(--gallery-meta-size);
+    color: var(--doc-muted);
+    white-space: nowrap;
+  }
+  > .gallery-weather-face > .gallery-weather-now {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    margin-top: auto;
+  }
+  /* The weather now and its more line, together in the middle of the room under the head. */
+  > .gallery-weather-face > .gallery-weather-more { margin-bottom: auto; }
+  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-picture {
+    flex: none;
+    width: clamp(40px, 13cqi, 52px);
+    height: clamp(40px, 13cqi, 52px);
+  }
+  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-temperature {
+    flex: none;
+    font-size: var(--gallery-hero-size);
+    line-height: 1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    color: var(--gallery-text-strong);
+    font-variant-numeric: tabular-nums;
+  }
+  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    font-size: 14px;
+    line-height: 1.35;
+  }
+  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words > * {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words > .gallery-weather-sky { font-weight: 500; }
+  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words > .gallery-weather-range {
+    font-size: 13px;
+    color: var(--doc-muted);
+    font-variant-numeric: tabular-nums;
+  }
+  /* How it feels, the humidity, the wind: muted, a dot between them, a piece never broken. */
+  > .gallery-weather-face > .gallery-weather-more {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2px 0;
+    font-size: var(--gallery-meta-size);
+    line-height: 1.5;
+    color: var(--doc-muted);
+    font-variant-numeric: tabular-nums;
+  }
+  > .gallery-weather-face > .gallery-weather-more > .gallery-weather-piece { white-space: nowrap; }
+  > .gallery-weather-face > .gallery-weather-more > .gallery-weather-piece + .gallery-weather-piece::before {
+    content: "";
+    display: inline-block;
+    width: 3px;
+    height: 3px;
+    margin: 0 8px;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: .6;
+    vertical-align: middle;
+  }
+  > .gallery-weather-face > .gallery-weather-days {
+    display: none;
+    margin: 0;
+    padding: 8px 0 0;
+    list-style: none;
+    border-top: 1px solid var(--doc-grid);
+  }
+  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day {
+    display: grid;
+    grid-template-columns: minmax(2.6em, 1fr) 22px minmax(0, 3fr);
+    align-items: center;
+    gap: 10px;
+    padding: 3px 0;
+    font-size: 13px;
+    line-height: 1.4;
+  }
+  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-picture { width: 20px; height: 20px; }
+  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-day-range {
+    display: grid;
+    grid-template-columns: 2.6em minmax(0, 1fr) 2.6em;
+    align-items: center;
+    gap: 8px;
+    font-variant-numeric: tabular-nums;
+  }
+  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-day-range > .gallery-weather-low { color: var(--doc-muted); text-align: end; }
+  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-day-range > .gallery-weather-bar {
+    position: relative;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--gallery-track);
+  }
+  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-day-range > .gallery-weather-bar > .gallery-weather-fill {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: calc(var(--from, 0) * 100%);
+    right: calc((1 - var(--to, 1)) * 100%);
+    min-width: 4px;
+    border-radius: 2px;
+    background: var(--gallery-accent);
+  }
+  /* What it says while there is nothing to show: the cards' empty face (as todos' and recent's), a quiet
+     picture over a muted line, where to set the city under it, the two in the middle. */
+  > .gallery-weather-face > .gallery-weather-note {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    margin-top: auto;
+    padding: 0 8px;
+    font-size: 13px;
+    line-height: 1.45;
+    color: var(--doc-muted);
+    text-align: center;
+  }
+  > .gallery-weather-face > .gallery-weather-note::before {
+    content: "";
+    flex: none;
+    width: 44px;
+    height: 44px;
+    margin-bottom: 2px;
+    background: currentColor;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0 3 3 0 0 0-6 0'/%3E%3Cpath d='M17.66 16.66 13.41 20.9a2 2 0 0 1-2.83 0l-4.24-4.24a8 8 0 1 1 11.32 0z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0 3 3 0 0 0-6 0'/%3E%3Cpath d='M17.66 16.66 13.41 20.9a2 2 0 0 1-2.83 0l-4.24-4.24a8 8 0 1 1 11.32 0z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  > .gallery-weather-face > .gallery-weather-note:last-child { margin-bottom: auto; }
+  > .gallery-weather-face > .gallery-weather-hint {
+    margin: -4px 0 auto;
+    font-size: var(--gallery-meta-size);
+    color: var(--doc-muted);
+    text-align: center;
+    opacity: .8;
+  }
+  .gallery-weather-picture { fill: var(--gallery-weather-cloud); }
+  .gallery-weather-picture .gallery-weather-sun { fill: var(--gallery-weather-sun); stroke: var(--gallery-weather-sun); }
+  .gallery-weather-picture g.gallery-weather-sun { fill: none; }
+  .gallery-weather-picture .gallery-weather-moon { fill: var(--gallery-weather-sun); }
+  .gallery-weather-picture .gallery-weather-rain,
+  .gallery-weather-picture .gallery-weather-cloud-line { stroke: var(--gallery-weather-rain); }
+  .gallery-weather-picture .gallery-weather-cloud-line { stroke: var(--gallery-weather-cloud); }
+  .gallery-weather-picture .gallery-weather-snow { fill: var(--gallery-weather-rain); }
+  .gallery-weather-picture .gallery-weather-bolt { fill: var(--gallery-weather-sun); }
+}
+/* A narrow card (2 wide): the picture at the left of the temperature and, under the temperature (from its
+   left, not the picture's), the sky's words and the range on one muted line, a dot between; no more line;
+   narrower still, no range. */
+@container (max-width: 260px) {
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-more { display: none; }
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-areas: "picture temperature" "picture words";
+    align-items: center;
+    gap: 2px 10px;
+    margin-bottom: auto;
+  }
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now > .gallery-weather-picture { grid-area: picture; }
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now > .gallery-weather-temperature { grid-area: temperature; }
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words { grid-area: words; flex-direction: row; gap: 0; font-size: 13px; color: var(--doc-muted); }
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words > .gallery-weather-sky { font-weight: 400; }
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words > .gallery-weather-range::before { content: "·"; margin: 0 5px; }
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-head > .gallery-weather-at { display: none; }
+}
+@container (max-width: 200px) {
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words > .gallery-weather-range { display: none; }
+}
+/* A low card: no more line. */
+@container (max-height: 104px) {
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-more { display: none; }
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now { margin-bottom: auto; }
+}
+/* A tall card (4 high, or 2 high on a wide window but for its last row's room): the weather now under the
+   head, the days ahead right after its more line, their rows sharing the room left (each 44px at the most),
+   what is still left at the bottom. */
+@container (min-height: 240px) {
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now { margin-top: 4px; }
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-more { margin-bottom: 0; }
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-days { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: 4px; }
+  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day { flex: 1 1 0; max-height: 44px; min-height: 0; }
+}
+/* On a custom page the face is the card's: as high as what the card holds inside its padding. Where no card
+   is around it (a document, as gallery block check shows it) it is as high as a 4 x 2 card's face, for the
+   instance is a container of its height too and would otherwise have none. */
+[data-doc-component="gallery/weather"] { height: 11em; }
+.gallery-card > [data-doc-component="gallery/weather"] { height: 100%; }

package/packs/gallery/weather/template.html

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery/weather">
+  <script type="application/json">{}</script>
+</div>

package/packs/gallery/weather/writing.md

@@ -0,0 +1,26 @@
+# 天气 (gallery/weather)
+
+A card for a custom page (its places are `page`): a city's weather now (the sky's picture and words, the temperature, today's highest and lowest, how it feels, the humidity and the wind) and, on a tall card, the next five days. The data comes from Open-Meteo (open-meteo.com), which needs no key. Use it when the user asks for the weather on a page, its home page among them.
+
+## Settings
+
+Its two settings are the card's form, which the user opens from the grip at the card's top right › 设置…:
+
+| Key | Label | Type | What it is |
+| --- | --- | --- | --- |
+| `city` | 城市 | text | the city, as the user names it: 上海, 杭州, Berlin; looked up by that name, its first match taken |
+| `unit` | 单位 | select | `℃` (the default) or `℉` |
+
+They are kept in its data part `settings`, a `<script type="application/json">`, as example.html does: `{"city":"上海","unit":"℃"}` (on one line and compact, as the card's 设置… writes it back). The city is the one setting it cannot show anything without (`required` in its manifest): when the user did not say which, ask them, or take it from what the workspace says of where they live (写作偏好, the documents; a trip is not a home: ask when that is a guess), and tell them in the handoff which you did; never hand over a card with no city unsaid. `gallery page add <slug> gallery/weather --set city=上海` writes it with the add (`--set unit=℉` the unit); for a card already there, write the city in its settings part. `{}` (template.html, what a menu adds) is a card with no city yet, which asks for one (右上角手柄 › 设置…), and `gallery page check` notes it. The block reads them and writes nothing.
+
+## Going online
+
+Its needs name the two hosts it reaches, `net:api.open-meteo.com` (the weather) and `net:geocoding-api.open-meteo.com` (a city's name to its coordinates). Gallery fetches nothing for it until the user allows those: the card then shows 允许访问 api.open-meteo.com 等 2 个网站, a press of which opens Gallery's consent dialog, and the card fetches once the user says yes. Tell the user so when you put the card on a page ("点卡片上的「允许访问」"). They can take it back in 设置 › 组件列表 (允许联网). Never write the consent into gallery.json yourself: it is the user's to give.
+
+## How to write it
+
+Put it on a custom page as a card of its board, `<section class="gallery-card" data-card-id="…" data-x data-y data-w data-h>`, holding one instance, after `gallery block add weather`, the instance as template.html has it, then its settings as above (`gallery page add <slug> gallery/weather` does the card for you). Sizes: 4 × 2 (the default: now, today's range and the more line), 2 × 2 (the temperature and the sky alone) and 4 × 4 (and the next five days).
+
+## How it looks
+
+The city beside a pin's chip and when the weather was fetched (更新于 14:05) at the top, the sky's picture, the temperature large and the sky's words beside it (on a 2 × 2 card under it, with the range, muted), how it feels, the humidity and the wind in a muted line, and on a 4 × 4 card the days ahead right under them, each with its picture and its lowest and highest at the ends of a bar drawn against the whole week; in the kit's card tokens (as every Gallery card: a head of a tinted chip and a title, its end clear of the card's grip), light and dark, the sun and the rain in colors of their own. It is fetched again when its settings change and every 30 minutes. While there is nothing to show it says why where the weather stands: 写上一个城市 (no city), 找不到「…」 (a name Open-Meteo does not know), 允许联网之后显示天气 (waiting for the user's consent, the kit's button over it), 现在连不上网，取不到天气 (no network, and nothing fetched before; Gallery gives the last answer it kept when there is one, its time at the top), 网络设置把天气服务指向了本地地址，取不到天气 (this computer's network setup gives Open-Meteo's names an address of this computer or of a private network, and no proxy of this computer takes them by name: Gallery refuses such an address). The script runs with the rights of the page's own scripts, as any block's does.