Prosa

Un renderer Markdown restituisce tag nudi: <h2>, <p>, <ul>, <blockquote> — senza classi a cui agganciarsi. prose() avvolge quell’HTML e gli dà stile.

È l’unica eccezione voluta in questa libreria. Dappertutto altrove lo stile è circoscritto alle classi su- proprio perché non tocchi mai markup a cui non hai aderito; qui non ci sono classi da prendere di mira, quindi le regole agganciano i tag nudi — ma solo dentro l’involucro.

Prosa di base

Primi passi

Scrivi una funzione che restituisce HTML. Esegui sitelo build. Pubblica dist/.

Routing basato sui file
Dati in fase di build
Nessun runtime lato client

prose(
  '<h2>Primi passi</h2>' +
  '<p>Scrivi una funzione che restituisce HTML. Esegui <code>sitelo build</code>. Pubblica <code>dist/</code>.</p>' +
  '<ul><li>Routing basato sui file</li><li>Dati in fase di build</li><li>Nessun runtime lato client</li></ul>'
)

Tutto ciò a cui dà stile

Un’intestazione

Testo corrente con un link, grassetto e codice inline.

Una citazione in evidenza, messa da parte rispetto al testo che la circonda.

Primo
Secondo
- Annidato

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

Opzione	Predefinito
cleanUrls	true
outDir	dist

Premi ⌘ K per cercare.

prose(
  '<h3>Un’intestazione</h3>' +
  '<p>Testo corrente con <a href="/docs">un link</a>, <strong>grassetto</strong> e <code>codice inline</code>.</p>' +
  '<blockquote><p>Una citazione in evidenza, messa da parte rispetto al testo che la circonda.</p></blockquote>' +
  '<ol><li>Primo</li><li>Secondo<ul><li>Annidato</li></ul></li></ol>' +
  '<pre><code>export default () => "&lt;h1&gt;Ciao&lt;/h1&gt;"</code></pre>' +
  '<table><thead><tr><th>Opzione</th><th>Predefinito</th></tr></thead>' +
  '<tbody><tr><td>cleanUrls</td><td>true</td></tr><tr><td>outDir</td><td>dist</td></tr></tbody></table>' +
  '<hr>' +
  '<p>Premi <kbd>⌘</kbd> <kbd>K</kbd> per cercare.</p>'
)

Dimensioni

Piccola — per il riassunto di una scheda o una barra laterale.

Media — la predefinita, per il corpo di un articolo.

Grande — per un’introduzione breve e in evidenza.

stack({ gap: 'lg' },
  prose({ size: 'sm' }, '<p><strong>Piccola</strong> — per il riassunto di una scheda o una barra laterale.</p>'),
  prose('<p><strong>Media</strong> — la predefinita, per il corpo di un articolo.</p>'),
  prose({ size: 'lg' }, '<p><strong>Grande</strong> — per un’introduzione breve e in evidenza.</p>'),
)

Con un blog in Markdown

La forma che vuole l’esempio del blog: renderizza il Markdown in fase di build, avvolgi il risultato e pubblicalo.

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: 'it' },
  head(title(data.post.title), styles()),
  body(
    container({ size: 'sm' },
      h1(data.post.title),
      text({ variant: 'caption' }, data.post.date),
      // marked restituisce una stringa di HTML senza alcuna classe
      prose(marked.parse(data.post.markdown)),
    ),
  ),
)

Componenti dentro la prosa

Ogni regola di prose esclude gli elementi che portano una classe su-, così un componente lasciato cadere in un blocco di prosa si tiene il proprio stile invece di prendersi i margini da articolo.

Un po’ di Markdown renderizzato, e poi un componente:

È ancora un avviso normale

Non viene ri-stilizzato dal blocco di prosa che lo circonda.

E si torna alla prosa.

prose(
  '<p>Un po’ di Markdown renderizzato, e poi un componente:</p>',
  alert({ color: 'warning', title: 'È ancora un avviso normale' },
    'Non viene ri-stilizzato dal blocco di prosa che lo circonda.'),
  '<p>E si torna alla prosa.</p>',
)

Due parole sulla fiducia

prose() renderizza i propri figli come HTML — è tutto il punto, ed è così che funziona javascript-to-html dappertutto. Se l’HTML viene da un posto che non controlli, sanificalo prima che arrivi qui. Un renderer Markdown con l’HTML grezzo disattivato di solito basta.

Props

Prop	Tipo	Predefinito	Descrizione
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Dimensione di base del carattere; tutto il resto scala in em a partire da essa.
`as`	`string`	`'div'`	Elemento da renderizzare, per esempio article.