# Everything this engine can do

> A site built entirely out of data, showing each block and the declaration behind it.

A site made of data

## Everything this engine can do

Every band below is data — no page here contains a line of code. Open the fold under each one to see exactly what was declared.

[Read how it is declared](#words)

### Words

Headings, prose, emphasis, links and lists — emphasis is a FIELD, never a tag, which is what keeps a paragraph data.

#### A third-level heading

A lead is the same paragraph wearing a different tone.

Plain words, **emphasised**_, slanted_, `code()` and a [link](https://next.torqhub.net).

- An item as plain text
- [object Object]

#### Occupied is not Used

> **Note** — A note: something a reader may skip without losing the thread.

**How this band is declared**

```json
[
  {
    "kind": "stack",
    "appearance": "measure",
    "children": [
      {
        "kind": "heading",
        "level": 3,
        "text": "A third-level heading"
      },
      {
        "kind": "text",
        "tone": "lead",
        "text": "A lead is the same paragraph wearing a different tone."
      },
      {
        "kind": "rich",
        "spans": [
          {
            "text": "Plain words, "
          },
          {
            "text": "emphasised",
            "emphasis": "strong"
          },
          {
            "text": ", slanted",
            "emphasis": "em"
          },
          {
            "text": ", "
          },
          {
            "text": "code()",
            "emphasis": "code"
          },
          {
            "text": " and a "
          },
          {
            "text": "link",
            "href": "https://next.torqhub.net"
          },
          {
            "text": "."
          }
        ]
      },
      {
        "kind": "list",
        "items": [
          "An item as plain text",
          {
            "spans": [
              {
                "text": "An item with "
              },
              {
                "text": "emphasis",
                "emphasis": "strong"
              }
            ]
          }
        ]
      },
      {
        "kind": "heading",
        "level": 3,
        "spans": [
          {
            "text": "Occupied "
          },
          {
            "mark": "not-equal",
            "alt": "is not"
          },
          {
            "text": " Used"
          }
        ]
      },
      {
        "kind": "callout",
        "tone": "note",
        "text": "A note: something a reader may skip without losing the thread."
      }
    ]
  }
]
```

### Ready blocks

Twelve of them ship with the engine. A block is a stored tree with named fields: using one substitutes values and runs nothing.

#### A feature card

A title, a body and an optional link.

#### With a link

The link appears only when it is given.

[Open](https://next.torqhub.net)

#### A plan

$0

A price card

[Choose](#m-contact)

#### 12

ready blocks

#### 21

node kinds

#### 18

doors

> A block is a stored tree, not a call. Copying one copies a file.
> — From the engine’s own notes

#### A comparison card

Two figures side by side, each with its caption.

at any scale

1×

before

4×

after

#### Can an agent invent its own block?

Yes. It writes the same kind of data file the shipped ones are, or copies one under a new name and alters it.

### A call-to-action band

Its own colour, so it cannot be missed.

[Talk to us](#m-contact)

**How this band is declared**

```json
[
  {
    "kind": "grid",
    "columns": 3,
    "children": [
      {
        "kind": "use",
        "module": "feature-card",
        "values": {
          "title": "A feature card",
          "body": "A title, a body and an optional link."
        }
      },
      {
        "kind": "use",
        "module": "feature-card",
        "values": {
          "title": "With a link",
          "body": "The link appears only when it is given.",
          "link_label": "Open",
          "link_href": "https://next.torqhub.net"
        }
      },
      {
        "kind": "use",
        "module": "price-card",
        "values": {
          "plan": "A plan",
          "price": "$0",
          "note": "A price card",
          "cta_label": "Choose",
          "cta_href": "#m-contact"
        }
      }
    ]
  },
  {
    "kind": "use",
    "module": "stat-row",
    "values": {
      "a_value": "12",
      "a_caption": "ready blocks",
      "b_value": "21",
      "b_caption": "node kinds",
      "c_value": "18",
      "c_caption": "doors"
    }
  },
  {
    "kind": "grid",
    "columns": 2,
    "children": [
      {
        "kind": "use",
        "module": "quote",
        "values": {
          "text": "A block is a stored tree, not a call. Copying one copies a file.",
          "author": "From the engine’s own notes"
        }
      },
      {
        "kind": "use",
        "module": "compare-card",
        "values": {
          "title": "A comparison card",
          "body": "Two figures side by side, each with its caption.",
          "scale": "at any scale",
          "a_value": "1×",
          "a_caption": "before",
          "b_value": "4×",
          "b_caption": "after"
        }
      }
    ]
  },
  {
    "kind": "use",
    "module": "faq-item",
    "values": {
      "question": "Can an agent invent its own block?",
      "answer": "Yes. It writes the same kind of data file the shipped ones are, or copies one under a new name and alters it."
    }
  },
  {
    "kind": "use",
    "module": "cta-band",
    "values": {
      "title": "A call-to-action band",
      "body": "Its own colour, so it cannot be missed.",
      "button_label": "Talk to us",
      "button_href": "#m-contact"
    }
  }
]
```

### Arrangement

Stacks, grids and boxes. A band is a container; how wide its contents sit is a decision the node makes.

A box, plain

A box as a card

A box with accent

---

[A button](#m-contact)

[And another](#words)

**How this band is declared**

```json
[
  {
    "kind": "grid",
    "columns": 3,
    "children": [
      {
        "kind": "box",
        "tone": "plain",
        "children": [
          {
            "kind": "text",
            "text": "A box, plain"
          }
        ]
      },
      {
        "kind": "box",
        "tone": "card",
        "children": [
          {
            "kind": "text",
            "text": "A box as a card"
          }
        ]
      },
      {
        "kind": "box",
        "tone": "accent",
        "children": [
          {
            "kind": "text",
            "text": "A box with accent"
          }
        ]
      }
    ]
  },
  {
    "kind": "divider"
  },
  {
    "kind": "stack",
    "direction": "row",
    "gap": "1rem",
    "children": [
      {
        "kind": "use",
        "module": "action-button",
        "values": {
          "label": "A button",
          "href": "#m-contact"
        }
      },
      {
        "kind": "use",
        "module": "action-button",
        "values": {
          "label": "And another",
          "href": "#words"
        }
      }
    ]
  }
]
```

### Tables and code

A wide table scrolls inside its own box, because the page body must never scroll sideways.

| Node kind | What it does | Does the site supply code |
| --- | --- | --- |
| text | a paragraph | no |
| table | a table | no |
| island | its own component | YES |
| form | a form | the destination only |

```yaml
- kind: text
  text: "Это и есть узел — имя вида и его поля."
```

**How this band is declared**

```json
[
  {
    "kind": "table",
    "headers": [
      "Node kind",
      "What it does",
      "Does the site supply code"
    ],
    "rows": [
      [
        "text",
        "a paragraph",
        "no"
      ],
      [
        "table",
        "a table",
        "no"
      ],
      [
        "island",
        "its own component",
        "YES"
      ],
      [
        "form",
        "a form",
        "the destination only"
      ]
    ]
  },
  {
    "kind": "code",
    "language": "yaml",
    "text": "- kind: text\n  text: \"Это и есть узел — имя вида и его поля.\""
  }
]
```

### Things that answer

A switch, a fold-out, a component the site owns, and a form. Only the last two need the site to supply anything.

**What to show**

_First_

A switch and its panes are pure CSS, with no script at all.

_Second_

The second pane. Switching works with JavaScript off.

_A counter — a component the site owns_

### Write to us

The destination is a NAME this site resolves — a page can point at one and can never invent one.

**Send** — Your name*, Email*, About, Message*, I agree to be written back to*

It works with scripts switched off: the browser submits it.

**How this band is declared**

```json
[
  {
    "kind": "switch",
    "label": "What to show",
    "children": [
      {
        "kind": "pane",
        "name": "First",
        "children": [
          {
            "kind": "text",
            "text": "A switch and its panes are pure CSS, with no script at all."
          }
        ]
      },
      {
        "kind": "pane",
        "name": "Second",
        "children": [
          {
            "kind": "text",
            "text": "The second pane. Switching works with JavaScript off."
          }
        ]
      }
    ]
  },
  {
    "kind": "stack",
    "appearance": "measure",
    "children": [
      {
        "kind": "island",
        "name": "Counter",
        "props": {
          "start": 0,
          "step": 1
        },
        "label": "A counter — a component the site owns"
      }
    ]
  },
  {
    "kind": "use",
    "module": "section-head",
    "values": {
      "title": "Write to us",
      "lead": "The destination is a NAME this site resolves — a page can point at one and can never invent one."
    }
  },
  {
    "kind": "stack",
    "appearance": "measure",
    "children": [
      {
        "kind": "form",
        "to": "contact",
        "submit": "Send",
        "note": "It works with scripts switched off: the browser submits it.",
        "fields": [
          {
            "name": "name",
            "label": "Your name",
            "required": true
          },
          {
            "name": "email",
            "label": "Email",
            "type": "email",
            "required": true,
            "placeholder": "you@company.com"
          },
          {
            "name": "topic",
            "label": "About",
            "type": "select",
            "options": [
              "A site on this engine",
              "Something else"
            ]
          },
          {
            "name": "message",
            "label": "Message",
            "type": "textarea",
            "required": true
          },
          {
            "name": "consent",
            "label": "I agree to be written back to",
            "type": "checkbox",
            "required": true
          }
        ]
      }
    ]
  }
]
```

### Movement

A page NAMES an arrival; what the name means is values in a file an agent may write. Stagger hands the arrival to a container’s children, one after another.

#### drift-up

Fade and rise.

#### unblur

Out of blur and desaturation.

#### tilt-in

Rotate and scale, with a spring.

> **Note** — The light and dark switch and the language links live in the frame at the top of every page. Neither costs a page anything to declare.

**How this band is declared**

```json
[
  {
    "kind": "grid",
    "columns": 3,
    "motion": {
      "do": "tilt-in",
      "stagger": 150
    },
    "children": [
      {
        "kind": "use",
        "module": "feature-card",
        "values": {
          "title": "drift-up",
          "body": "Fade and rise."
        }
      },
      {
        "kind": "use",
        "module": "feature-card",
        "values": {
          "title": "unblur",
          "body": "Out of blur and desaturation."
        }
      },
      {
        "kind": "use",
        "module": "feature-card",
        "values": {
          "title": "tilt-in",
          "body": "Rotate and scale, with a spring."
        }
      }
    ]
  },
  {
    "kind": "stack",
    "appearance": "measure",
    "children": [
      {
        "kind": "callout",
        "tone": "note",
        "text": "The light and dark switch and the language links live in the frame at the top of every page. Neither costs a page anything to declare."
      }
    ]
  }
]
```

### Pictures and video

An embed takes a provider and an id — never a URL, so a page cannot point a reader at anything it likes.

[An embedded video, as an example](https://www.youtube.com/watch?v=aqz-KE-bpKQ)

**How this band is declared**

```json
[
  {
    "kind": "stack",
    "appearance": "wide",
    "children": [
      {
        "kind": "embed",
        "provider": "youtube",
        "videoId": "aqz-KE-bpKQ",
        "title": "An embedded video, as an example"
      }
    ]
  }
]
```

### What is NOT here

An honest inventory is worth more than a flattering one.

> **Warning** — There is no chart block yet: numbers are shown by the stat row and the comparison card, and a real chart would need either a picture or a component the site writes itself. There is no navigation between many pages beyond the frame’s own links. And scroll-linked movement — something that follows the scrollbar rather than arriving once — is a site’s own component, not vocabulary.

**How this band is declared**

```json
[
  {
    "kind": "stack",
    "appearance": "measure",
    "children": [
      {
        "kind": "callout",
        "tone": "warn",
        "text": "There is no chart block yet: numbers are shown by the stat row and the comparison card, and a real chart would need either a picture or a component the site writes itself. There is no navigation between many pages beyond the frame’s own links. And scroll-linked movement — something that follows the scrollbar rather than arriving once — is a site’s own component, not vocabulary."
      }
    ]
  }
]
```

_Declared motion_