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/falseto 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
October 30, 2022 14:12
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:50
I am keen on such themes so I will address page where it is cool depicted. 온라인바카라
November 2, 2022 18:22
I am keen on such themes so I will address page where it is cool depicted. 플레이포커홀덤머니상
November 8, 2022 08:06
I am keen on such themes so I will address page where it is cool depicted. how to sell payment processing
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 15, 2022 08:59
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 19:30
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 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.
April 17, 2025 06:57
What a fantabulous post this has been. Never seen this kind of useful post. I am grateful to you and expect more number of posts like these. Thank you very much. 카지노사이트
May 5, 2025 07:56
It is an excellent blog, I have ever seen. I found all the material on this blog utmost unique and well written. And, I have decided to visit it again and again. crown oil
May 8, 2025 12:57
Yes i am totally agreed with this article and i just want say that this article is very nice and very informative article.I will make sure to be reading your blog more. You made a good point but I can’t help but wonder, what about the other side? !!!!!!Thanks agenolx
May 20, 2025 09:52
Wow i can say that this is another great article as expected of this blog.Bookmarked this site.. https://randomscript.com/1xbet-promo-code-use-1xrun200-bonus-e130/
May 20, 2025 09:58
Unlock a 100% bonus with Linebet’s promo code BNB777! Deposit now and get up to €130 extra. Play today. code promo linebet algerie
May 20, 2025 10:19
This is highly informatics, crisp and clear. I think that everything has been described in systematic manner so that reader could get maximum information and learn many things. live draw sdy
May 21, 2025 10:56
This blog is so nice to me. I will keep on coming here again and again. Visit my link as well.. https://www.hlsports.de/wp-content/pages/?codes_promotionnels_sur_1xbet_gratuitement.html
May 21, 2025 11:04
You completed a few fine points there. I did a search on the subject and found nearly all persons will go along with with your blog. slot88
June 16, 2025 14:55
Thanks for an interesting blog. What else may I get that sort of info written in such a perfect approach? I have an undertaking that I am just now operating on, and I have been on the lookout for such info. 해외선물 개발
June 17, 2025 09:04
room
POL88 adalah situs slot online gacor terpercaya dengan RTP tinggi dan game dari provider ternama. Daftar sekarang untuk nikmati jackpot besar serta bonus harian yang banyak. situs slot gacor
June 17, 2025 09:20
room
The post is written in very a good manner and it contains many useful information for me. เว็บพนันเกาหลี
June 17, 2025 09:29
room
Thanks for this great post, i find it very interesting and very well thought out and put together. I look forward to reading your work in the future. slot gacor
June 17, 2025 09:29
room
All the contents you mentioned in post is too good and can be very useful. I will keep it in mind, thanks for sharing the information keep updating, looking forward for more posts.Thanks kuncidumont.com
June 17, 2025 09:45
room
POL88 adalah situs slot online gacor terpercaya dengan RTP tinggi dan game dari provider ternama. Daftar sekarang untuk nikmati jackpot besar serta bonus harian yang banyak. slot online
June 17, 2025 12:30
Thanks for an interesting blog. What else may I get that sort of info written in such a perfect approach? I have an undertaking that I am just now operating on, and I have been on the lookout for such info. 해외선물 개발
June 17, 2025 12:31
Thanks for an interesting blog. What else may I get that sort of info written in such a perfect approach? I have an undertaking that I am just now operating on, and I have been on the lookout for such info. 해외선물 개발
June 19, 2025 10:56
room
Thanks for a very interesting blog. What else may I get that kind of info written in such a perfect approach? I’ve a undertaking that I am simply now operating on, and I have been at the look out for such info. jay rufer
June 19, 2025 11:00
room
Thanks For sharing this Superb article.I use this Article to show my assignment in college.it is useful For me Great Work. Concrete Parking Lot Contractors Near Me
June 21, 2025 10:20
Temukan pengalaman bermain slot gacor di DAX69. Akses login cepat melalui link alternatif terbaru dan mainkan slot favorit dengan winrate tinggi. dax69 slot login
June 21, 2025 10:29
Nice to be visiting your blog again, it has been months for me. Well this article that i’ve been waited for so long. I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share. gk barry net worth
June 22, 2025 20:21
Wow i can say that this is another great article as expected of this blog.Bookmarked this site.. togel online
June 22, 2025 21:03
room
Very informative post! There is a lot of information here that can help any business get started with a successful social networking campaign. DeepL下载
June 23, 2025 07:46
room
I found your this post while searching for some related information on blog search…Its a good post..keep posting and update the information. olxtoto togel