86 lines
3.5 KiB
JavaScript
86 lines
3.5 KiB
JavaScript
const MASTODON_ACCOUNT_ID = '109285376472065471'
|
|
const MASTODON_HOST = 'social.sd.ai'
|
|
|
|
async function copyElementTextToClipboard(e)
|
|
{
|
|
const text = e.textContent
|
|
await navigator.clipboard.write(text)
|
|
|
|
e.classList.add('tootClick');
|
|
setTimeout(() => {
|
|
e.classList.remove('tootClick');
|
|
}, 600);
|
|
}
|
|
|
|
function escapeHtml(unsafe) {
|
|
return unsafe
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
|
|
function renderMastodonContent(toots, parentElement) {
|
|
if (!Array.isArray(toots) || toots.length === 0) {
|
|
document.getElementById('mastodon-comments-list').innerHTML = "<div class='mastodon-comment'>No comments (yet)!</div>"
|
|
return
|
|
}
|
|
for (const toot of toots) {
|
|
toot.account.display_name = escapeHtml(toot.account.display_name)
|
|
console.log(toot)
|
|
toot.account.emojis.forEach(emoji => {
|
|
toot.account.display_name = toot.account.display_name.replace(`:${emoji.shortcode}:`,
|
|
`<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" class="mastodon-emoji" />`);
|
|
})
|
|
toot.emojis.forEach(emoji => {
|
|
toot.content = toot.content.replace(`:${emoji.shortcode}:`,
|
|
`<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" class="mastodon-emoji" />`);
|
|
})
|
|
const comment =
|
|
`<div class="mastodon-comment">
|
|
<div class="mastodon-avatar">
|
|
<img src="${escapeHtml(toot.account.avatar_static)}" height=60 width=60 alt="${escapeHtml(toot.account.display_name)}'s avatar">
|
|
</div>
|
|
<div class="mastodon-body">
|
|
<div class="mastodon-meta">
|
|
<div class="mastodon-author">
|
|
<div class="mastodon-author-link">
|
|
<a href="${toot.account.url}" rel="nofollow">
|
|
<span>${toot.account.display_name}</span>
|
|
</a>
|
|
<br/>
|
|
<span class="mastodon-author-uid">(@${escapeHtml(toot.account.acct === 's' ? 's@sd.ai' : toot.account.acct)})</span>
|
|
</div>
|
|
</div>
|
|
<div class="toot-link">
|
|
<a class="date" href="${toot.uri}" rel="nofollow">
|
|
${toot.created_at.substring(0, 10)}
|
|
</a>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
<div class="mastodon-comment-content">
|
|
${toot.content}
|
|
<span class="tootlink">${toot.uri}</span>
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
const child = DOMPurify.sanitize(comment, {'RETURN_DOM_FRAGMENT': true});
|
|
const links = child.querySelectorAll('.tootlink');
|
|
for (const link of links) {
|
|
link.onclick = function() { return copyToClipboard(this); }
|
|
}
|
|
parentElement.appendChild(child);
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", async (event) => {
|
|
if (document.getElementsByClassName('gh-sidebar').length > 0) {
|
|
const element = document.getElementById('mastodon-comments-list')
|
|
const response = await fetch(`https://${MASTODON_HOST}/api/v1/accounts/${MASTODON_ACCOUNT_ID}/statuses?exclude_replies=true&exclude_reblogs=true`)
|
|
const content = await response.json()
|
|
return renderMastodonContent(content, element)
|
|
}
|
|
})
|