101 lines
4.2 KiB
Text
101 lines
4.2 KiB
Text
---
|
|
import { getCollection } from "astro:content";
|
|
import { Image } from "astro:assets";
|
|
import { getUnixTime } from "date-fns";
|
|
import GalleryLayout from "../../layouts/GalleryLayout.astro";
|
|
import mapImage from "../../assets/images/tlotm_map.jpg";
|
|
|
|
const stories = (await getCollection("stories")).filter(
|
|
(story) => !story.data.isDraft && story.slug.startsWith("the-lost-of-the-marshes/"),
|
|
);
|
|
const mainChapters = stories
|
|
.filter((story) => story.slug.startsWith("the-lost-of-the-marshes/chapter-"))
|
|
.sort((a, b) => getUnixTime(a.data.pubDate) - getUnixTime(b.data.pubDate));
|
|
const bonusChapters = stories
|
|
.filter((story) => story.slug.startsWith("the-lost-of-the-marshes/bonus-"))
|
|
.sort((a, b) => getUnixTime(a.data.pubDate) - getUnixTime(b.data.pubDate));
|
|
const mainChaptersWithSummaries = mainChapters.filter((story) => story.data.summary);
|
|
---
|
|
|
|
<GalleryLayout pageTitle="The Lost of the Marshes">
|
|
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">The Lost of the Marshes</h1>
|
|
<p class="my-4">This is the main hub for the story of Quince, Nikili, and Suu, as well as all bonus content.</p>
|
|
<section class="my-2" aria-labelledby="main-chapters">
|
|
<h2 id="main-chapters" class="p-2 text-xl font-semibold text-stone-800 dark:text-stone-100">Main chapters</h2>
|
|
<details
|
|
class="mx-3 mb-6 mt-1 rounded-lg border border-stone-400 bg-stone-300 dark:border-stone-500 dark:bg-stone-700"
|
|
>
|
|
<summary class="rounded-lg bg-stone-200 px-2 py-1 dark:bg-stone-800"
|
|
>Click to reveal spoilers up to {
|
|
mainChaptersWithSummaries[mainChaptersWithSummaries.length - 1].data.title.match(/Chapter \d+\b/)?.[0]
|
|
}</summary
|
|
>
|
|
<ul class="border-t border-stone-400 px-1 dark:border-stone-500">
|
|
{
|
|
mainChapters
|
|
.filter((story) => story.data.summary)
|
|
.map((story) => (
|
|
<li class="my-2">
|
|
<a class="text-link underline" href={`/stories/${story.slug}`}>
|
|
{story.data.shortTitle || story.data.title}
|
|
</a>
|
|
: <span>{story.data.summary}</span>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</details>
|
|
<ul class="flex flex-wrap justify-center gap-4 text-center md:justify-normal">
|
|
{
|
|
mainChapters.map((story) => (
|
|
<li class="break-inside-avoid">
|
|
<a class="text-link hover:underline focus:underline" href={`/stories/${story.slug}`}>
|
|
{story.data.thumbnail && (
|
|
<Image
|
|
class="w-48"
|
|
src={story.data.thumbnail}
|
|
alt={`Thumbnail for ${story.data.title}`}
|
|
width={story.data.thumbnailWidth}
|
|
height={story.data.thumbnailHeight}
|
|
/>
|
|
)}
|
|
<div class="max-w-48 text-sm">{story.data.title}</div>
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</section>
|
|
<section class="my-2" aria-labelledby="bonus-chapters">
|
|
<h2 id="bonus-chapters" class="p-2 text-xl font-semibold text-stone-800 dark:text-stone-100">Bonus chapters</h2>
|
|
<ul class="flex flex-wrap justify-center gap-4 text-center md:justify-normal">
|
|
{
|
|
bonusChapters.map((story) => (
|
|
<li class="break-inside-avoid">
|
|
<a class="text-link hover:underline focus:underline" href={`/stories/${story.slug}`}>
|
|
{story.data.thumbnail && (
|
|
<Image
|
|
class="w-48"
|
|
src={story.data.thumbnail}
|
|
alt={`Thumbnail for ${story.data.title}`}
|
|
width={story.data.thumbnailWidth}
|
|
height={story.data.thumbnailHeight}
|
|
/>
|
|
)}
|
|
<div class="max-w-48 text-sm">{story.data.title}</div>
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</section>
|
|
<section class="mb-6 mt-2" aria-labelledby="map">
|
|
<h2 id="map" class="p-2 text-xl font-semibold text-stone-800 dark:text-stone-100">Map</h2>
|
|
<p class="mb-4 mt-2">Updated to include locations up to Chapter 11.</p>
|
|
<Image
|
|
class="mx-auto w-full max-w-4xl break-before-page"
|
|
src={mapImage}
|
|
alt="A geopolitical map for the setting of The Lost of the Marshes"
|
|
/>
|
|
</section>
|
|
</GalleryLayout>
|