Сайт, собранный данными

Всё, что умеет этот движок

Каждая полоса ниже — данные, ни строки кода на этих страницах нет. Разверните складку под любой, чтобы увидеть, чем именно она объявлена.

Посмотреть, как объявлено

Слова

Заголовки, проза, выделения, ссылки и списки. Выделение — ПОЛЕ, а не тег, и именно это оставляет абзац данными.

Заголовок третьего уровня

Подводка — тот же абзац, только с другим тоном.

Обычные слова, выделенные, наклонные, code() и ссылка.

Пункт простым текстом
Пункт с выделением

Занято не равно Используется

Чем объявлена эта полоса

[
  {
    "kind": "stack",
    "appearance": "measure",
    "children": [
      {
        "kind": "heading",
        "level": 3,
        "text": "Заголовок третьего уровня"
      },
      {
        "kind": "text",
        "tone": "lead",
        "text": "Подводка — тот же абзац, только с другим тоном."
      },
      {
        "kind": "rich",
        "spans": [
          {
            "text": "Обычные слова, "
          },
          {
            "text": "выделенные",
            "emphasis": "strong"
          },
          {
            "text": ", наклонные",
            "emphasis": "em"
          },
          {
            "text": ", "
          },
          {
            "text": "code()",
            "emphasis": "code"
          },
          {
            "text": " и "
          },
          {
            "text": "ссылка",
            "href": "https://next.torqhub.net"
          },
          {
            "text": "."
          }
        ]
      },
      {
        "kind": "list",
        "items": [
          "Пункт простым текстом",
          {
            "spans": [
              {
                "text": "Пункт с "
              },
              {
                "text": "выделением",
                "emphasis": "strong"
              }
            ]
          }
        ]
      },
      {
        "kind": "heading",
        "level": 3,
        "spans": [
          {
            "text": "Занято "
          },
          {
            "mark": "not-equal",
            "alt": "не равно"
          },
          {
            "text": " Используется"
          }
        ]
      },
      {
        "kind": "callout",
        "tone": "note",
        "text": "Врезка-заметка: то, что читатель может пропустить без потери."
      }
    ]
  }
]

Готовые блоки

Их двенадцать. Блок — сохранённое дерево с именованными полями: использовать значит подставить значения, а не выполнить что-то.

Карточка свойства

Заголовок, текст и необязательная ссылка.

Со ссылкой

Ссылка появляется, только если её дали.

Открыть

Тариф

Карточка цены

Выбрать

12

готовых блоков

21

видов узлов

18

дверей

Блок — сохранённое дерево, а не вызов. Скопировать его значит скопировать файл.

— Из описания движка

Карточка сравнения

Две величины рядом, каждая со своей подписью.

на любом масштабе

1×

было

4×

стало

Может ли агент завести свой блок?

Да. Он пишет такой же файл данных, как готовые, или копирует один из них под новым именем и правит.

Полоса призыва

Своя окраска, чтобы её нельзя было не заметить.

Написать нам

Чем объявлена эта полоса

[
  {
    "kind": "grid",
    "columns": 3,
    "children": [
      {
        "kind": "use",
        "module": "feature-card",
        "values": {
          "title": "Карточка свойства",
          "body": "Заголовок, текст и необязательная ссылка."
        }
      },
      {
        "kind": "use",
        "module": "feature-card",
        "values": {
          "title": "Со ссылкой",
          "body": "Ссылка появляется, только если её дали.",
          "link_label": "Открыть",
          "link_href": "https://next.torqhub.net"
        }
      },
      {
        "kind": "use",
        "module": "price-card",
        "values": {
          "plan": "Тариф",
          "price": "$0",
          "note": "Карточка цены",
          "cta_label": "Выбрать",
          "cta_href": "#m-contact"
        }
      }
    ]
  },
  {
    "kind": "use",
    "module": "stat-row",
    "values": {
      "a_value": "12",
      "a_caption": "готовых блоков",
      "b_value": "21",
      "b_caption": "видов узлов",
      "c_value": "18",
      "c_caption": "дверей"
    }
  },
  {
    "kind": "grid",
    "columns": 2,
    "children": [
      {
        "kind": "use",
        "module": "quote",
        "values": {
          "text": "Блок — сохранённое дерево, а не вызов. Скопировать его значит скопировать файл.",
          "author": "Из описания движка"
        }
      },
      {
        "kind": "use",
        "module": "compare-card",
        "values": {
          "title": "Карточка сравнения",
          "body": "Две величины рядом, каждая со своей подписью.",
          "scale": "на любом масштабе",
          "a_value": "1×",
          "a_caption": "было",
          "b_value": "4×",
          "b_caption": "стало"
        }
      }
    ]
  },
  {
    "kind": "use",
    "module": "faq-item",
    "values": {
      "question": "Может ли агент завести свой блок?",
      "answer": "Да. Он пишет такой же файл данных, как готовые, или копирует один из них под новым именем и правит."
    }
  },
  {
    "kind": "use",
    "module": "cta-band",
    "values": {
      "title": "Полоса призыва",
      "body": "Своя окраска, чтобы её нельзя было не заметить.",
      "button_label": "Написать нам",
      "button_href": "#m-contact"
    }
  }
]

