Multiple feeds and improve rendering

src/pages/blog/index.astro

@@ -0,0 +1,85 @@
+---
+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";
+import { IconSquareRSS } from "@components/icons";
+
+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" />
+  <div class="my-4 flex w-full">
+    <p class="p-summary grow">Posts on whatever has been rattling in my head as of late.</p>
+    <a class="u-url text-link ml-2 mr-10 p-2" href="/blog/feed.xml" rel="alternate" title="RSS feed" data-tooltip>
+      <IconSquareRSS width="2rem" height="2rem" />
+      <span class="sr-only">RSS feed</span>
+    </a>
+  </div>
+  <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>