Иллюстрация

Простая иллюстрация

figure({
  src: '/logo.svg',
  alt: 'Логотип sitelo',
  caption: 'Логотип в том виде, в каком он появляется в верхней панели.',
  style: '--su-figure-bg: var(--su-surface-2)',
})

Копировать

С удержанным соотношением

ratio оборачивает картинку в aspectRatio(), поэтому подпись никогда не прыгает вниз, когда картинка загрузится.

grid({ min: '13rem' },
  figure({ src: '/logo.svg', alt: '', ratio: '16 / 9', caption: 'ratio: 16 / 9' }),
  figure({ src: '/logo.svg', alt: '', ratio: '1 / 1', caption: 'ratio: 1 / 1' }),
)

Копировать

Подпись к чему-то другому

Без src содержимым иллюстрации становятся потомки.

figure({ caption: 'Таблица 1 — вывод сборки по умолчанию.' },
  table({
    dense: true,
    columns: [{ key: 'file', header: 'Файл' }, { key: 'size', header: 'Размер', align: 'end' }],
    rows: [
      { file: 'index.html', size: '4,1 кБ' },
      { file: '404.html', size: '860 Б' },
      { file: 'sitemap.xml', size: '155 Б' },
    ],
  }),
)

Код с подписью

Обратите внимание на проп text у code(): во всей этой библиотеке потомки рендерятся как HTML, поэтому пример с тегами нужно экранировать, иначе браузер соберёт его вместо того, чтобы показать.

figure({ caption: 'Целая страница sitelo.' },
  code({ text: 'export default () => "<h1>Привет</h1>"' }),
)

Альтернативный текст

Атрибут alt пишется всегда — пустым, если вы ничего не дали: картинку вовсе без alt объявляют по имени файла, а это хуже тишины. Подпись его не заменяет: подпись читают все, а alt описывает картинку тому, кто её не видит.

Когда подпись уже говорит всё, что говорит картинка, правильный ответ — alt: ''.

В тексте

Иллюстрации, приходящие из рендерера Markdown, уже оформляет prose(). Этот компонент — для иллюстраций, которые вы собираете сами.

Пропсы