More Eleventy Work

Tonight I spend some more time working on my blog. Way more time than I wanted! Here are some things that I did:

• Fixed my RSS feed, which was still using a lot of templated text.
• Fixed the CSS to look a little better on mobile, and added styles for image captions
• Tags: listed the tags for each blog post, added a list of tags to the archive files, and added a page for each tag listing all posts with that tag.
• Re-added the posts from 2023 to 2024.

Here are some things that I still want to do:

• Fix the URI from my previous wordpress blog. Before, I thought I would just be a bad netizen and break all links, but I thought of that again, and decided I want to at least try to keep the previous links working.
• Make the permalink automatic so that I don't have to add it to every single post (probably related to the above)
• Change the tag list to be ordered by frequency
• grep/sed my posts to make the old post porting process less painful
• Add more old posts
• Add some sort of guest book system

Messing with tags on eleventy.

Adding the list of tags to the archive page was surprisingly difficult! I couldn't find a straight answer to the question from the documentation or easily found questions. There is a "quick tips: tags" page in the documentation, but the code there for listing all tags.

This is how I got it working in the end: First, I added the following to my archives.md file:

{% for tag in collections %}
{% if tag[0] != "all" and tag[0] != "posts" %}
<a href="/tags/{{ tag[0]}}/">#{{ tag[0] }}</a>({{ tag | length }}), 
{% endif %}
{% endfor %}

tag[0] is an apparently undocumented feature of collections that gives me the name of the collection (in other words, the tag name).

However, be careful! the tag | length part does not work out of the box, because apparently eleventy does not define a length filter by default (even though all code samples that I found included the length filter). To get the code above to work, I had to manually define length in my .eleventy.js file, as follows:

// return the length of a collection (Why is this not default?)
eleventyConfig.addFilter('length', (collection) => {
return collection[1].length;
});

The solution above feels super hacky, but it works. I'd appreciate pointers to cleaner solutions! (The links page shows how to contact me).

Omake: Verbatim code on eleventy:

By the way, when I tried to include the above code, I realized that eleventy will process nunjucks code automatically. To include code in your blog, you need to escape it using $ raw $ and $ endraw $.