Index list

<script lang="ts">
	import { IndexList, IndexListItem, SectionHeader } from '@archeblack/ui';

	// El archivo de Hermes en 2026, del más reciente al más antiguo.
	const posts = [
		{
			title: 'El Alma Pide Locura',
			slug: 'el-alma-pide-locura',
			date: '2026-07-27T21:45:16Z',
			minutes: 15
		},
		{
			title: 'Lo que cambia cuando alguien escucha',
			slug: 'lo-que-cambia-cuando-alguien-escucha',
			date: '2026-05-03T01:33:44Z',
			minutes: 15
		},
		{
			title: 'El Daimon en la Máquina',
			slug: 'el-daimon-en-la-maquina',
			date: '2026-01-28T12:00:00Z',
			minutes: 11
		},
		{
			title: 'El Doctor que Bailó con el Tiempo',
			slug: 'el-doctor-que-bailo-con-el-tiempo',
			date: '2026-01-17T12:00:00Z',
			minutes: 9
		},
		{
			title: 'Lo Numinoso en CONTROL',
			slug: 'lo-numinoso-en-control',
			date: '2026-01-04T12:00:00Z',
			minutes: 10
		}
	];
</script>

<!-- El archivo por año (D11c): el año grande (SectionHeader size="lg") pone la regla de arriba y
     cada fila lleva la fecha sin el año, el título y el tiempo de lectura. Toda la fila es un link.
     metaLabel dice cómo se lee el dato: «15 minutos de lectura».
     En una página real el año es un h2; aquí es h4 porque vive en la documentación. -->
<section aria-labelledby="archive-2026" style="width: 100%">
	<SectionHeader level={4} size="lg" title="2026" titleId="archive-2026" />
	<IndexList>
		{#each posts as post (post.slug)}
			<IndexListItem
				title={post.title}
				href={`#${post.slug}`}
				date={post.date}
				meta={`${post.minutes} min`}
				metaLabel={`${post.minutes} minutos de lectura`}
			/>
		{/each}
	</IndexList>
</section>

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

	// Los cuatro posts más recientes de Hermes, numerados en el orden en que se publicaron.
	const posts = [
		{ title: 'El Alma Pide Locura', slug: 'el-alma-pide-locura', date: '2026-07-27T21:45:16Z' },
		{
			title: 'Lo que cambia cuando alguien escucha',
			slug: 'lo-que-cambia-cuando-alguien-escucha',
			date: '2026-05-03T01:33:44Z'
		},
		{
			title: 'El Daimon en la Máquina',
			slug: 'el-daimon-en-la-maquina',
			date: '2026-01-28T12:00:00Z'
		},
		{
			title: 'El Doctor que Bailó con el Tiempo',
			slug: 'el-doctor-que-bailo-con-el-tiempo',
			date: '2026-01-17T12:00:00Z'
		}
	];
</script>

<!-- Con número: basta que una fila lleve ordinal para que la lista reserve la columna. Es un dato
     chico, en la mono de los datos, nunca una cifra grande. Aquí la fecha lleva el año. -->
<IndexList aria-label="Publicaciones recientes" style="width: 100%">
	{#each posts as post, index (post.slug)}
		<IndexListItem
			ordinal={`#${posts.length + 1 - index}`}
			title={post.title}
			href={`#${post.slug}`}
			date={post.date}
			year
		/>
	{/each}
</IndexList>

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

	const query = 'alma';

	// Los dos posts de Hermes que coinciden con «alma», con su bajada como fragmento.
	const results = [
		{
			title: 'El Alma Pide Locura',
			slug: 'el-alma-pide-locura',
			dek: 'Hay caminos fuera del jardín. Sobre la sed que el saber no calma, y la disposición que el alma estaba pidiendo.'
		},
		{
			title: 'El Doctor que Bailó con el Tiempo',
			slug: 'el-doctor-que-bailo-con-el-tiempo',
			dek: 'Por qué el Undécimo Doctor elige el juego después de novecientos años de peso. La ligereza como pedagogía del alma, no como evasión.'
		}
	];
</script>

<!-- Resultados de búsqueda: variant="listing", con el título en 17 px y el fragmento en Piazzolla.
     Highlight marca las coincidencias con el fondo de la selección (D8b), en el acento de Hermes.
     Busca subcadenas: «alma» también marca el «alma» de «calma». -->
<div data-product="hermes" style="display: grid; gap: var(--arche-spacing-3); width: 100%">
	<p
		id="results-count"
		style="margin: 0; font: var(--arche-typography-label); letter-spacing: var(--arche-typography-label-letter-spacing); text-transform: uppercase; color: var(--arche-color-text-subtle)"
	>
		2 resultados para «{query}»
	</p>
	<IndexList variant="listing" aria-labelledby="results-count">
		{#each results as result (result.slug)}
			<IndexListItem href={`#${result.slug}`}>
				{#snippet title()}<Highlight text={result.title} {query} />{/snippet}
				{#snippet description()}<Highlight text={result.dek} {query} />{/snippet}
			</IndexListItem>
		{/each}
	</IndexList>
</div>

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

	// Los cuatro temas de Hermes, con la cantidad de artículos de cada uno.
	const topics = [
		{ name: 'Filosofía', slug: 'filosofia', count: 4 },
		{ name: 'Cultura', slug: 'cultura', count: 3 },
		{ name: 'Videojuegos', slug: 'videojuegos', count: 2 },
		{ name: 'Tecnología', slug: 'tecnologia', count: 1 }
	];
</script>

<!-- El índice de temas: el nombre y, al final, el conteo en la mono de los datos. -->
<IndexList variant="listing" aria-label="Temas" style="width: 100%">
	{#each topics as topic (topic.slug)}
		<IndexListItem
			title={topic.name}
			href={`#${topic.slug}`}
			meta={topic.count === 1 ? '1 artículo' : `${topic.count} artículos`}
		/>
	{/each}
</IndexList>

<script lang="ts">
	import { Eyebrow, IndexList, IndexListItem } from '@archeblack/ui';
</script>

<!-- Las sugerencias de una página de error: la misma fila del listado, sin fecha, con una
     aclaración al final. Nada de cifras grandes dentro de la lista. -->
<div style="display: grid; gap: var(--arche-spacing-3); width: 100%">
	<Eyebrow id="not-found-suggestions" topic="Quizás buscabas" />
	<IndexList variant="listing" aria-labelledby="not-found-suggestions">
		<IndexListItem title="Todas las publicaciones" href="#publicaciones" meta="Archivo completo" />
		<IndexListItem title="Temas" href="#temas" meta="Temas editoriales" />
	</IndexList>
</div>