Back in the days people used to have comment sections on their websites, and for a time it was good.
But for more than a decade now , you can’t just have a comment section without seeing it spammed to shits by various bots advertising unspoken goods.
In the previous iteration of this blog I have been using Disqus, but as many have stated, this is yet another “Free Product ™” trying to narrow down who you are so that a company down the line can sell your profile to someone; but I digress.
Some time ago I stumbled upon a blog post with a very sexy idea that I never got around to implementing: Use Github issues as means for comments! Brilliant!
Well now it’s done.
<script type="text/javascript">
function domReady(fn) {
document.addEventListener('DOMContentLoaded', fn);
if (document.readyState === 'interactive' || document.readyState === 'complete') {
fn();
}
}
async function getComments(url = '') {
const response = await fetch(url, {
method: 'GET',
mode: 'cors',
cache: 'no-cache',
headers: { Accept: 'application/vnd.github.v3.html+json' },
});
return response.json();
}
domReady(() => {
const apiUrl =
'https://api.github.com/repos/pyrho/25.wf-comments/issues/$githubIssueId$/comments';
const appendComments = function (comments) {
const commentSection = document.querySelector('comments');
if (!comments || !comments.forEach || comments.length === 0) {
commentSection.insertAdjacentHTML('beforeend', '<p>No comments yet.</p>');
return;
}
comments.forEach(function (comment) {
commentSection.insertAdjacentHTML(
'beforeend',
'<div class="comment"> ✿\
<a class="commenter" href="' +
comment.user.html_url +
'"\
target="_blank">' +
comment.user.login +
'</a> on ' +
new Date(comment.created_at).toUTCString() +
comment.body_html +
'</div>',
);
});
};
getComments(apiUrl).then(appendComments);
});
</script>
I modified the script from the original author so that it’s vanilla JS (no ugly jQuery, come on it’s 2020). You can check the whole code at sr.ht where the code for this blog is hosted.
As stated by the original author, the main drawbacks of this method is that it limits the ability to comment to people with a Github account, while I hate this idea (of forcing people into a “walled garden”), let’s face it, anyone likely to read my ramblings (if anyone is actually reading this..) has a Github account.
Comment away !