61 lines
2.6 KiB
HTML
61 lines
2.6 KiB
HTML
|
<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, "&")
|
||
|
|
.replace(/</g, "<")
|
||
|
|
.replace(/>/g, ">")
|
||
|
|
.replace(/"/g, """)
|
||
|
|
.replace(/'/g, "'");
|
||
|
|
}
|
||
|
|
|
||
|
|
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>
|