first iteration of related articles

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

assets/scss/style.scss

@@ -434,3 +434,9 @@ ul.list {
         }
     }
 }
+
+.relatedArticlesContainer {
+    #relatedArticles .postlistitem {
+        @extend .featuredCard;
+    }
+}

layouts/_default/single.html

@@ -30,4 +30,5 @@
         ></script>
         <div id="commento"></div>
     {{ end }}
+    {{- partial "related_articles.html" . -}}
 {{ end }}

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 }}