Prosa

Un renderizador de Markdown devuelve etiquetas peladas: <h2>, <p>, <ul>, <blockquote> — sin clases a las que agarrarse. prose() envuelve ese HTML y lo estiliza.

Es la única excepción deliberada de esta biblioteca. En todo lo demás el estilo está acotado a clases su- precisamente para no tocar nunca marcado al que no te hayas apuntado; aquí no hay clases a las que apuntar, así que las reglas aplican a etiquetas peladas, pero solo dentro del envoltorio.

Prosa básica

Primeros pasos

Escribe una función que devuelva HTML. Ejecuta sitelo build. Publica dist/.

Rutas basadas en archivos
Datos en la compilación
Sin runtime en el cliente

prose(
  '<h2>Primeros pasos</h2>' +
  '<p>Escribe una función que devuelva HTML. Ejecuta <code>sitelo build</code>. Publica <code>dist/</code>.</p>' +
  '<ul><li>Rutas basadas en archivos</li><li>Datos en la compilación</li><li>Sin runtime en el cliente</li></ul>'
)

Todo lo que estiliza

Un encabezado

Texto de cuerpo con un enlace, negrita y código en línea.

Una cita destacada, apartada del texto que la rodea.

Primero
Segundo
- Anidado

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

Opción	Por defecto
cleanUrls	true
outDir	dist

Pulsa ⌘ K para buscar.

prose(
  '<h3>Un encabezado</h3>' +
  '<p>Texto de cuerpo con <a href="/es/docs">un enlace</a>, <strong>negrita</strong> y <code>código en línea</code>.</p>' +
  '<blockquote><p>Una cita destacada, apartada del texto que la rodea.</p></blockquote>' +
  '<ol><li>Primero</li><li>Segundo<ul><li>Anidado</li></ul></li></ol>' +
  '<pre><code>export default () => "&lt;h1&gt;Hola&lt;/h1&gt;"</code></pre>' +
  '<table><thead><tr><th>Opción</th><th>Por defecto</th></tr></thead>' +
  '<tbody><tr><td>cleanUrls</td><td>true</td></tr><tr><td>outDir</td><td>dist</td></tr></tbody></table>' +
  '<hr>' +
  '<p>Pulsa <kbd>⌘</kbd> <kbd>K</kbd> para buscar.</p>'
)

Tamaños

Pequeño — para el resumen de una tarjeta o una barra lateral.

Mediano — el valor por defecto, para el cuerpo de un artículo.

Grande — para una introducción corta y destacada.

stack({ gap: 'lg' },
  prose({ size: 'sm' }, '<p><strong>Pequeño</strong> — para el resumen de una tarjeta o una barra lateral.</p>'),
  prose('<p><strong>Mediano</strong> — el valor por defecto, para el cuerpo de un artículo.</p>'),
  prose({ size: 'lg' }, '<p><strong>Grande</strong> — para una introducción corta y destacada.</p>'),
)

Con un blog en Markdown

La forma que quiere el ejemplo del blog: renderiza el Markdown en la compilación, envuelve el resultado y publícalo.

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: 'es' },
  head(title(data.post.title), styles()),
  body(
    container({ size: 'sm' },
      h1(data.post.title),
      text({ variant: 'caption' }, data.post.date),
      // marked devuelve una cadena de HTML sin ninguna clase
      prose(marked.parse(data.post.markdown)),
    ),
  ),
)

Componentes dentro de la prosa

Todas las reglas de prosa excluyen los elementos que llevan una clase su-, así que un componente soltado en un bloque de prosa conserva su propio estilo en vez de heredar los márgenes de un artículo.

Un poco de Markdown renderizado, y después un componente:

Sigue siendo una alerta normal

El bloque de prosa que la rodea no le cambia el estilo.

Y de vuelta a la prosa.

prose(
  '<p>Un poco de Markdown renderizado, y después un componente:</p>',
  alert({ color: 'warning', title: 'Sigue siendo una alerta normal' },
    'El bloque de prosa que la rodea no le cambia el estilo.'),
  '<p>Y de vuelta a la prosa.</p>',
)

Una palabra sobre la confianza

prose() dibuja sus hijos como HTML — de eso se trata, y así funciona javascript-to-html en todas partes. Si el HTML viene de un sitio que no controlas, sanéalo antes de que llegue aquí. Un renderizador de Markdown con el HTML crudo desactivado suele bastar.

Props

Prop	Tipo	Por defecto	Descripción
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamaño de letra base; todo lo demás escala en em a partir de él.
`as`	`string`	`'div'`	Elemento que se renderiza, por ejemplo article.