---
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 p-1 md:mr-5" 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>