dracublog/layouts/partials/fedi-comments.html

75 lines
2.9 KiB
HTML

{{ 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.6/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://{{ .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 }}