website-astro/src/pages/index.astro

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

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

const pageTitle = t("accueil");

// get all HP sections
const allSections = await Astro.glob("../data/HP/**/*.md");
// only keep the right locale version
const localizedSections = allSections.filter((section) => {
	return section.frontmatter.lang === astroI18n.langCode;
});

// New astro content collections
import { getCollection } from "astro:content";
// Only return posts with correct lang in the frontmatter
const localizedArticles = await getCollection("articles", ({ data }) => {
	return data.lang === astroI18n.langCode && !data.draft;
});
// sort articles by descending publication date
const sortedArticles = localizedArticles.sort(
	(a, b) => b.data.createdAt - a.data.createdAt
);
// Only return snippets with correct lang in the frontmatter
const localizedSnippets = await getCollection("fragments", ({ data }) => {
	return data.lang === astroI18n.langCode && !data.draft;
});
// sort articles by descending publication date
const sortedSnippets = localizedSnippets.sort(
	(a, b) => b.data.createdAt - a.data.createdAt
);
---

<BaseLayout pageTitle={pageTitle}>
	<section class="region intro">
		<h1 set:html={t("index.title")} />
		<section class="quick-access">
			<h2 class="intro__subtitle">{t("index.subtitle")}</h2>
			<ul class="quick-access__list" role="list">
				{
					localizedSections.map((section) => (
						<li>
							<QuickAccessCard item={section.frontmatter} />
						</li>
					))
				}
			</ul>
		</section>
	</section>

	{
		localizedSections.map((section) => (
			<section id={section.frontmatter.id} class="region section">
				<div class="section__container">
					<div class="flow section__content">
						<section.Content />
					</div>
					<div class="section__image">
						<img
							src={section.frontmatter.image}
							width="400"
							height="350"
							alt=""
							aria-hidden="true"
						/>
					</div>
				</div>
			</section>
		))
	}

	<section class="region flow latest">
		<div class="flow latest__articles">
			<h2>{t("index.latestArticles")}</h2>
			<ListCards list={sortedArticles} routeName={t("article.titre")} />
			<p class="latest__link">
				<a href={l("/articles")}>{t("index.allArticles")}</a>
			</p>
		</div>
		<div class="flow latest__snippets">
			<h2>{t("index.latestSnippets")}</h2>
			<ListCards list={sortedSnippets} routeName={t("fragments.titre")} />
			<p class="latest__link">
				<a href={l("/fragments")}>{t("index.allSnippets")}</a>
			</p>
		</div>
	</section>
</BaseLayout>

<style>
	/* INTRO */
	.intro {
		position: relative;
	}
	.intro::before {
		content: "";
		position: absolute;
		top: -30%;
		left: -10%;
		max-inline-size: 100vw;
		inline-size: 320px;
		block-size: 320px;
		z-index: -1;
		border-radius: 50%;
		background-color: var(--color-light-blue);
	}
	.intro h1 {
		font-size: clamp(3.25rem, calc(1.92rem + 6.67vw), 6.25rem);
		text-align: center;
	}
	.intro h1 :global(a) {
		color: currentColor;
		text-decoration: underline;
		text-decoration-thickness: auto;
		text-decoration-color: var(--color-brique);
		text-decoration-thickness: 6px;
	}
	.intro h1 :global(a:hover) {
		text-decoration: none;
	}
	.intro__subtitle {
		margin: var(--space-s-m) 0;
		font-family: "wotfard";
		font-weight: 500;
		text-align: center;
		color: var(--color-dark-blue);
	}
	.quick-access {
		margin-block-start: var(--space-xl-2xl);
		container-type: inline-size;
		container-name: intro;
	}
	.quick-access__list {
		margin: var(--space-l-xl) auto 0;
		display: flex;
		flex-flow: row wrap;
		gap: var(--space-m-l);
	}
	.quick-access__list > li {
		flex-grow: 1;
		flex-basis: 240px;
	}

	/* SECTIONS */
	.section {
		container-name: section;
		container-type: inline-size;
	}
	.section__container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-m-l);
	}

	.section :global(h2) {
		font-size: var(--size-3);
		color: var(--color-blue);
	}
	.section :global(h3) {
		font-size: var(--size-1);
	}

	.latest {
		--flow-space: var(--space-l-xl);
	}

	.latest__link {
		text-align: end;
	}

	@container section (min-width: 50rem) {
		.section__container {
			flex-direction: row;
			align-items: flex-start;
		}
		.section__image {
			order: 1;
			position: sticky;
			top: 20px;
			flex-grow: 1;
			flex-basis: 18rem;
		}
		.section__content {
			order: 2;
			flex-basis: 0;
			min-inline-size: 40ch;
		}
	}
</style>