i18n updates + HP + components

src/pages/index.astro

@@ -1,10 +1,171 @@
 ---
-import { t, l } from "astro-i18n";
+// 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 CardEditorial from "../components/CardEditorial.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;
+});
+
+// get all articles
+const allArticles = await Astro.glob("../data/articles/**/*.{md,mdx}");
+// only keep the right locale version
+const localizedArticles = allArticles.filter((article) => {
+	return article.frontmatter.lang === astroI18n.langCode;
+});
+// sort articles by descending publication date
+const sortedArticles = localizedArticles.sort(
+	(a, b) => b.frontmatter.pubDate - a.frontmatter.pubDate
+);
 ---
 
 <BaseLayout pageTitle={pageTitle}>
-	<h1 set:html={t("index.title")}></h1>
+	<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="latest">
+		<div class="latest__work">
+			<h2>{t("index.latestArticles")}</h2>
+			<ListCards list={sortedArticles} routeName={t("article.titre")} />
+		</div>
+	</section>
 </BaseLayout>
+
+<style>
+	/* INTRO */
+	.intro {
+		position: relative;
+	}
+	.intro::before {
+		content: "";
+		position: absolute;
+		top: -30%;
+		left: -10%;
+		max-width: 100vw;
+		width: 320px;
+		height: 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-top: 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);
+	}
+
+	@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-width: 40ch;
+		}
+	}
+</style>