From 84e7843aaaffc15a7018b35ce6fff0b909163622 Mon Sep 17 00:00:00 2001
From: Vitaly Potyarkin <sio.wtf@gmail.com>
Date: Sat, 29 Sep 2018 11:01:14 +0300
Subject: [PATCH] Render tag cloud on tags page (#37)

Tags page was quite boring and didn't use horizontal space efficiently.
This commit replaces plain tag list with tag cloud that gracefully scales
to any screen (Attila's responsive design principle is not violated).

Details:

- Tags are still sorted alphabetically
- Tags with more articles have bigger font size
- Number of font size steps is defined via TAG_CLOUD_STEPS variable.
  If that variable is not set or is zero, default value of 5 steps is
  used. Stylesheet is written to support up to 10 steps.
- Tag tooltip shows number of articles with that tag

There exists a separate plugin for tag cloud[1], but using it still
requires making changes to the theme. Trivial math calculations can be
done as easily in Jinja as in Python, so the dependency on external
package can and should be avoided.

Screenshots: before [[2]], after [[3]]

[1]: https://github.com/getpelican/pelican-plugins/tree/master/tag_cloud
[2]: https://i.imgur.com/ivZQIxi.png
[3]: https://i.imgur.com/fLNVKpj.png
---
 README.adoc          | 12 ++++++++++++
 static/css/style.css | 22 ++++++++++++++++++++++
 templates/tags.html  | 19 ++++++++++++-------
 3 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/README.adoc b/README.adoc
index 109cd28..b6f3129 100644
--- a/README.adoc
+++ b/README.adoc
@@ -293,6 +293,18 @@ All image paths are relative from the site root directory. You can also
 use absolute URLs for `og_image` and `twitter_image`.
 
 
+[[tag-cloud]]
+=== Tag Cloud
+
+Attila renders tags page as a tag cloud.
+
+Use `TAG_CLOUD_STEPS` configuration variable to specify number of font size
+steps for the tag cloud. Default value is 5, stylesheet is written to support
+up to 10 steps. If you want more steps, you'll need to configure your CSS
+manually (see `CSS_OVERRIDE`)
+
+
+
 [[other-configuration]]
 === Other configuration
 
diff --git a/static/css/style.css b/static/css/style.css
index d322c1b..d794c54 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1813,6 +1813,28 @@ img {
     display: block
 }
 
+.tag-cloud {
+    text-align: center;
+    margin-bottom: 3em;
+}
+
+.tag {
+    display: inline-block;
+    padding: 0.2em 0.15em;
+    vertical-align: middle;
+}
+
+.tag-weight-1  { font-size: 100%; }
+.tag-weight-2  { font-size: 120%; }
+.tag-weight-3  { font-size: 140%; }
+.tag-weight-4  { font-size: 160%; }
+.tag-weight-5  { font-size: 180%; }
+.tag-weight-6  { font-size: 200%; }
+.tag-weight-7  { font-size: 220%; }
+.tag-weight-8  { font-size: 240%; }
+.tag-weight-9  { font-size: 260%; }
+.tag-weight-10 { font-size: 280%; }
+
 @media only screen and (max-width: 960px) {
     #wrapper {
         transform: translate3d(0, 0, 0)
diff --git a/templates/tags.html b/templates/tags.html
index 30554b1..579d351 100644
--- a/templates/tags.html
+++ b/templates/tags.html
@@ -44,11 +44,16 @@
 {% endblock header %}
 
 {% block content %}
-  {% for tag, articles in tags|sort %}
-    <article class="post">
-      <div class="inner">
-        <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a> ({{ articles|count }})
-      </div>
-    </article>
-  {% endfor %}
+  {% set max_count = (tags|map('last')|map('count')|max) or 1 %}
+  {% set steps = (TAG_CLOUD_STEPS|default(5, true)) - 1 %}
+  <article class="post">
+    <div class="inner tag-cloud">
+      {% for tag, articles in tags|sort %}
+        {% set count = articles|count %}
+        <div class="tag tag-weight-{{ (count/(max_count/steps))|int + 1 }}">
+          <a href="{{ SITEURL }}/{{ tag.url }}" title="{{ count }} article(s) tagged '{{ tag }}'">{{ tag }}</a>
+        </div>
+      {% endfor %}
+    </div>
+  </article>
 {% endblock content %}