When I started to code this blog, I tried to extract from my WordPress blog some simple features that I think are essential. Now I don't know how crucial a `Tag Cloud` is, but I assume even if it is not central, nothing is more emblematic of a blog than a tag cloud widget. In the words of Brendan Eich, tag clouds are around since "js purpose was to replace the HTML marque element."
The first thing I did was go to WordPress git source code to do a quick rewrite, but the tag cloud-generating function was huge. In reality, what I personally need to create exactly the same render as my old tag cloud could be done with 4-5% in terms of code lines. The central piece from the source code in git was mostly the config and the difference between the steps. Oddly enough Github-Copilot only from a few keystrokes started to perfect-copy lines from that git repo, which to that I say: "No comment. But seems like profiting out of theft."
So in 5 minutes, this is what I've ended up with:

import { loadTags } from  '@/lib/utils/db/catOrTag'
import { shuffleFY } from '@/lib/utils/server/misc'

export const generate_tag_cloud = async () => {
    
    const config = {
        smallest: 8,
        largest: 22,
        unit: 'pt',
    }

    const tags = await loadTags()

    if(!tags) {
        return null
    }

    const counts = tags.map( ( tag ) => tag.count );
    const min_count = Math.min( ...counts );
    let spread = Math.max( ...counts ) - min_count;
    if ( spread <= 0 ) {
        spread = 1;
    }
    let font_spread = config.largest - config.smallest;
    if ( font_spread < 0 ) {
        font_spread = 1;
    }
    const font_step = font_spread / spread;

    const tag_cloud = tags.map( ( tag ) => {
        return `<a href="/tag/${tag.slug}" style="font-size: ${config.smallest + ( ( tag.count - min_count ) * font_step )}${config.unit}"
        title = "${tag.count} post${tag.count === 1 ? '' : 's'}"
        aria-label = "${tag.count} post${tag.count === 1 ? '' : 's'}"
        >
        ${tag.name}
        </a>`
    })

    shuffleFY(tag_cloud)
    return tag_cloud.join('\n')
}

Now, shuffleFY is a simple Fisher-Yates shuffle that you can find anywhere online and probably works best for this.
Now depending on how costly getting the tags is(which should be 0 in most cases) you may also want to cache the result, which many times is not needed especially if you have a front-stoping aggressive cache that caches everything to the point that serverside content can't change without forcing cache deletion.
Generally, I do that with Cloudflare cache rules which is great because you can basically serve almost infinite traffic at no cost, but will mess with the theme system if you have such a thing and also is not usable if your content is highly dynamic.
But either way, doing another cache behind the CDN one can still provide some benefits in case you automate more the CDN cache and also if you plan to drop it.
 

Tags

Related Articles

svelte blog
Made a SvelteKit blog that runs on Deno Serverless

Just converted and deployed this blog on Netlify. So I've been exploring svelte, and svelteKit, and I was looking to refresh my old blog that is in a neglected state. When I started this blog was 2007, and then it was of course, a WordPress blog, but I deleted...

Read more
Deno Deploy Thoughts
Deno Deploy Thoughts

This is some old draft article that I didn't want to trash, so I'll try to at least partially salvage it. I played a bit with Deno deploy a while back, and I must say quite impressive that using Deno deploy is very easy to fast spawn a serverless worker, simi...

Read more
WP commenting system
Build a Simple WordPress commenting system on top of the native one with AMP support

There are a lot of commenting system plugins out there but most of them come with a cost, and sometimes just building a simple WordPress commenting system on top of the native commenting system can be enough. The main features of this system will be: Comments...

Read more

EVM Signature