From cfc7d25449e9d7c170821229ae9ca54117031c5d Mon Sep 17 00:00:00 2001
From: Gabriele Musco <gabmus@disroot.org>
Date: Thu, 15 Apr 2021 07:46:53 +0200
Subject: [PATCH] first iteration of related articles

---
 README.md                              |  4 +++
 assets/scss/style.scss                 |  6 ++++
 layouts/_default/single.html           |  1 +
 layouts/partials/related_articles.html | 40 ++++++++++++++++++++++++++
 4 files changed, 51 insertions(+)
 create mode 100644 layouts/partials/related_articles.html

diff --git a/README.md b/README.md
index 5543dbb..33aface 100644
--- a/README.md
+++ b/README.md
@@ -84,6 +84,10 @@ summaryLength = 70  # number of words for article summaries
 
     infiniteScrolling = false  # activates infinite scrolling instead of regular pagination
     enableFooterColumns = false  # activates footer columns, as described below
+    # related articles will be selected randomly based on tags and shown at
+    # the bottom of the article, after the comments
+    enableRelatedArticles = false
+    relatedArticlesNum = 2  # how many related articles to show
 
 [menu]
     # these links will be added to the main navigation menu, sorted by weight
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 513aafa..58dc919 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -434,3 +434,9 @@ ul.list {
         }
     }
 }
+
+.relatedArticlesContainer {
+    #relatedArticles .postlistitem {
+        @extend .featuredCard;
+    }
+}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 6c8904e..1972136 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -30,4 +30,5 @@
         ></script>
         <div id="commento"></div>
     {{ end }}
+    {{- partial "related_articles.html" . -}}
 {{ end }}
diff --git a/layouts/partials/related_articles.html b/layouts/partials/related_articles.html
new file mode 100644
index 0000000..2faad2f
--- /dev/null
+++ b/layouts/partials/related_articles.html
@@ -0,0 +1,40 @@
+{{ if and (.Site.Params.enableRelatedArticles | default false) .Params.tags }}
+    <div class="relatedArticlesContainer">
+        <hr />
+        <h2>More posts like this</h2>
+        <div id="relatedArticles"></div>
+    </div>
+    {{- partial "js_paginator.html" . -}}
+    <script>
+        function hasAnyTags(articleTags, targetTags) {
+            for (let atag of articleTags) {
+                if (targetTags.includes(atag)) return true;
+            }
+            return false;
+        }
+        function getRelatedArticles() {
+            let currentTags = {{ .Params.tags }};
+            let targetContainer = document.getElementById('relatedArticles');
+            targetContainer.innerHTML = '';
+            fetch('/search/index.json').then(res => res.json())
+            .then(res => {
+                let candidates = res.pages.filter(
+                            a => hasAnyTags(a.tags, currentTags) && a.link != "{{ .Permalink }}"
+                );
+                let targetNum = Math.min(
+                    {{ .Site.Params.relatedArticlesNum | default 2 }},
+                    candidates.length
+                );
+                if (candidates.length <= 0) {
+                    Array.from(
+                        document.getElementsByClassName('relatedArticlesContainer')
+                    ).map(e => e.style.display = 'none');
+                }
+                for (let i=0; i<targetNum; i++) {
+                    targetContainer.innerHTML += renderSingleArticle(candidates[i]);
+                }
+            });
+        }
+        getRelatedArticles();
+    </script>
+{{ end }}