From 140284233d92618213fa6ad4dd1a41c66817a352 Mon Sep 17 00:00:00 2001
From: Alec Murphy <alec@checksum.fail>
Date: Sat, 1 Mar 2025 20:18:35 -0500
Subject: [PATCH] Slon/Static/html: Display images in user statuses

---
 Slon/Static/css/main.css   |  3 +++
 Slon/Static/html/user.html |  4 ++--
 Slon/Static/js/statuses.js | 10 ++++++++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/Slon/Static/css/main.css b/Slon/Static/css/main.css
index e16df8f..03edf4b 100644
--- a/Slon/Static/css/main.css
+++ b/Slon/Static/css/main.css
@@ -24,6 +24,9 @@ a {
     color: #800;
     text-decoration-thickness: 2px;
 }
+.img-media {
+    max-width: 640px;
+}
 .page-container {
     width: 800px;
     margin: auto;
diff --git a/Slon/Static/html/user.html b/Slon/Static/html/user.html
index bab12fa..061b048 100644
--- a/Slon/Static/html/user.html
+++ b/Slon/Static/html/user.html
@@ -1,6 +1,6 @@
 <!doctypehtml>
     <title></title>
-    <link href=https://error.checksum.fail/css/12391289038129038.css rel=stylesheet>
+    <link href=https://error.checksum.fail/css/9271390173902173.css rel=stylesheet>
     <link href=https://linusg.github.io/serenityos-emoji-font/SerenityOS-Emoji.css rel=stylesheet>
     <style>
         * {
@@ -26,4 +26,4 @@
     <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
     <script>dayjs.extend(window.dayjs_plugin_relativeTime)</script>    
     <script src=https://error.checksum.fail/js/header.js></script>
-    <script src=https://error.checksum.fail/js/12389290138092193.js></script>
\ No newline at end of file
+    <script src=https://error.checksum.fail/js/29137902173921730271.js></script>
\ No newline at end of file
diff --git a/Slon/Static/js/statuses.js b/Slon/Static/js/statuses.js
index 0f97c7a..5903cdb 100644
--- a/Slon/Static/js/statuses.js
+++ b/Slon/Static/js/statuses.js
@@ -82,7 +82,13 @@ function updateStatuses(user, statuses) {
             content_html += "<span title=Public>&#127758;</span> ";
         }
         content_html += "<span class=status-timestamp>" + smolDate(dayjs(status["created_at"]).fromNow()) + "</span><br></div>";
-        content_html += "<div class=status-text>" + status["content"] + "</div>";
+        content_html += "<div class=status-text>" + status["content"];
+        if (!!status["media_attachments"] && status["media_attachments"].length) {
+            for (var x = 0; x < status["media_attachments"].length; x++) {
+                content_html += "<img class=img-media src=\"" + status["media_attachments"][x]["url"] + "\"></div>";
+            }
+        }
+        content_html += "</div>";
         content_html += "<span class=status-counts>&#128172; " + status["replies_count"] + " &#128257; " + status["reblogs_count"] + " &#11088; " + status["favourites_count"] + "</span>";
         content_html += "<div class=status-footer>via <a href=" + status["application"]["website"] + ">" + status["application"]["name"] + "</a></div>";
         content.innerHTML = content_html;
@@ -119,7 +125,7 @@ function updateStatuses(user, statuses) {
     }
     pageContent.innerHTML = "";
     pageContent.appendChild(elements);
-    updateStatusContainers();
+    window.onload = updateStatusContainers();
 }
 
 function getStatuses(user) {