Раскладка

Стопки, сетки и коробки. Полоса — контейнер, а насколько широко внутри неё сидит содержимое, решает сам узел.

Коробка, обычная

Коробка-карточка

Коробка с акцентом

Кнопка Вторая

Чем объявлена эта полоса

[
  {
    "kind": "grid",
    "columns": 3,
    "children": [
      {
        "kind": "box",
        "tone": "plain",
        "children": [
          {
            "kind": "text",
            "text": "Коробка, обычная"
          }
        ]
      },
      {
        "kind": "box",
        "tone": "card",
        "children": [
          {
            "kind": "text",
            "text": "Коробка-карточка"
          }
        ]
      },
      {
        "kind": "box",
        "tone": "accent",
        "children": [
          {
            "kind": "text",
            "text": "Коробка с акцентом"
          }
        ]
      }
    ]
  },
  {
    "kind": "divider"
  },
  {
    "kind": "stack",
    "direction": "row",
    "gap": "1rem",
    "children": [
      {
        "kind": "use",
        "module": "action-button",
        "values": {
          "label": "Кнопка",
          "href": "#m-contact"
        }
      },
      {
        "kind": "use",
        "module": "action-button",
        "values": {
          "label": "Вторая",
          "href": "#words"
        }
      }
    ]
  }
]

Таблицы и код

Широкая таблица прокручивается внутри своей коробки: страница не должна ездить вбок.

Вид узла	Что делает	Нужен ли сайту код
text	абзац	нет
table	таблица	нет
island	свой компонент	ДА
form	форма	только адрес

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

Чем объявлена эта полоса

[
  {
    "kind": "table",
    "headers": [
      "Вид узла",
      "Что делает",
      "Нужен ли сайту код"
    ],
    "rows": [
      [
        "text",
        "абзац",
        "нет"
      ],
      [
        "table",
        "таблица",
        "нет"
      ],
      [
        "island",
        "свой компонент",
        "ДА"
      ],
      [
        "form",
        "форма",
        "только адрес"
      ]
    ]
  },
  {
    "kind": "code",
    "language": "yaml",
    "text": "- kind: text\n  text: \"Это и есть узел — имя вида и его поля.\""
  }
]

То, что отвечает

Переключатель, складка, свой компонент сайта и форма. Только двум последним сайт что-то предоставляет.

Что показать

ПервоеВторое

Переключатель и его панели — чистые стили, ни строки скрипта.

Вторая панель. Переключение работает и без JavaScript.

Счётчик — компонент, принадлежащий сайту

Напишите нам

Цель — ИМЯ, которое разрешает сам сайт: страница может на неё указать и не может её выдумать.

Чем объявлена эта полоса

