simon/ghost-theme-sd.ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mastodon improvements

Browse Source
This commit is contained in:
simon
2023-10-17 14:18:00 +01:00
parent 90e8a3b2a5
commit 54dd6d2a17
8 changed files with 117 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/built/screen.css
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/built/screen.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/built/source.js
+10 -10
View File
File diff suppressed because one or more lines are too long
assets/built/source.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/css/screen.css
+40 -6
View File
@@ -1954,7 +1954,11 @@ Search LOGO Login Subscribe
.gh-about .gh-button {
margin-top: 32px;
}
.tootlink-tip {
font-size: 0.9em;
padding: 1em;
padding-top: 0.3em;
}
.mastodon-comment {
background-color: var(--background-color);
border-radius: var(--card-border-radius);
@@ -1980,7 +1984,7 @@ Search LOGO Login Subscribe
white-space: nowrap;
.mastodon-author-uid {
font-size: 80%;
color: var(--ghost-accent-color);
color: var(--color-secondary-text);
}
}
.toot-link {
@@ -1990,12 +1994,38 @@ Search LOGO Login Subscribe
}
.mastodon-comment-content {
padding-top: 10px;
.tootlink {
font-size: 50%;
}
}
.disabled {
color: var(--ghost-accent-color)
color: var(--color-secondary-text)
}
}
span.tootlink {
font-size: 0.7em;
font-family: monospace;
padding: 0.2em 0.4em;
cursor: pointer;
border: 1px solid var(--background-secondary)
}
a.date {
font-size: 0.9em;
color: var(--color-secondary-text)
}
span.tootlink::after {
content: "\f0c5";
font-family: "Font Awesome 6 Free";
font-weight: 900;
padding-left: 4px;
}
.tootClick {
animation: tootClickFrames .6s linear;
}
@keyframes tootClickFrames {
0% {
background-color: var(--background-secondary);
}
100% {
background-color: var(--background-color);
}
}
.mastodon-emoji {
@@ -2006,6 +2036,10 @@ Search LOGO Login Subscribe
.mastodon-comment-content p:first-child {
margin-top: 0;
}
#toot-link-top {
color: var(--ghost-accent-color);
text-decoration: underline;
}
/* 14. Post/page
assets/js/mastodon.js
+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)
}
})