Making a Tag Cloud
Sometimes you decide that you just need a tag (and category)
cloud. The top search result was
from SuperDevResources
by Kanishk
Kunal, which worked pretty well, but I didn't like the sizes,
and wanted to have fun colours. Here's my version:
<section id="tag-cloud">
<h2>Web Tech Blog Tag Cloud</h2>
<nav>
{% assign sortedCats = site.categories | sort %}
{% for category in sortedCats %}
{% assign cat = category[0] %}
{%- unless cat == "blog" -%}
<a class="category-cloud" href="{{ site.blogPath }}categories/{{ cat | slugify: 'pretty' }}"
style="color: hsl({{ "now" | date: "%N" | divided_by: 400 }}, 100%, 40%); font-size: {{ category | last | size | logn }}em">
{{ cat }}</a>
{% endunless -%}
{% endfor %}
{% assign taglist = site.tags | sort %}
{% for tagitem in taglist %}
{% assign tag = tagitem[0] %}
<a class="tag-cloud" href="{{ site.blogPath }}tags/{{ tag | slugify: 'pretty' }}"
style="color: hsl({{ "now" | date: "%N" | divided_by: 400 }}, 100%, 40%); font-size: {{ tagitem | last | size | logn }}em">
{{ tag }}</a>
{% endfor %}
</nav>
</section>
The code is very close to the same except
that site.blogPath is something I defined for my stuff
that won't exist for you. Since everything is in
the blog category, there didn't seem to be any point to
including it in the cloud.
For fun, I set the colour with HSL with a random hue. Since the hue defaults to a number that represents a degree between 0-360 but larger numbers just act as more circuits around the circle, big numbers just add to the randomness. So, I made a pseudorandom number generator by taking the current time in seconds and dividing by 400 and rounding to an integer. It works well enough for me. ¯\_(ツ)_/¯.
For the font sizes, I wanted more size variation, but with a size
cap. Obviously, I needed logarithmic math, so I had to make a
filter like so:
module Jekyll
module LogFilter
def logn(input)
sprintf("%.2f", 1 + Math.log(input, 3))
end
end
end
Liquid::Template.register_filter(Jekyll::LogFilter)
For style, I borrowed the basic layout
from Alvaro Montoro
on DEV
Community like so:
#tag-cloud h2{
text-align: center;
margin-top: 2em;
margin-bottom: 0;
}
#tag-cloud nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
#tag-cloud a {
display: block;
padding: 0.125rem 0.25rem;
text-decoration: none;
position: relative;
}