From 531a7622ee63b82a7c9064b0a6a12ca921282373 Mon Sep 17 00:00:00 2001
From: Oliver Davies <opdavies@gmail.com>
Date: Tue, 30 Jan 2018 22:41:47 +0000
Subject: [PATCH] Style tags table

---
 source/_includes/post/tags.html.twig | 16 +++++++++------
 source/blog/tags.html                | 29 ++++++++++++++++++++++------
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/source/_includes/post/tags.html.twig b/source/_includes/post/tags.html.twig
index 882505e7..d1cb6619 100644
--- a/source/_includes/post/tags.html.twig
+++ b/source/_includes/post/tags.html.twig
@@ -1,9 +1,13 @@
 {% if page.tags %}
-    <div class="tags">
-        {% for tag in page.tags %}
-            <a href="{{ site.url }}/blog/tags/{{ tag|url_encode(true) }}" class="blue">
-                {{- tag -}}
-            </a>
-        {% endfor %}
+    <div>
+        <p>
+            Tags:
+            {% for tag in page.tags|sort %}
+                <a href="{{ site.url }}/blog/tags/{{ tag|url_encode(true) }}" class="blue">
+                    {{- tag -}}
+                </a>
+                {%- if not loop.last %},{% endif %}
+            {% endfor %}
+        </p>
     </div>
 {% endif %}
diff --git a/source/blog/tags.html b/source/blog/tags.html
index 0adcb598..b2352419 100644
--- a/source/blog/tags.html
+++ b/source/blog/tags.html
@@ -5,10 +5,27 @@ title: Tags
 use:
   - posts_tags
 ---
-<h2>Tags</h2>
+<h1>Blog Tags</h1>
 
-<ul>
-{% for tag,posts in data.posts_tags %}
-  <li><a href="{{ site.url }}/blog/tags/{{ tag|url_encode(true) }}">{{ tag }}</a></li>
-{% endfor %}
-</ul>
+<div class="table-responsive">
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Tag</th>
+                <th>Number of posts</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for tag, posts in data.posts_tags %}
+                <tr>
+                    <td>
+                        <a href="{{ site.url }}/blog/tags/{{ tag|url_encode(true) }}">
+                            {{ tag }}
+                        </a>
+                    </td>
+                    <td>{{ posts|length }}</td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>