tempest.dev/app/posts/page.tsx

import InfoBar from "~/components/InfoBar"
import { Post, getPostSlugs, loadSinglePage } from "~/utils/post"

export default async function Posts() {
  const slugs = await getPostSlugs()
  const posts = await Promise.all(slugs.map(loadSinglePage))

  const sortedPosts = posts.sort((a: Post, b: Post) => b.date.valueOf() - a.date.valueOf())

  return (
    <>
      <h1 className="pageTitle">
        Posts
      </h1>
      <main>
        {sortedPosts.map((post: Post) => (
          <div className="mainColumn">
            <InfoBar authorName={post.author} publishedDate={post.date} />
            <h2>{post.title}</h2>
            <p>{post.subtitle}</p>
            <a href={`/posts/${post.slug}`}>Read Post =&gt;</a>
          </div>
        ))}
      </main>
    </>
  )
}