Add tag_cloud widget

Alternative to tags list, putting all tags next to each other not as the
list and making them proportionally big - most used bigger, less used
smaller.

2 files changed, 37 insertions, 0 deletions

diff --git a/exampleSite/config.yml b/exampleSite/config.yml
index 123d74a..57389cf 100644
--- a/exampleSite/config.yml
+++ b/exampleSite/config.yml
@@ -77,6 +77,9 @@ params:
   highlightjs:
     langs: ["python", "javascript"] # refer to http://staticfile.org/, search highlight.js, already have highlight.min.js
 
+  tag_cloud:
+    min: 8
+    max: 20
   # Allows you to specify an override stylesheet
   # put custom.css in $hugo_root_dir/static/
   # customCSS: css/custom.css
@@ -194,6 +197,7 @@ params:
   # Sidebar only the following widgets. you can remove any you don't like it.
   widgets:
     - board
+    - tag_cloud
     - category
     - tag
     - recent_posts
diff --git a/layouts/partials/_widgets/tag_cloud.html b/layouts/partials/_widgets/tag_cloud.html
new file mode 100644
index 0000000..21b0894
--- /dev/null
+++ b/layouts/partials/_widgets/tag_cloud.html
@@ -0,0 +1,33 @@
+<div class="widget">
+    <h3 class="widget-title"> {{ T "widget_tags" }}</h3>
+    <div id="tag-cloud-list" class="widget-body">
+            {{ range $name, $taxonomy := $.Site.Taxonomies.tags }}
+            {{ with $.Site.GetPage (printf "/tags/%s" $name) }}
+            <a href="{{ .Permalink }}" class="tag-list-link" rel="{{ $taxonomy.Count}}">{{ $name }}<span
+               class="tag-list-count">{{ $taxonomy.Count}}</span></a>
+            {{ end }}
+            {{- end }}
+    </div>
+<script>
+document.onreadystatechange = () => {
+  if (document.readyState === 'complete') {
+    tagCloud('#tag-cloud-list a', {{ $.Site.Params.tag_cloud.min }}, {{ $.Site.Params.tag_cloud.max }});
+  }
+};
+
+function tagCloud(where, min, max) {
+  let iMax = 0;
+  let iMin = 0;
+  $(where).each(function() {
+    let weight = Number($(this).attr("rel"));
+    if(iMax < weight) iMax = weight;
+    if(iMin > weight || iMin == 0) iMin = weight;
+  });
+  let step = (max - min)/(iMax - iMin);
+  $(where).each(function() {
+    let weight = $(this).attr("rel") - iMin;
+    $(this).css({"font-size": min + (weight * step) + 'px'});
+  });
+};
+</script>
+</div>