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.
100-2001
accessibility1
affiliate-marketing1
agent-memory1
ai1
alerts1
all-at-once1
alpine.js1
amazon-associates-program2
american7
api-integration2
astronomy1
aurora1
automation4
aws1
baked4
beach2
beads1
beverage2
big-screen-presentation1
bike-path1
birdwatching1
blogging1
blogroll1
breakfast3
budget3
ci-cd1
client-side-search1
cloudflare-tunneling-service1
cloudfront1
coding-agents1
comfort-food3
computer-vision1
configuration1
configuration-management1
content-adaptors1
content-management2
css1
developer-tools1
development-environment1
devops1
digital-archiving1
digital-security1
digital-wallet1
disaster-preparedness1
disclosure2
diy1
dog-friendly6
dog-park2
dynamic-content1
easy5
electronics2
emergency-prep1
encrypted-storage1
everything1
everywhere1
family-photos1
family-recipes1
feed1
feed-readers1
fiction2
filtering1
financial-planning1
fitness2
front-matter1
fuse.js1
game-template1
gaming1
gas-town1
github-actions1
github-pages1
healthy5
historical2
home2
hugo16
image-gallery1
image-processing1
images1
ingredients3
inspiration1
interactive-maps1
javascript2
landscape-photography1
leaflet.js1
llm1
localhost-server1
long-over-4mi1
long-over-60min1
machine-learning2
main2
mapping1
marina-del-rey1
meal-prep3
medium-2-4mi2
medium-60min5
moderate2
moms-family-recipes7
monitoring1
musical-genres1
nature2
networking1
ngrok1
night-photography1
no-cook3
nonfiction2
notebook1
ocr1
okta1
open-source4
opencv1
openstreetmap1
organization1
outdoor3
over-2001
partials1
paved3
photography2
photoswipe1
pick-a-squares1
pines1
playa-del-rey4
playa-vista2
portable3
privacy1
product-development1
product-management1
productivity2
puppeteer1
python1
quick-30min5
random-score-generation1
rechargeable1
recipe-schema2
recipe-template1
referral-links1
repair1
resource-management1
responsive1
revolution3
rss1
ryder-theme4
s31
saas1
safety1
sb-lix1
search1
security1
seo1
shell-scripting1
short-under-2mi4
shortcodes1
side5
smoothie1
space1
spotify1
state-management1
static-site1
static-site-deployment1
static-site-generator3
stationery1
storage2
stovetop4
string-manipulation1
structured-data1
styling-feeds1
super-bowl-squares1
tag-cloud1
tailwind-css2
taxonomy1
templates3
tesseract1
themes1
trail2
tutorial1
under-1001
under-2001
under-503
vegan2
vegetarian7
vision-models1
web-development7
website-development1
weeknight1
westchester1
wetlands1
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.