website-astro/src/pages/articles/index.astro

---
import { l, t, astroI18n } from "astro-i18n";
astroI18n.init(Astro);

// New astro content collections
import { getCollection } from "astro:content";

import BaseLayout from "../../layouts/BaseLayout.astro";
import ListCards from "../../components/ListCards.astro";

const localizedPost = await getCollection("articles", ({ data }) => {
	return data.lang === astroI18n.langCode;
});
// sort articles by descending publication date
const sortedArticles = localizedPost.sort(
	(a, b) => b.data.createdAt - a.data.createdAt
);

const pageTitle = t("index.articles.pageName");
---

<BaseLayout pageTitle={pageTitle}>
	<section class="region flow">
		<h1>{t("index.articles.pageName")}</h1>
		<h2>{t("index.articles.subtitle")}</h2>
		<ListCards list={sortedArticles} routeName={t("article.titre")} />
	</section>
</BaseLayout>

<style>
	.flow h2 + :global(*) {
		margin-block-start: var(--space-m-l);
	}
	h1 {
		text-transform: capitalize;
	}
	h1,
	h2 {
		padding-inline-start: var(--space-xs-s);
	}
	h2 {
		color: var(--color-brique);
	}
</style>