Here’s the story of me try­ing to do some­thing with eleventy, and what I learned along the way.

There are a cou­ple of things I would like to do to tin­ker with base eleventy: a tag cloud and mark­down snip­pet pro­cess­ing. I’ll just stick to the tag cloud here, as I got [really stuck](github is­sue links) try­ing to do the mark­down thing and it looks like some­one else may amaz­ingly have solved that one any­way. (But I haven’t yet tested if that plu­gin does what I hope it does.)

Laying out the chal­lenge #

So I was look­ing at the tags-list.njk bit of eleventy, which looks like this:

---
permalink: /tags/
layout: layouts/home.njk
---
<h1>Tags</h1>

{% for tag in collections.tagList %}
	{% set tagUrl %}/tags/{{ tag }}/{% endset %}
	<a href="{{ tagUrl | url }}" class="tag tags_page size{{ tagNum }}">
	{{ tag }}</a>
{% endfor %}

and makes the tag list page. And I thought to my­self, “Hmm, if we knew how many posts were tagged with each tag, you could make the more pop­u­lar tags big­ger, like a tag cloud.”

My idea was that, just as you have a tagUrl be­ing set in the tem­plate above for each tag, you could have a tagPop be­ing set up too, based on how pop­u­lar each tag is. And then this would get in­cluded as part of a CSS class, and the CSS file would then use --calc() to set the font size of the tag on the page.

I haven’t re­ally thought this through. But it’s an idea.

Then I started look­ing through .eleventy.js to find out how I could make this work. I then ended up look