Mastodon improvements

This commit is contained in:
2023-10-17 14:18:00 +01:00
parent 90e8a3b2a5
commit 54dd6d2a17
8 changed files with 117 additions and 54 deletions
+41 -10
View File
@@ -4,7 +4,7 @@ const MASTODON_HOST = 'social.sd.ai'
async function copyElementTextToClipboard(e)
{
const text = e.textContent
await navigator.clipboard.write(text)
await navigator.clipboard.writeText(text)
e.classList.add('tootClick');
setTimeout(() => {
@@ -21,14 +21,17 @@ function escapeHtml(unsafe) {
.replace(/'/g, "'");
}
function renderMastodonContent(toots, parentElement) {
function renderMastodonContent(toots, parentElement, showLink) {
parentElement.innerHTML = ''
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) {
if (toot.sensitive) {
continue
}
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" />`);
@@ -54,7 +57,7 @@ function renderMastodonContent(toots, parentElement) {
</div>
</div>
<div class="toot-link">
<a class="date" href="${toot.uri}" rel="nofollow">
<a class="date" href="${toot.uri}" rel="nofollow" target="_blank">
${toot.created_at.substring(0, 10)}
</a>
<br/>
@@ -62,24 +65,52 @@ function renderMastodonContent(toots, parentElement) {
</div>
<div class="mastodon-comment-content">
${toot.content}
<span class="tootlink">${toot.uri}</span>
<span class="tootlink" ${showLink ? '' : 'style="display: none;"'}>${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); }
link.onclick = function() { return copyElementTextToClipboard(this); }
}
parentElement.appendChild(child);
}
}
let MASTODON_POST_ID
document.addEventListener("DOMContentLoaded", async (event) => {
let url, isComments
const isBot = /bot|google|baidu|bing|msn|teoma|slurp|yandex/i
.test(navigator.userAgent)
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)
url = `https://${MASTODON_HOST}/api/v1/accounts/${MASTODON_ACCOUNT_ID}/statuses?exclude_replies=true&exclude_reblogs=true`
}
if (MASTODON_POST_ID && !isBot) {
url = `https://${MASTODON_HOST}/api/v1/statuses/${MASTODON_POST_ID}/context`
isComments = true
}
const element = document.getElementById('mastodon-comments-list')
if (url && element) {
const linkElement = document.getElementById('toot-link-top')
const clipElement = document.getElementById('toot-link-clip')
const tootUrl = `https://${MASTODON_HOST}/@s/${MASTODON_POST_ID}`
if (linkElement) {
linkElement.href = tootUrl
}
if (clipElement) {
clipElement.innerText = tootUrl
}
const response = await fetch(url)
let content = await response.json()
if (isComments) {
content = content.descendants
}
const header = document.getElementById('mastodon-comments-header')
if (header) {
header.style.display = ''
}
return renderMastodonContent(content, element, isComments)
}
})