Add support for tags and related posts

_includes/back_to_home.html

@@ -0,0 +1 @@
+<div style="float:right;"><a href="{{ site.github.url }}/">< Back to home</a></div>

_includes/find_tags.html

@@ -0,0 +1,32 @@
+{% comment %}
+Borrowed from https://codinfox.github.io/dev/2015/03/06/use-tags-and-categories-in-your-jekyll-based-github-pages/
+{% endcomment %}
+
+{% comment %}
+=======================
+The following part extracts all the tags from your posts and sort tags, so that you do not need to manually collect your tags to a place.
+=======================
+{% endcomment %}
+{% assign rawtags = "" %}
+{% for post in site.posts %}
+    {% assign ttags = post.tags | join:'|' | append:'|' %}
+    {% assign rawtags = rawtags | append:ttags %}
+{% endfor %}
+{% assign rawtags = rawtags | split:'|' | sort %}
+
+{% comment %}
+=======================
+The following part removes dulpicated tags and invalid tags like blank tag.
+=======================
+{% endcomment %}
+{% assign tags = "" %}
+{% for tag in rawtags %}
+    {% if tag != "" %}
+        {% if tags == "" %}
+            {% assign tags = tag | split:'|' %}
+        {% endif %}
+        {% unless tags contains tag %}
+            {% assign tags = tags | join:'|' | append:'|' | append:tag | split:'|' %}
+        {% endunless %}
+    {% endif %}
+{% endfor %}

_layouts/post.html

@@ -4,14 +4,18 @@
 <div class="post">
 
   <header class="post-header">