[
  {
    "kind": "switch",
    "label": "Что показать",
    "children": [
      {
        "kind": "pane",
        "name": "Первое",
        "children": [
          {
            "kind": "text",
            "text": "Переключатель и его панели — чистые стили, ни строки скрипта."
          }
        ]
      },
      {
        "kind": "pane",
        "name": "Второе",
        "children": [
          {
            "kind": "text",
            "text": "Вторая панель. Переключение работает и без JavaScript."
          }
        ]
      }
    ]
  },
  {
    "kind": "stack",
    "appearance": "measure",
    "children": [
      {
        "kind": "island",
        "name": "Counter",
        "props": {
          "start": 0,
          "step": 1
        },
        "label": "Счётчик — компонент, принадлежащий сайту"
      }
    ]
  },
  {
    "kind": "use",
    "module": "section-head",
    "values": {
      "title": "Напишите нам",
      "lead": "Цель — ИМЯ, которое разрешает сам сайт: страница может на неё указать и не может её выдумать."
    }
  },
  {
    "kind": "stack",
    "appearance": "measure",
    "children": [
      {
        "kind": "form",
        "to": "contact",
        "submit": "Отправить",
        "note": "Работает и с выключенными скриптами: форму отправляет браузер.",
        "fields": [
          {
            "name": "name",
            "label": "Как вас зовут",
            "required": true
          },
          {
            "name": "email",
            "label": "Почта",
            "type": "email",
            "required": true,
            "placeholder": "you@company.com"
          },
          {
            "name": "topic",
            "label": "О чём",
            "type": "select",
            "options": [
              "Сайт на этом движке",
              "Другое"
            ]
          },
          {
            "name": "message",
            "label": "Сообщение",
            "type": "textarea",
            "required": true
          },
          {
            "name": "consent",
            "label": "Согласен получить ответ",
            "type": "checkbox",
            "required": true
          }
        ]
      }
    ]
  }
]

Движение

Страница НАЗЫВАЕТ прибытие; что значит имя — значения в файле, который может написать агент. Каскад передаёт прибытие детям контейнера, одному за другим.

drift-up

Проявиться и подняться.

unblur

Выйти из размытия и обесцвечивания.

tilt-in

Довернуться и подрасти, с отскоком.

Чем объявлена эта полоса

[
  {
    "kind": "grid",
    "columns": 3,
    "motion": {
      "do": "tilt-in",
      "stagger": 150
    },
    "children": [
      {
        "kind": "use",
        "module": "feature-card",
        "values": {
          "title": "drift-up",
          "body": "Проявиться и подняться."
        }
      },
      {
        "kind": "use",
        "module": "feature-card",
        "values": {
          "title": "unblur",
          "body": "Выйти из размытия и обесцвечивания."
        }
      },
      {
        "kind": "use",
        "module": "feature-card",
        "values": {
          "title": "tilt-in",
          "body": "Довернуться и подрасти, с отскоком."
        }
      }
    ]
  },
  {
    "kind": "stack",
    "appearance": "measure",
    "children": [
      {
        "kind": "callout",
        "tone": "note",
        "text": "Переключатель светлой и тёмной темы и ссылки языков живут в раме наверху каждой страницы. Ни то, ни другое странице объявлять не нужно."
      }
    ]
  }
]

Картинки и видео

Встраивание принимает поставщика и номер, а не адрес, — страница не может увести читателя куда захочет.

Чем объявлена эта полоса

[
  {
    "kind": "stack",
    "appearance": "wide",
    "children": [
      {
        "kind": "embed",
        "provider": "youtube",
        "videoId": "aqz-KE-bpKQ",
        "title": "Пример встроенного видео"
      }
    ]
  }
]

Чего здесь НЕТ

Честная опись стоит дороже лестной.

Чем объявлена эта полоса

[
  {
    "kind": "stack",
    "appearance": "measure",
    "children": [
      {
        "kind": "callout",
        "tone": "warn",
        "text": "Блока-графика пока нет: числа показывают ряд показателей и карточка сравнения, а настоящий график потребовал бы либо картинки, либо своего компонента сайта. Нет и навигации по многим страницам сверх ссылок в раме. А движение, привязанное к прокрутке — то, что едет вместе с полосой прокрутки, а не приходит один раз, — это собственный компонент сайта, а не словарь."
      }
    ]
  }
]

Объявленное движение

Всё, что умеет этот движок

Слова

Заголовок третьего уровня

Занято =не равно Используется

Готовые блоки

Карточка свойства

Со ссылкой

Тариф

12

21

18

Карточка сравнения

Может ли агент завести свой блок?

Полоса призыва

Раскладка

Таблицы и код

То, что отвечает

Напишите нам

Движение

drift-up

unblur

tilt-in

Картинки и видео

Чего здесь НЕТ

Занято не равно Используется