Eleventy Education Continues
Picking up with some of the listed items from yesterday.
A Bit Backwards
Let's start with something easy. How can I get the posts to default to the opposite order that they're currently in? I'll start with a planned rename of files to remove the dates in the filenames. (Like 2024-12-01-hello-world.md, which is based on how I title journal entries.)
Interestingly, despite stripping dates from filenames, things are still sorted correctly. What's the default?
Oddly, it's not written explicitly in the docs, at least not on the Collections page or the Pagination page. Not showing up on some quick web searches, either. Maybe I can test it quickly? Only so many reasonable defaults they could be using.
Experimentation Time
Let's make an ordered list version at the top of my main page for quicker experimentation.
Alright, that's collections.posts showing up in order of creation. (Note that I've removed the date from the URL and reset _site, so nothing being drawn from that.) Definitely not alphabetical order. Let's try collections.all.
Huh. That doesn't make sense, but...
Ah. I must've recreated the home page at some point, because the file creation date is 6 seconds after the Hello World post's file. So that makes this easy enough to test for sure.
A freshly baked file, and now let's do PS H:\projects\blog\posts (Get-Item test-file.md).creationtime=$(Get-Date "11/30/2024 12:01 am"). (That changes the creation time using PowerShell.)
🎉 Victory! Note that this is another thing that needs a _site reset to show up properly, for it to respect the ordering change. (And also after deleting the test file.)
So looks like the easiest thing is to just go ahead and learn a custom sorting tool to sort via a date I place in the frontmatter. I still want to know if there's a simpler way, but I dunno. Maybe if I search again, and click one of these results from older versions of the Eleventy docs...wait.
Wait.
Content Dates
Well, that put me on the right track. Apparently it's the Content Dates page that mentions sorting is done by dates in the frontmatter, which defaults to file creation date. There are also a number of keywords you can use to set alternate behavior, like the simple Last Modified (or Created, to get the default behavior.)
In hindsight, I feel I ought to have tested just using date in the frontmatter...
I still wonder, how did that get removed from the Eleventy docs? A web search had pulled up the Collections page in the 0.7.1 docs, on which I found the link to the Content Dates page, which I then searched for and found on the current docs. Looking back at the old Collections page, I can ctrl+f "reverse" and — yep, there's a way to reverse things. Let me look at the current docs, I still have that page up, and...oh.
internally screams
Turns Out The Docs Are Good, Actually
To sort descending in your template, you can use a filter to reverse the sort order. For example, it might look like this [...]
Link to the section in the docs
How did I miss that? I swear the page search turned red and did not jump like it does now. I'm not imagining things because I documented it above in this very blog post as I went along. Did the page not load for a while but finish before I came back? Did I typo something right near the start of the word so the search wouldn't jump to the result (in the bottom half of the page) at all? How did I fail to search the page for a simple word?
Particularly annoying, since the solution to my problem is also that word — adding reversed was all I needed to get the behavior I wanted. At least, if I want to use Liquid.
Fluidity And Weaponry
Turns out that Liquid is the default templating engine for Eleventy. My assumption that Nunjucks was the default came down purely to seeing njk files in Nicky Case's site files, and also seeing them come up in passing. Time to research many things.
It's quite a good thing that I'm doing this as a December Adventure, or else I'd still be "researching" (via copious consumption of blog posts and videos) this time next year. Deadlines are great! (Except when they aren't, but that's another post.)
From most to least important, I'm prioritizing support (both community and official), functionality, and ease of use. Hopefully that minimizes the likelihood of me wanting to switch in the future. It doesn't seem complex to change templating languages (Eleventy makes it as simple as a language swap can be, it seems), but it does seem annoying. And worse, time-consuming, which means I might never end up doing it.
Research Time
The first thing I find is in this Eleventy Walk Though, which points out that Nunjucks allows JavaScript in frontmatter and data, but Liquid doesn't. This feels like something that could be outdated, as it's from 2020. (I'm also not sure how much I need it, but see priorities above.)
Curiously, a lot of the articles I'm seeing (from a few related searches) are from 2020. A Google artifact or something else? No idea. A lot of other results seem clustered around 2023. 2020 articles prefer Nunjucks and its power, 2023 articles prefer Liquid and complain about Nunjucks not being updated for a long time. (Funny enough, the most recent Nunjucks update is from 2023, after those posts.)
One of the 2020 articles shows a comparison in formatting.
{% # Liquid %}
{% if data.publish-to contains 'mastodon' %}
{# Nunjucks #}
{% if 'mastodon' in data['publish-to'] %}
Reminds me that I need code formatting for this blog. And footnotes! This line would be perfect for on-hover footnotes.
Seems that Liquid has some slightly cleaner syntax overall, at least from my perspective, but neither is terrible.
Coding Detour
Slight problem: seems that Eleventy is refusing to build the site, because the above Nunjucks code is being shown as invalid Liquid code. True, but also very unhelful.
Solution: {% raw %} and {% endraw %}}} fixes it! Simple enough, and if I ever decide to just never put templating code mid-post, I could add that to the template (probably). For now, I'll just add that only when needed, to minimize future debugging headaches.
Bonus: I only caught the way that those commands weren't appearing in the final post...because they're escape codes. So I had to figure out how to escape the escape codes (kudos to Khaja Minhajuddin's answer for this), which ended up being something like
I tried to stack escapes so I could show that without a screenshot, but that ate up another 15 minutes and nope nope nope.
(Side note: do I want to provide different versions of that image in the future for light mode and dark mode? Do I want to find a code editor setup that is better for screenshots? Do I just want to return to redo this once I have better code formatting tools? Yes, to at least one of those, but preferably not all.)
Back On Template Engine Research
So for this month, I'm essentially defaulting to Nicky Case's blog when in doubt (and frequently when not in doubt). And what do they say?
In blog/eleventy.config.js: // Use nunjucks, please
Well, that could be taken many ways (mostly at least not negatively towards Nunjucks), and I don't want to overthink it more. They kindly state in their FAQ (which does not answer this less-frequently-asked question, alas) that they don't have the resources to help with individual projects, so I'm going to elect to not directly ask her about what was quite possibly a throwaway comment. (Goodness knows I'd hate to have someone hyper-analyzing every comment I made.)
Curiosly, the official Eleventy docs only have a "why pick this option?" for WebC, and not any of the other options. It also has community guides linked, like many doc pages but unlike the other templating engines. It's the newest (?) option at time of writing.
Reading into what is now my third option up for consideration, it seems that it essentially offers easier use of web components. Very neat — but unfortunately I am incredibly rusty at JavaScript generally, and have basically no experience with web components.
Of the stuff I do need JS for, the only critical thing that I can think of is a little swapping of CSS to enable a dark mode. How does Nicky do it?
Looks like some plain JS that activates on DOM load, and a listener on the dark mode toggle that changes things. Simple enough. Let me see what she does for dark mode...
body[dark_mode=yes]{
background:#000;
color:#fff;
}
body[dark_mode=no]{
}
...oh. I suspect I have been overthinking dark mode...
Decision Time
Okay, it's late in the day and I need to make a call.
Liquid is the default and seems fine, other than being more annoying to search for. (I can do "nunjucks [term]", or "webc [term]", but have to do "liquid template [term]" at the least.) Still has tons of resources. It's also the most starred on GitHub currently.
WebC is the newest and potentially the most powerful and long-lasting technology. That gives it fewer resources in general, at least for now. It seems like it will become the Eleventy default in the future, perhaps for v4.
Nunjucks is my default, given my temporary (?) Steal From Nicky Caseâ„¢ philosophy. Slightly worse syntax in some cases, but plenty of resources.
Hmm.
Screw it, let's say Nunjucks. I think I could waffle on this for years on and off, so let's stick with what works for the inspiration website.
Doing Shtuff
Hmm. Not really enough time left in the day to switch over to Nunjucks, honestly. What else can I do? (Or have already done but not written about?)
URL Formatting
What's the best way to label pages in URLs? I did a (relatively) brief amount of research, and my inclination towards dated hierarchies like blah.com/blog/2024/12/01/post.html is broadly advised against. I like it partly because you can easily chop off parts to get to a grouping of posts, and partly because it means it's harder to accidentally duplicate posts. The former is supported in this interesting article.
I noted that something was off when I saw "Update added 2005". Scrolled up to check the date that I had missed: March 20, 1999.
Guess dated hierarchies was extra correct.
Many other sites (like this Codemzy post) advertised something much simpler: either blah.com/blog/post.html or simply blah.com/post.html. Some places have a blog.blah.com/post.html subdomain (like blog.ncase.me/). I think I'll go with the straightforward cdrch.neocities.com/blog/post.html. I'll save the more direct cdrch.neocities.com/page.html for projects and other things.
Done and done. As the blog is four (4) days old and only three (3) articles are affected, I'll permit a little link rot as a treat. At least it'll be simple to fix for future archivists?
I Gotta Stop This
Dear self: please remember to name blog posts as .md. Otherwise, you'll spend at least a few minutes repeatedly rebuilding the site and checking _site to figure out why my work-in-progress post isn't appearing on the local build.
A project for the future: have an automated check for this. No files without extensions should be needed in this project (or at least not under posts/).
(Bonus project: an online to-do page for public projects.)
Learning About Images
The ImageMagick command of the day is magick mogrify -path "output" -trim -bordercolor "#fff"-border 10 -format webp -strip *.png. That takes all the PNG screenshots I took and drops them into a folder, trimmed to minimum and then with a solid border added, and converted to WebP. As much as I love my PNGs, I must admit that WebP is more efficient for a lot of uses. You can see the results earlier in this post.
Wait. I can't see the results. What...?
After Some Mild Panic About The Arbitrary Posting Deadline...
export default function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("assets");
}
Turns out that if you don't do this passthrough of files, they just are ignored by Eleventy! I suppose I could've figured that out from all the things like .gitignore that aren't being transferred over (note to self: put everything inside a src/ folder before the programmers get me), but it didn't occur to me that there's no processing of images (without a plugin for that).
At least it's working now! And conveniently with the standard  syntax, too. I'll eventually have to return and see about alt text for all images — normally I'd guarantee it's in place as best I can, but I'm being a little fast and loose this first month, considering how quickly the blog as a whole is changing.
Ouch, that delay put me past midnight...hmm.
I Can Just Lie
💠If I'm lagging behind on finishing and uploading a post, I can just put the correct date on it and pretend I wasn't late.
Wait It Doesn't Matter
Oh right, arbitrary deadline, with nothing riding on it. It's not even midnight for other friends in the country doing the same challenge. Up it goes with an approximately correct time. Maybe eventually I'll automate timestamping alongside website updating, but meh, I'm pretty sure I'm the only one who's going to see the timestamps anyways. I would like to make the dates visible, but meh. In any case, thus ends day #4 (technically) of my December Adventure.
Wow That's A Lot
A lot more written today than I expected. Neat!