83 lines
3.3 KiB
Text
83 lines
3.3 KiB
Text
---
|
|
import { type CollectionEntry, getCollection } from "astro:content";
|
|
import { Image } from "astro:assets";
|
|
import { getUnixTime, format as formatDate } from "date-fns";
|
|
import { enUS as enUSLocale } from "date-fns/locale/en-US";
|
|
import GalleryLayout from "../layouts/GalleryLayout.astro";
|
|
|
|
const MAX_ITEMS = 5;
|
|
|
|
interface LatestItemsEntry {
|
|
type: string;
|
|
thumbnail: CollectionEntry<"stories">["data"]["thumbnail"];
|
|
href: string;
|
|
title: string;
|
|
pubDate: Date;
|
|
}
|
|
|
|
const stories = (await getCollection("stories", (story) => !story.data.isDraft)).sort((a, b) => getUnixTime(b.data.pubDate) - getUnixTime(a.data.pubDate)).slice(0, MAX_ITEMS);
|
|
const games = (await getCollection("games", (game) => !game.data.isDraft)).sort((a, b) => getUnixTime(b.data.pubDate) - getUnixTime(a.data.pubDate)).slice(0, MAX_ITEMS);
|
|
|
|
const latestItems: LatestItemsEntry[] = [
|
|
stories.map<LatestItemsEntry>(story => ({
|
|
type: "Story",
|
|
thumbnail: story.data.thumbnail,
|
|
href: `/stories/${story.slug}`,
|
|
title: story.data.title,
|
|
pubDate: story.data.pubDate,
|
|
})),
|
|
games.map<LatestItemsEntry>(game => ({
|
|
type: "Game",
|
|
thumbnail: game.data.thumbnail,
|
|
href: `/games/${game.slug}`,
|
|
title: game.data.title,
|
|
pubDate: game.data.pubDate,
|
|
})),
|
|
].flat().sort((a, b) => getUnixTime(b.pubDate) - getUnixTime(a.pubDate)).slice(0, MAX_ITEMS);
|
|
---
|
|
|
|
<GalleryLayout pageTitle="Gallery">
|
|
<meta slot="head-description" content="Bad Manners || Welcome to my gallery!" property="og:description" />
|
|
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">My gallery</h1>
|
|
<p class="my-4">Welcome to my gallery! Use the navigation menu to navigate through my content.</p>
|
|
<ul class="list-disc pl-8">
|
|
<li><a class="text-link underline" href="/stories/1">Read my stories.</a></li>
|
|
<li><a class="text-link underline" href="/games/crossing-over">Play my visual novel.</a></li>
|
|
<li><a class="text-link underline" href="/tags">Find all content with a certain tag.</a></li>
|
|
</ul>
|
|
<p class="my-4">
|
|
For more information about me, please check out <a
|
|
class="text-link underline"
|
|
href="https://badmanners.xyz/"
|
|
target="_blank">my main website</a
|
|
>.
|
|
</p>
|
|
<section class="my-2" aria-labelledby="latest-uploads">
|
|
<h2 id="latest-uploads" class="p-2 text-xl font-semibold text-stone-800 dark:text-stone-100">Latest uploads</h2>
|
|
<ul class="flex flex-wrap justify-center gap-4 text-center md:justify-normal items-start">
|
|
{
|
|
latestItems.map((entry) => (
|
|
<li class="break-inside-avoid">
|
|
<a class="text-link hover:underline focus:underline" href={entry.href}>
|
|
{entry.thumbnail ? (
|
|
<div class="max-w-[192px] aspect-square flex justify-center">
|
|
<Image
|
|
class="m-auto"
|
|
src={entry.thumbnail}
|
|
alt={`Thumbnail for ${entry.title}`}
|
|
width={192}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
<div class="max-w-[192px] text-sm">
|
|
<span>{entry.title}</span>
|
|
<br />
|
|
<span class="italic">{entry.type} – {formatDate(entry.pubDate, "MMM d, yyyy", { locale: enUSLocale })}</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</section>
|
|
</GalleryLayout>
|