Prosa

Perender Markdown mengembalikan tag telanjang: <h2>, <p>, <ul>, <blockquote> — tanpa kelas untuk dikaitkan. prose() membungkus HTML itu dan menatanya.

Inilah satu-satunya pengecualian yang disengaja di pustaka ini. Di tempat lain, penataan dibatasi pada kelas su- justru agar ia tidak pernah menyentuh markup yang tidak Anda pilih; di sini tidak ada kelas untuk disasar, jadi aturannya mencocokkan tag telanjang — tetapi hanya di dalam pembungkusnya.

Prosa dasar

Memulai

Tulis fungsi yang mengembalikan HTML. Jalankan sitelo build. Terbitkan dist/.

Perutean berbasis berkas
Data saat build
Tanpa runtime klien

prose(
  '<h2>Memulai</h2>' +
  '<p>Tulis fungsi yang mengembalikan HTML. Jalankan <code>sitelo build</code>. Terbitkan <code>dist/</code>.</p>' +
  '<ul><li>Perutean berbasis berkas</li><li>Data saat build</li><li>Tanpa runtime klien</li></ul>'
)

Semua yang ditatanya

Sebuah judul

Teks badan dengan sebuah tautan, tebal, dan kode sebaris.

Kutipan menonjol, dipisahkan dari teks di sekitarnya.

Pertama
Kedua
- Bersarang

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

Opsi	Bawaan
cleanUrls	true
outDir	dist

Tekan ⌘ K untuk mencari.

prose(
  '<h3>Sebuah judul</h3>' +
  '<p>Teks badan dengan <a href="/docs">sebuah tautan</a>, <strong>tebal</strong>, dan <code>kode sebaris</code>.</p>' +
  '<blockquote><p>Kutipan menonjol, dipisahkan dari teks di sekitarnya.</p></blockquote>' +
  '<ol><li>Pertama</li><li>Kedua<ul><li>Bersarang</li></ul></li></ol>' +
  '<pre><code>export default () => "&lt;h1&gt;Hai&lt;/h1&gt;"</code></pre>' +
  '<table><thead><tr><th>Opsi</th><th>Bawaan</th></tr></thead>' +
  '<tbody><tr><td>cleanUrls</td><td>true</td></tr><tr><td>outDir</td><td>dist</td></tr></tbody></table>' +
  '<hr>' +
  '<p>Tekan <kbd>⌘</kbd> <kbd>K</kbd> untuk mencari.</p>'
)

Ukuran

Kecil — untuk ringkasan kartu atau bilah samping.

Sedang — bawaannya, untuk teks badan artikel.

Besar — untuk pembuka pendek yang menonjol.

stack({ gap: 'lg' },
  prose({ size: 'sm' }, '<p><strong>Kecil</strong> — untuk ringkasan kartu atau bilah samping.</p>'),
  prose('<p><strong>Sedang</strong> — bawaannya, untuk teks badan artikel.</p>'),
  prose({ size: 'lg' }, '<p><strong>Besar</strong> — untuk pembuka pendek yang menonjol.</p>'),
)

Dengan blog Markdown

Bentuk yang diinginkan contoh blognya: render Markdown-nya saat build, bungkus hasilnya, lalu terbitkan.

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: 'id' },
  head(title(data.post.title), styles()),
  body(
    container({ size: 'sm' },
      h1(data.post.title),
      text({ variant: 'caption' }, data.post.date),
      // marked mengembalikan string HTML tanpa kelas apa pun padanya
      prose(marked.parse(data.post.markdown)),
    ),
  ),
)

Komponen di dalam prosa

Setiap aturan prosa mengecualikan elemen yang membawa kelas su-, jadi komponen yang dijatuhkan ke dalam sebongkah prosa mempertahankan penataannya sendiri alih-alih ikut memungut margin artikel.

Sedikit Markdown yang sudah dirender, lalu sebuah komponen:

Tetap peringatan biasa

Ia tidak ditata ulang oleh blok prosa di sekelilingnya.

Dan kembali ke prosa.

prose(
  '<p>Sedikit Markdown yang sudah dirender, lalu sebuah komponen:</p>',
  alert({ color: 'warning', title: 'Tetap peringatan biasa' },
    'Ia tidak ditata ulang oleh blok prosa di sekelilingnya.'),
  '<p>Dan kembali ke prosa.</p>',
)

Sepatah kata tentang kepercayaan

prose() merender anaknya sebagai HTML — itulah seluruh intinya, dan begitulah javascript-to-html bekerja dari ujung ke ujung. Jika HTML-nya datang dari tempat yang tidak Anda kendalikan, bersihkan sebelum ia sampai ke sini. Perender Markdown dengan HTML mentah dimatikan biasanya sudah cukup.

Props

Prop	Tipe	Bawaan	Deskripsi
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Ukuran fon dasar; selebihnya berskala dalam em darinya.
`as`	`string`	`'div'`	Elemen yang dirender, misalnya article.