Filtering Astro blog posts by date

Published: Mar 14 2024

Most Recent First

When I created this blog, I was only worried about getting something up quick. Keep in mind I was doing all of this from the Admirals Club in Atlanta. What I didn’t do was take into account future posts, and how I wanted to automate and display them on the site. The index for example was more or less hard coded, meaning I was just pulling out the first post in an Astro Collection. Now I want that to change, I want to automatically pull the most recent post by date. With this change it means I’m going to have to filter the collection and change the way I’m working with dates in the frontmatter.

Luckily, Astro kinda figured this out already. Even better is that the documentation is really clear and helpful. Working with Dates in Astro Collections

Schema Update

In my config.ts file, I’ve configured my schema for posts the following way:

schema: z.object({
        title: z.string(),
        pubDate: z.string(),
        tags: z.array(z.string()),
        description: z.string(),
        image: z.string(),
        imgAlt: z.string()
    })

As the documentation suggests, I’ll be using the ISO 8601 format for my dates. After making that change my schema looks like the following:

    schema: z.object({
        title: z.string(),
        pubDate: z.date(),
        tags: z.array(z.string()),
        description: z.string(),
        image: z.string(),
        imgAlt: z.string()
    })

Now that the schema is updated, I have to update all of my posts. Luckily the number of posts is small, which means making these changes is relatively quick and simple. I’m updating my frontmatter in each post as follows:

pubDate: Mar, 14 2024

Now becomes

pubDate: 2024-03-14

So far, so good. Pages are rendering again after an update to the dev server (npm run dev). However, the index page isn’t updating yet because I haven’t filtered the blog posts by date. Let’s get that done now.

My initial build of the index was fairly lazy. I just grabbed the first post in the collection and posted it. Apparently I was thinking ahead, but when you only have one post, how could it be wrong?

---
const allBlogPosts = await getCollection('posts')
---

<BaseLayout pageTitle={pageTitle} description={description}>
    
        <div class="py-5">
            <Hero title={allBlogPosts[0].data.title} image={allBlogPosts[0].data.image} imgAlt={allBlogPosts[0].data.imgAlt} description={allBlogPosts[0].data.description} slug={allBlogPosts[0].slug}/>
        </div>
    
</BaseLayout>

As you can see, I simply just pull the whole collection and don’t sort it at all. Now I have to sort the allBlogPosts array in decending order.

const allBlogPosts = await getCollection('posts')
allBlogPosts.sort((a, b) => +new Date(b.data.pubDate) - +new Date(a.data.pubDate))

After that update, I’m seeing the following:

The image above is how the index page appeared on March 14th, 2024. It’s working as expected. Now the main index page will display the most recently posted blog.

The objective was to update the index page, which we’ve accomplished. Now I can move on to addtional improvements.