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 affiliate1 affiliate-marketing1 agent-memory1 ai27 alerts1 all-at-once1 alpine.js1 amazon-associates-program2 american7 analytics2 api-integration2 architecture1 art15 art-tech3 astro2 astronomy1 aurora1 automation6 aws1 baked4 beach1 beads1 beverage2 big-screen-presentation1 bike-path1 birdwatching1 blogging1 blogroll5 bluff-creek2 breakfast3 budget3 ci-cd1 cli2 client-side-search1 cloudflare-tunneling-service1 cloudfront1 coding-agents4 comfort-food3 communication1 computer-vision1 configuration1 configuration-management1 content-adaptors1 content-management2 conversion1 crypto3 css11 d31 data-visualization1 datasets3 design18 design-system1 developer-tools9 development-environment1 devops1 digital-archiving1 digital-security1 digital-wallet1 disaster-preparedness1 disclosure2 diy1 dog-friendly7 dog-park2 dogs1 dynamic-content1 easy5 electronics2 emergency-prep1 encrypted-storage1 essays2 evaluation3 everything1 everywhere1 fairness2 family1 family-photos1 family-recipes1 featured-link5 feed1 feed-readers1 fiction2 filtering1 financial-planning1 fitness2 fonts12 fonts-icons16 front-matter1 frontend1 funny1 fuse.js1 game-template1 gaming1 gas-town1 general10 github-actions1 github-pages1 google1 gpx1 healthy5 historical2 history1 home2 hugo43 icons6 image-gallery4 image-processing1 images6 ingredients3 inspiration2 interactive-maps1 javascript2 json1 landscape-photography1 leaflet1 leaflet.js1 li-po1 llm2 localhost-server1 long-over-4mi1 long-over-60min1 machine-learning2 main2 mapping3 maps1 marina-del-rey1 math1 meal-prep3 medium-2-4mi1 medium-60min5 ml17 moderate1 modules1 moms-family-recipes7 monitoring3 mountains1 muppet1 musical-genres1 nature3 networking1 ngrok1 night-photography1 no-cook3 nonfiction2 notebook1 oblargh3 obsidian1 ocr3 okta1 open-source4 opencv1 openstreetmap1 organization1 outdoor3 over-2001 partials1 paved3 performance1 photography2 photoswipe1 pick-a-squares1 pines1 playa-del-rey3 playa-vista4 poetry1 portable3 portfolio11 privacy1 product-development1 product-management1 product-site1 productivity3 programming1 project-management1 puppeteer1 python1 quick-30min5 random-score-generation1 rechargeable1 recipe-schema2 recipe-template1 recipes1 referral-links1 repair1 resource-management1 responsive1 revolution3 road-trip1 rss1 ryder-theme4 s31 saas1 safety1 sb-lix1 search1 security1 seo1 setup2 shell-scripting1 short-under-2mi4 shortcodes1 side5 smoothie1 software1 space1 spotify1 state-management1 static-site3 static-site-deployment1 static-site-generator3 stationery1 storage2 stovetop4 string-manipulation1 structured-data1 styling-feeds1 super-bowl-squares1 systems1 tag-cloud1 tailwind8 tailwind-css2 taxonomy1 templates3 tesseract1 testing4 themes7 time2 tools9 trail1 tutorial2 under-1001 under-2001 under-503 vegan2 vegetarian7 vercel1 vision-models1 walking-tour1 web12 web-development7 website-development1 weeknight1 westchester2 wetlands1 work1 work-in-progress1 workflow-dispatch1 workflow-optimization1 workforce-onboarding1 writing1 xml1 xslt1 youtube1 zen1 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.