78 lines
3.1 KiB
Text
78 lines
3.1 KiB
Text
---
|
|
import { Image } from "astro:assets";
|
|
import { getCollection, getEntries, type CollectionEntry } from "astro:content";
|
|
import GalleryLayout from "../layouts/GalleryLayout.astro";
|
|
import UserComponent from "../components/UserComponent.astro";
|
|
import { markdownToPlaintext } from "../utils/markdown_to_plaintext";
|
|
|
|
type PostWithPubDate = CollectionEntry<"blog"> & { data: { pubDate: Date } };
|
|
|
|
const posts = await Promise.all(
|
|
((await getCollection("blog", (post) => !post.data.isDraft && post.data.pubDate)) as PostWithPubDate[])
|
|
.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime())
|
|
.map(async (post) => ({
|
|
...post,
|
|
authors: await getEntries(post.data.authors),
|
|
})),
|
|
);
|
|
---
|
|
|
|
<GalleryLayout pageTitle="Blog" class="h-feed">
|
|
<meta slot="head" property="og:description" content="Bad Manners || A game that I've gone and done." />
|
|
<h1 class="p-name m-2 text-3xl font-semibold text-stone-800 dark:text-stone-100">Blog</h1>
|
|
<hr class="mb-3 ml-[2px] mt-2 h-[4px] max-w-xs rounded-sm bg-stone-800 dark:bg-stone-100" />
|
|
<p class="p-summary my-4">Posts on whatever has been rattling in my head as of late.</p>
|
|
<ul class="my-6 flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
|
|
{
|
|
posts.map((post, i) => (
|
|
<li class="h-entry" lang={post.data.lang}>
|
|
<a
|
|
class="u-url text-link hover:underline focus:underline"
|
|
href={`/blog/${post.slug}`}
|
|
title={markdownToPlaintext(post.data.description)}
|
|
data-tooltip
|
|
>
|
|
{post.data.thumbnail ? (
|
|
<div class="flex aspect-square max-w-[288px] justify-center">
|
|
<Image
|
|
loading={i < 10 ? "eager" : "lazy"}
|
|
class="u-photo m-auto"
|
|
src={post.data.thumbnail}
|
|
alt={`Thumbnail for ${post.data.title}`}
|
|
width={192}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
<div class="max-w-[288px] text-sm">
|
|
<span class="p-name" aria-label="Title">
|
|
{post.data.title}
|
|
</span>
|
|
<br />
|
|
<time
|
|
class="dt-published italic"
|
|
datetime={post.data.pubDate.toISOString().slice(0, 10)}
|
|
aria-label="Publish date"
|
|
>
|
|
{post.data.pubDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
|
|
</time>
|
|
</div>
|
|
</a>
|
|
<div class="sr-only select-none">
|
|
<p class="p-category" aria-label="Category">
|
|
Blog post
|
|
</p>
|
|
<p class="p-summary" aria-label="Summary">
|
|
{post.data.description}
|
|
</p>
|
|
<div aria-label="Authors">
|
|
<span>{post.authors.length == 1 ? "Author:" : "Authors:"}</span>
|
|
{post.authors.map((author) => (
|
|
<UserComponent rel="author" class="p-author" user={author} lang={post.data.lang} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</GalleryLayout>
|