From 4b0bec877984f4d674b58de318a2e124a3e7bbaa Mon Sep 17 00:00:00 2001 From: Gordon Pedersen Date: Thu, 23 May 2024 17:07:39 +1000 Subject: [PATCH] Added replies to posts that have them --- fluent-animated.css | 1 - weblog/B0. Template/js/fediverse.js.md | 134 ++++++++++++++++++------- weblog/B0. Template/styles.css.md | 74 +++++++++++++- 3 files changed, 169 insertions(+), 40 deletions(-) delete mode 120000 fluent-animated.css diff --git a/fluent-animated.css b/fluent-animated.css deleted file mode 120000 index 909ad5d..0000000 --- a/fluent-animated.css +++ /dev/null @@ -1 +0,0 @@ -./weblog/B0. Template/fluent-animated.css.md \ No newline at end of file diff --git a/weblog/B0. Template/js/fediverse.js.md b/weblog/B0. Template/js/fediverse.js.md index 92b017d..7335f0f 100644 --- a/weblog/B0. Template/js/fediverse.js.md +++ b/weblog/B0. Template/js/fediverse.js.md @@ -119,48 +119,106 @@ class FediSocial extends HTMLElement { customElements.define('fedi-social', FediSocial) +function renderReplies(status, replies, replyContainer, template) { + const repliesToThis = replies.filter(d => d.in_reply_to_id == status.id); + + repliesToThis.forEach(reply => { + const article = template.content.cloneNode(true); + + article.querySelector('.avatar').src = reply.account.avatar + article.querySelector('a.name').href = reply.account.url + article.querySelector('.name').innerText = reply.account.display_name + article.querySelector('a.source').href = reply.url + article.querySelector('time.dt-published').datetime = reply.created_at + article.querySelector('time.dt-published').innerText = luxon.DateTime.fromISO(reply.created_at).toRelative() + + article.querySelector('.reply-content').innerHTML = reply.content + + article.querySelector('.application').innerText = reply.application.name + article.querySelector('.replies-count').innerText = reply.replies_count + article.querySelector('.favourites-count').innerText = reply.favourites_count + article.querySelector('.reblogs-count').innerText = reply.reblogs_count + + if(reply.replies_count > 0) { + const section = document.createElement('section') + section.classList.add('replies') + renderReplies(reply, replies, section, template) + article.querySelector('article').appendChild(section) + } + + replyContainer.appendChild(article) + }) +} + +async function loadContext(status, replyContainer, template) { + try{ + const res = await fetch(`https://monrepos.casa/api/v1/statuses/${status.id}/context`, { + headers: { + 'Authorization': 'Basic Ym90OjJuUmZhTGJ1c3cyaFhA' + } + }) + const json = await res.json() + + if(json && json.descendants && json.descendants.length > 0){ + const h1 = document.createElement('h1') + h1.innerText = "Replies" + replyContainer.appendChild(h1) + + renderReplies(status, json.descendants, replyContainer, template) + } + } + catch(ex){ + console.error(ex) + } +} + function fediverse() { const data = JSON.parse(localStorage.getItem('fedi-social') || '{}') - document.querySelectorAll("a.external_url:not([href='{external_url}'])").forEach(async (el) => { - if(data.template){ - const orig_href = el.href - let href = data.template.replace("{uri}", orig_href) - el.href = href + document.querySelectorAll("a.external_url:not([href='{external_url}'])").forEach(async (el) => { - try{ - const res = await fetch(`https://monrepos.casa/api/v2/search?type=statuses&q=${orig_href}`, { - headers: { - 'Authorization': 'Basic Ym90OjJuUmZhTGJ1c3cyaFhA' - } - }) - const json = await res.json() - const status = json?.statuses?.find(s => s.uri == orig_href) + const orig_href = el.href + let href = data.template ? data.template.replace("{uri}", orig_href) : orig_href + el.href = href - if(status) { - const innerHTML = ` - ${status?.replies_count} - ${status?.favourites_count} - ${status?.reblogs_count} - ` - - const span = document.createElement('span') - span.classList.add('fediverse') - span.innerHTML = innerHTML - - el.insertAdjacentElement('afterend', span) - el.remove() + try{ + const res = await fetch(`https://monrepos.casa/api/v2/search?type=statuses&q=${orig_href}`, { + headers: { + 'Authorization': 'Basic Ym90OjJuUmZhTGJ1c3cyaFhA' } + }) + const json = await res.json() + const status = json?.statuses?.find(s => s.uri == orig_href) + + if(status) { + const innerHTML = ` + ${status?.replies_count} + ${status?.favourites_count} + ${status?.reblogs_count} + ` + + const span = document.createElement('span') + span.classList.add('fedi-social') + span.innerHTML = innerHTML + + el.insertAdjacentElement('afterend', span) + el.remove() + el = span + + const replyContainer = document.getElementById('fedi-social-replies') + const template = document.getElementById('fedi-social-reply') + if(replyContainer && template && status.replies_count > 0) loadContext(status, replyContainer, template) } - catch(ex){ - console.error(ex) - } - } - else { - el.addEventListener('click', ev =>{ - ev.preventDefault() - window.scrollTo({ top: 0, behavior: 'smooth' }) - document.querySelector('fedi-social summary').click() - }) - } - }) + } + catch(ex){ + console.error(ex) + } + + if(!data.template) { + el.addEventListener('click', ev =>{ + ev.preventDefault() + window.scrollTo({ top: 0, behavior: 'smooth' }) + document.querySelector('fedi-social summary').click() + }) + } + }) } \ No newline at end of file diff --git a/weblog/B0. Template/styles.css.md b/weblog/B0. Template/styles.css.md index 8d85bde..cf70c6e 100644 --- a/weblog/B0. Template/styles.css.md +++ b/weblog/B0. Template/styles.css.md @@ -97,6 +97,8 @@ main.page { margin-top: -1rem; margin-right: -1rem; width: 100%; + margin-bottom: 0.5rem; + z-index: 0; } .post-info, @@ -204,9 +206,16 @@ footer { padding: 0 1em; } +.avatar { + max-width: 40px; + max-height: 40px; + border-radius: 50%; + vertical-align: bottom; + margin-right: 8px; +} header>.avatar { max-width: 60px; - border-radius: 50%; + max-height: 60px; } .header { @@ -286,6 +295,69 @@ header nav ul { padding: 0; } +section.replies { + padding-left:1em; + border-left: 5px solid var(--accent); +} +.replies .replies { + border-color: oklch(from var(--accent) l c calc(h + 90)); +} +.replies .replies .replies { + border-color: oklch(from var(--accent) l c calc(h + 180)); +} +.replies .replies .replies .replies { + border-color: oklch(from var(--accent) l c calc(h + 270)); +} + +.fedi-social-reply { + background:none; + border:none; + box-shadow:none; + margin:1em 0; + padding:0; + .reply-header { + width: 100%; + display:flex; + flex-direction: row; + .post-info{ + margin: 0; + margin-top:auto; + } + .author{ + width: 100%; + a.name{ + font-family: var(--font-head); + font-weight: var(--font-head-weight); + font-size: 1.5em; + line-height: 80%; + z-index: 2; + } + } + } + .reply-content { + margin:1.2em 0; + padding: 1em; + background-color: color-mix(in srgb, var(--accent) 25%, var(--background)); + /* background-image: var(--paper-texture-svg); */ + border-radius: 1em; + box-shadow: var(--shadow); + position: relative; + &::after { + content: ''; + position: absolute; + top: 0; + left: 1em; + width: 0; + height: 0; + border: 1em solid transparent; + border-bottom-color: color-mix(in srgb, var(--accent) 25%, var(--background)); + border-top: 0; + border-left: 0; + margin-top: -0.9em; + } + } +} + header nav li { display: inline-block; }