@heycys/gallery 0.1.1 → 0.2.0

package/packs/gallery/todos/style.css

@@ -0,0 +1,214 @@
+/* Every selector starts at the instance and goes down a step at a time (>), so that nothing here
+   reaches the rest of the page. The pack's design B, in the kit's card tokens, a grid laid out by the
+   card's cells (the face's data-layout): the head (the chip, a checked list, 我的待办 and its quiet meta),
+   its end clear of the card's grip; how many are done (on a 4 × 4 card a line, 已完成 19 / 27 and the
+   percent at its end, over a row of ticks, one an item, done in the accent; on a 4 × 6 a ring of 64px, its
+   percent in the middle, beside the open count large and 已完成 under it; on an 8 × 4 a ring of 96px at the
+   left over a key of three rows); and the list, scrolling, faded at its foot while there is more: the
+   groups small and gray (the document's icon, its title, its open count fainter), each item a box of 15px
+   (the accent's, ticked, once done), its words (struck through and faint once done) and, under them (at
+   their right on a wide card), the headings it stands under, faint. A card with no item to show is the
+   cards' empty face in the middle: a soft square with the list's picture (or, all of them done, a full
+   green ring with a tick), a line and what to do. Light and dark. */
+[data-doc-component="gallery/todos"] {
+  --gallery-todos-box: light-dark(rgb(55 53 47 / 30%), rgb(255 255 255 / 30%));
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
+  > .gallery-todos-face {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: 20px auto minmax(0, 1fr);
+    grid-template-areas: "head" "summary" "list";
+    box-sizing: border-box;
+    min-height: 0;
+  }
+  > .gallery-todos-face > .gallery-todos-head {
+    grid-area: head;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+  }
+  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-chip {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: var(--gallery-chip-size);
+    height: var(--gallery-chip-size);
+    border-radius: var(--gallery-chip-radius);
+    background: var(--gallery-fill);
+    color: var(--gallery-muted);
+  }
+  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-chip > svg { display: block; width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--gallery-title-size); line-height: var(--gallery-title-line); font-weight: 600; color: var(--gallery-text); }
+  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-count { flex: none; font-size: var(--gallery-meta-size); color: var(--gallery-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
+
+  /* How many are done: the parts each layout shows. */
+  > .gallery-todos-face > .gallery-todos-summary { grid-area: summary; margin-top: 12px; min-width: 0; }
+  > .gallery-todos-face > .gallery-todos-summary[hidden] { display: none; }
+  > .gallery-todos-face > .gallery-todos-summary > :is(.gallery-todos-ring, .gallery-todos-big, .gallery-todos-key) { display: none; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-progress { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 6px; font-size: 12px; line-height: 16px; color: var(--gallery-muted); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-progress b { font-weight: 600; color: var(--gallery-text); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-progress > .gallery-todos-share { font-size: 11.5px; color: var(--gallery-faint); font-variant-numeric: tabular-nums; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ticks { display: flex; gap: 2px; height: 6px; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ticks > .gallery-todos-tick { flex: 1; border-radius: 2px; background: var(--gallery-track); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ticks > .gallery-todos-on { background: var(--gallery-accent); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring { position: relative; flex: none; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg { display: block; transform: rotate(-90deg); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg > circle { fill: none; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg > .gallery-todos-track { stroke: var(--gallery-track); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg > .gallery-todos-arc { stroke: var(--gallery-accent); stroke-linecap: round; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > .gallery-todos-percent {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 17px;
+    line-height: 1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    font-variant-numeric: lining-nums;
+    color: var(--gallery-text-strong);
+  }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > .gallery-todos-percent > .gallery-todos-percent-value > .gallery-todos-percent-sign { margin-left: 1px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--gallery-muted); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-big > p { margin: 0; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-big > .gallery-todos-big-line { display: flex; align-items: baseline; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-big > .gallery-todos-big-line > .gallery-todos-open {
+    font-size: 30px;
+    line-height: 1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    font-variant-numeric: lining-nums;
+    color: var(--gallery-text-strong);
+  }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-big > .gallery-todos-big-line > .gallery-todos-open-unit { margin-left: 3px; font-size: var(--gallery-unit); font-weight: 500; color: var(--gallery-muted); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-big > .gallery-todos-big-done { margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--gallery-muted); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key { flex-direction: column; gap: 6px; margin: 16px 0 0; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--gallery-muted); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gallery-accent); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row[data-kind="left"]::before { background: var(--gallery-track); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row[data-kind="from"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gallery-faintest); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row > dt { margin: 0; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row > dd { margin: 0 0 0 auto; font-weight: 600; color: var(--gallery-text); font-variant-numeric: tabular-nums; }
+
+  /* The list: groups and items, scrolling, faded at its foot while there is more. */
+  > .gallery-todos-face > .gallery-todos-list { grid-area: list; min-height: 0; margin-top: 8px; overflow: auto; scrollbar-width: none; }
+  > .gallery-todos-face > .gallery-todos-list[hidden] { display: none; }
+  > .gallery-todos-face > .gallery-todos-list[data-more] {
+    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
+    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
+  }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 10px 0 2px; font-size: 11.5px; line-height: 18px; font-weight: 600; color: var(--gallery-muted); }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head > .gallery-todos-doc {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 4px;
+    background: none;
+    font: inherit;
+    color: inherit;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head > .gallery-todos-doc:hover { color: var(--gallery-text); }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head > .gallery-todos-group-count { flex: none; margin-left: 2px; font-weight: 400; color: var(--gallery-faint); }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head > .gallery-todos-doc > .gallery-todos-icon { flex: none; display: grid; place-items: center; width: 13px; height: 13px; margin-right: 2px; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head > .gallery-todos-doc > .gallery-todos-icon > img { display: block; width: 12px; height: 12px; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head > .gallery-todos-doc > .gallery-todos-glyph::before { content: ""; width: 12px; height: 12px; background: var(--gallery-faint); -webkit-mask: var(--gallery-todos-icon) center / contain no-repeat; mask: var(--gallery-todos-icon) center / contain no-repeat; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head > .gallery-todos-doc > .gallery-todos-icon:empty::before {
+    content: "";
+    width: 12px;
+    height: 12px;
+    background: var(--gallery-faint);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5L18 8v11a1.5 1.5 0 0 1-1.5 1.5h-9.5A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8H18'/%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 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5L18 8v11a1.5 1.5 0 0 1-1.5 1.5h-9.5A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8H18'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items { margin: 0; padding: 0; list-style: none; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check { flex: none; margin: 2px 0 0; padding: 0; border: 0; background: none; cursor: pointer; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item .gallery-todos-box {
+    display: grid;
+    place-items: center;
+    flex: none;
+    box-sizing: border-box;
+    width: 15px;
+    height: 15px;
+    border-radius: 4px;
+    box-shadow: inset 0 0 0 1.5px var(--gallery-todos-box);
+    color: #fff;
+  }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-box { margin-top: 2px; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check:hover > .gallery-todos-box { box-shadow: inset 0 0 0 1.5px var(--gallery-accent); }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item .gallery-todos-box > svg { display: block; width: 11px; height: 11px; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-done .gallery-todos-box { background: var(--gallery-accent); box-shadow: none; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 4px;
+    background: none;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo:hover { background: var(--gallery-hover); box-shadow: 0 0 0 3px var(--gallery-hover); }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo > .gallery-todos-text { font-size: 13px; line-height: 19px; color: var(--gallery-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo > .gallery-todos-path { font-size: 11.5px; line-height: 15px; color: var(--gallery-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-done > .gallery-todos-todo > .gallery-todos-text { color: var(--gallery-faint); text-decoration: line-through; text-decoration-color: var(--gallery-faintest); }
+
+  /* Nothing to list: the cards' empty face in the middle. */
+  > .gallery-todos-face > .gallery-todos-empty { grid-area: list; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 0; text-align: center; }
+  > .gallery-todos-face > .gallery-todos-empty[hidden] { display: none; }
+  > .gallery-todos-face > .gallery-todos-empty > p { margin: 0; }
+  > .gallery-todos-face > .gallery-todos-empty > .gallery-todos-line { font-size: 13.5px; line-height: 20px; font-weight: 600; color: var(--gallery-text); }
+  > .gallery-todos-face > .gallery-todos-empty > .gallery-todos-hint { font-size: 12px; line-height: 18px; color: var(--gallery-faint); }
+  > .gallery-todos-face > .gallery-todos-empty > .gallery-todos-empty-picture { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 6px; border-radius: 8px; background: var(--gallery-fill); color: var(--gallery-faint); }
+  > .gallery-todos-face > .gallery-todos-empty > .gallery-todos-empty-picture > svg { width: 16px; height: 16px; }
+  > .gallery-todos-face > .gallery-todos-empty[data-picture="done"] > .gallery-todos-empty-picture { position: relative; width: 72px; height: 72px; margin-bottom: 10px; border-radius: 0; background: none; color: var(--gallery-good); }
+  > .gallery-todos-face > .gallery-todos-empty[data-picture="done"] > .gallery-todos-empty-picture > svg:first-child { position: absolute; inset: 0; width: 72px; height: 72px; }
+  > .gallery-todos-face > .gallery-todos-empty[data-picture="done"] > .gallery-todos-empty-picture > svg:first-child > circle { fill: none; stroke: var(--gallery-good); stroke-width: 7; }
+  > .gallery-todos-face > .gallery-todos-empty[data-picture="done"] > .gallery-todos-empty-picture > svg:last-child { width: 26px; height: 26px; stroke-width: 2.4; }
+  > .gallery-todos-face[data-state="done"],
+  > .gallery-todos-face[data-state="none"],
+  > .gallery-todos-face[data-state="unread"] { grid-template-rows: 20px 0 minmax(0, 1fr); }
+  /* A refused check: a line at the foot, over the list, for a few seconds. */
+  > .gallery-todos-face > .gallery-todos-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--gallery-card-fill); box-shadow: 0 0 0 1px var(--gallery-hair), 0 4px 12px -6px rgb(0 0 0 / 20%); font-size: 12px; line-height: 16px; color: var(--gallery-muted); }
+  > .gallery-todos-face > .gallery-todos-note[hidden] { display: none; }
+
+  /* A tall card: the ring beside the open count. */
+  > .gallery-todos-face[data-layout="tall"] > .gallery-todos-summary { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
+  > .gallery-todos-face[data-layout="tall"] > .gallery-todos-summary[hidden] { display: none; }
+  > .gallery-todos-face[data-layout="tall"] > .gallery-todos-summary > :is(.gallery-todos-progress, .gallery-todos-ticks) { display: none; }
+  > .gallery-todos-face[data-layout="tall"] > .gallery-todos-summary > :is(.gallery-todos-ring, .gallery-todos-big) { display: block; }
+  > .gallery-todos-face[data-layout="tall"] > .gallery-todos-list { margin-top: 10px; }
+  /* A wide card: the ring and the key at the left, the list at the right, each item's headings at its right. */
+  > .gallery-todos-face[data-layout="wide"] { grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: 20px minmax(0, 1fr); grid-template-areas: "head head" "summary list"; column-gap: 28px; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-summary { display: flex; flex-direction: column; margin-top: 4px; padding-top: 4px; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-summary[hidden] { display: none; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-summary > :is(.gallery-todos-progress, .gallery-todos-ticks) { display: none; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-summary > .gallery-todos-ring { display: block; align-self: flex-start; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-summary > .gallery-todos-ring > .gallery-todos-percent { font-size: 22px; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-summary > .gallery-todos-key { display: flex; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-list { margin-top: 4px; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo > .gallery-todos-path { flex: none; max-width: 45%; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-empty { grid-column: 1 / -1; }
+  > .gallery-todos-face[data-layout="wide"]:is([data-state="done"], [data-state="none"], [data-state="unread"]) { grid-template-areas: "head head" "list list"; }
+}
+/* On a custom page the face fills the card the board frames. */
+.gallery-card > [data-doc-component="gallery/todos"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/todos"] > .gallery-todos-face { height: 100%; }

package/packs/gallery/todos/template.html

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

package/packs/gallery/todos/writing.md

@@ -0,0 +1,30 @@
+# 我的待办 (gallery/todos)
+
+A card for a custom page (its places are `page`, its needs `workspace`): the to-dos of every document of the workspace that are not done yet, an item of a to-do list each (`<ul class="doc-todo">`), grouped by document, the one edited last first, each with the headings it stands under. Use it on the home page, or on a page about the user's work.
+
+## 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 |
+| --- | --- | --- | --- |
+| `document` | 只看这篇文档 | document | a document's slug: its to-dos alone; left out, every document's |
+| `done` | 也显示已完成的 | switch | the done ones too, checked and struck through |
+
+They are kept in its data part `settings`, a `<script type="application/json">`: `{}` (template.html, what a menu adds) shows the open to-dos of every document. Write `document` when the user asks for one document's to-dos. The block reads them and writes nothing.
+
+## 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 todos`, the instance as template.html has it. Sizes: 4 × 4 (the default), 4 × 6 and 8 × 4; the list scrolls inside the card.
+
+## What the user does
+
+- clicks an item's box: the item is checked (or cleared) in its document, which Gallery writes as the user's own edit; the home page's undo (Ctrl+Z) checks it back. An item checked on the card stays there, struck through, until the page is shown again. Where the item changed meanwhile (its words), the card says so and reads again;
+- clicks an item's words: its document opens, at the item where it has a block id;
+- clicks a document's title: the document opens.
+
+The card follows by itself: a to-do added, checked or taken out in any document shows at once.
+
+## How it looks
+
+In Gallery 风格's look (the kit's card tokens, light and dark): a head of a small gray chip and a title, its end clear of the card's grip; one hero; the rest small and gray; the accent on the data and on today alone. Its head is a checked list's chip, 我的待办 and how many are open. A 4 × 4 card shows how many are done as a line (已完成 19 / 27 and the percent) over a row of ticks, one an item, done in the accent (a bar past 48); a 4 × 6 card a ring of the share beside the open count large (8 项没完成), its head saying how many documents they come from; an 8 × 4 card a ring at the left over a key (已完成, 未完成, 来自文档), each item's headings at its right. The list is grouped by document, small and gray (its icon, its title, its open count), each item a box, its words and the headings it stands under; it fades at its foot while there is more under it. An item checked on the card stays, struck through, until the page is opened again. With none, or all done (a full green ring with a tick), it says so in the middle.

package/packs/gallery/weather/component.json

@@ -0,0 +1,19 @@
+{
+  "id": "gallery/weather",
+  "apiVersion": 1,
+  "version": "2.0.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, "consent": { "zh": "允许联网之后显示天气", "en": "Allow internet access to show the weather" } },
+  "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>