Using GitHub Issue Comments for your Website

Stefan Gössner

October 24, 2017

As of now, static web pages are quite popular. These pages here are also simple HTML documents readily published to the web server.

Static pages are not much compatible with dynamic user comments. So comment hosting services like Disqus are frequently used in combination with static web sites.

As critics regarding loading time and security with Disqus are increasing, I was attracted by a solution using GitHub hosted comments. See ...

Please be aware of the fact, that your readers need to have a GitHub account in order to leave a comment with one of above solutions.

As I do not use jQuery, I prefer a plain (vanilla) JavaScript solution utilizing the new fetch-API instead of old XHR for aquiring the comments from the GitHub repository.

As I didn't see this approach in the solutions above, I want to share it here and state again, that credits for that concept goes to one (or all) of the authors mentioned above.

<!-- html segment -->
<div id="comments" issueId="@"></div>
<script src="./js/githubcomments.js"></script>

// githubcomments.js
function commentsHeader(issueId) {
    return  `<div style="width:100%; text-align:center; margin-top:2em;"><a href="https://github.com/goessner/goessner.github.io/issues/${issueId}#new_comment_field" style="-moz-appearance:button; text-decoration: none; color:black;" target="_blank">Comment on GitHub (account required)</a></div><hr>`;
}
function commentBody(comment) {
    return  `<div class="comment"><a href="${comment.user.html_url}" target="_blank">${comment.user.login}</a>,${new Date(comment.created_at).toUTCString()}<p>${comment.body_html}</p></div><hr>`;
}
function addComments(issueId) {
    const url = `https://api.github.com/repos/goessner/goessner.github.io/issues/${issueId}/comments?per_page=50`;

    fetch(url, { headers: {Accept: 'application/vnd.github.v3.html+json' }})
        .then((resp) => {
            var ctype = resp.headers.get("content-type");
            if (ctype && ctype.includes("application/json"))
                return resp.json();
            throw new TypeError("Loading github comments failed!");
        })
        .then((json) => {
            let html = commentsHeader(issueId);
            for (let comment of json)
                html += commentBody(comment);
            document.getElementById('comments').innerHTML = html;
        })
}

if (document.readyState === "loading")
    document.addEventListener("DOMContentLoaded", addComments.bind(null, document.getElementById('comments').getAttribute('issueId')));
else
    addComments(document.getElementById('comments').getAttribute('issueId'));

You can try commenting down here ...