Added replies to posts that have them
All checks were successful
/ weblog.lol (push) Successful in 12s
All checks were successful
/ weblog.lol (push) Successful in 12s
This commit is contained in:
parent
f5ad3727d2
commit
4b0bec8779
3 changed files with 169 additions and 40 deletions
|
|
@ -1 +0,0 @@
|
|||
./weblog/B0. Template/fluent-animated.css.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 = `
|
||||
<a href='${href}' target="_blank"><i class="fa fa-comment"></i> ${status?.replies_count}</a>
|
||||
<a href='${href}' target="_blank"><i class="fa fa-star"></i> ${status?.favourites_count}</a>
|
||||
<a href='${href}' target="_blank"><i class="fa fa-retweet"></i> ${status?.reblogs_count}</a>
|
||||
`
|
||||
|
||||
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 = `
|
||||
<a href='${href}' target="_blank"><i class="fa fa-comment"></i> ${status?.replies_count}</a>
|
||||
<a href='${href}' target="_blank"><i class="fa fa-star"></i> ${status?.favourites_count}</a>
|
||||
<a href='${href}' target="_blank"><i class="fa fa-retweet"></i> ${status?.reblogs_count}</a>
|
||||
`
|
||||
|
||||
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()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue