Проза

Markdown-рендерер возвращает голые теги: <h2>, <p>, <ul>, <blockquote> — и ни одного класса, за который можно зацепиться. prose() оборачивает этот HTML и оформляет его.

Это единственное сознательное исключение в библиотеке. Везде остальное оформление привязано к классам su- ровно затем, чтобы никогда не задевать разметку, на которую вы не подписывались; здесь целиться не во что, поэтому правила бьют по голым тегам — но только внутри обёртки.

Простая проза

Начало работы

Напишите функцию, возвращающую HTML. Выполните sitelo build. Опубликуйте dist/.

Файловая маршрутизация
Данные на сборке
Никакого клиентского рантайма

prose(
  '<h2>Начало работы</h2>' +
  '<p>Напишите функцию, возвращающую HTML. Выполните <code>sitelo build</code>. Опубликуйте <code>dist/</code>.</p>' +
  '<ul><li>Файловая маршрутизация</li><li>Данные на сборке</li><li>Никакого клиентского рантайма</li></ul>'
)

Всё, что она оформляет

Заголовок

Основной текст со ссылкой, полужирным и кодом в строке.

Выносная цитата, отделённая от окружающего текста.

Первое
Второе
- Вложенное

export default () => "<h1>Привет</h1>"

Опция	По умолчанию
cleanUrls	true
outDir	dist

Нажмите ⌘ K для поиска.

prose(
  '<h3>Заголовок</h3>' +
  '<p>Основной текст со <a href="/ru/docs">ссылкой</a>, <strong>полужирным</strong> и <code>кодом в строке</code>.</p>' +
  '<blockquote><p>Выносная цитата, отделённая от окружающего текста.</p></blockquote>' +
  '<ol><li>Первое</li><li>Второе<ul><li>Вложенное</li></ul></li></ol>' +
  '<pre><code>export default () => "&lt;h1&gt;Привет&lt;/h1&gt;"</code></pre>' +
  '<table><thead><tr><th>Опция</th><th>По умолчанию</th></tr></thead>' +
  '<tbody><tr><td>cleanUrls</td><td>true</td></tr><tr><td>outDir</td><td>dist</td></tr></tbody></table>' +
  '<hr>' +
  '<p>Нажмите <kbd>⌘</kbd> <kbd>K</kbd> для поиска.</p>'
)

Размеры

Маленький — для описания в карточке или боковой панели.

Средний — значение по умолчанию, для основного текста статьи.

Большой — для короткого заметного вступления.

stack({ gap: 'lg' },
  prose({ size: 'sm' }, '<p><strong>Маленький</strong> — для описания в карточке или боковой панели.</p>'),
  prose('<p><strong>Средний</strong> — значение по умолчанию, для основного текста статьи.</p>'),
  prose({ size: 'lg' }, '<p><strong>Большой</strong> — для короткого заметного вступления.</p>'),
)

С блогом на Markdown

Форма, которой хочет пример с блогом: отрендерить Markdown на сборке, обернуть результат и отдать.

import { marked } from 'marked'
import { article, body, h1, html, head, title } from 'javascript-to-html'
import { container, prose, styles, text } from 'sitelo/ui'

export async function data({ params }) {
  return { post: await loadPost(params.slug) }
}

export default ({ data }) => html({ lang: 'ru' },
  head(title(data.post.title), styles()),
  body(
    container({ size: 'sm' },
      h1(data.post.title),
      text({ variant: 'caption' }, data.post.date),
      // marked возвращает строку HTML вообще без классов
      prose(marked.parse(data.post.markdown)),
    ),
  ),
)

Компоненты внутри прозы

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

Немного отрендеренного Markdown, а затем компонент:

Всё ещё обычное уведомление

Окружающий блок прозы его не переоформляет.

И снова проза.

prose(
  '<p>Немного отрендеренного Markdown, а затем компонент:</p>',
  alert({ color: 'warning', title: 'Всё ещё обычное уведомление' },
    'Окружающий блок прозы его не переоформляет.'),
  '<p>И снова проза.</p>',
)

Пара слов о доверии

prose() рендерит своих потомков как HTML — в этом весь смысл, и так работает javascript-to-html повсюду. Если HTML приходит оттуда, что вы не контролируете, очистите его до того, как он попадёт сюда. Markdown-рендерера с выключенным сырым HTML обычно хватает.

Пропсы

Проп	Тип	По умолчанию	Описание
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Базовый кегль; всё остальное масштабируется от него в em.
`as`	`string`	`'div'`	Какой элемент рендерить, например article.