Mastodon improvements
This commit is contained in:
parent
90e8a3b2a5
commit
54dd6d2a17
GPG Key ID:
38640971DA1E704E
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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
|
||||
|
||||
@ -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) {
|
||||
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')
|
||||
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)
|
||||
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)
|
||||
}
|
||||
})
|
||||
|
||||
25
default.hbs
25
default.hbs
@ -7,6 +7,10 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
{{!-- Preload main styles and scripts for better performance --}}
|
||||
<link rel="preload" as="style" href="{{asset "built/screen.css"}}">
|
||||
<link rel="preload" as="script" href="{{asset "built/source.js"}}">
|
||||
@ -14,27 +18,6 @@
|
||||
{{!-- Theme assets - use the {{asset}} helper to reference styles & scripts, this will take care of caching and cache-busting automatically --}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}">
|
||||
|
||||
{{!-- Custom background color --}}
|
||||
<style>
|
||||
:root {
|
||||
--background-color: {{@custom.site_background_color}}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
/* The script for calculating the color contrast has been taken from
|
||||
https://gomakethings.com/dynamically-changing-the-text-color-based-on-background-color-contrast-with-vanilla-js/ */
|
||||
var accentColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
|
||||
accentColor = accentColor.trim().slice(1);
|
||||
var r = parseInt(accentColor.substr(0, 2), 16);
|
||||
var g = parseInt(accentColor.substr(2, 2), 16);
|
||||
var b = parseInt(accentColor.substr(4, 2), 16);
|
||||
var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
|
||||
var textColor = (yiq >= 128) ? 'dark' : 'light';
|
||||
|
||||
document.documentElement.className = `has-${textColor}-text`;
|
||||
</script>
|
||||
|
||||
{{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings, it should always be the last tag before the closing head tag --}}
|
||||
{{ghost_head}}
|
||||
|
||||
|
||||
15
post.hbs
15
post.hbs
@ -50,6 +50,21 @@
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
<section class="gh-comments gh-canvas">
|
||||
<div id="mastodon-comments-header" style="display: none;">
|
||||
<h2>Comments</h2>
|
||||
<p>Comments powered by Mastodon. Reply to <a id="toot-link-top">this status</a> to comment.</p>
|
||||
<div class="tootlink-tip">
|
||||
<b>Tip:</b> paste this URL into the search bar of your Mastodon client:<br/>
|
||||
<span id="toot-link-clip" class="tootlink" onclick="copyElementTextToClipboard(this)"></span> (click to copy)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<noscript><p>You need JavaScript to view the comments.</p></noscript>
|
||||
<div id="mastodon-comments-list"></div>
|
||||
</section>
|
||||
|
||||
{{#if comments}}
|
||||
<div class="gh-comments gh-canvas">
|
||||
{{comments}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user