Proza

Renderer Markdowna oddaje gołe znaczniki: <h2>, <p>, <ul>, <blockquote> — bez klas, których można by się uchwycić. prose() opakowuje ten HTML i go stylizuje.

To jedyny świadomy wyjątek w tej bibliotece. Wszędzie indziej style są ograniczone do klas su- właśnie po to, żeby nigdy nie dotykały znaczników, na które się nie zgodziłeś; tutaj nie ma klas do namierzenia, więc reguły dopasowują gołe znaczniki — ale tylko wewnątrz opakowania.

Podstawowa proza

Pierwsze kroki

Napisz funkcję zwracającą HTML. Uruchom sitelo build. Opublikuj dist/.

Routing oparty na plikach
Dane podczas buildu
Bez runtime’u po stronie klienta

prose(
  '<h2>Pierwsze kroki</h2>' +
  '<p>Napisz funkcję zwracającą HTML. Uruchom <code>sitelo build</code>. Opublikuj <code>dist/</code>.</p>' +
  '<ul><li>Routing oparty na plikach</li><li>Dane podczas buildu</li><li>Bez runtime’u po stronie klienta</li></ul>'
)

Wszystko, co stylizuje

Nagłówek

Tekst główny z odnośnikiem, pogrubieniem i kodem liniowym.

Cytat wyróżniony, odsunięty od otaczającego tekstu.

Pierwszy
Drugi
- Zagnieżdżony

export default () => "<h1>Hej</h1>"

Opcja	Domyślnie
cleanUrls	true
outDir	dist

Naciśnij ⌘ K, żeby wyszukać.

prose(
  '<h3>Nagłówek</h3>' +
  '<p>Tekst główny z <a href="/docs">odnośnikiem</a>, <strong>pogrubieniem</strong> i <code>kodem liniowym</code>.</p>' +
  '<blockquote><p>Cytat wyróżniony, odsunięty od otaczającego tekstu.</p></blockquote>' +
  '<ol><li>Pierwszy</li><li>Drugi<ul><li>Zagnieżdżony</li></ul></li></ol>' +
  '<pre><code>export default () => "&lt;h1&gt;Hej&lt;/h1&gt;"</code></pre>' +
  '<table><thead><tr><th>Opcja</th><th>Domyślnie</th></tr></thead>' +
  '<tbody><tr><td>cleanUrls</td><td>true</td></tr><tr><td>outDir</td><td>dist</td></tr></tbody></table>' +
  '<hr>' +
  '<p>Naciśnij <kbd>⌘</kbd> <kbd>K</kbd>, żeby wyszukać.</p>'
)

Rozmiary

Mały — na streszczenie w karcie albo panel boczny.

Średni — domyślny, na tekst główny artykułu.

Duży — na krótkie, wyeksponowane wprowadzenie.

stack({ gap: 'lg' },
  prose({ size: 'sm' }, '<p><strong>Mały</strong> — na streszczenie w karcie albo panel boczny.</p>'),
  prose('<p><strong>Średni</strong> — domyślny, na tekst główny artykułu.</p>'),
  prose({ size: 'lg' }, '<p><strong>Duży</strong> — na krótkie, wyeksponowane wprowadzenie.</p>'),
)

Z blogiem w Markdownie

Kształt, jakiego chce przykład bloga: wyrenderuj Markdown podczas buildu, opakuj wynik i opublikuj.

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: 'pl' },
  head(title(data.post.title), styles()),
  body(
    container({ size: 'sm' },
      h1(data.post.title),
      text({ variant: 'caption' }, data.post.date),
      // marked zwraca ciąg HTML bez żadnych klas
      prose(marked.parse(data.post.markdown)),
    ),
  ),
)

Komponenty wewnątrz prozy

Każda reguła prozy pomija elementy noszące klasę su-, więc komponent wrzucony w blok prozy zachowuje własny styl, zamiast łapać marginesy artykułu.

Trochę wyrenderowanego Markdowna, a potem komponent:

Wciąż zwykły alert

Blok prozy wokół niego go nie przestylowuje.

I wracamy do prozy.

prose(
  '<p>Trochę wyrenderowanego Markdowna, a potem komponent:</p>',
  alert({ color: 'warning', title: 'Wciąż zwykły alert' },
    'Blok prozy wokół niego go nie przestylowuje.'),
  '<p>I wracamy do prozy.</p>',
)

Słowo o zaufaniu

prose() renderuje swoje dzieci jako HTML — o to właśnie chodzi i tak działa javascript-to-html w całości. Jeśli HTML pochodzi skądś, czego nie kontrolujesz, odkaź go, zanim tu trafi. Zwykle wystarczy renderer Markdowna z wyłączonym surowym HTML-em.

Propsy

Prop	Typ	Domyślnie	Opis
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Bazowy rozmiar czcionki; reszta skaluje się od niego w em.
`as`	`string`	`'div'`	Element do wyrenderowania, np. article.