Mar 28, 2023, 8:00 AM
I accomplished the three things I wanted to immediately fix yesterday.
Posts now have the correct dates.
I was already using an 11ty filter for dates. Each post has front matter that looks like this:
---
title: Progress
date: 2023-03-28
---
And the filter looked like this:
eleventyConfig.addFilter("postDate", (dateObj) => {
return dateObj && DateTime.fromJSDate(dateObj).toLocaleString(DateTime.DATE_MED);
});
Apparently though, the date in the front matter is considered as UTC and when it's parsed with the filter, it's assumed to be the local time zone, thus the discrepency. To fix it, I just specified "utc" in the filter:
eleventyConfig.addFilter("postDate", (dateObj) => {
return dateObj && DateTime.fromJSDate(dateObj, {zone:"utc"}).toLocaleString(DateTime.DATE_MED);
});
Posts are reverse-sorted on the home page.
Again, a simple fix. I was getting the posts like this:
{ % for post in collections.post %}
<h2><a href="{ { post.url}}">{ { post.data.title }}</a></h2>
<p>{ { post.date | postDate }}</p>
<p>{ { post.content }}</p>
<hr/>
{ % endfor %}
This sorts ascending by default. All I needed to do was add reversed to that for statement.
{ % for post in collections.post reversed %}
...
A bit of styling
Added a CSS file that I can start funneling stuff into. Some if it is rather experimental right now. It will evolve.
Summary
I realize that there are probably some templates/projects/plugins that would make this all much easier, but I'm rather enjoying building it up piece by piece and learning how things are done.
At this point I can start writing some content that it not solely about setting up 11ty. Though I will continue to improve on it and sometimes mention what I have learned.