You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
5.8 KiB
109 lines
5.8 KiB
|
|
<div class="article-content">
|
|
<h2>Comments</h2>
|
|
<p>You can use your Mastodon account to reply to this <a class="button" href="https://{{ .Site.Params.comment.fediverse.host }}/@{{ .Site.Params.comment.fediverse.user }}/statuses/{{ .Page.Params.comments.id }}">post</a>.</p>
|
|
<p><button class="button" id="replyButton" href="https://{{ .Site.Params.comment.fediverse.host }}/@{{ .Site.Params.comment.fediverse.user }}/statuses/{{ .Page.Params.comments.id }}">Reply</button></p>
|
|
<dialog id="toot-reply" class="mastodon" data-component="dialog">
|
|
<h3>Reply to {{ .Site.Params.comment.fediverse.user }}'s post</h3>
|
|
<p>
|
|
With an account on the Fediverse or Mastodon, you can respond to this post.
|
|
Since Mastodon is decentralized, you can use your existing account hosted by another Mastodon server or compatible platform if you don't have an account on this one.
|
|
</p>
|
|
<p>Copy and paste this URL into the search field of your favourite Fediverse app or the web interface of your Mastodon server.</p>
|
|
<div class="copypaste">
|
|
<input type="text" readonly="" value="https://{{ .Site.Params.comment.fediverse.host }}/@{{ .Site.Params.comment.fediverse.user }}/statuses/{{ .Page.Params.comments.id }}">
|
|
<button class="button" id="copyButton">Copy</button>
|
|
<button class="button" id="cancelButton">Close</button>
|
|
</div>
|
|
</dialog>
|
|
<p id="mastodon-comments-list"><button id="load-comment" class="button">Load comments</button></p>
|
|
<noscript><p>You need JavaScript to view the comments.</p></noscript>
|
|
<script src="/assets/js/purify.min.js"></script>
|
|
<script type="text/javascript">
|
|
const dialog = document.querySelector('dialog');
|
|
|
|
document.getElementById('replyButton').addEventListener('click', () => {
|
|
dialog.showModal();
|
|
});
|
|
|
|
document.getElementById('copyButton').addEventListener('click', () => {
|
|
navigator.clipboard.writeText('https://{{ .Site.Params.comment.fediverse.host }}/@{{ .Site.Params.comment.fediverse.user }}/statuses/{{ .Page.Params.comments.id }}');
|
|
});
|
|
|
|
document.getElementById('cancelButton').addEventListener('click', () => {
|
|
dialog.close();
|
|
});
|
|
|
|
dialog.addEventListener('keydown', e => {
|
|
if (e.key === 'Escape') dialog.close();
|
|
});
|
|
|
|
const dateOptions = {
|
|
year: "numeric",
|
|
month: "numeric",
|
|
day: "numeric",
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
};
|
|
|
|
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";
|
|
require('dotenv').config();
|
|
const key = process.env.API_KEY;
|
|
const headers = { 'Authorization': '${key}' }; // auth header with bearer token
|
|
fetch('https://{{ .Site.Params.comment.fediverse.host }}/api/v1/statuses/{{ .Page.Params.comments.id }}/context', { headers })
|
|
.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.reply_class = reply.in_reply_to_id == "{{ .Page.Params.comments.id }}" ? "reply-original" : "reply-child";
|
|
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-wrapper">
|
|
<div class="comment-level ${reply.account.reply_class}"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="none" transform="rotate(180)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path stroke="#535358" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.608 12.526l7.04-6.454C13.931 4.896 16 5.806 16 7.546V11c13 0 11 16 11 16s-4-10-11-10v3.453c0 1.74-2.069 2.65-3.351 1.475l-7.04-6.454a2 2 0 010-2.948z"></path> </g></svg></div>
|
|
<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>
|
|
</div>`;
|
|
document.getElementById('mastodon-comments-list').appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
|
|
});
|
|
} else {
|
|
document.getElementById('mastodon-comments-list').innerHTML = "<p>No comments found</p>";
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
|