Add dynamic tagging system.

When a user clicks on a tag in a blog posts, a list of posts that includes
the same tag would show up.

_layouts/post.html

@@ -18,9 +18,11 @@ <h1>{{ page.title }}</h1>
 
 <ul class="tags">
   {% for tag in page.tags %}
-    <li class="tag">
-      <i>{{ tag }}</i>
-    </li>
+    <a href="{{ site.baseurl }}/?tag={{ tag }}">
+      <li class="tag">
+        <i>{{ tag }}</i>
+      </li>
+    </a>
   {% endfor %}
 </ul>
 

_posts/2017-02-12-hello-world.md

@@ -4,7 +4,9 @@ title: "Hello, World!"
 date: 2017-02-12
 author: tommy_ip
 description: Why did we call ourselves the Krypton Chicken?
-tags: [general, KryptonChicken]
+tags:
+    - general
+    - KryptonChicken
 comments: true
 ---
 

css/style.css

@@ -15,6 +15,10 @@ h1 {
     font-size: 2em;
 }
 
+#show-filter {
+    margin-top: 16px;
+}
+
 .tags {
     list-style: none;
     margin: 0;
@@ -37,12 +41,10 @@ h1 {
     position: relative;
     margin: 0 10px 10px 0;
     text-decoration: none;
-    -webkit-transition: color 0.5s;
+    -webkit-transition: color 0.2s;
 }
 
-/* Un-comment this when implementing a page with filtered blog posts.
 .tag:hover {
-    background-color: #E91E63;
+    background-color: #009688;
     color: white;
 }
-*/

index.html

@@ -6,13 +6,45 @@
 
 <h1>Blog posts</h1>
 
-<ul class="posts">
-    {% for post in site.posts %}
-    <li>
-        <span>{{ post.date | date_to_string }}</span> &raquo;
-        <a href="{{ site.baseurl }}{{ post.url }}">
-          {{ post.title }}
-        </a>
-    </li>
-    {% endfor %}
+<h3 id="show-filter"></h3>
+<ul>
+  {% for post in site.posts %}
+  <li data-tags='{{ post.tags | jsonify }}' class="post-item">
+    <span>{{ post.date | date_to_string }}</span> &raquo;
+    <a href="{{ site.baseurl }}{{ post.url }}">
+      {{ post.title }}
+    </a>
+  </li>
+  {% endfor %}
 </ul>
+
+<script>
+    function get_filter_tag() {
+        var re = new RegExp("[?&]tag=([^&#]*)");
+        var re_result = re.exec(window.location.href);
+
+        return re_result ? re_result[1] : null;
+    }
+
+    var filter_heading = document.getElementById("show-filter");
+    filter_heading.style.display = "none";
+
+    var filter_tag = get_filter_tag();
+
+    if (filter_tag) {
+        filter_heading.innerHTML = "Posts tagged with <code>" + filter_tag + "</code>:";
+        filter_heading.style.display = "block";
+
+        var posts = document.querySelectorAll("[data-tags]");
+
+        for (var i = 0; i < posts.length; i++) {
+            var post = posts[i];
+
+            if (JSON.parse(post.dataset.tags).indexOf(filter_tag) === -1) {
+                post.parentNode.removeChild(post);
+            }
+        }
+    }
+
+    // TODO: Handle no search result.
+</script>