{{ with .Params.comments }} <h3>Comments</h3> <p> You may <a class="link" href="https://{{ .host }}/@{{ .user }}/{{ .id }}" target="_blank">view</a> or <a class="link" href="https://{{ .host }}/interact/{{ .id }}?type=reply" target="_blank">reply</a> if you have an account anywhere in the Fediverse. </p> <p id="mastodon-comments-list"><button id="load-comment">Load comments</button></p> <noscript> <p> You would need JavaScript to view comments here on this page. However, you can still <a class="link" href="https://{{ .host }}/@{{ .user }}/{{ .id }}" target="_blank">view</a> or <a class="link" href="https://{{ .host }}/interact/{{ .id }}?type=reply" target="_blank">reply</a> if you have an account anywhere in the Fediverse. </p> </noscript> <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.7/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://{{ .host }}/api/v1/statuses/{{ .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> <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>No comments, add yours?</p>"; } }); }); </script> {{ end }}