svelte-kit-vice/web/routes/blocks/content-section/ContentSectionSite.svelte

<script lang="ts">
	/**
	 * The article mini-page.
	 *
	 * The content is REAL long-form: two runs of rendered HTML with a figure
	 * between them, which is the only way to see whether the breakout actually
	 * keeps the reading order. The app owns the rendered HTML — that is what
	 * `Prose` is for — plus the words of the header and the media itself.
	 */
	import { ContentSection, type ContentWidth } from '$blocks/content-section';
	import type { ResponsiveProp } from '$adom';
	import type { ContainerSize } from '$uix/eidos/components/container';
	import type { TextMeasure } from '$uix/eidos/lib/types';
	import { Section } from '$uix/eidos/components/section';
	import { Container } from '$uix/eidos/components/container';
	import { Stack } from '$uix/eidos/components/stack';
	import { Heading } from '$uix/eidos/components/heading';
	import { Text } from '$uix/eidos/components/text';
	import { Badge } from '$uix/eidos/components/badge';
	import { Callout } from '$uix/eidos/components/callout';
	import { AspectRatio } from '$uix/eidos/components/aspect-ratio';
	import { Surface } from '$uix/eidos/components/surface';

	let {
		measure = 'normal',
		figure = 'wide',
		wide = 'lg'
	}: {
		measure?: TextMeasure;
		figure?: ResponsiveProp<ContentWidth>;
		wide?: ContainerSize;
	} = $props();

	// Rendered HTML is what a content section receives — from a CMS, from
	// markdown, from an editor. Bare elements: Prose styles every one of them.
	const opening = `
		<p>Durante meses medimos la latencia con el promedio, y durante meses la
		gráfica dijo que todo iba bien. Lo decía porque el promedio es una manera
		educada de no mirar: reparte el dolor de los pocos entre la calma de los
		muchos.</p>
		<h3>Qué cambia al mirar la cola</h3>
		<p>El percentil 99 no es una métrica más estricta. Es <em>otra pregunta</em>:
		no «cuánto tarda normalmente» sino «cuánto tarda cuando le toca a alguien».
		Esa persona existe todos los días.</p>
		<ul>
			<li>El promedio esconde los picos por construcción.</li>
			<li>La mediana los esconde mejor todavía.</li>
			<li>La cola es donde vive el abandono.</li>
		</ul>
	`;

	const closing = `
		<h3>Lo que hicimos con el dato</h3>
		<p>Cambiar la métrica no arregló nada por sí solo, pero movió las
		conversaciones: dejamos de discutir si el problema era real y empezamos a
		discutir dónde estaba. Los cambios que salieron de ahí fueron tres, y
		ninguno era el que habríamos hecho mirando el promedio.</p>
		<blockquote>
			<p>Una métrica no te dice qué hacer. Te dice de qué vais a hablar en la
			próxima reunión, que es casi lo mismo.</p>
		</blockquote>
		<p>El código está en el repositorio, con las mediciones de antes y después
		en el mismo cuaderno. La parte aburrida —recoger bien los datos— fue la que
		más tiempo llevó.</p>
	`;
</script>

<ContentSection {measure} {wide}>
	{#snippet eyebrow()}
		<Badge variant="soft" color="primary" size="sm">Ingeniería</Badge>
	{/snippet}
	{#snippet title()}
		Dejamos de medir el promedio
	{/snippet}
	{#snippet lede()}
		Lo que aparece cuando cambias la media por el percentil 99, y por qué la conversación del equipo
		cambia con ella.
	{/snippet}
	{#snippet meta()}
		31 de julio de 2026 · 6 min de lectura · por el equipo de plataforma
	{/snippet}

	<ContentSection.Body>
		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
		{@html opening}
	</ContentSection.Body>

	<ContentSection.Media width={figure}>
		<!-- The media is the app's. Here a Surface stands in for the chart image,
		     so the demo shows the LAYOUT without shipping a binary. -->
		<AspectRatio ratio={21 / 9}>
			<Surface variant="solid" color="indigo" gradient rounded width="100%" height="100%" />
		</AspectRatio>
		{#snippet caption()}
			Latencia por semana: el promedio (plano) contra el percentil 99, que es el que se movía todo
			el tiempo.
		{/snippet}
	</ContentSection.Media>

	<ContentSection.Body>
		<!-- A canon component embedded in the prose keeps its OWN styling: every
		     prose rule is zero-specificity, so no `not-prose` annotation. -->
		<Callout intent="neutral">
			<Callout.Title>El dato crudo está publicado</Callout.Title>
			<Callout.Content>
				Las mediciones de las dos etapas están en el cuaderno del repositorio.
			</Callout.Content>
		</Callout>
		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
		{@html closing}
	</ContentSection.Body>
</ContentSection>

<Section size="lg">
	<Container size="lg">
		<Stack gap={4}>
			<Heading level={2}>Y algo de página debajo</Heading>
			<Text color="muted" measure="wide" as="p">
				Un artículo casi nunca vive solo: debajo suele haber artículos relacionados o un pie. Aquí
				lleva algo para que el ancho de la columna de lectura se lea contra otra cosa.
			</Text>
		</Stack>
	</Container>
</Section>