show related posts at the bottom of blog posts

.eleventy.js

@@ -48,8 +48,6 @@ module.exports = function (eleventyConfig) {
     return str.split('/').map(part => encodeURI(part)).join('/')
   });
 
-  // TODO: this appears to potentially be dependent on rendering order
-  // TODO: actually add to the post ui
   eleventyConfig.addFilter("related", function(obj) {
     const post = this.ctx;
     const posts = this.ctx.collections.posts.map(post => post.data);
@@ -64,13 +62,14 @@ module.exports = function (eleventyConfig) {
       serializer: (doc) => [doc.title, doc.description],
       weights: [10, 10],
     })(post, posts).map(result => {
+      console.log(result.document);
       return {
         relative: result.relative + tagScore(post, result.document),
         document: result.document
       }
     });
 
-    return results.filter(result => result.relative > 0.0).slice(0,3);
+    return results.filter(result => result.relative > 0.2).sort((a, b) => a.relative - b.relative).reverse().slice(0,3);
   });
 
   eleventyConfig.addCollection('posts', collection => {

src/_includes/layouts/post.njk

@@ -17,8 +17,8 @@ subhead: blog
                 <span class="readtime">{{ content | timeToRead }} to read</span>
                 <span class="middot"></span>
                 <span>by <span class="author by" id="author">{{ site.name }}</span></span>
-                <span class="middot"></span>
                 {% if tags %}
+                    <span class="middot"></span>
                     <span>in 
                         {% for tag in tags %}
                             <span class="tag"><a href="/posts/tagged/{{ tag | slugify }}/">{{ tag }}</a></span>{% if not loop.last %}, {% endif %}
@@ -47,4 +47,35 @@ subhead: blog
             </div>
         </a>
     </article>
+    {% for rel in "" | related %}
+        {% if loop.first %}
+        <div class="related">
+        <h3>related posts</h3>
+        <ul>
+        {% endif %}
+        <li class="list-entry">
+            <!-- rank {{ rel.relative }} -->
+            <a href="{{ rel.document.page.url }}"><h4>{{ rel.document.title }}</h4></a>
+            <div class="byline">
+                <time datetime="{{ rel.document.page.date | date_to_datetime }}">{{ rel.document.page.date | date_formatted }}</time>
+                {% if rel.document.changed_date %}
+                    <small class="updated">(updated <time datetime="{{ rel.document.changed_date | date_to_datetime }}">{{ rel.document.changed_date | date_formatted }}</time>)</small>
+                {% endif %}
+                <span class="middot"></span>
+                <span class="readtime">{{ rel.document.content | timeToRead }} to read</span>
+                <span class="middot"></span>
+                <span>by <span class="author by" id="author">{{ site.name }}</span></span>
+                {% if rel.document.tags %}
+                    <span class="middot"></span>
+                    <span>in 
+                    {% for tag in rel.document.tags %}
+                        <span class="tag"><a href="/posts/tagged/{{ tag | slugify }}/">{{ tag }}</a></span>{% if not loop.last %}, {% endif %}
+                    {% endfor %}
+                    </span>
+                {% endif %}
+            </div>
+            <span class="lead"><strong>{{ rel.document.description }}</strong></span>
+        </li>
+        {% if loop.last %}</ul></div>{% endif %}
+    {% endfor %}
 {% endblock %}

src/css/style.scss

@@ -79,6 +79,26 @@ time,
   border-bottom: 1px dotted rgb(219, 103, 167);
 }
 
+.related {
+  margin-top: 18px;
+  border-top: 1px dotted rgb(219, 103, 167);
+
+  h3 {
+    margin-top: 4px;
+    margin-bottom: 0;
+  }
+
+  ul {
+    margin-top: 4px;
+    padding-left: 0;
+
+    h4 {
+      margin-top: 4px;
+      margin-bottom: 0;
+    }
+  }
+}
+
 .article_header>h1,
 .page_header>h1 {
   margin: 0.1rem;

src/posts.njk

@@ -22,8 +22,8 @@ permalink: /posts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
         <span class="readtime">{{ entry.content | timeToRead }} to read</span>
         <span class="middot"></span>
         <span>by <span class="author by" id="author">{{ site.name }}</span></span>
-        <span class="middot"></span>
         {% if entry.data.tags %}
+            <span class="middot"></span>
             <span>in 
                 {% for tag in entry.data.tags %}
                     <span class="tag"><a href="/posts/tagged/{{ tag | slugify }}/">{{ tag }}</a></span>{% if not loop.last %}, {% endif %}

src/tagged.njk

@@ -29,8 +29,8 @@ date: git Last Modified
           {% endif %}
           <span class="middot"></span>
           <span>by <span class="author by" id="author">{{ site.name }}</span></span>
-          <span class="middot"></span>
           {% if entry.data.tags %}
+              <span class="middot"></span>
               <span>in 
                   {% for tag in entry.data.tags %}
                       <span class="tag"><a href="/posts/tagged/{{ tag | slugify }}/">{{ tag }}</a></span>{% if not loop.last %}, {% endif %}