Разметка полей

Чтобы поле правилось прямо на странице, элемент, который его показывает, отмечается маркером editable. Маркер типизирован по контенту: путь, которого в контенте нет, не скомпилируется.

---
import { editable } from "@seamlet/astro/schema";
import type { Content } from "../schema";

interface Props {
  content: Content;
}

const { content } = Astro.props;
const edit = editable<Content>();
---

<header {...edit("hero")}>
  <h1 {...edit("hero", "title")}>{content.hero.title}</h1>
</header>

<ul>
  {content.menu.map((dish, index) => (
    <li {...edit("menu", index)}>
      <h3 {...edit("menu", index, "name")}>{dish.name}</h3>
      <span {...edit("menu", index, "price")}>{dish.price} ₽</span>
    </li>
  ))}
</ul>

Маркер — это атрибут data-cms-path="menu.2.price". Посетители его не замечают.

Что как правится

• Текст печатается прямо на странице, если элемент показывает его как есть: без форматирования и без других отмеченных полей внутри. Многострочный текст — только там, где страница показывает переносы строк (white-space: pre-line или <br>).
• Остальное открывается в окне рядом с элементом: число, отформатированное сайтом («1 500 ₽»), дата, фото, ссылка, а ещё текст, который сайт показывает иначе — например, заглавными буквами через text-transform.
• Запись коллекции (edit("menu", index)) получает панель: выше, ниже, добавить после, удалить.
• Фото заменяется перетаскиванием файла с компьютера прямо на него.

Что не отмечено, всё равно правится в панели «Все поля» рядом со страницей.

Ссылки между страницами

Ссылки пишутся так же, как на опубликованном сайте: <a href="/menu">. Клик по ссылке в редакторе открывает страницу, на которую она ведёт. Ссылка, которая сама отмечена как поле (например, телефон), открывает его правку.

Безопасность

Сайт никогда не выводит контент как сырой HTML (set:html). Редактор доверяет тому, что сообщает предпросмотр, и текст клиента, ставший скриптом, мог бы действовать в редакторе от имени того, кто его открыл.