After having my blog running with harpjs for about a week and having pushed the basic structure to github for everybody to use as they wish (if they wish to…), I found it would be great to organize my tags in a tag cloud rather than showing them in an unhandy list – as the amount of tags used grows, this list view is not useful at all to anybody (unless you are searching the page with the browsers built-in search functionality). I still have the list style active on my archived blog in German if you like to see an example.
Getting inspired by the great posting on creating a sitemap by Kevin Saliou, I thought it should not be too hard doing something similar to create a tag cloud. This is the first (and current) solution I came up with:
(As I am still pretty new to javascript, there probably are a lot of things that can be done better or more elegant – even in these few lines of code. Sorry for this…)
public/tags/index.jade
h2 tag cloud - var data = public.posts.data; - var tags = {}; - for (var name in data) { - if (name[0] != '_') { - var ts = data[name].tags; - for (var i in ts) { - tags[ts[i]] = tags[ts[i]] === undefined ? 1 : tags[ts[i]] += 1; - } - } - } - var sortedTags = {}; - var helperArray = []; - var maxAppearances = 0; - for (var i in tags) { - helperArray.push(i); - } - helperArray.sort(function randOrd(){ - return (Math.round(Math.random())-0.5); - }); - for (var i in helperArray) { - sortedTags[helperArray[i]] = tags[helperArray[i]]; - maxAppearances = maxAppearances < tags[helperArray[i]] ? tags[helperArray[i]] : maxAppearances; - } #tcloud each index, tag in sortedTags - var fontSize = (1.6 * ((index - minimum_apearances_for_tagcloud_greater_than)/(maxAppearances - minimum_apearances_for_tagcloud_greater_than))); if (fontSize > 0) - var tagClass = "tc" + fontSize.toFixed(1).replace('.', ''); a(href='/tags/' + tag.toLowerCase().replace(/ /g,''), title='#{ index }', class='#{ tagClass }') #{ tag }
I simply iterated over the tags defined in my _data.json-file for each post and sum them up in a new object. Next I am pushing the content to an array and use a small function to randomize the order of tags for displaying. Before doing a standard calculation for retrieving the target style of a tag in the tag cloud, the (randomly sorted) array content is pushed to a new object. As you can see, using three collections to perform this task is not ideal. It is – as I wrote before – my first take on solving this ‚issue‘.
I have declared some style definitions in my less-file to make the visual differentiation according to the count of appearances of tags. Also, I set up the global harp variable _minimum\_apearances\_for\_tagcloud\_greater\_than_ to be able to easily adjust the minimum number of usages of a tag to be included in the cloud as the overall count of tags goes up.