Changing Direction

Mar 28 2023

Retreating from a TIL page to build a tag archive

Sometimes I choose the most difficult way to do something. And in this case, it may have been wanting to build a collection similar to posts, but with til as Today-I-Learned snippets to keep them separate from other writing. But…

• I was having trouble with rendering the markdown onto the collection display page;
• I was having trouble with types between CollectionEntry despite that being the type that should have been generated;
• I started to think that I would need to learn all of javascript/typescript before I could/should proceed;
• I was forgetting the reason why I decided to keep these so separate in the first place;
• I may have already tagged some of the posts as ‘til’ anyway;
• An actual tutorial on creating a tag archive page exists as opposed to me using solely the documentation.

So now I am separating out posts with the ‘til’ tag to display on a separate page. I may still run into the first and second issues, but for the most part, it will be okay.

Except that I’m still having issues with the map function getting the post properties. For the life of me, post.url and post.frontmatter.url and post.slug etc. all come up as undefined. The path to my folder of posts is correct, and spelling is all okay. I’m not sure why, other than it must be some tiny tiny issue that I’m overlooking on end.

And there it is: Astro’s Content Collection documentation staring me right in the face, which I’ve read over four or five times but only caught now.

Filtering collection queries
getCollection() takes an optional “filter” callback that allows you to filter your query based on an entry’s id, slug, or data (frontmatter) properties.

It was incredibly helpful to compare the Astro tutorial with Elian’s and Sarah’s posts on their respective experiences with building tag pages in Astro.

I’m happy it’s working. Do I entirely know why? I think I’m missing something in my understanding of passing props and params, especially when TypeScript enters the picture. I still don’t entirely understand why post.slug wasn’t working previously, but I’m happy that things are working out now. And I was able to use this to create a corresponding tag index page.

To Remember:

• When referencing items in a collection, dot notation uses data, not frontmatter.