86 lines
3.2 KiB
Text
86 lines
3.2 KiB
Text
---
|
|
import { type CollectionEntry, getCollection } from "astro:content";
|
|
import { Image } from "astro:assets";
|
|
import GalleryLayout from "../layouts/GalleryLayout.astro";
|
|
|
|
const MAX_ITEMS = 8;
|
|
|
|
interface LatestItemsEntry {
|
|
type: string;
|
|
thumbnail: CollectionEntry<"stories">["data"]["thumbnail"];
|
|
href: string;
|
|
title: string;
|
|
pubDate: Date;
|
|
}
|
|
|
|
const stories = (await getCollection("stories", (story) => !story.data.isDraft && story.data.pubDate))
|
|
.sort((a, b) => b.data.pubDate!.getTime() - a.data.pubDate!.getTime())
|
|
.slice(0, MAX_ITEMS);
|
|
const games = (await getCollection("games", (game) => !game.data.isDraft && game.data.pubDate))
|
|
.sort((a, b) => b.data.pubDate!.getTime() - a.data.pubDate!.getTime())
|
|
.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) => b.pubDate.getTime() - a.pubDate.getTime())
|
|
.slice(0, MAX_ITEMS);
|
|
---
|
|
|
|
<GalleryLayout pageTitle="Gallery">
|
|
<meta slot="head-description" property="og:description" content="Bad Manners || Welcome to my gallery!" />
|
|
<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 items-start justify-center gap-4 text-center md:justify-normal">
|
|
{
|
|
latestItems.map((entry) => (
|
|
<li class="break-inside-avoid">
|
|
<a class="text-link hover:underline focus:underline" href={entry.href}>
|
|
{entry.thumbnail ? (
|
|
<div class="flex aspect-square max-w-[192px] 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} –{" "}
|
|
{entry.pubDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</section>
|
|
</GalleryLayout>
|