@heycys/gallery 0.1.1 → 0.2.0

package/packs/gallery/today/kit.js

@@ -0,0 +1,220 @@
+// gallery/today (问候与日期): a greeting by the hour of the reader's clock (早上好 from 5 to 11, 下午好
+// from 12 to 17, 晚上好 from 18 to 4), today's date and its weekday, in the page's language and in the
+// order it writes them (11月7日 星期六, Saturday, November 7: as the countdown's foot writes a date): the
+// UI's where Gallery says it (data-ge-language on the root), else English for a page whose lang is en,
+// else Chinese, the kit's own rule. Drawn again by the kit's clock (`clock`): at each whole minute, which
+// moves the greeting on as the hour turns, and as a day begins, which moves the date; one timer for
+// every block on the page, none of its own. It holds no part and writes nothing: all it shows is drawn
+// (the manifest's `runtime`), and a file holds the bare instance.
+//
+// Its face (the pack's design B, notes/plans/block-packs-plan-2026-11-09.md) is laid out by its card's
+// cells (`context.size`, read again on `layout`: the face's `data-layout`, style.css): a card 3 or more
+// wide and 2 or more high ("full", the 4 × 2 default) has a head of the chip (the sun from 5 to 17 in its
+// warm color, the moon after it in the accent's), the date and the number of the week (ISO 8601's,
+// `weekNumberOf`: 第 46 周) as its quiet meta, the greeting large under it, and the week it is in at the
+// bottom, Monday to Sunday, each day's initial over its date, the days gone fainter, today's 今 (Today)
+// over its date on the accent (`weekOf`, for the eye alone: the date says it); a narrow card ("narrow",
+// 2 wide) is a page of a desk calendar, the greeting in its head, today's day of the month large at the
+// bottom and its weekday and month under it; a card one cell high ("line", 4 × 1) a line, the chip, the
+// greeting and the date. A soft glow from the card's top left, the sun's warm color by day, the accent's
+// in the evening (the face's `data-sky`), the one mood of a home page. The date line's weekday is
+// marked (gallery-today-weekday), a piece a line breaks before and never inside.
+
+const WORDS = {
+  zh: {
+    morning: "早上好",
+    afternoon: "下午好",
+    evening: "晚上好",
+    weekdays: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
+    initials: ["日", "一", "二", "三", "四", "五", "六"],
+    today: "今",
+    week: (/** @type {number} */ number) => `第 ${number} 周`,
+    /** The date and its weekday as the language writes them, pieces a line breaks between. @param {number} month @param {number} day @param {string} weekday */
+    line: (month, day, weekday) => [`${month}月${day}日`, weekday],
+    /** Which of the line's pieces is the weekday. */
+    weekdayAt: 1,
+    /** A desk calendar's foot: the weekday, then the month. @param {number} month @param {string} weekday */
+    foot: (month, weekday) => [weekday, `${month}月`],
+  },
+  en: {
+    morning: "Good morning",
+    afternoon: "Good afternoon",
+    evening: "Good evening",
+    weekdays: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    initials: ["S", "M", "T", "W", "T", "F", "S"],
+    today: "Today",
+    week: (/** @type {number} */ number) => `Week ${number}`,
+    /** The weekday first: Saturday, November 7. @param {number} month @param {number} day @param {string} weekday */
+    line: (month, day, weekday) => [`${weekday},`, `${MONTHS[month - 1]} ${day}`],
+    weekdayAt: 0,
+    /** @param {number} month @param {string} weekday */
+    foot: (month, weekday) => [weekday, MONTHS[month - 1].slice(0, 3)],
+  },
+};
+const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+/** 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 part of the day an hour (0 to 23) is in, as the greeting says it: morning from 5 to 11,
+ * afternoon from 12 to 17, evening from 18 to 4.
+ * @param {number} hour
+ * @returns {"morning" | "afternoon" | "evening"}
+ */
+function partOfDay(hour) {
+  if (hour >= 5 && hour < 12) return "morning";
+  if (hour >= 12 && hour < 18) return "afternoon";
+  return "evening";
+}
+
+/**
+ * What the card says at `now` (the reader's clock) in `language`: the greeting, the date line (its
+ * month and day and the weekday, in the language's order, a list of words a line breaks between and
+ * never inside), and the date as a <time> names it (YYYY-MM-DD).
+ * @param {Date} now
+ * @param {"zh" | "en"} language
+ */
+function faceOf(now, language) {
+  const words = WORDS[language];
+  const two = (/** @type {number} */ value) => String(value).padStart(2, "0");
+  return {
+    greeting: words[partOfDay(now.getHours())],
+    line: words.line(now.getMonth() + 1, now.getDate(), words.weekdays[now.getDay()]),
+    datetime: `${now.getFullYear()}-${two(now.getMonth() + 1)}-${two(now.getDate())}`,
+  };
+}
+
+/**
+ * How a card of `size` (context.size: its cells, or null where no card holds it, a document) lays its face
+ * out: "line" one cell high, "narrow" two wide or less, else "full".
+ * @param {{ w: number, h: number } | null | undefined} size
+ * @returns {"full" | "narrow" | "line"}
+ */
+function layoutOf(size) {
+  if (!size) return "full";
+  if (size.h <= 1) return "line";
+  return size.w <= 2 ? "narrow" : "full";
+}
+
+// The chip's two pictures, 24 x 24 lines in the chip's ink: the sun by day, the moon in the evening.
+const PICTURES = {
+  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2.8v1.9M12 19.3v1.9M2.8 12h1.9M19.3 12h1.9M5.5 5.5l1.3 1.3M17.2 17.2l1.3 1.3M5.5 18.5l1.3-1.3M17.2 6.8l1.3-1.3"/>',
+  moon: '<path d="M19.5 14.3A7.8 7.8 0 0 1 9.7 4.5a7.8 7.8 0 1 0 9.8 9.8z"/>',
+};
+
+/**
+ * The week `now` is in, Monday first, as the card's strip draws it in `language`: seven of { initial (the
+ * weekday's, today's 今 or Today), date (the day of the month), today, past (a day before today) }.
+ * @param {Date} now
+ * @param {"zh" | "en"} language
+ */
+function weekOf(now, language) {
+  const monday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - ((now.getDay() + 6) % 7), 12);
+  return Array.from({ length: 7 }, (_, index) => {
+    const day = new Date(monday.getFullYear(), monday.getMonth(), monday.getDate() + index, 12);
+    const today = index === (now.getDay() + 6) % 7;
+    return { initial: today ? WORDS[language].today : WORDS[language].initials[day.getDay()], date: day.getDate(), today, past: index < (now.getDay() + 6) % 7 };
+  });
+}
+
+/**
+ * The number of the week `now` is in, as ISO 8601 counts them (the week a year's first Thursday is in its
+ * first, Monday its first day), 1 to 53.
+ * @param {Date} now
+ */
+function weekNumberOf(now) {
+  const thursday = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
+  thursday.setUTCDate(thursday.getUTCDate() + 3 - ((thursday.getUTCDay() + 6) % 7)); // the Thursday of its week, which says the year
+  const first = Date.UTC(thursday.getUTCFullYear(), 0, 1);
+  return Math.ceil(((thursday.getTime() - first) / 86_400_000 + 1) / 7);
+}
+
+/**
+ * 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-today-${kind}`;
+  return node;
+}
+
+DocKit.component({
+  id: "gallery/today",
+  on: ["clock", "layout"],
+  mount(host, context) {
+    const face = made("div", "face");
+    const chip = made("span", "chip");
+    chip.setAttribute("aria-hidden", "true");
+    const greeting = made("p", "greeting");
+    const date = made("time", "date");
+    // The head's quiet meta, after the date: the number of the week.
+    const number = made("span", "meta");
+    number.setAttribute("aria-hidden", "true");
+    const week = made("ol", "week");
+    week.setAttribute("aria-hidden", "true");
+    // A narrow card's desk calendar: the day of the month, large, and its weekday and month under it.
+    const big = made("span", "big");
+    big.setAttribute("aria-hidden", "true");
+    const foot = made("span", "foot");
+    foot.setAttribute("aria-hidden", "true");
+    face.append(chip, greeting, date, number, week, big, foot);
+    host.append(face);
+    // Each word set only when it is another, so that a minute that changes nothing writes nothing.
+    const put = (/** @type {HTMLElement} */ node, /** @type {string} */ words) => {
+      if (node.textContent !== words) node.textContent = words;
+    };
+    const draw = () => {
+      const at = new Date();
+      const language = languageOf(document.documentElement);
+      const words = WORDS[language];
+      const now = faceOf(at, language);
+      const layout = layoutOf(context?.size);
+      if (face.dataset.layout !== layout) face.dataset.layout = layout;
+      const sky = partOfDay(at.getHours()) === "evening" ? "moon" : "sun";
+      if (chip.dataset.sky !== sky) {
+        chip.dataset.sky = sky;
+        face.dataset.sky = sky;
+        chip.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">${PICTURES[sky]}</svg>`;
+      }
+      put(greeting, now.greeting);
+      // The date line's pieces, a space between them, made again only when its words are others.
+      if (date.textContent !== now.line.join(" ")) {
+        date.replaceChildren(...now.line.flatMap((piece, index) => {
+          const node = made("span", "piece");
+          node.classList.toggle("gallery-today-weekday", index === words.weekdayAt);
+          node.textContent = piece;
+          return index === 0 ? [node] : [" ", node];
+        }));
+      }
+      if (date.dateTime !== now.datetime) {
+        date.dateTime = now.datetime;
+        number.textContent = words.week(weekNumberOf(at));
+        big.textContent = String(at.getDate());
+        const [weekday, month] = words.foot(at.getMonth() + 1, words.weekdays[at.getDay()]);
+        const dot = made("span", "dot");
+        dot.textContent = "·";
+        foot.replaceChildren(weekday, dot, month);
+        week.replaceChildren(...weekOf(at, language).map((day) => {
+          const item = made("li", "day");
+          item.classList.toggle("gallery-today-now", day.today);
+          item.classList.toggle("gallery-today-past", day.past);
+          const initial = made("span", "initial");
+          initial.textContent = day.initial;
+          const value = made("span", "number");
+          value.textContent = String(day.date);
+          item.append(initial, value);
+          return item;
+        }));
+      }
+    };
+    draw();
+    return { update: draw };
+  },
+});

