Add related guides to page footer.

Allow specifying `related` in article metadata and using that to add
related guides to the bottom of an article.

Added an example to Best Practices which are bad and wrong and should
be updated.

Author: MikeMcQuaid

_articles/best-practices.md

@@ -11,6 +11,9 @@ toc:
   its-okay-to-hit-pause: "It’s okay to hit pause"
 order: 5
 image: /assets/images/cards/best-practices.png
+related:
+  - building
+  - coc
 ---
 
 ## What does it mean to be a maintainer?

_layouts/article.html

@@ -56,4 +56,33 @@ <h1 class="alt-h1 lh-condensed text-center mb-3">{{ page.title }}</h1>
   </div>
 </article>
 
+{% if page.related %}
+<div class="container-lg p-responsive mx-auto border-top text-center pt-5">
+  <h2 class="alt-h2">Related Guides</h2>
+  <div class="gutter-sm d-flex flex-wrap flex-items-stretch pb-md-6">
+  {% for related in page.related %}
+    {% assign article = site.articles | where: "class", related | first %}
+    <div class="col-12 col-sm-9 mx-auto col-md-6 mt-4 mt-lg-5">
+      <a href="{{ article.url | relative_url }}" class="guide-cover {{ article.class }} card height-full d-block">
+
+        <div class="lh-none guide-cover-img text-center pt-4">
+          <img src="{{ site.baseurl }}/assets/images/illos/{{ article.class }}.svg" class="" alt="{{ article.title }} illustration">
+        </div>
+
+        <div class="flex-self-end p-4 text-center p-lg-5">
+          <h3 class="alt-h3 text-bold lh-condensed mb-2 text-black">
+            {{ article.title }}
+          </h3>
+          <div class="mb-0 text-gray">
+            {{ article.description | markdownify }}
+          </div>
+        </div>
+
+      </a>
+    </div>
+  {% endfor %}
+  </div>
+</div>
+{% endif %}
+
 {% include footer.html %}