Many Small Updates

Published: Mar 15 2024

Small Changes, Big Difference

The first big change I had to make was to the archive page. The archive page looked like the following:

There is a lot going on here that I wanted to fix. Let’s point out some of the obvious.

1. The padding or margin on the left is too much. The title of each post should align with the section title.
2. The format of the date isn’t correct. I’ll need to use the slice() function to format that date correctly. I could write a format date function, but right now I think just a slice will do the trick.
3. The dates aren’t correct. Because I’m using ISO 8601, all my dates are based on GMT. I’ll need to fix that to make sure it spits out the date I actually published the content.
4. Sorting is incorrect. You can see that it’s not sorting by most recent. I’ll need to apply the same filter as I did to the main index page.

Fixing the padding

First thing I fixed was the padding on the left hand side. Luckily that was as easy as adding a few classes. Because I’m using the tailwindcss plugin typography, all I had to do was add the “not-prose” class like so:

<ul class="list-none not-prose">

Format the Date correctly

Currently my date is based on ISO 8601 as I stated above. That’s all find and dandy, but I don’t like the way it looks. So I’m going to go with the suggestion in the documentation and slice it to show only what I want.

Before:

{blog.data.pubDate}

After:

{blog.data.pubDate.toString().slice(0,15)}

Adding a Timezone

Ultimately, I ended up adjusting the frontmatter of my markdown files to accomplish what I wanted. There were several solutions I could have chosen, but the easiest is to adhere to a format in the frontmatter and continue with it. Because I didn’t know how I’d use the date in the future, I thought that adding more now is better than having to change a bunch of posts in the future.

Old:

pubDate: 2024-03-15

New:

pubDate: 2024-03-15T12:00:00-04:00

Result:

Filtering Astro blog posts by date - Thu Mar 14 2024

Filtering

Just like the main index, I wanted to sort by the most recent. The whole point of the archive page is to have a single location for all posts on the blog. Eventually I’ll need to paginate this page, but right now the number of posts is small. Here’s the change to the archive index page:

---
import { getCollection } from "astro:content";

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

And a little sorting

---
import { getCollection } from "astro:content";

const articles = await getCollection('posts')

articles.sort((a, b) => +new Date(b.data.pubDate) - +new Date(a.data.pubDate))
---

Detailed Post Updates

The theme of this post seems to be formatting dates. Currently on the “slug” pages or “detail” pages as I like to call them, the dates look like the following:

Published: Wed Mar 13 2024 19:00:00 GMT-0500 (Central Daylight Time)

With the following update:

<p>Published: {entry.data.pubDate.toString().slice(3,15)}</p>

Gives me the following change.

Mar 15 2024

I think that takes care of the formatting for all the dates.

Wrapping Up

I’m pretty happy with the way this blog is coming together. I’m far from done as I’ve got a lot of features I still want to implement. I still need to get search working, tagging and a newsletter signup, but at this point I think it’s coming along well.