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,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) => {
+  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
 
-      try{
+    const orig_href = el.href
-        const res = await fetch(`https://monrepos.casa/api/v2/search?type=statuses&q=${orig_href}`, {
+    let href = data.template ? data.template.replace("{uri}", orig_href) : orig_href
-          headers: {
+    el.href = href
-            'Authorization': 'Basic Ym90OjJuUmZhTGJ1c3cyaFhA'
-          }
-        })
-        const json = await res.json()
-        const status = json?.statuses?.find(s => s.uri == orig_href)
 
-        if(status) {
+    try{
-          const innerHTML = `
+      const res = await fetch(`https://monrepos.casa/api/v2/search?type=statuses&q=${orig_href}`, {
-            <a href='${href}' target="_blank"><i class="fa fa-comment"></i> ${status?.replies_count}</a>
+        headers: {
-            <a href='${href}' target="_blank"><i class="fa fa-star"></i> ${status?.favourites_count}</a>
+          'Authorization': 'Basic Ym90OjJuUmZhTGJ1c3cyaFhA'
-            <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()
         }
+      })
+      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)
+    catch(ex){
-      }
+      console.error(ex)
-		}
+    }
-		else {
+
-			el.addEventListener('click', ev =>{
+    if(!data.template) {
-				ev.preventDefault()
+      el.addEventListener('click', ev =>{
-				window.scrollTo({ top: 0, behavior: 'smooth' })
+        ev.preventDefault()
-				document.querySelector('fedi-social summary').click()
+        window.scrollTo({ top: 0, behavior: 'smooth' })
-			})
+        document.querySelector('fedi-social summary').click()
-		}
+      })
-	})
+    }
+  })
 }

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