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.
accessibility1
affiliate marketing1
alerts1
all at once1
alpine.js1
amazon associates program2
api integration2
astronomy1
aurora1
automation3
aws1
big screen presentation1
blogging1
blogroll1
budget3
ci/cd1
cloudflare tunneling service1
cloudfront1
configuration1
configuration management1
content adaptors1
content management2
css1
development environment1
devops1
digital security1
digital wallet1
disaster preparedness1
disclosure2
dynamic content1
encrypted storage1
everything1
everywhere1
family recipes8
feed1
feed readers1
fiction2
filtering1
financial planning1
front matter1
game template1
github actions1
github pages1
healthy5
historical2
hugo15
image gallery1
image processing1
images1
ingredients3
inspiration1
interactive maps1
javascript1
landscape photography1
leaflet.js1
localhost server1
mapping1
marina del rey1
monitoring1
musical genres1
networking1
ngrok1
night photography1
nonfiction2
notebook1
okta1
open source4
openstreetmap1
partials1
photography2
pick-a-squares1
pines1
privacy1
product development1
product management1
puppeteer1
random score generation1
recipe schema2
recipe template1
recipes1
referral links1
resource management1
responsive1
revolution3
rss1
ryder theme4
s31
saas1
sb lix1
seeds3
seo1
shell scripting1
shortcodes1
smoothie1
space1
spotify1
state management1
static site deployment1
static site generator3
string manipulation1
structured data1
styling feeds1
super bowl squares1
tag cloud1
tailwind css2
taxonomy1
templates3
themes1
tutorial1
vegan1
web development6
website development1
work in progress1
workflow dispatch1
workflow optimization1
workforce onboarding1
writing1
xml1
xslt1
zendesk1
zsh script1
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 }} found on {{ $.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 {{ $gradientClass := "bg-gradient-to-r from-lime-400 to-lime-500 text-zinc-900 "}}
33 {{ $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 "}}
34 {{ $headerBackgroundFrameOuter := "" }}
35 {{ with $.Site.Param "twClasses.headerBackgroundFrameOuter" }}
36 {{ $gradientClass = . }}
37 {{ end }}
38 {{ if eq $.Page.Kind "taxonomy" }}
39 {{ $sectionData := $.Site.GetPage (printf "%s/%s" $taxonomy $name) }}
40 {{ with $sectionData.Params.twClasses.headerBackgroundFrameOuter }}
41 {{ $gradientClass = . }}
42 {{ end }}
43 {{ end }}
44 <a href="{{ printf "%s%s/%s" $baseURL $taxonomy ($name | urlize) }}"
45 class="tagcloud-item px-2" style="font-size: {{ $currentFontSize }}rem;">
46 <span class="{{ $classes }} {{ $gradientClass }}">{{ $name }}<sup>{{ $tagCount }}</sup></span></a>
47 {{ end }}
48 {{ end }}
49 </div>
50
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.