101 lines
3.0 KiB
Plaintext
101 lines
3.0 KiB
Plaintext
---
|
|
import { payload } from "src/shared/payload/payload-sdk";
|
|
import { groupBy } from "src/utils/array";
|
|
import TimelineYear from "./_components/TimelineYear.astro";
|
|
import AppEmptyLayout from "components/AppLayout/AppEmptyLayout.astro";
|
|
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
|
|
import Card from "components/Card.astro";
|
|
import { getI18n } from "src/i18n/i18n";
|
|
import AppLayoutBackgroundImg from "components/AppLayout/components/AppLayoutBackgroundImg.astro";
|
|
import { cache } from "src/utils/cachedPayload";
|
|
import type { WordingKey } from "src/i18n/wordings-keys";
|
|
import AppLayoutDescription from "components/AppLayout/components/AppLayoutDescription.astro";
|
|
|
|
const events = await payload.getChronologyEvents();
|
|
const groupedEvents = groupBy(events, (event) => event.date.year);
|
|
const { getLocalizedUrl, t, formatTimelineDate } = await getI18n(Astro.locals.currentLocale);
|
|
---
|
|
|
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
|
|
|
<AppEmptyLayout>
|
|
<AppLayoutBackgroundImg
|
|
img={{
|
|
url: "/img/timeline-background.webp",
|
|
width: 2478,
|
|
height: 4110,
|
|
}}
|
|
/>
|
|
<AppLayoutTitle title={t("timeline.title")} />
|
|
<AppLayoutDescription description={t("timeline.description")} />
|
|
|
|
<div class="card-container">
|
|
<Card>
|
|
<div class="card-content prose">
|
|
<h3>{t("timeline.notes.title")}</h3>
|
|
|
|
<p
|
|
set:html={t("timeline.notes.content", {
|
|
worldInside: `<a href="${getLocalizedUrl(
|
|
"/collectibles/world-inside"
|
|
)}">World Inside</a>`,
|
|
})}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card>
|
|
<div class="card-content prose">
|
|
<h3>{t("timeline.priorCataclysmNote.title")}</h3>
|
|
|
|
<p
|
|
set:html={t("timeline.priorCataclysmNote.content", {
|
|
worldInside: `<a href="${getLocalizedUrl(
|
|
"/collectibles/world-inside"
|
|
)}">World Inside</a>`,
|
|
})}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card>
|
|
<div class="card-content prose jump-card">
|
|
<h3>{t("timeline.jumpTo")}</h3>
|
|
|
|
{
|
|
cache.config.timeline.eras.map(({ name, startingYear, endingYear }) => (
|
|
<p
|
|
set:html={t(name as WordingKey, {
|
|
start: `<a href="#${startingYear}">${formatTimelineDate({ year: startingYear })}</a>`,
|
|
end: `<a href="#${endingYear}">${formatTimelineDate({ year: endingYear })}</a>`,
|
|
})}
|
|
/>
|
|
))
|
|
}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
{groupedEvents.map(({ key, values }) => <TimelineYear year={key} events={values} />)}
|
|
</AppEmptyLayout>
|
|
|
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
|
|
|
<style>
|
|
.card-content {
|
|
padding: clamp(1em, 4vw, 3em);
|
|
max-width: 35rem;
|
|
|
|
&.jump-card > p {
|
|
margin-block: 0.2em;
|
|
}
|
|
}
|
|
|
|
.card-container {
|
|
margin-top: 2em;
|
|
margin-bottom: 4em;
|
|
display: flex;
|
|
gap: 2em;
|
|
flex-wrap: wrap;
|
|
}
|
|
</style>
|