blog/src/components/PostList.astro

---
import { getCollection, type CollectionEntry } from "astro:content";
import Timestamp from "./Timestamp.astro";
import { sortBy } from "lodash-es";

interface Props {
  basePath: string;
  drafts?: "exclude" | "include" | "only";
  filteredPosts?: Post[];
}

type Post = CollectionEntry<"posts">;
const { basePath, drafts: includeDrafts, filteredPosts } = Astro.props;

type FilterFn = (_: Post) => boolean;

function unreachable(): never {
  throw new Error("unreachable");
}

function getFilter(): FilterFn {
  switch (includeDrafts) {
    case "exclude":
    case undefined:
      return (post: Post) => !post.data.draft;
    case "include":
      return (_: Post) => true;
    case "only":
      return (post: Post) => post.data.draft === true;
  }
  return unreachable();
}

const filter = getFilter();
let allPosts;
if (filteredPosts) allPosts = filteredPosts.filter(filter);
else allPosts = await getCollection("posts", filter);

const sortedPosts = sortBy(allPosts, (post) => -post.data.date);
---

<table class="postListing">
  {
    sortedPosts.map((post) => {
      return (
        <tr class="row">
          <td class="info">
            <Timestamp timestamp={post.data.date} />
          </td>
          <td>
            <span class="title">
              <a href={`${basePath}/${post.slug}`} class="brand-colorlink">
                {post.data.title}
              </a>
            </span>
          </td>
        </tr>
      );
    })
  }
</table>

<style lang="scss">
  .postListing {
    width: 100%;
    border-spacing: 6px;

    td {
      // padding-bottom: 10px;
      // line-height: 1;

      .title {
        font-size: 1.1em;
      }

      .summary {
        padding-top: 4px;
        font-size: 0.64em;
        color: var(--smaller-text-color);

        p {
          display: inline;
        }
      }
    }

    td.info {
      color: var(--smaller-text-color);
      font-size: 0.75em;
      white-space: nowrap;
      text-align: right;
    }
  }
</style>