Prose

Un moteur Markdown renvoie des balises nues : <h2>, <p>, <ul>, <blockquote> — sans aucune classe à laquelle s’accrocher. prose() enveloppe ce HTML et le style.

C’est l’unique exception délibérée de cette bibliothèque. Partout ailleurs le style est cantonné aux classes su- précisément pour ne jamais toucher un balisage que vous n’avez pas choisi ; ici il n’y a pas de classe à viser, donc les règles visent des balises nues — mais seulement à l’intérieur de l’enveloppe.

Prose de base

Démarrage

Écrivez une fonction qui renvoie du HTML. Lancez sitelo build. Publiez dist/.

Routage par fichiers
Données au build
Aucun runtime client

prose(
  '<h2>Démarrage</h2>' +
  '<p>Écrivez une fonction qui renvoie du HTML. Lancez <code>sitelo build</code>. Publiez <code>dist/</code>.</p>' +
  '<ul><li>Routage par fichiers</li><li>Données au build</li><li>Aucun runtime client</li></ul>'
)

Tout ce qu’elle style

Un titre

Du corps de texte avec un lien, du gras et du code en ligne.

Une citation mise à part du texte qui l’entoure.

Premier
Deuxième
- Imbriqué

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

Option	Défaut
cleanUrls	true
outDir	dist

Appuyez sur ⌘ K pour rechercher.

prose(
  '<h3>Un titre</h3>' +
  '<p>Du corps de texte avec <a href="/fr/docs">un lien</a>, du <strong>gras</strong> et du <code>code en ligne</code>.</p>' +
  '<blockquote><p>Une citation mise à part du texte qui l’entoure.</p></blockquote>' +
  '<ol><li>Premier</li><li>Deuxième<ul><li>Imbriqué</li></ul></li></ol>' +
  '<pre><code>export default () => "&lt;h1&gt;Salut&lt;/h1&gt;"</code></pre>' +
  '<table><thead><tr><th>Option</th><th>Défaut</th></tr></thead>' +
  '<tbody><tr><td>cleanUrls</td><td>true</td></tr><tr><td>outDir</td><td>dist</td></tr></tbody></table>' +
  '<hr>' +
  '<p>Appuyez sur <kbd>⌘</kbd> <kbd>K</kbd> pour rechercher.</p>'
)

Tailles

Petite — pour un résumé de carte ou une barre latérale.

Moyenne — le défaut, pour le corps d’un article.

Grande — pour une courte introduction mise en avant.

stack({ gap: 'lg' },
  prose({ size: 'sm' }, '<p><strong>Petite</strong> — pour un résumé de carte ou une barre latérale.</p>'),
  prose('<p><strong>Moyenne</strong> — le défaut, pour le corps d’un article.</p>'),
  prose({ size: 'lg' }, '<p><strong>Grande</strong> — pour une courte introduction mise en avant.</p>'),
)

Avec un blog en Markdown

La forme que veut l’exemple du blog : rendez le Markdown au build, enveloppez le résultat et publiez-le.

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: 'fr' },
  head(title(data.post.title), styles()),
  body(
    container({ size: 'sm' },
      h1(data.post.title),
      text({ variant: 'caption' }, data.post.date),
      // marked renvoie une chaîne de HTML sans aucune classe
      prose(marked.parse(data.post.markdown)),
    ),
  ),
)

Des composants dans la prose

Chaque règle de prose exclut les éléments portant une classe su- : un composant déposé dans un bloc de prose garde donc son propre style au lieu de récupérer les marges d’un article.

Un peu de Markdown rendu, puis un composant :

Toujours une alerte normale

Le bloc de prose autour d’elle ne la restyle pas.

Et retour à la prose.

prose(
  '<p>Un peu de Markdown rendu, puis un composant :</p>',
  alert({ color: 'warning', title: 'Toujours une alerte normale' },
    'Le bloc de prose autour d’elle ne la restyle pas.'),
  '<p>Et retour à la prose.</p>',
)

Un mot sur la confiance

prose() rend ses enfants comme du HTML — c’est tout l’intérêt, et c’est ainsi que fonctionne javascript-to-html partout. Si le HTML vient d’un endroit que vous ne contrôlez pas, assainissez-le avant qu’il arrive ici. Un moteur Markdown avec le HTML brut désactivé suffit généralement.

Props

Prop	Type	Défaut	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Taille de police de base ; tout le reste s’échelonne en em à partir d’elle.
`as`	`string`	`'div'`	Élément à rendre, par exemple article.