Add comments to static site build on Jekyll
Thanks to @carl and his toot about adding comments to Hugo static site. Read source for deeper understanding.
Comment Jekyll site
with small changes and tweaking the code to my preferences I’ve added the same implementation to this jekyll site.
You can add comments to any page on your site just adding some keys to your page front-matter section.
comments:
show: true
fediHost: linuxrocks.online
fediusername: carl
fediid: 105463655803971969
beware of front-matter formatting (two spaces indent)
show: true/false
to control visibility
from your toot
https://linuxrocks.online/@carl/105463655803971969
this toot and its thread will load on your website on demand when pressing LOAD/CARGAR comments button (or any link you may want to use to trigger javascript code).
Page template
Jekyll uses templates and html pages to render content, so you need to add this code (my modified version) wherever you want to render comments.
- if section reading show value
- page.comments.key to read toot’s key values
{% if page.comments.show %}
<div class="content">
<h2>Comentarios</h2>
<p>Utiliza a túa conta de Mastodon para / Use your Mastodon account <a class="link" href="https://{{ page.comments.fediHost }}/@{{ page.comments.fediusername }}/{{ page.comments.fediid }}">comentar esta publicación</a>.</p>
<p><a class="button" href="https://{{ page.comments.fediHost }}/interact/{{ page.comments.fediid }}?type=reply">Responder/Reply</a></p>
<p id="mastodon-comments-list"><button id="load-comment">Cargar comentarios</button></p>
<noscript><p>Precisas JavaScript para ver os comentarios.</p></noscript>
<script src="/assets/js/purify.min.js"></script>
<script type="text/javascript">
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
document.getElementById("load-comment").addEventListener("click", function() {
document.getElementById("load-comment").innerHTML = "Loading";
fetch('https://{{ page.comments.fediHost }}/api/v1/statuses/{{ page.comments.fediid }}/context')
.then(function(response) {
return response.json();
})
.then(function(data) {
if(data['descendants'] &&
Array.isArray(data['descendants']) &&
data['descendants'].length > 0) {
document.getElementById('mastodon-comments-list').innerHTML = "";
data['descendants'].forEach(function(reply) {
reply.account.display_name = escapeHtml(reply.account.display_name);
reply.account.emojis.forEach(emoji => {
reply.account.display_name = reply.account.display_name.replace(`:${emoji.shortcode}:`,
`<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" height="20" width="20" />`);
});
mastodonComment =
`<div class="mastodon-comment">
<div class="avatar">
<img src="${escapeHtml(reply.account.avatar_static)}" height=60 width=60 alt="">
</div>
<div class="content">
<div class="author">
<a href="${reply.account.url}" rel="nofollow">
<span>${reply.account.display_name}</span>
<span class="disabled">${escapeHtml(reply.account.acct)}</span>
</a>
<a class="date" href="${reply.uri}" rel="nofollow">
${reply.created_at.substr(0, 10)}
</a>
</div>
<div class="mastodon-comment-content">${reply.content}</div>
</div>
</div>`;
document.getElementById('mastodon-comments-list').appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
});
} else {
document.getElementById('mastodon-comments-list').innerHTML = "<p>Sen comentarios / No comments</p>";
}
});
});
</script>
</div>
{% endif %}
CSS classes and formatting can be set to better fit into your website.
You have to add purify.min.js and purify.min.js.map to your site to clean and sanitize response from server.
Test it!!
go to the original post on my jekyll blog and comment using your fediverse account
Comments
November 11, 2022 10:00
Online slot site recommendation community in Korea 슬롯
November 13, 2022 09:56
Mycatttery is the best place of munchkin cat for sale. We are a home kennel dedicated to providing you with high quality Munchkin kittens. munchkin kittens for sale
November 14, 2022 12:41
Korea’s free sports broadcasting (overseas soccer, basketball, baseball) TV viewing site. mlb중계
November 15, 2022 07:15
Welcome to Chris and Bella’s Cattery, we dedicate our lives to the breeding of munchkin cat for sale and Scottish fold munchkin cat for sale for any family who is caring and loving who needs to add our adorable fur babies to their lives. Our kittens and cats are well behave and well trained to fit into any family with kids, birds, dogs and other pets. Getting a munchkin cat, kitten or Scottish fold munchkin from our cattery will mean getting a loving, caring and passionate friend or partner for the rest of your lives. munchkin cat for sale
November 15, 2022 16:00
I feel particularly appreciative that I read this. It is especially useful and to an awesome degree important and I incredibly took in an inconceivable game plan from it. 먹튀사이트
November 17, 2022 12:27
I expect you to thank for your time of this phenomenal read!!! I definately welcome each and every piece of it and I have you bookmarked to look at new stuff of your blog a specific essential read blog! 먹튀사이트
December 2, 2022 05:14
This is likewise a decent post which I truly appreciated perusing. It isn’t each day that I have the likelihood to see something like this.. แทงไฮโล
June 26, 2023 12:00
검증된 파워볼사이트 를 찾으신다면 eos파워볼사이트 가 있는 파워볼사이트추천 에서 파워볼 을 즐기시길 바랍니다. 5년 이상 운영된 메이저업체 이며 지금까지 많은분들께 사랑받은 안전한파워볼사이트 입니다. 안전한파워볼사이트
November 2, 2024 13:09
Bet safely with our list of verified Toto sites! Play casino games, sports bets, and more on secure platforms free from fraud. With licensed sites, enjoy safe, worry-free gaming on trusted major sites. rageon.com
November 6, 2024 03:43
Great
The dynamic interactions in Sprunki Phase 3 Incredibox between sound, animation, and rhythm make it a truly immersive gaming experience.
November 7, 2022 06:31
I am keen on such themes so I will address page where it is cool depicted. 온라인바카라
November 4, 2022 05:19
I feel extremely cheerful to have seen your site page and anticipate such a large number of all the more engaging circumstances perusing here. Much appreciated yet again for every one of the points of interest. 바카라사이트
November 2, 2022 18:15
I am keen on such themes so I will address page where it is cool depicted. 플레이포커홀덤머니상
October 30, 2022 14:06
Deepmaterial is reactive hot melt pressure sensitive adhesive manufacturer and supplier, manufacturing one component epoxy underfill adhesives, hot melt adhesives glue, uv curing adhesives,high refractive index optical adhesive, magnet bonding adhesives, best top waterproof structural adhesive glue for plastic to metal and glass, electronic adhesives glue for electric motor and micro motors in home appliance. Industrial Hot Melt Electronic Component Epoxy Adhesive
November 1, 2022 17:42
I am keen on such themes so I will address page where it is cool depicted. 온라인바카라
November 8, 2022 08:04
I am keen on such themes so I will address page where it is cool depicted. how to sell payment processing