Using Themes

Apr 07 2023

Using the PostPreview component from Astro Ink

Since I didn’t want to switch entirely to a new template, I thought I might try to just bring in some of the components from one that I liked. Astro Ink has a neat blog post list with the date to the side. To add it in, I looked at the components referenced: PostPreview, PostPreviewList, and the index page. I decided to just use the PostPreview formatting and swap it out from the Card component on my Writing page.

From the PostPreviewList, they had a utility to add the long month name. I didn’t want to add another layer to it, so instead I used slice on my date strings to parse out the month short name (as Astro already provided that in their format). This worked well, until I decided it would be really useful to have my posts sort by date. In that case, my .toString() came back undefined. I ended up using the Stack Overflow answer below since I didn’t really want to make an array with the names of the month.

(new Date('2020-12-28').toLocaleString('en-us',{month:'short', year:'numeric'}))

Since Astro Ink has the sort function as part of the PostPreviewList that I chose not to use, I added it to my frontmatter on the Writing page, making sure to use data.pubDate instead of frontmatter.pubDate. Since the styling was all in Tailwind (which I’m choosing not to use) I used a Tailwind to CSS converter to add it as plain CSS.