JS Tag Cloud derived from Wordpress

2/22/2023 Web Dev

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.

Comments

Loading comments...

Tags

Related Articles

Made a SvelteKit blog that runs on Deno Serverless

Deno Deploy Thoughts

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

Comments