website-astro/src/pages/index.astro

230 lines
5.5 KiB
Plaintext
Raw Normal View History

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>