Tag Cloud

Cloudy days a hoy-hoy

I found this partial to create a tag cloud on Mert Bakir’s personal website and I have been adapting the code to suit my needs for this project, for now I’m just leaving it under this project page until I can decide what to do with it.

Partial

 1{{/*  
 2  I found this partial on Mert Bakir's personal website
 3  https://mertbakir.gitlab.io/hugo/tag-cloud-in-hugo/
 4  I have since modified suit to fit my needs.
 5 */}}
 6 {{/*  
 7  By default the taxonomy uses "tags" but when it is on a taxonomy page
 8  it uses the current section label, which is the name of the taxonomy
 9 */}}
10 {{ $taxonomy := "tags" }}
11 {{ if eq .Page.Kind "taxonomy" }}
12   {{ $taxonomy = .Section }}
13 {{ end }}
14 
15
16 <div class="container tagcloud">
17   <h3>{{ len (index $.Site.Taxonomies $taxonomy) }} {{ $taxonomy }} for {{ $.Site.Title }}</h3>
18   {{ if ne (len (index $.Site.Taxonomies $taxonomy)) 0 }}
19     {{ $largestFontSize := 3.8 }}
20     {{ $smallestFontSize := 0.8 }}
21     {{ $fontSpread := sub $largestFontSize $smallestFontSize }}
22     {{ $max := add (len (index (index $.Site.Taxonomies $taxonomy).ByCount 0).Pages) 1 }}
23     {{ $min := len (index (index $.Site.Taxonomies $taxonomy).ByCount.Reverse 0).Pages }}
24     {{ $spread := sub $max $min }}
25     {{ $fontStep := div $fontSpread $spread }}
26       {{ range $name, $taxonomyPage := (index $.Site.Taxonomies $taxonomy) }}
27         {{ $tagCount := len $taxonomyPage.Pages }}
28         {{ $currentFontSize := (add $smallestFontSize (mul (sub $tagCount $min) $fontStep) ) }}
29         {{ $weight := div (sub (math.Log $tagCount) (math.Log $min)) (sub (math.Log $max) (math.Log $min)) }}
30         {{ $currentFontSize := (add $smallestFontSize (mul (sub $largestFontSize $smallestFontSize) $weight)) }}
31         {{ $baseURL := $.Site.BaseURL }}
32         
33         {{ $gradientClass := "bg-gradient-to-r from-lime-400 to-lime-500 text-zinc-900 "}}
34         {{ $classes := "py-2 px-4 rounded-full border-2 border-yellow-500 hover:bg-yellow-500 hover:border-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-300 no-underline inline-block text-center break-words "}}
35         {{ $headerBackgroundFrameOuter := "" }}
36         {{ with $.Site.Param "twClasses.headerBackgroundFrameOuter" }}
37           {{ $gradientClass = . }}
38         {{ end }}
39         <a href="{{ printf "%s%s/%s" $baseURL $taxonomy ($name | urlize) }}" 
40            class="tagcloud-item px-2" style="font-size: {{ $currentFontSize }}rem;">
41            <span class="{{ $classes }} {{ $gradientClass }}">{{ $name }}<sup>{{ $tagCount }}</sup></span></a>
42       {{ end }}
43   {{ end }}
44 </div>
45 

The next update to come to this tag-cloud partial is the ability to pass in a taxonomy name, since it is currently setup for only tags.