Allow linking to a filtered homepage.

_layouts/post.html

@@ -5,7 +5,10 @@ layout: base
 <h1>{{ page.title }}</h1>
 <div id="content">
     <ul id="post-info">
-        <li><span><i class="fa fa-tag"></i> Tags:</span> {{ page.tags | join: ", " }}</li>
+        <li><span><i class="fa fa-tag"></i> Tags:</span>
+            {% for tag in page.tags %}
+                <a href="/#{{tag}}" class="post-tag">{{tag}}</a>
+            {% endfor %}
         <li><span><i class="fa fa-clock-o"></i> Date:</span> {{ page.date | date: "%B %-d, %Y" }}</li>
         <li><span><i class="fa fa-comments"></i></span> <a href="#disqus_thread">Jump to comments</a></li>
     </ul>

static/main.css

@@ -134,6 +134,7 @@ a.underlined:hover, a.underlined:active { text-decoration: none; }
     border: 1px solid #e8e8e8;
     color: #888;
     cursor: pointer;
+    margin: 0 3px;
     padding: 0 3px;
 }
 
@@ -161,6 +162,17 @@ a.underlined:hover, a.underlined:active { text-decoration: none; }
     color: #777;
 }
 
+.post-tag {
+    background-color: #f2f2f2;
+    border: 1px solid #e8e8e8;
+    margin: 0 3px;
+    padding: 0 3px;
+}
+
+.post-tag:link, .post-tag:visited {
+    color: black;
+}
+
 pre {
     white-space: pre-wrap;
 }

static/main.js

@@ -1,12 +1,5 @@
 function load_tag_filters() {
-    $(".tag").click(function() {
-        $(this).toggleClass("tag-selected");
-
-        var allowed = [];
-        $(".tag-selected").each(function() {
-            allowed.push($(this).text())
-        });
-
+    var filter_posts = function(filter) {
         var num_selected = $(".tag-selected").length;
         if (num_selected == 0 || num_selected == $(".tag").length)
             $("#post-list li").show();
@@ -15,13 +8,36 @@ function load_tag_filters() {
             $("#post-list li").each(function() {
                 var tags = $(this).data("tags").split("|");
                 for (var t in tags) {
-                    if ($.inArray(tags[t], allowed) != -1) {
+                    if ($.inArray(tags[t], filter) != -1) {
                         $(this).show();
                         return;
                     }
                 }
             });
         }
+    }
+
+    if (window.location.hash) {
+        var tags = window.location.hash.substr(1).split("|");
+        $(".tag").each(function() {
+            if ($.inArray($(this).text(), tags) != -1)
+                $(this).toggleClass("tag-selected");
+        });
+        filter_posts(tags);
+    }
+
+    $(".tag").click(function() {
+        $(this).toggleClass("tag-selected");
+
+        var tags = [];
+        $(".tag-selected").each(function() {
+            tags.push($(this).text())
+        });
+        if (tags.length > 0)
+            window.location.hash = tags.join("|");
+        else
+            history.pushState("", "", window.location.pathname);
+        filter_posts(tags);
     });
 }