2022-12-02 11:21:18 +01:00
|
|
|
---
|
2022-12-22 11:01:52 +01:00
|
|
|
// init i18n
|
|
|
|
import { l, t, astroI18n } from "astro-i18n";
|
|
|
|
astroI18n.init(Astro);
|
|
|
|
|
2023-06-03 22:27:00 +02:00
|
|
|
import { getEntry } from "astro:content";
|
|
|
|
|
2022-12-22 11:01:52 +01:00
|
|
|
// import stuff
|
2022-12-02 17:29:11 +01:00
|
|
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
2022-12-22 11:01:52 +01:00
|
|
|
import QuickAccessCard from "../components/QuickAccessCard.astro";
|
|
|
|
import ListCards from "../components/ListCards.astro";
|
2023-06-03 22:27:00 +02:00
|
|
|
import CardEditorial from "../components/CardEditorial.astro";
|
2022-12-02 11:21:18 +01:00
|
|
|
|
2022-12-02 17:29:11 +01:00
|
|
|
const pageTitle = t("accueil");
|
2022-12-22 11:01:52 +01:00
|
|
|
|
|
|
|
// 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;
|
|
|
|
});
|
|
|
|
|
2022-12-28 10:36:15 +01:00
|
|
|
// New astro content collections
|
|
|
|
import { getCollection } from "astro:content";
|
|
|
|
// Only return posts with correct lang in the frontmatter
|
|
|
|
const localizedArticles = await getCollection("articles", ({ data }) => {
|
2023-02-03 10:37:28 +01:00
|
|
|
return data.lang === astroI18n.langCode && !data.draft;
|
2022-12-22 11:01:52 +01:00
|
|
|
});
|
|
|
|
// sort articles by descending publication date
|
|
|
|
const sortedArticles = localizedArticles.sort(
|
2022-12-28 10:36:15 +01:00
|
|
|
(a, b) => b.data.createdAt - a.data.createdAt
|
2022-12-22 11:01:52 +01:00
|
|
|
);
|
2022-12-28 10:36:15 +01:00
|
|
|
// Only return snippets with correct lang in the frontmatter
|
|
|
|
const localizedSnippets = await getCollection("fragments", ({ data }) => {
|
2023-02-03 10:37:28 +01:00
|
|
|
return data.lang === astroI18n.langCode && !data.draft;
|
2022-12-22 11:18:44 +01:00
|
|
|
});
|
2022-12-28 10:36:15 +01:00
|
|
|
// sort articles by descending publication date
|
|
|
|
const sortedSnippets = localizedSnippets.sort(
|
|
|
|
(a, b) => b.data.createdAt - a.data.createdAt
|
|
|
|
);
|
2023-06-03 22:27:00 +02:00
|
|
|
const localizedReferences = await getCollection("references", ({ data }) => {
|
|
|
|
return data.lang === astroI18n.langCode && !data.draft;
|
|
|
|
});
|
2022-12-02 11:21:18 +01:00
|
|
|
---
|
|
|
|
|
|
|
|
<BaseLayout pageTitle={pageTitle}>
|
2022-12-22 11:01:52 +01:00
|
|
|
<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">
|
|
|
|
{
|
2023-06-03 22:27:00 +02:00
|
|
|
localizedSections.map(
|
|
|
|
(section) =>
|
|
|
|
section.frontmatter.id && (
|
|
|
|
<li>
|
|
|
|
<QuickAccessCard item={section.frontmatter} />
|
|
|
|
</li>
|
|
|
|
)
|
|
|
|
)
|
2022-12-22 11:01:52 +01:00
|
|
|
}
|
|
|
|
</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 />
|
2023-06-03 22:27:00 +02:00
|
|
|
{section.frontmatter.reference && (
|
|
|
|
<div class="section__reference">
|
|
|
|
<ListCards
|
|
|
|
list={localizedReferences.filter((ref) => {
|
|
|
|
return ref.slug === section.frontmatter.reference;
|
|
|
|
})}
|
|
|
|
routeName={t("references.slug")}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)}
|
2022-12-22 11:01:52 +01:00
|
|
|
</div>
|
|
|
|
<div class="section__image">
|
|
|
|
<img
|
|
|
|
src={section.frontmatter.image}
|
|
|
|
width="400"
|
|
|
|
height="350"
|
|
|
|
alt=""
|
|
|
|
aria-hidden="true"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
))
|
|
|
|
}
|
|
|
|
|
2023-02-03 11:21:01 +01:00
|
|
|
<section class="region flow latest">
|
2022-12-28 10:36:15 +01:00
|
|
|
<div class="flow latest__articles">
|
2022-12-22 11:01:52 +01:00
|
|
|
<h2>{t("index.latestArticles")}</h2>
|
2022-12-28 10:36:15 +01:00
|
|
|
<ListCards list={sortedArticles} routeName={t("article.titre")} />
|
2023-02-03 11:21:01 +01:00
|
|
|
<p class="latest__link">
|
|
|
|
<a href={l("/articles")}>{t("index.allArticles")}</a>
|
|
|
|
</p>
|
2022-12-28 10:36:15 +01:00
|
|
|
</div>
|
|
|
|
<div class="flow latest__snippets">
|
|
|
|
<h2>{t("index.latestSnippets")}</h2>
|
|
|
|
<ListCards list={sortedSnippets} routeName={t("fragments.titre")} />
|
2023-02-03 11:21:01 +01:00
|
|
|
<p class="latest__link">
|
|
|
|
<a href={l("/fragments")}>{t("index.allSnippets")}</a>
|
|
|
|
</p>
|
2022-12-22 11:01:52 +01:00
|
|
|
</div>
|
|
|
|
</section>
|
2022-12-02 11:21:18 +01:00
|
|
|
</BaseLayout>
|
2022-12-22 11:01:52 +01:00
|
|
|
|
|
|
|
<style>
|
|
|
|
/* INTRO */
|
|
|
|
.intro {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.intro::before {
|
|
|
|
content: "";
|
|
|
|
position: absolute;
|
|
|
|
top: -30%;
|
|
|
|
left: -10%;
|
2022-12-28 10:36:15 +01:00
|
|
|
max-inline-size: 100vw;
|
|
|
|
inline-size: 320px;
|
|
|
|
block-size: 320px;
|
2022-12-22 11:01:52 +01:00
|
|
|
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 {
|
2022-12-28 10:36:15 +01:00
|
|
|
margin-block-start: var(--space-xl-2xl);
|
2022-12-22 11:01:52 +01:00
|
|
|
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 {
|
2023-06-03 22:27:00 +02:00
|
|
|
--region-space: var(--space-l-3xl);
|
2022-12-22 11:01:52 +01:00
|
|
|
container-name: section;
|
|
|
|
container-type: inline-size;
|
|
|
|
}
|
|
|
|
.section__container {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
2023-06-03 22:27:00 +02:00
|
|
|
gap: var(--space-m-xl);
|
2022-12-22 11:01:52 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.section :global(h2) {
|
|
|
|
font-size: var(--size-3);
|
|
|
|
color: var(--color-blue);
|
|
|
|
}
|
|
|
|
.section :global(h3) {
|
|
|
|
font-size: var(--size-1);
|
|
|
|
}
|
|
|
|
|
2023-02-03 11:21:01 +01:00
|
|
|
.latest {
|
|
|
|
--flow-space: var(--space-l-xl);
|
|
|
|
}
|
|
|
|
|
|
|
|
.latest__link {
|
|
|
|
text-align: end;
|
|
|
|
}
|
|
|
|
|
2022-12-22 11:01:52 +01:00
|
|
|
@container section (min-width: 50rem) {
|
|
|
|
.section__container {
|
2023-06-03 22:27:00 +02:00
|
|
|
position: relative;
|
2022-12-22 11:01:52 +01:00
|
|
|
flex-direction: row;
|
|
|
|
align-items: flex-start;
|
|
|
|
}
|
|
|
|
.section__image {
|
|
|
|
order: 1;
|
|
|
|
position: sticky;
|
2023-06-03 22:27:00 +02:00
|
|
|
top: var(--space-3xl);
|
2022-12-22 11:01:52 +01:00
|
|
|
flex-grow: 1;
|
|
|
|
flex-basis: 18rem;
|
|
|
|
}
|
|
|
|
.section__content {
|
|
|
|
order: 2;
|
|
|
|
flex-basis: 0;
|
2023-06-03 22:27:00 +02:00
|
|
|
min-inline-size: 32ch;
|
|
|
|
font-size: var(--size-1);
|
|
|
|
}
|
|
|
|
.section__content :global(h2) {
|
|
|
|
font-size: var(--size-5);
|
|
|
|
line-height: 1.2;
|
|
|
|
}
|
|
|
|
.section__reference {
|
|
|
|
margin-block-start: 50vh;
|
|
|
|
padding-block-end: var(--space-3xl);
|
|
|
|
}
|
|
|
|
.section__reference :global(.card a) {
|
|
|
|
font-size: var(--size-0);
|
2022-12-22 11:01:52 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|