75 lines
2.9 KiB
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.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 }}
|