From 1bf839467866f5fae41b10b46283c4995d8e93f3 Mon Sep 17 00:00:00 2001
From: maia arson crimew <maia@crimew.gay>
Date: Thu, 8 Jun 2023 18:04:58 +0200
Subject: [PATCH] show related posts at the bottom of blog posts

---
 .eleventy.js                   |  5 ++---
 src/_includes/layouts/post.njk | 33 ++++++++++++++++++++++++++++++++-
 src/css/style.scss             | 20 ++++++++++++++++++++
 src/posts.njk                  |  2 +-
 src/tagged.njk                 |  2 +-
 5 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 1359374..d659e88 100644
--- a/.eleventy.js
+++ b/.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 => {
diff --git a/src/_includes/layouts/post.njk b/src/_includes/layouts/post.njk
index 01c1f6c..954a2c3 100644
--- a/src/_includes/layouts/post.njk
+++ b/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 %}
diff --git a/src/css/style.scss b/src/css/style.scss
index 755037c..9d579ec 100644
--- a/src/css/style.scss
+++ b/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;
diff --git a/src/posts.njk b/src/posts.njk
index 7941be5..2c8c6cd 100644
--- a/src/posts.njk
+++ b/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 %}
diff --git a/src/tagged.njk b/src/tagged.njk
index a39a7c4..ca6c337 100644
--- a/src/tagged.njk
+++ b/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 %}