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.

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.