show related posts at the bottom of blog posts

This commit is contained in:
maia arson crimew 2023-06-08 18:04:58 +02:00
parent cb41f112e4
commit 1bf8394678
5 changed files with 56 additions and 6 deletions

View file

@ -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 => {

View file

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

View file

@ -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;

View file

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

View file

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