-    <div style="float:right;"><a href="/">< Back to home</a></div>
+    {% include back_to_home.html %}
     <h1 class="post-title">{{ page.title }}</h1>
     <div>
       <span class="post-meta">
         {{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}
       </span>
       {% include social_share.html %}
     </div>
+    {% assign sortedTags = page.tags | sort %}
+    {% for tag in sortedTags %}
+    <span class="tag"><a href="/tags#{{ tag | slugify }}">#{{ tag }}</a></span>
+    {% endfor %}
   </header>
 
   <article class="post-content">
@@ -22,3 +26,50 @@ <h1 class="post-title">{{ page.title }}</h1>
   </article>
 
 </div>
+
+{% assign relatedPosts = 0 %}
+{% for post in site.posts %}
+  {% if post.url != page.url %}
+    {% for tag in post.tags %}
+      {% if page.tags contains tag %}
+        {% assign relatedPosts = relatedPosts | plus: 1 %}
+        {% break %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+{% endfor %}
+{% if relatedPosts > 0 %}
+<div class="related">
+  <h3>Related Posts</h3>
+{% endif %}
+<div class="related-flex">
+{% assign relatedPosts = "" | split: "," %}
+{% for post in site.posts %}
+  {% if post.url != page.url %}
+    {% assign sameTagCount = 0 %}
+    {% for tag in post.tags %}
+      {% if page.tags contains tag %}
+        {% assign sameTagCount = sameTagCount | plus: 1 %}
+      {% endif %}
+    {% endfor %}
+    {% if sameTagCount > 0 %}
+    <div class="related-post">
+      <a href="{{ post.url }}">
+        <strong>{{ post.title }}</strong><br>
+        {{ post.date | date_to_string }}—{{ post.author }}
+      </a>
+        {% assign sortedTags = post.tags | sort %}
+        <ul>
+        {% for tag in sortedTags %}
+          <li><a href="/tags#{{ tag | slugify }}" class="related-post-tag">#{{ tag }}</a></li>
+        {% endfor %}
+        </ul>
+        <p>{{ post.excerpt | truncatewords: 50 }}</p>
+        <p><a class="btn btn-sm btn-primary" href="{{ site.github.url }}{{ post.url }}" role="button">Read more… <i class="fa fa-arrow-circle-right"></i></a>
+      </p>
+    </div>
+    {% endif %}
+  {% endif %}
+{% endfor %}
+</div>
+</div>

_layouts/tags.html

@@ -0,0 +1,32 @@
+---
+layout: default
+---
+
+<div class="post">
+    {% include back_to_home.html %}
+    <h1 class="page-heading">Posts by Tag</h1>
+
+    <ul class="post-list">
+
+        {% include find_tags.html %}
+
+        {% for tag in tags %}
+        <h2 id="{{ tag | slugify }}">{{ tag }}</h2>
+        <ul>
+            {% for post in site.posts %}
+                {% if post.tags contains tag %}
+            <li>
+                <h3>
+                    <a href="{{ post.url }}">
+                        {{ post.title }}
+                        <br><small>{{ post.date | date_to_string }}—{{ post.author }}</small>
+                    </a>
+                </h3>
+            </li>
+                {% endif %}
+            {% endfor %}
+        </ul>
+        {% endfor %}
+    </ul>
+
+</div>

_sass/_base.scss

@@ -183,17 +183,17 @@ pre {
  * Wrapper
  */
 .wrapper {
-    max-width: -webkit-calc(980px - (#{$spacing-unit}*8));
-    max-width:         calc(980px - (#{$spacing-unit}*8));
+    max-width: -webkit-calc(#{$page-width} - (#{$spacing-unit}*8));
+    max-width:         calc(#{$page-width} - (#{$spacing-unit}*8));
     margin-right: auto;
     margin-left: auto;
     padding-right: $spacing-unit*4;
     padding-left: $spacing-unit*4;
     @extend %clearfix;
 
     @include media-query($on-laptop) {
-        max-width: -webkit-calc(980px - (#{$spacing-unit*4}));
-        max-width:         calc(980px - (#{$spacing-unit*4}));
+        max-width: -webkit-calc(#{$page-width} - (#{$spacing-unit*4}));
+        max-width:         calc(#{$page-width} - (#{$spacing-unit*4}));
         padding-right: $spacing-unit*2;
         padding-left: $spacing-unit*2;
     }

_sass/_related.scss

@@ -0,0 +1,70 @@
+.related {
+  max-width: -webkit-calc(980px - (#{$spacing-unit}*7));
+  max-width:         calc(980px - (#{$spacing-unit}*7));
+  h3 {
+    margin: #{$spacing-unit} 0 #{$spacing-unit} calc(#{$spacing-unit}*4);
+  }
+}
+
+.related-flex {
+  margin: 0 calc(-#{$spacing-unit} / 2) 0 calc(-#{$spacing-unit} / 2);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.related-post {
+  background: $at-white;
+  flex-basis: -webkit-calc(((#{$page-width} - #{$spacing-unit}*9)/2) - 8*#{$spacing-unit});
+  flex-basis:         calc(((#{$page-width} - #{$spacing-unit}*9)/2) - 8*#{$spacing-unit});
+  flex-grow: 1;
+  display: inline-block;
+
+  margin: -webkit-calc(#{$spacing-unit} / 2);
+  margin: calc(#{$spacing-unit} / 2);
+
+  padding: -webkit-calc(#{$spacing-unit}*4) -webkit-calc(#{$spacing-unit}*4) -webkit-calc(#{$spacing-unit}*2) -webkit-calc(#{$spacing-unit}*4);
+  padding: calc(#{$spacing-unit}*4) calc(#{$spacing-unit}*4) calc(#{$spacing-unit}*2) calc(#{$spacing-unit}*4);
+  ul {
+    margin: 0;
+    li {
+      display: inline;
+    }
+  }
+}
+.tag {
+  margin-right: #{$spacing-unit};
+}
+
+/*
+
+.related {
+  max-width: -webkit-calc(980px - (#{$spacing-unit}*7));
+  max-width:         calc(980px - (#{$spacing-unit}*7));
+  margin-top: #{$spacing-unit};
+}
+
+.related-flex {
+  margin: calc(-#{$spacing-unit} / 2);
+}
+.related-post {
+  background: $at-white;
+  max-width: -webkit-calc(((#{$page-width} - #{$spacing-unit}*9)/2) - 2*#{$spacing-unit});
+  max-width:         calc(((#{$page-width} - #{$spacing-unit}*9)/2) - 2*#{$spacing-unit});
+  
+  margin: -webkit-calc(#{$spacing-unit} / 2);
+  margin: calc(#{$spacing-unit} / 2);
+  
+  padding: #{$spacing-unit};
+  float: left;
+  ul {
+    margin: 0;
+    li {
+      display: inline;
+    }
+  }
+}
+.tag {
+  margin-right: #{$spacing-unit};
+}
+
+ */

_sass/autotrader-blog-jekyll-theme.scss

@@ -32,6 +32,7 @@ $base-font-size:   16px;
 $small-font-size:  $base-font-size * 0.875;
 $base-line-height: 1.5;
 
+$page-width:       980px;
 $spacing-unit:     8px;
 
 $text-color:       #666666;
@@ -74,6 +75,7 @@ $on-laptop:        800px;
         "layout",
         "syntax-highlighting",
         "header",
+        "related",
         "table",
         "social_share",
         "callout"

tags.html

@@ -0,0 +1,3 @@
+---
+layout: tags
+---