package/packs/gallery/today/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"/><defs><radialGradient id="g" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16 12) scale(140 96)"><stop offset="0" stop-color="#ffb74d" stop-opacity=".22"/><stop offset=".62" stop-color="#ffb74d" stop-opacity="0"/></radialGradient></defs><rect x="16.5" y="12.5" width="207" height="95" rx="8" fill="#ffffff" stroke="#e6e6e3"/><rect x="17" y="13" width="206" height="94" rx="7.5" fill="url(#g)"/><rect x="28" y="22" width="10" height="10" rx="3" fill="#fdf1dd"/><rect x="42" y="24.5" width="46" height="5" rx="2.5" fill="#37352f"/><rect x="92" y="24.5" width="20" height="5" rx="2.5" fill="#d4d3cf"/><rect x="28" y="42" width="60" height="15" rx="3" fill="#1d1d1b"/><rect x="35" y="76" width="6" height="3" rx="1.5" fill="#d4d3cf"/><rect x="33" y="84" width="10" height="6" rx="3" fill="#a6a5a1"/><rect x="62" y="76" width="6" height="3" rx="1.5" fill="#d4d3cf"/><rect x="60" y="84" width="10" height="6" rx="3" fill="#a6a5a1"/><rect x="89" y="76" width="6" height="3" rx="1.5" fill="#d4d3cf"/><rect x="87" y="84" width="10" height="6" rx="3" fill="#a6a5a1"/><rect x="108" y="71" width="22" height="26" rx="6" fill="#4084cf"/><rect x="116" y="76" width="6" height="3" rx="1.5" fill="#ffffff"/><rect x="114" y="84" width="10" height="6" rx="3" fill="#ffffff"/><rect x="143" y="76" width="6" height="3" rx="1.5" fill="#d4d3cf"/><rect x="141" y="84" width="10" height="6" rx="3" fill="#37352f"/><rect x="170" y="76" width="6" height="3" rx="1.5" fill="#d4d3cf"/><rect x="168" y="84" width="10" height="6" rx="3" fill="#37352f"/><rect x="197" y="76" width="6" height="3" rx="1.5" fill="#d4d3cf"/><rect x="195" y="84" width="10" height="6" rx="3" fill="#37352f"/></svg>

