Add related posts component

Author: kylegordy

_includes/related-posts.html

@@ -0,0 +1,50 @@
+{% assign maxRelated = 4 %} <!-- Maximum number of related posts to output -->
+{% assign minCommonTags =  1 %} <!-- Minimum number of common tags that have to match -->
+{% assign maxRelatedCounter = 0 %}
+
+{% capture related_posts %}
+    {% for post in site.posts %}
+        {% assign sameTagCount = 0 %}
+        {% assign commonTags = '' %}
+
+        {% for tag in post.tags %}
+            {% if post.url != page.url %}
+            {% if page.tags contains tag %}
+            {% assign sameTagCount = sameTagCount | plus: 1 %}
+            {% assign commonTags = commonTags %}
+            {% endif %}
+            {% endif %}
+        {% endfor %}
+
+        {% if sameTagCount >= minCommonTags %}
+
+            <!-- Post item template -->
+            {% include post-list-item.html %}
+            {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+
+            {% if maxRelatedCounter >= maxRelated %}
+                {% break %}
+            {% endif %}
+
+        {% endif %}
+    {% endfor %}
+{% endcapture %}
+
+<!-- Render component if there are one or more related posts -->
+{% if maxRelatedCounter >= 1 %}
+    <div class="related-posts bg-slate-100">
+        <div class="related-posts__wrapper section-container">
+            <h1 class="related-posts__title">Keep<br>Reading</h1>
+
+            <!-- Show related posts -->
+            <ul class="post-list">
+                {{ related_posts }}
+            </ul>
+
+            <!-- Decorative arrows -->
+            <svg class="related-posts__arrow svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-right' | relative_url }}"></use></svg>
+            <svg class="related-posts__arrow svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-right' | relative_url }}"></use></svg>
+            <svg class="related-posts__arrow svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-right' | relative_url }}"></use></svg>
+        </div>
+    </div>
+{% endif %}

_layouts/post.html

@@ -22,7 +22,11 @@
 
             <!-- Related jobs -->
             {% include related-jobs.html %}
+
         </div>
     </div>
 
+    <!-- Related posts -->
+    {% include related-posts.html %}
+
 </article>

assets/_sass/component/_related-posts.scss

@@ -0,0 +1,95 @@
+////////////////////
+// Related Posts
+////////////////////
+
+.related-posts {
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.related-posts__wrapper {
+    @media (min-width: $post-bp) {
+        display: grid;
+        grid-template-columns: 320px 1fr 5%;
+    }
+}
+
+.related-posts__title {
+    margin-bottom: 0;
+    line-height: 1;
+    @extend .monospace;
+
+    @media (min-width: $bp-md) {
+        font-size: rem-calc(40px);
+    }
+
+    @media (min-width: $post-bp) {
+        font-size: rem-calc(56px);
+    }
+}
+
+////////////////////
+// Post List Tweaks
+////////////////////
+
+.related-posts .post-list {
+    @media (min-width: $bp-md) {
+        display: grid;
+        grid-gap: 0 5%;
+        grid-template-columns: 1fr 1fr;
+        align-self: center;
+    }
+}
+
+.related-posts .post-list__item {
+    padding-right: 0;
+
+    @media (max-width: $bp-md) {
+        &:first-of-type {
+            margin-top: rem-calc(15px);
+            border-top: 1px solid $border-color;
+        }
+
+        &:last-of-type {
+            padding-bottom: 0;
+            border-bottom: none;
+        }
+    }
+
+    @media (min-width: $bp-md) {
+        &:nth-of-type(3),
+        &:nth-of-type(4) {
+            border-bottom: none;
+        }
+    }
+}
+
+////////////////////
+// Arrows
+////////////////////
+
+.related-posts__arrow {
+    position: absolute;
+    color: $slate-200;
+    z-index: -1;
+    @extend .hidden-md-down;
+
+    &:nth-of-type(1) {
+        top: -.35em;
+        left: .5em;
+        font-size: 30vmin;
+    }
+
+    &:nth-of-type(2) {
+        bottom: -.35em;
+        left: -.35em;
+        font-size: 34vmin;;
+    }
+
+    &:nth-of-type(3) {
+        bottom: 0;
+        right: -.25em;
+        font-size: 24vmin;;
+    }
+}

assets/css/main.scss

@@ -44,6 +44,7 @@
 @import "component/post-content";
 @import "component/featured-post-hero";
 @import "component/pagination";
+@import "component/related-posts";
 
 // Import the syntax highlighting theme, see:
 // https://richleland.github.io/pygments-css/