Editorial

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { ArticleCard, ArticleCardGrid, SectionHeader } from '@archeblack/ui';
	import { AUTHOR, POSTS, routes, topicOf } from '../content.ts';

	const [, ...recent] = POSTS;
</script>

<!-- Un listado: el encabezado de sección (con «Ver todo el archivo») y la grilla de tarjetas md,
     con bajada y firma. En una página real la sección es un h2 y las tarjetas h3; aquí van un nivel
     más abajo porque viven en la documentación. -->
<section aria-labelledby="listing-md" data-product="hermes" style="width: 100%">
	<SectionHeader
		level={4}
		title="Recientes"
		titleId="listing-md"
		href={routes.publications()}
		linkLabel="Ver todo el archivo"
	/>
	<ArticleCardGrid>
		{#each recent as post (post.slug)}
			{@const topic = topicOf(post)}
			<ArticleCard
				level={5}
				title={post.title}
				href={routes.post(post.slug)}
				image={post.image}
				mark="hermes"
				topic={topic.name}
				topicHref={routes.topic(topic.slug)}
				date={post.date}
				dek={post.dek}
				author={AUTHOR.name}
				readingTime={post.minutes}
			/>
		{/each}
	</ArticleCardGrid>
</section>

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { ArticleCard, ArticleCardGrid, SectionHeader } from '@archeblack/ui';
	import { relatedTo, routes, topicOf } from '../content.ts';

	const related = relatedTo('el-alma-pide-locura');
</script>

<!-- Los relacionados al pie de un post: tarjetas sm, sin bajada ni firma. El encabezado va sin
     link: no hay un «ver todo» de los relacionados. -->
<section aria-labelledby="listing-sm" data-product="hermes" style="width: 100%">
	<SectionHeader level={4} title="Sigue leyendo" titleId="listing-sm" />
	<ArticleCardGrid>
		{#each related as post (post.slug)}
			{@const topic = topicOf(post)}
			<ArticleCard
				size="sm"
				level={5}
				title={post.title}
				href={routes.post(post.slug)}
				image={post.image}
				mark="hermes"
				topic={topic.name}
				topicHref={routes.topic(topic.slug)}
				date={post.date}
			/>
		{/each}
	</ArticleCardGrid>
</section>

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { ArticleCard, ArticleCardGrid, SectionHeader } from '@archeblack/ui';
	import { AUTHOR, postsByTopic, routes, topicBySlug } from '../content.ts';

	const topic = topicBySlug('videojuegos')!;
	const posts = postsByTopic(topic.slug);
</script>

<!-- Pocas tarjetas: la grilla lg (columnas de 28rem o más: dos desde unos 920 px) y la tarjeta lg, con el título a
     28 px. Aquí, los dos posts de Videojuegos. -->
<section aria-labelledby="listing-lg" data-product="hermes" style="width: 100%">
	<SectionHeader
		level={4}
		title={topic.name}
		titleId="listing-lg"
		href={routes.topic(topic.slug)}
		linkLabel="Ver el archivo del tema"
	/>
	<ArticleCardGrid size="lg">
		{#each posts as post (post.slug)}
			<ArticleCard
				size="lg"
				level={5}
				title={post.title}
				href={routes.post(post.slug)}
				image={post.image}
				mark="hermes"
				topic={topic.name}
				date={post.date}
				dek={post.dek}
				author={AUTHOR.name}
				readingTime={post.minutes}
			/>
		{/each}
	</ArticleCardGrid>
</section>

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { Byline } from '@archeblack/ui';
	import { AUTHOR, POSTS, routes } from '../content.ts';
	import Share from '../frame/Share.svelte';

	const [post] = POSTS;
</script>

<!-- Compartir en la firma del post: el snippet end de Byline, con Mastodon, Bluesky y «Copiar
     link». Al copiar, el botón dice «Copiado» durante 2 s y «Link copiado» se anuncia en una región
     role="status". Si no entra en la línea, baja a su propia fila, al inicio. -->
<div data-product="hermes" style="width: 100%">
	<Byline
		name={AUTHOR.name}
		href={routes.author(AUTHOR.slug)}
		avatar
		avatarInitials={AUTHOR.initials}
		readingTime={post.minutes}
	>
		{#snippet end()}<Share title={post.title} />{/snippet}
	</Byline>
</div>

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { Byline } from '@archeblack/ui';
	import { AUTHOR, POSTS, routes } from '../content.ts';
	import Share from '../frame/Share.svelte';

	const [post] = POSTS;
</script>

<!-- El estado copiado, fijo para mirarlo: copied viene de afuera y no se anuncia nada (el aviso
     role="status" solo aparece al copiar de verdad). En el producto no se pasa copied. -->
<div data-product="hermes" style="width: 100%">
	<Byline
		name={AUTHOR.name}
		href={routes.author(AUTHOR.slug)}
		avatar
		avatarInitials={AUTHOR.initials}
		readingTime={post.minutes}
	>
		{#snippet end()}<Share title={post.title} copied />{/snippet}
	</Byline>
</div>