package/packs/gallery/today/style.css

@@ -0,0 +1,149 @@
+/* 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 face (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, which the script sets from context.size): "full" (4 × 2, the
+   default) a head of the chip, the date (600) and the number of the week after it (the head's quiet meta),
+   the greeting large under it and the week at the bottom, seven days of 38px, the days gone fainter,
+   today the one solid square of the accent; "narrow" (2 wide) a page of a desk calendar, the greeting
+   the head's title, today's day of the month large at the bottom, its weekday and month under it;
+   "line" (one cell high) the chip, the greeting and the date on one line. The chip is the sun's warm
+   color by day and the accent's pale blue in the evening, and so is the soft glow at the card's top left
+   (the face's data-sky), drawn from the card's edges: the face taken out over the card's padding and
+   given it back. Its head keeps clear of the card's grip. Light and dark. */
+[data-doc-component="gallery/today"] {
+  --gallery-today-glow: light-dark(rgb(255 183 77 / 20%), rgb(255 170 60 / 8.5%));
+  --gallery-today-glow-evening: light-dark(rgb(64 132 207 / 13%), rgb(80 143 214 / 15%));
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
+  > .gallery-today-face {
+    display: grid;
+    grid-template-columns: auto minmax(0, max-content) auto minmax(var(--gallery-grip-room, 0px), 1fr);
+    grid-template-rows: 20px auto 1fr;
+    grid-template-areas: "chip date meta ." "greeting greeting greeting greeting" "week week week week";
+    column-gap: 8px;
+    box-sizing: border-box;
+    min-height: 0;
+  }
+  > .gallery-today-face > .gallery-today-chip {
+    grid-area: chip;
+    align-self: center;
+    display: grid;
+    place-items: center;
+    width: var(--gallery-chip-size);
+    height: var(--gallery-chip-size);
+    border-radius: var(--gallery-chip-radius);
+    background: var(--gallery-warm-soft);
+    color: var(--gallery-warm);
+  }
+  > .gallery-today-face > .gallery-today-chip[data-sky="moon"] { background: var(--gallery-accent-soft); color: var(--gallery-accent-ink); }
+  > .gallery-today-face > .gallery-today-chip > svg { display: block; width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-today-face > .gallery-today-date {
+    grid-area: date;
+    align-self: center;
+    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-today-face > .gallery-today-meta {
+    grid-area: meta;
+    align-self: center;
+    font-size: var(--gallery-meta-size);
+    line-height: var(--gallery-title-line);
+    color: var(--gallery-faint);
+    white-space: nowrap;
+  }
+  > .gallery-today-face > .gallery-today-greeting {
+    grid-area: greeting;
+    margin: 8px 0 0;
+    font-size: 28px;
+    line-height: 34px;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--gallery-text-strong);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  > .gallery-today-face > .gallery-today-week {
+    grid-area: week;
+    align-self: end;
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: 4px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-day {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 38px;
+    border-radius: 9px;
+  }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-day > .gallery-today-initial { font-size: 10.5px; line-height: 14px; color: var(--gallery-faint); }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-day > .gallery-today-number { font-size: 13px; line-height: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gallery-text); }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-past > .gallery-today-number { font-weight: 500; color: var(--gallery-faint); }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-now { background: var(--gallery-accent); }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-now > .gallery-today-initial { color: rgb(255 255 255 / 82%); }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-now > .gallery-today-number { color: #fff; }
+  > .gallery-today-face > :is(.gallery-today-big, .gallery-today-foot) { display: none; }
+  > .gallery-today-face > .gallery-today-big {
+    grid-area: big;
+    align-self: end;
+    font-size: 56px;
+    line-height: 1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: -.04em;
+    font-variant-numeric: lining-nums;
+    color: var(--gallery-text-strong);
+  }
+  > .gallery-today-face > .gallery-today-foot { grid-area: foot; margin-top: 8px; font-size: 12.5px; line-height: 16px; color: var(--gallery-muted); white-space: nowrap; }
+  > .gallery-today-face > .gallery-today-foot > .gallery-today-dot { margin: 0 5px; color: var(--gallery-faintest); }
+
+  /* A narrow card: a page of a desk calendar. */
+  > .gallery-today-face[data-layout="narrow"] {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: 20px 1fr auto;
+    grid-template-areas: "chip greeting" "big big" "foot foot";
+  }
+  > .gallery-today-face[data-layout="narrow"] > :is(.gallery-today-date, .gallery-today-meta, .gallery-today-week) { display: none; }
+  > .gallery-today-face[data-layout="narrow"] > :is(.gallery-today-big, .gallery-today-foot) { display: block; }
+  > .gallery-today-face[data-layout="narrow"] > .gallery-today-greeting {
+    align-self: center;
+    margin: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+    font-size: var(--gallery-title-size);
+    line-height: var(--gallery-title-line);
+    letter-spacing: 0;
+    color: var(--gallery-text);
+  }
+  /* A card one cell high: a line. */
+  > .gallery-today-face[data-layout="line"] {
+    grid-template-columns: auto auto minmax(0, 1fr);
+    grid-template-rows: 1fr;
+    grid-template-areas: "chip greeting date";
+    align-items: center;
+  }
+  > .gallery-today-face[data-layout="line"] > :is(.gallery-today-meta, .gallery-today-week) { display: none; }
+  > .gallery-today-face[data-layout="line"] > .gallery-today-greeting { margin: 0; font-size: 15px; line-height: 20px; letter-spacing: 0; }
+  > .gallery-today-face[data-layout="line"] > .gallery-today-date { margin-inline-start: 4px; padding-inline-end: var(--gallery-grip-room, 0px); font-weight: 400; color: var(--gallery-muted); }
+}
+/* On a custom page the face is the card's: as high as what the card holds inside its padding, and its glow
+   the whole card's, from its edges (the face taken out over the card's padding and given it back). */
+.gallery-card > [data-doc-component="gallery/today"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/today"] > .gallery-today-face {
+  height: calc(100% + 2 * var(--gallery-card-pad));
+  margin: calc(-1 * var(--gallery-card-pad));
+  padding: var(--gallery-card-pad);
+  border-radius: var(--gallery-card-radius);
+  background: radial-gradient(110% 100% at 0% 0%, var(--gallery-today-glow), transparent 62%);
+}
+.gallery-card > [data-doc-component="gallery/today"] > .gallery-today-face[data-sky="moon"] { background: radial-gradient(110% 100% at 0% 0%, var(--gallery-today-glow-evening), transparent 62%); }

package/packs/gallery/today/template.html

@@ -0,0 +1 @@
+<div data-doc-component="gallery/today"></div>

package/packs/gallery/today/writing.md

@@ -0,0 +1,14 @@
+# 问候与日期 (gallery/today)
+
+A card for a custom page (its places are `page`): a greeting by the time of day (早上好, 下午好, 晚上好), today's date and its weekday, in the language Gallery's UI speaks. Use it at the top of a home page or of any page the user opens every day.
+
+## 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 today`: the instance is empty, `<div data-doc-component="gallery/today"></div>`, everything on it drawn by its script. It has no settings and holds no data: there is nothing to fill in and nothing it writes.
+
+- Sizes: 4 × 2 (the default: the date and the week's number at the top, the greeting large, this week at the bottom), 2 × 2 (a page of a desk calendar: the greeting, today's day of the month large, its weekday and month) and 4 × 1 (one line: the greeting and the date). The user may switch between them.
+- Its places hold no document: no document's menu offers it. In a document it would show the same words, framed by nothing.
+
+## 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. The chip is the sun in its warm color by day and the moon in the accent's in the evening, and so is a soft glow at the card's top left, the one mood of a home page. On a 4 × 2 card the greeting is 28px and this week sits at the bottom, seven days, the days gone fainter, today the one solid square of the accent; a 2 × 2 card is a page of a desk calendar, today's day of the month 56px; a 4 × 1 card one line. It changes by itself: the greeting as the hour turns (it hears the kit's clock each minute), the date at midnight. The script runs with the rights of the page's own scripts, as any block's does.

package/packs/gallery/todos/component.json

@@ -0,0 +1,19 @@
+{
+  "id": "gallery/todos",
+  "apiVersion": 1,
+  "version": "2.0.0",
+  "name": { "zh": "我的待办", "en": "My to-dos" },
+  "description": { "zh": "所有文档里没完成的待办：勾选就写回那篇文档，点文字打开它", "en": "The to-dos of every document not done yet: check one in its document, or click it to open it there" },
+  "words": "wodedaiban daiban renwu todo todos tasks checklist 待办 任务 清单 我的待办 没完成",
+  "parts": {
+    "settings": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-todos-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[4, 4], [4, 6], [8, 4]], "resize": true },
+  "settings": [
+    { "key": "document", "label": { "zh": "只看这篇文档", "en": "Only this document" }, "type": "document" },
+    { "key": "done", "label": { "zh": "也显示已完成的", "en": "Show done ones too" }, "type": "switch", "default": false }
+  ],
+  "needs": ["workspace"]
+}

package/packs/gallery/todos/example.html

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