<br/><br/>
For comments you can use your fediverse account to reply to this 
<a href="https://{{page.extra.masto_instance}}/@{{page.extra.masto_user}}/{{page.extra.masto_id}}">toot</a>.<br/>
<div id="mastodon-comments-list">
    <button id="load-comment">Load comments</button><br/>
</div>
<noscript>You need JavaScript to view the comments.</noscript>
<script src="/js/purify.min.js"></script>
<script type="text/javascript">
function escapeHtml(unsafe) {
  return unsafe
       .replace(/&/g, "&amp;")
       .replace(/</g, "&lt;")
       .replace(/>/g, "&gt;")
       .replace(/"/g, "&quot;")
       .replace(/'/g, "&#039;");
}

document.getElementById("load-comment").addEventListener("click", function() {
  document.getElementById("load-comment").innerHTML = "Loading";
  fetch('https://{{page.extra.masto_instance}}/api/v1/statuses/{{page.extra.masto_id}}/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>
                     </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>Not comments found</p>";
      }
    });
  });
</script>