Prose

<script lang="ts">
	import { Prose } from '@archeblack/ui';

	// El HTML que genera marked para un fragmento de «El Alma Pide Locura», de Hermes. En el post, el
	// h1 es el titular de la cabecera y el texto empieza en h2; en la documentación estos títulos
	// rompen a propósito el esquema de la página, porque el estilo de cada uno sale de su etiqueta.
	const html = `<h2>La mesa</h2>
<p>Una reunión de eruditos. Hombres sentados alrededor de una mesa con sus méritos sobre la madera, hablando, midiendo, sosteniendo cada afirmación con su prueba. No hay impostura en la escena. Cada uno hizo el trabajo: leyó, revisó, se corrigió, aprendió a no afirmar más de lo que podía demostrar.</p>
<p>Conviene decirlo antes que nada, porque de otro modo todo lo que sigue se malinterpreta. <em>La mesa no está equivocada.</em> Aprendimos a mirar así por razones buenas, como recuerda <a href="#han"><strong>Byung-Chul Han</strong></a> cuando habla de la sociedad del rendimiento.</p>
<h3>Lo que la prueba no alcanza</h3>
<p>Hay una sed ahí que el saber no calma. No porque sea poco, sino porque es de otro orden:</p>
<ul>
<li>los sueños, que nadie archiva;</li>
<li>las certezas que llegan antes que sus razones;</li>
<li>las coincidencias, de las que nadie lleva registro.</li>
</ul>
<h4>Un error de categoría</h4>
<p>Pedirle a un sueño su bibliografía no es rigor. Es pedirle a un mapa que te diga cómo huele el bosque, y concluir que el bosque no huele.</p>`;
</script>

<div style="width: 100%">
	<Prose {html} />
</div>

<script lang="ts">
	import { Prose } from '@archeblack/ui';

	// Citas de Hermes: estrofas con <br>, énfasis adentro y el autor en un <footer>.
	const html = `<blockquote>
<p><em>Sé que pendí de ese árbol mecido por el viento</em><br><em>nueve noches enteras,</em><br><em>herido por la lanza, ofrecido a Odín,</em><br><em>yo mismo a mí mismo.</em></p>
<p><em>Pan no me dieron ni cuerno;</em><br><em>escruté las profundidades,</em><br><em>tomé las runas, las tomé gritando,</em><br><em>y caí del árbol.</em></p>
</blockquote>
<p>El que cuelga no está castigado: está mirando el mundo al revés, y desde ahí ve lo que desde arriba no se ve.</p>
<blockquote>
<p><em>«Soy la Bruja Ranni. Robé la Muerte hace mucho tiempo, y busco ahora el camino oscuro.»</em></p>
<footer>Ranni, en <cite>Elden Ring</cite></footer>
</blockquote>`;
</script>

<div style="width: 100%">
	<Prose {html} />
</div>

<script lang="ts">
	import { Prose } from '@archeblack/ui';

	// Separador, código en línea, un bloque de código y una tabla con su pie. La columna de cifras
	// va alineada al final, como la escribe marked para `| ---: |`.
	const html = `<p>Cada ensayo se escribe en Markdown y se convierte con <code>marked</code> antes de publicarse.</p>
<hr>
<p>La conversión es una sola línea:</p>
<pre><code>const html = marked.parse(post.body, { gfm: true, breaks: false });</code></pre>
<table>
<caption>Tiempo de lectura de los ensayos de 2026</caption>
<thead><tr><th>Ensayo</th><th>Tema</th><th align="right">Minutos</th></tr></thead>
<tbody>
<tr><td>El Alma Pide Locura</td><td>Filosofía</td><td align="right">14</td></tr>
<tr><td>Lo que cambia cuando alguien escucha</td><td>Cultura</td><td align="right">11</td></tr>
<tr><td>El Doctor que Bailó con el Tiempo</td><td>Cultura</td><td align="right">9</td></tr>
</tbody>
</table>`;
</script>

<div style="width: 100%">
	<Prose {html} />
</div>

<script lang="ts">
	import { Prose } from '@archeblack/ui';
</script>

<!-- Con children: el texto en japonés lleva lang="ja" y cae en la fuente del sistema. -->
<div style="width: 100%">
	<Prose>
		<p>
			<em>Ma</em> (<span lang="ja">間</span>) es la palabra japonesa para el espacio entre las
			cosas: la pausa que permite que aparezca lo <mark>que no aparecería</mark> de otro modo.
		</p>
		<p lang="ja">
			間とは、物と物とのあいだにある空白のことです。沈黙がなければ、旋律は生まれません。
		</p>
		<blockquote>
			<p><em>Sin silencios no hay melodía.</em> <span lang="ja">間がなければ音楽はない。</span></p>
		</blockquote>
	</Prose>
</div>

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { Prose } from '@archeblack/ui';
</script>

<!-- La regla de la cita usa el rol quote: blanca en Arche y el acento en cada producto. -->
<div
	style="display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--arche-spacing-8); width: 100%"
>
	<Prose>
		<blockquote>
			<p><em>«Hay caminos fuera de este jardín.»</em></p>
			<footer>Arche</footer>
		</blockquote>
	</Prose>
	<Prose data-product="hermes">
		<blockquote>
			<p><em>«Hay caminos fuera de este jardín.»</em></p>
			<footer>Hermes</footer>
		</blockquote>
	</Prose>
</div>