website-astro/src/pages/index.astro

197 lines
4.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);
// 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";
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
);
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">
{
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>
))
}
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 {
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);
}
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 {
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;
2022-12-28 10:36:15 +01:00
min-inline-size: 40ch;
2022-12-22 11:01:52 +01:00
}
}
</style>