hd-garden 0.13.3 → 0.14.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agents/skills/garden-compose/SKILL.md +24 -0
- package/.agents/skills/garden-compose/references/colors.md +11 -0
- package/.agents/skills/garden-compose/references/composition-patterns.md +162 -0
- package/.agents/skills/garden-compose/references/examples.md +55 -0
- package/.agents/skills/garden-compose/references/frames.md +7 -0
- package/.agents/skills/garden-compose/references/layout-recipes.md +84 -0
- package/.agents/skills/garden-compose/references/rendering-model.md +120 -0
- package/.agents/skills/garden-compose/references/static-play.md +19 -0
- package/.agents/skills/garden-compose/references/visual-selection.md +38 -0
- package/.agents/skills/garden-compose/references/workflow.md +27 -0
- package/.agents/skills/garden-compose/scripts/_cli.mjs +12 -0
- package/.agents/skills/garden-compose/scripts/apply.mjs +2 -0
- package/.agents/skills/garden-compose/scripts/check.mjs +2 -0
- package/.agents/skills/garden-compose/scripts/prompt.mjs +2 -0
- package/.agents/skills/garden-compose/scripts/scan.mjs +2 -0
- package/.agents/skills/garden-post-review/SKILL.md +5 -16
- package/Makefile +12 -3
- package/README.en.md +10 -5
- package/README.md +10 -5
- package/app/admin/preview/[...path]/page.tsx +4 -16
- package/app/api/admin/ui/blocks/route.ts +1 -1
- package/app/components/AdminUiPanels.tsx +6 -3
- package/app/components/GardenContentGuide.tsx +7 -8
- package/app/components/MarkdownArticle.tsx +2 -0
- package/app/components/UiStudio.tsx +29 -32
- package/app/components/garden/AuthorRich.tsx +5 -0
- package/app/components/garden/ComposePreview.tsx +9 -0
- package/app/components/garden/GardenBlock.tsx +12 -10
- package/app/components/garden/GardenFile.tsx +1 -1
- package/app/components/garden/blocks.tsx +9 -197
- package/app/components/garden/file-icons.tsx +1 -1
- package/app/components/garden/patterns.tsx +7 -65
- package/app/lib/rehype-garden-blocks.mjs +30 -0
- package/app/lib/remark-garden.mjs +0 -4
- package/app/lib/ui-model.ts +8 -9
- package/app/styles/a2.css +17 -1
- package/bin/garden.mjs +34 -35
- package/docs/handbook/ai-writing.md +19 -22
- package/docs/handbook/components/compose.md +16 -7
- package/docs/handbook/components/image.md +1 -1
- package/docs/handbook/components/link-card.md +2 -2
- package/docs/handbook/components.md +5 -213
- package/docs/handbook/deploy.md +11 -0
- package/docs/handbook/en/ai-writing.md +17 -20
- package/docs/handbook/en/components/compose.md +15 -6
- package/docs/handbook/en/components/image.md +1 -1
- package/docs/handbook/en/components/link-card.md +2 -2
- package/docs/handbook/en/components.md +7 -215
- package/docs/handbook/en/deploy.md +11 -0
- package/docs/handbook/en/index.md +29 -53
- package/docs/handbook/en/reference/compose.md +77 -148
- package/docs/handbook/en/reference.md +6 -22
- package/docs/handbook/en/start.md +1 -1
- package/docs/handbook/en/workflow.md +21 -17
- package/docs/handbook/en/writing.md +3 -3
- package/docs/handbook/index.md +26 -47
- package/docs/handbook/reference/compose.md +79 -148
- package/docs/handbook/reference.md +6 -22
- package/docs/handbook/start.md +1 -1
- package/docs/handbook/workflow.md +21 -17
- package/docs/handbook/writing.md +3 -3
- package/editors/dist/typora/main.js +324 -330
- package/editors/dist/typora/style.css +4299 -11
- package/editors/dist/vscode/garden-ui-0.14.2.vsix +0 -0
- package/eslint.config.mjs +3 -0
- package/package.json +5 -3
- package/public/images/compose-resources/resource-015b41eb0f32.svg +1 -0
- package/public/images/compose-resources/resource-ecee6b47f015.svg +1 -0
- package/public/images/compose-resources/resource-fd51121b5e8c.svg +1 -0
- package/scripts/build-content.mjs +40 -131
- package/scripts/build-ui-preview.mjs +7 -5
- package/scripts/check-post.mjs +10 -106
- package/scripts/check-site.mjs +80 -0
- package/scripts/compose-style-reference.mjs +22 -0
- package/scripts/editor-preview-css.mjs +14 -0
- package/scripts/file-preview.mjs +1 -1
- package/scripts/file-sizes.mjs +7 -7
- package/scripts/generated-cache.mjs +36 -0
- package/scripts/handbook-facts.mjs +10 -3
- package/scripts/image-sizes.mjs +6 -12
- package/scripts/link-assets.mjs +35 -10
- package/scripts/managed-skills.mjs +56 -0
- package/scripts/pack-editors.mjs +12 -1
- package/scripts/prepare-pages-output.mjs +1 -1
- package/scripts/site-guide.mjs +19 -0
- package/scripts/sync-editor-version.mjs +28 -0
- package/scripts/ui-cli.mjs +26 -33
- package/templates/garden-blocks.md +4 -180
- package/templates/garden-snippets.plist +2 -183
- package/templates/site/AGENTS.en.md +89 -0
- package/templates/site/AGENTS.md +72 -0
- package/templates/site/Makefile +12 -3
- package/templates/site/Makefile.en +12 -3
- package/templates/site/README.en.md +6 -1
- package/templates/site/README.md +6 -1
- package/templates/skills-en/garden-compose/SKILL.md +24 -0
- package/templates/skills-en/garden-post-review/SKILL.md +5 -16
- package/templates/workflows/pages.en.yml +11 -0
- package/templates/workflows/pages.yml +11 -0
- package/ui/compose/compose.css +54 -14
- package/ui/compose/contracts.mjs +16 -0
- package/ui/compose/dil.mjs +109 -48
- package/ui/compose/distribution.mjs +7 -0
- package/ui/compose/features.mjs +90 -0
- package/ui/compose/icons.mjs +8 -0
- package/ui/compose/index.mjs +2 -0
- package/ui/compose/inspect.mjs +11 -0
- package/ui/compose/markup.mjs +80 -23
- package/ui/compose/preview.mjs +13 -0
- package/ui/compose/prompt-catalog.mjs +15 -3
- package/ui/compose/render.mjs +46 -11
- package/ui/compose/scenes.mjs +10 -0
- package/ui/core/apply.mjs +12 -45
- package/ui/core/catalog.mjs +22 -32
- package/ui/core/cli-locale.mjs +8 -18
- package/ui/core/color.mjs +34 -0
- package/ui/core/compile.mjs +1 -8
- package/ui/core/demos.mjs +138 -108
- package/ui/core/fence.mjs +14 -70
- package/ui/core/fix-prompt.mjs +1 -3
- package/ui/core/garden-fence.mjs +3 -63
- package/ui/core/index.mjs +3 -5
- package/ui/core/parse.mjs +22 -8
- package/ui/core/scan.mjs +31 -43
- package/ui/core/starters.mjs +3 -3
- package/ui/core/static.mjs +36 -6
- package/ui/core/transform.mjs +64 -149
- package/ui/core/validate.mjs +20 -9
- package/ui/garden/article-content.mjs +98 -0
- package/ui/garden/catalog.mjs +21 -427
- package/ui/garden/check.mjs +18 -60
- package/ui/garden/file-block.mjs +1 -1
- package/ui/garden/file-paths.mjs +8 -6
- package/ui/garden/parse.mjs +19 -182
- package/ui/garden/relations.mjs +1 -1
- package/ui/garden/snippets.mjs +12 -153
- package/ui/garden/source-icon.mjs +17 -9
- package/ui/garden/word-count.mjs +16 -85
- package/ui/index.mjs +1 -5
- package/ui/preview/dist/garden-ui.css +4300 -11
- package/ui/preview/dist/garden-ui.esm.js +446 -418
- package/ui/preview/dist/garden-ui.iife.js +446 -418
- package/ui/preview/index.tsx +31 -98
- package/ui/preview/site-config.ts +4 -0
- package/ui/prompt/build.mjs +1 -4
- package/ui/prompt/recipes/code-walkthrough.md +17 -12
- package/ui/prompt/recipes/compare.md +14 -10
- package/ui/prompt/recipes/compose.md +3 -3
- package/ui/prompt/recipes/converter.md +17 -14
- package/ui/prompt/recipes/data-chart.md +9 -8
- package/ui/prompt/recipes/inspect-grid.md +9 -8
- package/ui/prompt/recipes/param-bench.md +17 -12
- package/ui/prompt/recipes/plan.md +4 -3
- package/ui/prompt/recipes/stepper.md +18 -16
- package/ui/prompt/recipes/trace.md +20 -18
- package/ui/prompt/rules.md +26 -133
- package/ui/prompt/studio.md +3 -18
- package/ui/react/CatalogPage.tsx +19 -21
- package/ui/react/recipes.ts +3 -3
- package/ui/react/runtime.tsx +23 -2
- package/ui/react/ui.css +17 -11
- package/vite.config.ts +16 -3
- package/.agents/skills/garden-interactive-chart/SKILL.md +0 -84
- package/.agents/skills/garden-interactive-chart/references/shell.html +0 -49
- package/.agents/skills/garden-interactive-chart/references/style.md +0 -61
- package/.agents/skills/garden-ui/SKILL.md +0 -125
- package/app/components/UiBlock.tsx +0 -23
- package/app/components/WidgetChart.tsx +0 -224
- package/app/lib/generated-content.ts +0 -385
- package/docs/handbook/components/card.md +0 -67
- package/docs/handbook/components/chart.md +0 -38
- package/docs/handbook/components/choice.md +0 -42
- package/docs/handbook/components/compare.md +0 -53
- package/docs/handbook/components/file.md +0 -29
- package/docs/handbook/components/html.md +0 -49
- package/docs/handbook/components/interactive.md +0 -48
- package/docs/handbook/components/list.md +0 -65
- package/docs/handbook/components/relations.md +0 -95
- package/docs/handbook/components/stat.md +0 -39
- package/docs/handbook/components/timeline.md +0 -37
- package/docs/handbook/en/components/card.md +0 -67
- package/docs/handbook/en/components/chart.md +0 -38
- package/docs/handbook/en/components/choice.md +0 -42
- package/docs/handbook/en/components/compare.md +0 -53
- package/docs/handbook/en/components/file.md +0 -29
- package/docs/handbook/en/components/html.md +0 -49
- package/docs/handbook/en/components/interactive.md +0 -44
- package/docs/handbook/en/components/list.md +0 -65
- package/docs/handbook/en/components/relations.md +0 -95
- package/docs/handbook/en/components/stat.md +0 -39
- package/docs/handbook/en/components/timeline.md +0 -37
- package/docs/handbook/en/reference/card.md +0 -85
- package/docs/handbook/en/reference/chart.md +0 -68
- package/docs/handbook/en/reference/choice.md +0 -69
- package/docs/handbook/en/reference/compare.md +0 -59
- package/docs/handbook/en/reference/file.md +0 -50
- package/docs/handbook/en/reference/html.md +0 -62
- package/docs/handbook/en/reference/interactive.md +0 -71
- package/docs/handbook/en/reference/list.md +0 -72
- package/docs/handbook/en/reference/relations.md +0 -113
- package/docs/handbook/en/reference/stat.md +0 -60
- package/docs/handbook/en/reference/timeline.md +0 -56
- package/docs/handbook/reference/card.md +0 -85
- package/docs/handbook/reference/chart.md +0 -68
- package/docs/handbook/reference/choice.md +0 -69
- package/docs/handbook/reference/compare.md +0 -59
- package/docs/handbook/reference/file.md +0 -50
- package/docs/handbook/reference/html.md +0 -62
- package/docs/handbook/reference/interactive.md +0 -71
- package/docs/handbook/reference/list.md +0 -72
- package/docs/handbook/reference/relations.md +0 -113
- package/docs/handbook/reference/stat.md +0 -60
- package/docs/handbook/reference/timeline.md +0 -56
- package/editors/dist/vscode/garden-ui-0.1.1.vsix +0 -0
- package/templates/skills-en/garden-interactive-chart/SKILL.md +0 -84
- package/templates/skills-en/garden-interactive-chart/references/shell.html +0 -49
- package/templates/skills-en/garden-interactive-chart/references/style.md +0 -61
- package/templates/skills-en/garden-ui/SKILL.md +0 -125
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Component reference · html
|
|
3
|
-
navTitle: html
|
|
4
|
-
description: Run a self-contained HTML, CSS, and JavaScript demo inside a sandboxed iframe.
|
|
5
|
-
section: reference
|
|
6
|
-
order: 7
|
|
7
|
-
badge: html
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
[← Component reference](/garden/en/reference) · [Usage: html](/garden/en/components/html)
|
|
11
|
-
|
|
12
|
-
## Examples
|
|
13
|
-
|
|
14
|
-
```garden html
|
|
15
|
-
title: Character Count Widget
|
|
16
|
-
code: |
|
|
17
|
-
<!doctype html>
|
|
18
|
-
<html lang="en">
|
|
19
|
-
<head>
|
|
20
|
-
<meta charset="utf-8" />
|
|
21
|
-
<style>
|
|
22
|
-
body { margin: 0; padding: 16px 18px; font: 14px/1.6 system-ui, sans-serif; color: #1b1a18; background: #faf9f5; }
|
|
23
|
-
input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #d5d1c8; border-radius: 6px; font: inherit; background: #fff; color: #1b1a18; }
|
|
24
|
-
.meta { margin-top: 10px; color: #6e6b64; font-variant-numeric: tabular-nums; }
|
|
25
|
-
strong { color: #1b1a18; }
|
|
26
|
-
</style>
|
|
27
|
-
</head>
|
|
28
|
-
<body>
|
|
29
|
-
<input id="txt" value="Keep your posts in a Git repository and push to deploy." aria-label="Sample text input" />
|
|
30
|
-
<div class="meta">Characters: <strong id="count">55</strong></div>
|
|
31
|
-
<script>
|
|
32
|
-
const input = document.getElementById("txt");
|
|
33
|
-
const count = document.getElementById("count");
|
|
34
|
-
input.addEventListener("input", () => { count.textContent = String(input.value.length); });
|
|
35
|
-
</script>
|
|
36
|
-
</body>
|
|
37
|
-
</html>
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
## Syntax
|
|
41
|
-
|
|
42
|
-
````markdown
|
|
43
|
-
```garden html
|
|
44
|
-
src: # either this or code, path
|
|
45
|
-
code: | # either this or src, HTML
|
|
46
|
-
title: # recommended, frame title
|
|
47
|
-
```
|
|
48
|
-
````
|
|
49
|
-
|
|
50
|
-
## Fields
|
|
51
|
-
|
|
52
|
-
Fence header: ` ```garden html ` (snippet trigger `;ghtml`). Invalid YAML or unknown top-level keys report `garden-yaml` on the block.
|
|
53
|
-
|
|
54
|
-
| Field | Required | Default | Allowed Values & Limits | Description |
|
|
55
|
-
| :--- | :--- | :--- | :--- | :--- |
|
|
56
|
-
| `src` | Either `src` or `code` | none | relative path (e.g. `./demo.html`) | Path to a standalone `.html` file inside the post's sidecar directory |
|
|
57
|
-
| `code` | Either `code` or `src` | HTML body below `---` or `""` | multiline HTML string | Inline HTML markup (runs inside a sandboxed `iframe` and resizes to fit its content when `<script>` is present; HTML can also be placed below a `---` separator) |
|
|
58
|
-
| `title` | Recommended | `"HTML"` | string | Frame header title and accessible `iframe` title |
|
|
59
|
-
|
|
60
|
-
## Limits & errors
|
|
61
|
-
|
|
62
|
-
- Apart from the shared `garden-yaml`, this component has no error codes of its own; values marked "not checked" in the table never report an error.
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Component reference · interactive
|
|
3
|
-
navTitle: interactive
|
|
4
|
-
description: Let readers drag sliders or switches to recalculate formulas and charts in real time.
|
|
5
|
-
section: reference
|
|
6
|
-
order: 8
|
|
7
|
-
badge: interactive
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
[← Component reference](/garden/en/reference) · [Usage: interactive](/garden/en/components/interactive)
|
|
11
|
-
|
|
12
|
-
## Examples
|
|
13
|
-
|
|
14
|
-
```garden interactive #reading-time
|
|
15
|
-
caption: "Example: estimate reading time from word count, reading speed, and image count. Numbers are illustrative only."
|
|
16
|
-
---
|
|
17
|
-
<State words={6000} speed={400} images={8} />
|
|
18
|
-
<Let textMinutes={round(words / speed)} />
|
|
19
|
-
<Let imageMinutes={round(images * 12 / 60)} />
|
|
20
|
-
<Let parts={[{ part: "Prose", minutes: textMinutes }, { part: "Images", minutes: imageMinutes }]} />
|
|
21
|
-
|
|
22
|
-
<Slider bind="words" label="Word count" min={1000} max={20000} step={500} unit="words" />
|
|
23
|
-
<Slider bind="speed" label="Reading speed" min={200} max={800} step={50} unit="wpm" />
|
|
24
|
-
<Slider bind="images" label="Image count" min={0} max={30} step={1} unit="images" />
|
|
25
|
-
|
|
26
|
-
<Stat label="Example: estimated reading time" value={textMinutes + imageMinutes} unit="min" hint="Counting 12 seconds per image" />
|
|
27
|
-
<Chart data={parts} x={part} yLabel="min">
|
|
28
|
-
<Bar y={minutes} label="Example" />
|
|
29
|
-
</Chart>
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## Syntax
|
|
33
|
-
|
|
34
|
-
````markdown
|
|
35
|
-
```garden interactive #<id>
|
|
36
|
-
caption: # required, default reading
|
|
37
|
-
intent: | # optional, original idea
|
|
38
|
-
expect: # optional, assertions
|
|
39
|
-
--- # tags go below
|
|
40
|
-
<State ... /> # required, state
|
|
41
|
-
<Let ... /> # optional, derived values
|
|
42
|
-
<Slider bind="..." /> # input control
|
|
43
|
-
<Stat ... /> # output
|
|
44
|
-
```
|
|
45
|
-
````
|
|
46
|
-
|
|
47
|
-
## Fields
|
|
48
|
-
|
|
49
|
-
Fence header: ` ```garden interactive #<id> ` (snippet trigger `;ginteractive`). YAML metadata goes above `---` and declarative UI tags go below `---` (run `npx garden ui catalog` to inspect all internal tags in `.garden/ui-catalog.html`); invalid YAML or unknown top-level keys report `garden-yaml` on the block.
|
|
50
|
-
|
|
51
|
-
| Field or Tag | Required | Default | Allowed Values & Limits | Description |
|
|
52
|
-
| :--- | :--- | :--- | :--- | :--- |
|
|
53
|
-
| `#<id>` / `id` | Required | none | lowercase letters, digits, hyphens `^[a-z0-9]+(?:-[a-z0-9]+)*$`, unique per post; missing or invalid reports `ui-id` | Written on the fence line (such as `#reading-time`) or in the YAML header |
|
|
54
|
-
| `caption` | Required | none | non-empty one-sentence takeaway string; missing or empty reports `ui-caption` | States the conclusion visible in the default state |
|
|
55
|
-
| `intent` | Optional | none | string (non-string reports `ui-header`; modified `intent` without recompiling reports a `ui-stale` warning) | Original natural-language prompt this block was compiled from |
|
|
56
|
-
| `expect` | Optional | none | `{ given: {...}, <name>: <expected> }[]` (non-array reports `ui-header`; malformed or failing assertion reports `ui-expect`) | Numeric assertions verified by `npx garden ui check` (use `{ value, tol }` for approximate values) |
|
|
57
|
-
| `<State />` | Required | none | lowercase-initial prop names with number, string, or boolean literal defaults (invalid name, duplicate name, or non-literal reports `ui-prop`) | Declares mutable state variables and default values, e.g. `<State words={6000} />` |
|
|
58
|
-
| `<Let />` | Optional | none | expression props (unknown identifier or disallowed syntax reports `ui-expr`, cyclic dependency reports `ui-cycle`, evaluation failure reports `ui-eval`, single-multiplication-only block reports `interactive-trivial`) | Computes derived numbers, arrays, or objects from state |
|
|
59
|
-
| `<Data />` | Optional | none | `name` (valid identifier) and `src` (`.csv` or `.json` inside the post's sidecar directory; out-of-bounds, missing, or invalid file reports `ui-data`) | Loads a sidecar data file |
|
|
60
|
-
| `<Slider />` / `<Stepper />` / `<Toggle />` | At least one input control | `Slider`: `scale="linear"`, `snap="none"` (`"pow2"` when `scale="log"` and bounds are powers of 2); `Stepper`: `step={1}` | `bind` must reference a declared state variable of matching type (otherwise `ui-bind`); `max <= min`, `scale="log"` with `min <= 0`, or default outside `min..max` reports `ui-prop` | Input controls bound to numeric or boolean state |
|
|
61
|
-
| `<Choice />` / `<Checklist />` / `<Button />` | Optional input controls | `Button`: `tone="plain"` | `<Choice>` `options` must have `2` to `8` items (outside `2`–`8` reports `ui-limit`, default not in `options` reports `ui-prop`); `<Checklist>` `items` must have `1` to `30` items (outside `1`–`30` reports `ui-limit`); `<Button>` requires exactly one of `set` or `reset` (otherwise `ui-prop`) | Segmented/dropdown selector, interactive checklist, and state button |
|
|
62
|
-
| `<Stack />` / `<Columns />` / `<Tabs />` / `<Steps />` | Optional layout containers | `Stack`: `gap={3}`, `direction="col"`; `Columns`: `gap={3}`, `min={220}`; `Steps`: `autoplay={false}` | `gap` `0`–`4` integer, `Columns.min` `160`–`400`, `Steps.autoplay` `false` or `>= 800` (violation reports `ui-prop`); `<Columns>` max `4` children, `<Tabs>` `2`–`6` `<Tab>` children, `<Steps>` `2`–`24` `<Step>` children (outside limits reports `ui-limit`, wrong child tag reports `ui-children`, prose-only steps with no state changes report `steps-prose`) | Layout containers (for `<Each>` over `200` items, only the first `200` are shown with no `ui-limit`; total expanded elements across the block max `200`, exceeding reports `ui-limit`) |
|
|
63
|
-
| `<Stat />` / `<Meter />` / `<Chart />` / `<Pie />` | At least one output view | `Stat`: `tone="plain"`, `size="md"`; `Meter`: `tone="accent"`; `Chart`: `samples={64}`, `yScale="linear"`, `height={200}` | `<Meter>` `parts` max `5` segments, `<Pie>` `1`–`8` `<Slice>` children, `<Chart>` `1`–`4` series children and `data` max `2000` rows (exceeding reports `ui-limit`); `<Chart>` `samples` `2`–`200` and `height` `120`–`480` (outside range reports `ui-prop`) | Displays computed metrics, progress meters, donut charts, and function/data charts |
|
|
64
|
-
| `<Table />` / `<Grid />` / `<Image />` / `<Code />` / `<Diagram />` / `<Sandbox />` | Optional display views | none | `<Table>` max `50` rows, `<Grid>` `cols` max `16` columns and `1`–`16` `<Row>` children, `<Image>` max `12` `<Hotspot>` children, `<Code>` max `60` lines, `<Sandbox>` `html` max `12000` chars and `css`/`js` max `8000` chars each (exceeding reports `ui-limit`; unknown tag reports `ui-component`; headings, code fences, HTML, or Markdown images in the body report `ui-markdown`; JSX syntax or spread props report `ui-syntax`) | Tables, inspection grids, hotspot images, code walkthroughs, Mermaid state diagrams, and self-contained sandboxes |
|
|
65
|
-
|
|
66
|
-
## Limits & errors
|
|
67
|
-
|
|
68
|
-
- Header: `ui-id` (missing or malformed id), `ui-caption` (missing caption), `ui-header` (`intent` not a string or `expect` not a list), `ui-expect` (malformed or failing assertion), `ui-stale` (warning: the idea changed but was not recompiled).
|
|
69
|
-
- Tags: `ui-prop`, `ui-expr`, `ui-cycle`, `ui-eval`, `ui-data`, `ui-bind`, `ui-limit`, `ui-children`, `ui-component`, `ui-markdown`, `ui-syntax`; see the table above for what triggers each.
|
|
70
|
-
- Whole block: `interactive-trivial` (a single simple multiplication), `steps-prose` (steps that are only prose, with no state change).
|
|
71
|
-
- Run `npx garden ui check` to get a fix prompt.
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Component reference · list
|
|
3
|
-
navTitle: list
|
|
4
|
-
description: Pair line icons with short observations in a compact card, or add headings and multi-paragraph notes for divided steps.
|
|
5
|
-
section: reference
|
|
6
|
-
order: 11
|
|
7
|
-
badge: list
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
[← Component reference](/garden/en/reference) · [Usage: list](/garden/en/components/list)
|
|
11
|
-
|
|
12
|
-
## Examples
|
|
13
|
-
|
|
14
|
-
```garden list
|
|
15
|
-
items:
|
|
16
|
-
- icon: search
|
|
17
|
-
text: Searches for this month's title
|
|
18
|
-
- icon: eye
|
|
19
|
-
text: Reads 3 reviews
|
|
20
|
-
- icon: heart
|
|
21
|
-
text: Saves the event page
|
|
22
|
-
- icon: chat
|
|
23
|
-
text: Asks in the group chat whether listening only is fine
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
```garden list
|
|
27
|
-
items:
|
|
28
|
-
- icon: flask
|
|
29
|
-
title: "Experiment 1: is one book a month too much?"
|
|
30
|
-
text:
|
|
31
|
-
- Pick a novella and a long novel for the first two meetings, and record how many people finish.
|
|
32
|
-
- If the share drops clearly, read only the first half next time.
|
|
33
|
-
- icon: chat
|
|
34
|
-
title: "Experiment 2: how do we get first-timers talking?"
|
|
35
|
-
text:
|
|
36
|
-
- Open half of the meetings with one sentence from each person, and the other half with free discussion.
|
|
37
|
-
- Compare how often first-timers speak.
|
|
38
|
-
- icon: bell
|
|
39
|
-
title: "Experiment 3: how early should the reminder go out?"
|
|
40
|
-
text:
|
|
41
|
-
- Send the reminder three days before one meeting and one day before another, and compare turnout.
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## Syntax
|
|
45
|
-
|
|
46
|
-
````markdown
|
|
47
|
-
```garden list
|
|
48
|
-
title: # optional, heading
|
|
49
|
-
items: # required, items
|
|
50
|
-
- icon: # optional, one of 23 icons
|
|
51
|
-
title: # optional, switches layout
|
|
52
|
-
text: # recommended, description
|
|
53
|
-
caption: # optional, caption
|
|
54
|
-
```
|
|
55
|
-
````
|
|
56
|
-
|
|
57
|
-
## Fields
|
|
58
|
-
|
|
59
|
-
Fence header: ` ```garden list ` (snippet trigger `;glist`). Invalid YAML or unknown top-level keys report `garden-yaml` on the block.
|
|
60
|
-
|
|
61
|
-
| Field | Required | Default | Allowed Values & Limits | Description |
|
|
62
|
-
| :--- | :--- | :--- | :--- | :--- |
|
|
63
|
-
| `title` | Optional | none | string | Heading above the list |
|
|
64
|
-
| `items` | Required | `[]` | object or string array | List entries; renders as a compact icon card when no item has `title`, or a divided step list when any item has `title` |
|
|
65
|
-
| `items[].icon` | Optional | none (draws no icon) | one of the 23 built-in icon names: `search`, `eye`, `heart`, `chat`, `shield`, `wallet`, `bell`, `check`, `x`, `star`, `flag`, `clock`, `idea`, `book`, `link`, `user`, `chart`, `gear`, `file`, `pin`, `flask`, `target`, `question` | Line icon name (unknown names render nothing) |
|
|
66
|
-
| `items[].title` | Optional | none (compact row layout) | string | Item heading; switches the block to the divided step layout |
|
|
67
|
-
| `items[].text` | Recommended | `[]` | string or string[] | Item body text; each array element renders as its own paragraph |
|
|
68
|
-
| `caption` | Optional | none | string | Caption below the list |
|
|
69
|
-
|
|
70
|
-
## Limits & errors
|
|
71
|
-
|
|
72
|
-
- Apart from the shared `garden-yaml`, this component has no error codes of its own; values marked "not checked" in the table never report an error.
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Component reference · relations
|
|
3
|
-
navTitle: relations
|
|
4
|
-
description: Place 3 to 6 elements on an ellipse or around a center node and connect them with solid or dashed, one-way or two-way labeled links.
|
|
5
|
-
section: reference
|
|
6
|
-
order: 10
|
|
7
|
-
badge: relations
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
[← Component reference](/garden/en/reference) · [Usage: relations](/garden/en/components/relations)
|
|
11
|
-
|
|
12
|
-
## Examples
|
|
13
|
-
|
|
14
|
-
```garden relations
|
|
15
|
-
items:
|
|
16
|
-
- title: Pick
|
|
17
|
-
text: Choose this month's book
|
|
18
|
-
- title: Read
|
|
19
|
-
text: Finish the agreed chapters each week
|
|
20
|
-
- title: Talk
|
|
21
|
-
text: Meet and share views
|
|
22
|
-
- title: Review
|
|
23
|
-
text: Note what to change next time
|
|
24
|
-
links:
|
|
25
|
-
- from: 1
|
|
26
|
-
to: 2
|
|
27
|
-
- from: 2
|
|
28
|
-
to: 3
|
|
29
|
-
- from: 3
|
|
30
|
-
to: 4
|
|
31
|
-
- from: 4
|
|
32
|
-
to: 1
|
|
33
|
-
- from: 3
|
|
34
|
-
to: 1
|
|
35
|
-
style: dashed
|
|
36
|
-
label: shapes the pick
|
|
37
|
-
- from: 2
|
|
38
|
-
to: 4
|
|
39
|
-
style: dashed
|
|
40
|
-
caption: The four steps feed each other instead of running once in a fixed order.
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
```garden relations
|
|
44
|
-
items:
|
|
45
|
-
- title: Organiser
|
|
46
|
-
text: Sends one notice a month
|
|
47
|
-
- title: Members
|
|
48
|
-
text: Eight to ten neighbours
|
|
49
|
-
- title: Venue
|
|
50
|
-
text: Café or library
|
|
51
|
-
- title: Reading list
|
|
52
|
-
text: Members take turns to nominate
|
|
53
|
-
center: Organiser
|
|
54
|
-
links:
|
|
55
|
-
- from: 1
|
|
56
|
-
to: 2
|
|
57
|
-
label: invites
|
|
58
|
-
- from: 1
|
|
59
|
-
to: 3
|
|
60
|
-
label: books
|
|
61
|
-
- from: 1
|
|
62
|
-
to: 4
|
|
63
|
-
label: collects
|
|
64
|
-
- from: 2
|
|
65
|
-
to: 4
|
|
66
|
-
style: dashed
|
|
67
|
-
direction: both
|
|
68
|
-
label: nominate
|
|
69
|
-
caption: The organiser sits in the center and links to the other three; members and the list shape each other.
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
## Syntax
|
|
73
|
-
|
|
74
|
-
````markdown
|
|
75
|
-
```garden relations
|
|
76
|
-
title: # optional, aria only
|
|
77
|
-
items: # required, 3–6
|
|
78
|
-
- title: # required, name
|
|
79
|
-
text: # optional, short note
|
|
80
|
-
center: # optional, # or title
|
|
81
|
-
links: # optional, list
|
|
82
|
-
- from: # required, # or title
|
|
83
|
-
to: # required, not from
|
|
84
|
-
style: # solid | dashed
|
|
85
|
-
direction: # one | both
|
|
86
|
-
label: # optional, short label
|
|
87
|
-
caption: # optional, caption
|
|
88
|
-
```
|
|
89
|
-
````
|
|
90
|
-
|
|
91
|
-
## Fields
|
|
92
|
-
|
|
93
|
-
Fence header: ` ```garden relations ` (snippet trigger `;grel`). Nodes have no emphasis or accent option—every element carries equal visual weight; ` ```mermaid ` fences are supported for any other diagram, and `garden list` covers one-pass steps. Invalid YAML or unknown top-level keys report `garden-yaml` on the block.
|
|
94
|
-
|
|
95
|
-
| Field | Required | Default | Allowed Values & Limits | Description |
|
|
96
|
-
| :--- | :--- | :--- | :--- | :--- |
|
|
97
|
-
| `title` | Optional | `"Relationship diagram"` for `aria-label` (no visible heading) | string | Heading above the diagram |
|
|
98
|
-
| `items` | Required | none | object[], strictly `3` to `6` items (fewer than `3` or more than `6` items reports `garden-relations`) | Elements in the diagram; when `center` is omitted, all items are spaced evenly on an ellipse starting at the top (12 o'clock), clockwise |
|
|
99
|
-
| `items[].title` | Required | `""` | string | Node heading (`links` and `center` reference items by 1-based number or exact `title`) |
|
|
100
|
-
| `items[].text` | Optional | `""` | string | Short note below the node heading |
|
|
101
|
-
| `center` | Optional | none (all items on the outer ellipse) | `1..N` (1-based number) or exact item `title` (an unknown index or title reports `garden-relations`) | Placed between `items` and `links`: puts that element in the middle and spaces the remaining elements evenly on the outer ring starting at the top, clockwise; no auto-detection |
|
|
102
|
-
| `links` | Optional | `[]` | object[] (non-array or entry with unknown keys reports `garden-relations`) | Directed or bidirectional links between elements; neighbour outer-ring links bow outward while others run straight through the middle; write a repeating loop by listing each step (`1->2`, `2->3`, `3->4`, `4->1`) |
|
|
103
|
-
| `links[].from` | Required | none | `1..N` (1-based number) or exact item `title`, cannot equal `to` (missing, unknown target, or `from === to` reports `garden-relations`) | Source element |
|
|
104
|
-
| `links[].to` | Required | none | `1..N` (1-based number) or exact item `title`, cannot equal `from` (missing, unknown target, or `from === to` reports `garden-relations`) | Target element |
|
|
105
|
-
| `links[].style` | Optional | `"solid"` | `"solid"` \| `"dashed"` (any other value reports `garden-relations`) | Solid line (`→` / `↔`) or dashed line (`⇢` / `⇠⇢`) |
|
|
106
|
-
| `links[].direction` | Optional | `"one"` | `"one"` \| `"both"` (any other value reports `garden-relations`) | One-way arrow toward `to` or arrowheads on both ends |
|
|
107
|
-
| `links[].label` | Optional | `""` | short string (non-string value reports `garden-relations`) | Short label along the line (dodges line crossings; when it does not fit on its line it becomes a circled number listed under the graph, e.g. `① limits: Budget → Venue`) |
|
|
108
|
-
| `caption` | Optional | none | string | Caption below the diagram |
|
|
109
|
-
|
|
110
|
-
## Limits & errors
|
|
111
|
-
|
|
112
|
-
- `garden-relations`: fewer than 3 or more than 6 `items`; `center` matches no item; `links` is not a list or an entry has unknown keys; `from` / `to` missing, unknown or equal; a wrong `style` or `direction`; a `label` that is not a string.
|
|
113
|
-
- For more elements or branches, use a ```` ```mermaid ```` flowchart; for one-pass steps, use `garden list`.
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Component reference · stat
|
|
3
|
-
navTitle: stat
|
|
4
|
-
description: Display 2 to 4 key numbers, units, and short captions side by side.
|
|
5
|
-
section: reference
|
|
6
|
-
order: 2
|
|
7
|
-
badge: stat
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
[← Component reference](/garden/en/reference) · [Usage: stat](/garden/en/components/stat)
|
|
11
|
-
|
|
12
|
-
## Examples
|
|
13
|
-
|
|
14
|
-
```garden stat
|
|
15
|
-
items:
|
|
16
|
-
- label: Reading Column
|
|
17
|
-
value: "740"
|
|
18
|
-
unit: px
|
|
19
|
-
caption: Default prose column width
|
|
20
|
-
- label: Wide Figure Limit
|
|
21
|
-
value: "1040"
|
|
22
|
-
unit: px
|
|
23
|
-
caption: Extends up to 150px on each side
|
|
24
|
-
- label: Wide Table Limit
|
|
25
|
-
value: "1340"
|
|
26
|
-
unit: px
|
|
27
|
-
caption: Extends up to 300px on each side
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
## Syntax
|
|
31
|
-
|
|
32
|
-
````markdown
|
|
33
|
-
```garden stat
|
|
34
|
-
items: # for several, 2–4 suggested
|
|
35
|
-
- label: # required, label
|
|
36
|
-
value: # required, number
|
|
37
|
-
unit: # optional, unit
|
|
38
|
-
caption: # optional, short note
|
|
39
|
-
text: # optional, extra text
|
|
40
|
-
source: # optional, source URL
|
|
41
|
-
```
|
|
42
|
-
````
|
|
43
|
-
|
|
44
|
-
## Fields
|
|
45
|
-
|
|
46
|
-
Fence header: ` ```garden stat ` (snippet trigger `;gstat`). Place multiple figures in `items`, or place fields at the top level for a single figure; invalid YAML or unknown top-level keys report `garden-yaml` on the block.
|
|
47
|
-
|
|
48
|
-
| Field | Required | Default | Allowed Values & Limits | Description |
|
|
49
|
-
| :--- | :--- | :--- | :--- | :--- |
|
|
50
|
-
| `items` | Required for multiple figures | `[top-level object]` | object[] (`2` to `4` items recommended, not checked) | List of stat items displayed side by side; when omitted, top-level fields render as a single stat item |
|
|
51
|
-
| `label` | Required | `""` | string | Metric name shown above the number |
|
|
52
|
-
| `value` | Required | `""` | string or number | Primary figure rendered in large tabular type |
|
|
53
|
-
| `unit` | Optional | none | string | Unit shown immediately to the right of `value` |
|
|
54
|
-
| `caption` | Optional | none | string | Short note below the figure |
|
|
55
|
-
| `text` | Optional | none | string | Additional explanatory text |
|
|
56
|
-
| `source` | Optional | none | URL, `{ url, site?, icon? }`, or array | Source attribution chip (`site` defaults to the URL hostname without `www.`) |
|
|
57
|
-
|
|
58
|
-
## Limits & errors
|
|
59
|
-
|
|
60
|
-
- Apart from the shared `garden-yaml`, this component has no error codes of its own; values marked "not checked" in the table never report an error.
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Component reference · timeline
|
|
3
|
-
navTitle: timeline
|
|
4
|
-
description: Order release milestones, incident steps, or build stages along a vertical sequence.
|
|
5
|
-
section: reference
|
|
6
|
-
order: 4
|
|
7
|
-
badge: timeline
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
[← Component reference](/garden/en/reference) · [Usage: timeline](/garden/en/components/timeline)
|
|
11
|
-
|
|
12
|
-
## Examples
|
|
13
|
-
|
|
14
|
-
```garden timeline
|
|
15
|
-
title: Static Publishing Pipeline Stages
|
|
16
|
-
items:
|
|
17
|
-
- date: Step 1
|
|
18
|
-
title: Sync Content and Assets
|
|
19
|
-
text: Run `npx garden sync` to validate Front Matter, copy image attachments, and generate the search index and RSS feed.
|
|
20
|
-
- date: Step 2
|
|
21
|
-
title: Build Static Site Output
|
|
22
|
-
text: Run `STATIC_EXPORT=1 npx garden build` to prerender every route into `dist/client/`.
|
|
23
|
-
- date: Step 3
|
|
24
|
-
title: Validate Output and Deploy
|
|
25
|
-
text: Run `npm run pages:validate` to confirm `index.html` exists and no `.env`, source directories, `.map` or `.md` files, or symlinks were included, then publish to GitHub Pages.
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
## Syntax
|
|
29
|
-
|
|
30
|
-
````markdown
|
|
31
|
-
```garden timeline
|
|
32
|
-
title: # optional, heading
|
|
33
|
-
items: # required, in order
|
|
34
|
-
- date: # optional, date
|
|
35
|
-
title: # required, heading
|
|
36
|
-
text: # optional, description
|
|
37
|
-
source: # optional, source URL
|
|
38
|
-
```
|
|
39
|
-
````
|
|
40
|
-
|
|
41
|
-
## Fields
|
|
42
|
-
|
|
43
|
-
Fence header: ` ```garden timeline ` (snippet trigger `;gtimeline`). Invalid YAML or unknown top-level keys report `garden-yaml` on the block.
|
|
44
|
-
|
|
45
|
-
| Field | Required | Default | Allowed Values & Limits | Description |
|
|
46
|
-
| :--- | :--- | :--- | :--- | :--- |
|
|
47
|
-
| `title` | Optional | none | string | Heading above the timeline |
|
|
48
|
-
| `items` | Required | `[]` | object[] (at least `2` items recommended, not checked) | Ordered list of steps or milestones |
|
|
49
|
-
| `items[].date` | Optional | none | string | Timestamp, year, or stage label above the item title |
|
|
50
|
-
| `items[].title` | Required | `""` | string | Step heading |
|
|
51
|
-
| `items[].text` | Optional | none | string | Detailed explanation for the step |
|
|
52
|
-
| `items[].source` | Optional | none | URL, `{ url, site?, icon? }`, or array | Source attribution chip appended to the step text (`site` defaults to the URL hostname without `www.`) |
|
|
53
|
-
|
|
54
|
-
## Limits & errors
|
|
55
|
-
|
|
56
|
-
- Apart from the shared `garden-yaml`, this component has no error codes of its own; values marked "not checked" in the table never report an error.
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: 组件参考 · card
|
|
3
|
-
navTitle: card
|
|
4
|
-
description: 介绍一篇论文、一个项目或一组值得参考的公开工具。
|
|
5
|
-
section: reference
|
|
6
|
-
order: 1
|
|
7
|
-
badge: card
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
[← 组件参考](/garden/reference) · [用法:知识卡片](/garden/components/card)
|
|
11
|
-
|
|
12
|
-
## 示例
|
|
13
|
-
|
|
14
|
-
```garden card
|
|
15
|
-
title: SQLite WAL 写入模式
|
|
16
|
-
url: https://www.sqlite.org/wal.html
|
|
17
|
-
meta: 文档说明 · sqlite.org
|
|
18
|
-
description: 把修改先顺序追加到预写日志,读操作继续访问原数据库页,减少读写互斥等待。
|
|
19
|
-
points:
|
|
20
|
-
- 写入只追加到 `-wal` 文件末尾,不需要在事务提交时原地覆盖数据页。
|
|
21
|
-
- 读事务记录当前末尾偏移量即可看到一致快照,不会阻塞并发写入。
|
|
22
|
-
- 后台 Checkpoint 按阈值将日志页分批写回主库文件。
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
```garden card
|
|
26
|
-
cards:
|
|
27
|
-
- url: https://openlibrary.org/
|
|
28
|
-
title: Open Library:每本书一个页面
|
|
29
|
-
description: Internet Archive 维护的开放图书目录,可以查版本、借阅电子书。
|
|
30
|
-
image: /images/garden/ref-card-book.svg
|
|
31
|
-
alt: 一本合上的书
|
|
32
|
-
source:
|
|
33
|
-
- https://openlibrary.org/
|
|
34
|
-
takeaway: "**可借鉴:** 选书时直接贴书的页面链接,大家看到的是同一个版本。"
|
|
35
|
-
- url: https://www.gutenberg.org/
|
|
36
|
-
title: Project Gutenberg:公版电子书
|
|
37
|
-
description: 收录已进入公有领域的电子书,可以免费下载。
|
|
38
|
-
image: /images/garden/ref-card-lamp.svg
|
|
39
|
-
alt: 一盏台灯
|
|
40
|
-
source:
|
|
41
|
-
- https://www.gutenberg.org/
|
|
42
|
-
- https://en.wikipedia.org/wiki/Project_Gutenberg
|
|
43
|
-
takeaway: "**可借鉴:** 偶尔选一本公版书,没买书的人也能马上加入。"
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
## 字段写法
|
|
47
|
-
|
|
48
|
-
````markdown
|
|
49
|
-
```garden card
|
|
50
|
-
title: # 建议填,标题
|
|
51
|
-
url: # 可选,标题链接
|
|
52
|
-
meta: # 可选,副标题
|
|
53
|
-
description: # 摘要(或 text)
|
|
54
|
-
points: # 要点列表(或 items)
|
|
55
|
-
image: # 可选,缩略图
|
|
56
|
-
alt: # 可选,替代文本
|
|
57
|
-
source: # 可选,来源网址
|
|
58
|
-
site: # 可选,站点名
|
|
59
|
-
takeaway: # 可选,底部结论
|
|
60
|
-
cards: # 多卡模式,每项同上
|
|
61
|
-
- url: # 卡片链接
|
|
62
|
-
```
|
|
63
|
-
````
|
|
64
|
-
|
|
65
|
-
## 字段
|
|
66
|
-
|
|
67
|
-
围栏写 ` ```garden card `(编辑器代码片段触发词 `;gcard`)。单张卡片直接在顶层写字段,多张横向资源行卡用 `cards` 数组;YAML 语法错误或顶层含未知键名时整块报 `garden-yaml` 错误。
|
|
68
|
-
|
|
69
|
-
| 字段 | 是否必填 | 默认值 | 取值与限制 | 说明 |
|
|
70
|
-
| :--- | :--- | :--- | :--- | :--- |
|
|
71
|
-
| `title` | 建议填写 | 同 `url` | 字符串 | 卡片标题;未填时回退显示 `url` |
|
|
72
|
-
| `url` | 可选 | `""` | 完整 `https://` 或 `http://` 网址 | 标题跳转的外链;未填时标题渲染为纯文本 |
|
|
73
|
-
| `meta` | 可选 | 无 | 字符串 | 标题下方的副标题或来源说明 |
|
|
74
|
-
| `description` | 与 `points`、`cards` 至少填一项 | `""` | 字符串(别名 `text`) | 摘要段落,支持行内加粗与代码 |
|
|
75
|
-
| `points` | 与 `description`、`cards` 至少填一项 | `[]` | 字符串数组或 `{ title, text? }[]`(别名 `items`;建议 `2`~`4` 条要点,不做校验) | 摘要下方的编号要点列表 |
|
|
76
|
-
| `image` | 可选 | 无 | 图片路径或 Data URL | 卡片缩略图 |
|
|
77
|
-
| `alt` | 可选 | 同 `title` | 字符串 | 缩略图替代文本 |
|
|
78
|
-
| `source` | 可选 | 无 | 单个网址、`{ url, site?, icon? }` 或数组 | 跟在 `description` 后的来源胶囊;多个来源自动折叠为首域名加 `+N`(如 `gutenberg.org +1`)。`icon` 默认优先使用构建期下载到的站点 Favicon,其次取可注册域名主体的首字母大写(如 `en.wikipedia.org` 取 `W`,`bbc.co.uk` 取 `B`) |
|
|
79
|
-
| `site` | 可选 | `url` 去掉 `www.` 后的域名 | 字符串 | 来源站点显示名称 |
|
|
80
|
-
| `takeaway` | 可选 | 无 | 字符串 | 卡片底部带顶部分隔线的启发或结论(如 `"**可借鉴:** ……"`) |
|
|
81
|
-
| `cards` | 多卡模式必填 | 无 | 对象数组 | 多张横向资源行卡,每项支持 `url`、`title`、`description`(或 `text`)、`image`、`alt`、`meta`、`source`、`takeaway` |
|
|
82
|
-
|
|
83
|
-
## 限制与报错
|
|
84
|
-
|
|
85
|
-
- 除通用的 `garden-yaml` 外,本组件没有专属报错代码;表里写「不做校验」的建议值不会报错。
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: 组件参考 · chart
|
|
3
|
-
navTitle: chart
|
|
4
|
-
description: 把一组算好的数字画成比例条形图,下方自带可展开的数据表。
|
|
5
|
-
section: reference
|
|
6
|
-
order: 5
|
|
7
|
-
badge: chart
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
[← 组件参考](/garden/reference) · [用法:条形图表](/garden/components/chart)
|
|
11
|
-
|
|
12
|
-
## 示例
|
|
13
|
-
|
|
14
|
-
```garden chart
|
|
15
|
-
title: 三种版面区域的宽度上限
|
|
16
|
-
xLabel: 版面区域
|
|
17
|
-
yLabel: 最大宽度
|
|
18
|
-
unit: px
|
|
19
|
-
data:
|
|
20
|
-
- x: 普通正文列
|
|
21
|
-
y: 740
|
|
22
|
-
- x: 宽幅配图区
|
|
23
|
-
y: 1040
|
|
24
|
-
- x: 多列宽表格
|
|
25
|
-
y: 1340
|
|
26
|
-
caption: 点击「查看数据表」可展开完整数值表格。
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
## 字段写法
|
|
30
|
-
|
|
31
|
-
````markdown
|
|
32
|
-
```garden chart
|
|
33
|
-
type: # 可选,只有 bar
|
|
34
|
-
title: # 建议填,标题
|
|
35
|
-
data: # 与 series 二选一
|
|
36
|
-
- x: # 名称
|
|
37
|
-
y: # 数值
|
|
38
|
-
label: # 可选,数值标签
|
|
39
|
-
x: # 配合 series 的标签
|
|
40
|
-
series: # 与 data 二选一
|
|
41
|
-
- name: # 可选,序列名
|
|
42
|
-
data: # 数值数组
|
|
43
|
-
unit: # 可选,单位
|
|
44
|
-
xLabel: # 可选,表头第一列
|
|
45
|
-
yLabel: # 可选,表头第二列
|
|
46
|
-
caption: # 可选,图注
|
|
47
|
-
```
|
|
48
|
-
````
|
|
49
|
-
|
|
50
|
-
## 字段
|
|
51
|
-
|
|
52
|
-
围栏写 ` ```garden chart `(编辑器代码片段触发词 `;gchart`)。可以用 `data: [{ x, y, label? }]` 写行数据,也可以用 `x` + `series` 写列数据;YAML 语法错误或顶层含未知键名时整块报 `garden-yaml` 错误。
|
|
53
|
-
|
|
54
|
-
| 字段 | 是否必填 | 默认值 | 取值与限制 | 说明 |
|
|
55
|
-
| :--- | :--- | :--- | :--- | :--- |
|
|
56
|
-
| `title` | 建议填写 | 无障碍标签默认 `"图表"`(不渲染可视标题) | 字符串 | 图表上方标题 |
|
|
57
|
-
| `data` | 与 `series` 二选一 | `[]` | `{ x, y, label? }[]`(建议至少 `2` 项、以 `2`~`8` 项为宜,不做校验) | 条目数组:`x` 为左侧名称,`y` 为数值,`label` 默认拼接 `y` 与 `unit` |
|
|
58
|
-
| `series` | 与 `data` 二选一 | 无 | `{ name?, data: number[] }[]`(建议至少 `2` 个数值点,不做校验) | 配合 `x`(标签数组)使用的数值序列,取 `series[0].data` 渲染条形 |
|
|
59
|
-
| `x` | 可选 | `["1", "2", ...]`(按序号递增) | 字符串或字符串数组 | 配合 `series` 时为各项标签数组;单独写字符串且未填 `xLabel` 时作为数据表首列表头 |
|
|
60
|
-
| `type` | 可选 | `"bar"` | `"bar"` | 图表类型(水平条形图) |
|
|
61
|
-
| `unit` | 可选 | `""` | 字符串 | 未显式填写 `data[].label` 时在数值右侧追加的单位 |
|
|
62
|
-
| `xLabel` | 可选 | 字符串 `x` 或 `"项目"` | 字符串 | 可展开数据表第一列的表头 |
|
|
63
|
-
| `yLabel` | 可选 | `"数值"` | 字符串 | 可展开数据表第二列的表头 |
|
|
64
|
-
| `caption` | 可选 | 无 | 字符串 | 图表底部的图注 |
|
|
65
|
-
|
|
66
|
-
## 限制与报错
|
|
67
|
-
|
|
68
|
-
- 除通用的 `garden-yaml` 外,本组件没有专属报错代码;表里写「不做校验」的建议值不会报错。
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: 组件参考 · choice
|
|
3
|
-
navTitle: choice
|
|
4
|
-
description: 给出两三个具体选项卡片,读者点选后看到对应的回应。
|
|
5
|
-
section: reference
|
|
6
|
-
order: 12
|
|
7
|
-
badge: choice
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
[← 组件参考](/garden/reference) · [用法:选择卡](/garden/components/choice)
|
|
11
|
-
|
|
12
|
-
## 示例
|
|
13
|
-
|
|
14
|
-
```garden choice
|
|
15
|
-
title: 下个月在哪里见面?
|
|
16
|
-
items:
|
|
17
|
-
- icon: idea
|
|
18
|
-
value: ¥40 / 人
|
|
19
|
-
text: 街角咖啡馆,含一杯饮料
|
|
20
|
-
label: 更看重氛围
|
|
21
|
-
reply: 选了咖啡馆。我们会提前订好靠窗的长桌。
|
|
22
|
-
- icon: book
|
|
23
|
-
value: 免费
|
|
24
|
-
text: 社区图书馆活动室,需提前预约
|
|
25
|
-
label: 更看重安静
|
|
26
|
-
reply: 选了图书馆。我们会在月初提交预约。
|
|
27
|
-
none:
|
|
28
|
-
label: 都不合适 / 说不清
|
|
29
|
-
reply: 没关系,我们会在群里再列几个场地。
|
|
30
|
-
caption: 示意交互,场地和价格均为虚构。
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
## 字段写法
|
|
34
|
-
|
|
35
|
-
````markdown
|
|
36
|
-
```garden choice
|
|
37
|
-
title: # 可选,问题
|
|
38
|
-
items: # 必填,建议 2–3 项
|
|
39
|
-
- icon: # 可选,23 个图标名之一
|
|
40
|
-
value: # 建议填,醒目数字
|
|
41
|
-
text: # 建议填,一句说明
|
|
42
|
-
label: # 可选,偏好标签
|
|
43
|
-
reply: # 可选,选中后的回应
|
|
44
|
-
none: # 可选,兜底按钮
|
|
45
|
-
label: # 按钮文字
|
|
46
|
-
reply: # 可选,回应
|
|
47
|
-
caption: # 可选,图注
|
|
48
|
-
```
|
|
49
|
-
````
|
|
50
|
-
|
|
51
|
-
## 字段
|
|
52
|
-
|
|
53
|
-
围栏写 ` ```garden choice `(编辑器代码片段触发词 `;gchoice`)。整组作为无障碍单选组(`role="radiogroup"`)渲染,支持键盘方向键切换;桌面端并排排列,窄屏下自动改为单列纵向堆叠。YAML 语法错误或顶层含未知键名时整块报 `garden-yaml` 错误。
|
|
54
|
-
|
|
55
|
-
| 字段 | 是否必填 | 默认值 | 取值与限制 | 说明 |
|
|
56
|
-
| :--- | :--- | :--- | :--- | :--- |
|
|
57
|
-
| `title` | 可选 | `""` | 字符串 | 选项卡片上方的问题或标题 |
|
|
58
|
-
| `items` | 必填 | `[]` | 对象数组(建议 `2`~`3` 项,不做校验) | 选项卡片列表 |
|
|
59
|
-
| `items[].icon` | 可选 | 无(不绘制图标) | 23 个内置图标名之一 | 卡片顶部的线条图标(与 `garden list` 共用同一套 23 个图标名) |
|
|
60
|
-
| `items[].value` | 建议填写 | 无 | 字符串或数字 | 卡片上醒目显示的价格、数字或短结论 |
|
|
61
|
-
| `items[].text` | 建议填写 | 无 | 字符串 | 选项的一句话说明 |
|
|
62
|
-
| `items[].label` | 可选 | 无 | 字符串 | 卡片底部带圆点的偏好标签(如「更看重氛围」) |
|
|
63
|
-
| `items[].reply` | 可选 | `""` | 字符串 | 点选该卡片后在整组下方展开的回应文字 |
|
|
64
|
-
| `none` | 可选 | 无 | `{ label: string, reply?: string }` | 卡片下方整行宽度的兜底文字按钮(如「都不合适 / 说不清」)及选中后的回应 |
|
|
65
|
-
| `caption` | 可选 | 无 | 字符串 | 组件底部的图注 |
|
|
66
|
-
|
|
67
|
-
## 限制与报错
|
|
68
|
-
|
|
69
|
-
- 除通用的 `garden-yaml` 外,本组件没有专属报错代码;表里写「不做校验」的建议值不会报错。
|