Added image attachments to replies that have them

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

@@ -132,7 +132,22 @@ function renderReplies(status, replies, replyContainer, template) {
     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
+    const contentEl = article.querySelector('.reply-content')
+    contentEl.innerHTML = reply.content
+    // TODO: images
+    if(reply.media_attachments && reply.media_attachments.length > 0)
+    for(let att in reply.media_attachments.filter(a => a.type == "image")) {
+      const attachment = reply.media_attachments[att];
+      const imgLink = document.createElement('a')
+      imgLink.href = attachment.remote_url
+      imgLink.target = "_blank"
+      const img = document.createElement('img')
+      img.src = attachment.preview_url
+      if(attachment.description) img.alt = img.title = attachment.description
+      imgLink.appendChild(img)
+      contentEl.appendChild(imgLink)
+    }
+
     
     article.querySelector('a.source').href = reply.url
     article.querySelector('.application').innerText = reply.application.name

weblog/B0. Template/styles.css.md

@@ -121,7 +121,9 @@ article p {
   width: 100%;
 }
 
-article p:has(img) {
+article p:not(.reply-content):has(img),
+a:has(img) {
+  display: block;
   text-align: center;
   width: 100%;
 }