---
import { getCollection } from "astro:content";
import Layout from "../../layouts/Layout.astro";

// Drafts render in dev and are not built. The check is on
// import.meta.env.DEV rather than a flag, so there is no way to ship one by
// forgetting to turn something back on.
const posts = (
  await getCollection("posts", ({ data }) => import.meta.env.DEV || !data.draft)
).sort((a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime());

const day = new Intl.DateTimeFormat("en", {
  dateStyle: "long",
  timeZone: "UTC",
});
---

<Layout
  title="substandard.blog: read. our. blog."
  description="Updates from substandard.blog"
>
  <header class="hero">
    <h1>updates</h1>
    <p class="hero-sub">
      <a href="/">substandard</a> &middot; <a href="/atom.xml">atom feed</a>
    </p>
  </header>

  <main>
    {
      posts.length === 0 ? (
        <section>
          <p>someting broke :/</p>
        </section>
      ) : (
        posts.map((post) => (
          <section class="post-card">
            <h2>
              <a href={`/posts/${post.id}`}>{post.data.title}</a>
            </h2>
            <p class="post-meta">
              <time datetime={post.data.publishDate.toISOString()}>
                {day.format(post.data.publishDate)}
              </time>
              {post.data.draft && <span class="post-draft">draft</span>}
            </p>
            <p>{post.data.description}</p>
          </section>
        ))
      )
    }
  </main>
</Layout>