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;
  includeDrafts?: boolean;
}

type Post = CollectionEntry<"posts">;
const { basePath, includeDrafts } = Astro.props;
const filter = includeDrafts ? (_: Post) => true : (post: Post) => !post.data.draft;
const 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>