Added replies to posts that have them

fluent-animated.css

@@ -1 +0,0 @@
-./weblog/B0. Template/fluent-animated.css.md

weblog/B0. Template/js/fediverse.js.md

@@ -119,12 +119,65 @@ 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)
+    let href = data.template ? data.template.replace("{uri}", orig_href) : orig_href
     el.href = href
 
     try{
@@ -144,18 +197,23 @@ function fediverse() {
         `
 
         const span = document.createElement('span')
-          span.classList.add('fediverse')
+        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 {
+    if(!data.template) {
       el.addEventListener('click', ev =>{
         ev.preventDefault()
         window.scrollTo({ top: 0, behavior: 'smooth' })

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;
 }