Monday, October 16, 2023

Added navigation footer to log entries. Sorted log index. Wondering about Liquid and Nunjucks. Published website on Netlify.

Today's Plan

Generating Daily Log page links

I had assumed that I would be tapping into the "pagination" functionality of Eleventy because I want to be able to link up these log entries as if they were pages in a book, but it turns out that isn't what I want.

Pagination Navigation is a page in the Eleventy documentation that describes how to generate navigation for within a group of pages that are generated from one data file. For example, if you had one big file filled with cool poems, but wanted to make each poem its own web page. I have one page per data file for my daily log, so I don't need pagination.

Because I have my log entries all tagged as "log" in the Eleventy page data, they are organized automatically into a "collection", which you can interact with programatically as a list. I can use the previous and next collection filters and ask for the links to the page data objects I recieve.

It was very easy to set up! I just grabbed the code snippets in that previously linked documentation page, and links for next and previous were working perfectly in an instant.

The first and latest links were a little more difficult. I couldn't find any instructions for selecting the first or last item of a collection in Eleventy's documentation, so I looked it up on the Nunjucks templating documentation. After I had found that, it was very simple. There are Nunjucks filters for first and last, and filtering the collection with these seems to work just fine.

I am still a little unsure of what I want the design specifics to be for this navigation section. Right now, they say the relation (first, previous, next, or latest) and then the link itself is the title of the page. I'm not sure what to say when there isn't a next or previous page. Currently, when that happens, the code I copied checks to make sure that the next/previous page exists. When it doesn't, it just doesn't say anything, and I get a blank list entry in my navigation menu. That seems confusing, but I haven't thought about what specific fix to do yet.

It might be helpful to add the tiniest amount of CSS to this navigation menu to format it in a more traditional way. I want to keep the <ol> semantic structure to the menu, but I can remove the numbers and make the list entries go all on the same line.

Sort Descending

Sorting my auto-generated log index to display in descending chronological order was very straightforward, except for one hiccup. Eleventy has a code snippet to show how to sort a collection in descending chronological order, and all you have to do is add another built-in filter into the templating language.

I thought I had been working with Nunjucks in this file, because that's what I've been writing my template files with. However it's a MarkDown file, so the templating language is specified somewhere other than the file extention. Eleventy gives most code examples in Liquid, Nunjucks, 11ty.js, and Handlebars. I kept trying the Nunjucks filter, but it kept silently failing. No error message, it just wouldn't sort! After a little tinkering, I decided I wasn't making some simple typo and decided to try Liquid, just in case. That worked.

Liquid vs Nunjucks

From what I've seen so far, Liquid syntax looks to me like a slightly sugarier version of Nunjucks. I don't have much knowledge about how they're different under the hood. The reference pages I linked earlier in this paragraph might be good future reading, to compare the two.

As far as which one Eleventy decides to use, here's what they have to say on their languages documentation:

Special case: pairing a templating engine with md Markdown

Remember that—by default—Markdown files are processed with an additional preprocessor template engine set globally with the markdownTemplateEngine configuration option. So, when using templateEngineOverride on markdown files be sure to list each templating engine you’d like to use.

For example, you may want to process njk Nunjucks first and then md markdown afterwards. Markdown is supported either by itself or with another engine. No other templating engines can be combined in this way—Markdown is the exception here. Any other combination attempt will throw an error.

So I have to look at what my markdownTemplateEngine option is set to. Because my .eleventy.js config file doesn't mention this setting anywhere, it's probably whatever's the default. I guess that means Liquid, considering that was what worked for my MarkDown file. I'll have to think about if I'm okay with that, or if I want to change it.

Building and Hosting

I wanted to look into what options there were for automatically building a website project from a git hosting service. I know GitHub Pages does that (I've used it for tiny projects), but for Eleventy I saw a few blog posts complaining that route and no tutorials. I've been seeing a few Eleventy blogs talk about using Netlify and I appreciate that they have documentation specfic to Eleventy.

I thought I'd try it to see how hard it would be, and set it up in like five minutes from my phone. What?? That's absolutely absurd. I wouldn't say that I like Netlify, though. I don't trust them because you can't set a limit on metered feature usage, and I don't fully understand what counts as metered. I don't need forms or user accounts or anything. Are simple page visits 'metered'? Is there an auto-timeout if the auto-build gets stuck?

I'm still going to go ahead and try it out a bit more because it's extremely convenient and gets my page out there. I don't think there's that much risk because I intend to stay on the free tier which doesn't require a credit card, and because I can always leave. This is a website that can afford to be down for a few days as I locate a new service if needed.

A text-based static site is also the tiniest kind of website, and Eleventy is supposedly pretty fast, so I had better stay well under their limits for the free tier anyways. I would just rather understand a bit more what's going on, and I think their FAQ could be clearer about this stuff.

Task Ideas