From c12f8220f445ea611b1220e09d4ecce0d41705f5 Mon Sep 17 00:00:00 2001
From: "Max L." <privat@maxlissowski.de>
Date: Sat, 25 Nov 2023 01:08:41 +0100
Subject: [PATCH 1/5] Improve font sizes

---
 styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles.css b/styles.css
index 3291ebf..463fdc9 100644
--- a/styles.css
+++ b/styles.css
@@ -51,7 +51,7 @@
 }
 
 .carousel .card-text {
-    font-size: 1.4em;
+    font-size: 1.6em;
     overflow: hidden;
     max-height: 60vh;
 }
@@ -208,7 +208,7 @@ body {
 
 .text-muted {
     color:#6c757d !important;
-    font-size: 1.2em;
+    font-size: 1em;
     text-align: right;
 }
 

From 8efbafef3cff1f71406c28e26a61acc53c16c339 Mon Sep 17 00:00:00 2001
From: "Max L." <privat@maxlissowski.de>
Date: Sat, 25 Nov 2023 01:13:05 +0100
Subject: [PATCH 2/5] Directly show new posts in carousel

---
 script.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/script.js b/script.js
index fa94ffb..afa5fca 100644
--- a/script.js
+++ b/script.js
@@ -341,9 +341,7 @@ $(document).ready(async function() {
             const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
             let updated = updateWall(newPosts.flat());
             if ( updated > 0 ) {
-                hideCarousel()
                 updateCarousel(slides, newPosts.flat());
-                setTimeout(async function() { showCarousel(); }, duration)
             }
         }, refresh);
     } else {

From 7acd5f4e3833d7d7a0d89f6dfaa4446b34775470 Mon Sep 17 00:00:00 2001
From: "Max L." <privat@maxlissowski.de>
Date: Sat, 25 Nov 2023 01:48:53 +0100
Subject: [PATCH 3/5] Improve long post handling

---
 script.js  | 2 +-
 styles.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/script.js b/script.js
index afa5fca..1b25f7b 100644
--- a/script.js
+++ b/script.js
@@ -194,7 +194,7 @@ const updateCarousel = function(slides, posts) {
                 </div>
                 <hr>
                 <div class="row align-items-center vertical-align-center">
-                    <div class="${post.media_attachments[0] ? `col-md-6` : `col-md-12`}"><div class="card-text" ${strip(postContent).length > 800 ? `style="font-size: 0.9em;"`: ``}>${postContent}</div></div>
+                    <div class="${post.media_attachments[0] ? `col-md-6` : `col-md-12`}"><div class="card-text" ${strip(postContent).length > 700 ? `style="font-size: ${strip(postContent).length > 1000 ? `0.5`:`0.9`}em;"`: ``}>${postContent}</div></div>
                     ${post.media_attachments[0] ? `<div class="col-md-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom" align="center"> </div>` : ''}
                 </div>
                 <hr>
diff --git a/styles.css b/styles.css
index 463fdc9..013fb4b 100644
--- a/styles.css
+++ b/styles.css
@@ -53,7 +53,7 @@
 .carousel .card-text {
     font-size: 1.6em;
     overflow: hidden;
-    max-height: 60vh;
+    max-height: 50vh;
 }
 
 .card {

From 004c92b3922ba35665a2f618bd93ec87ca1fa7e8 Mon Sep 17 00:00:00 2001
From: "Max L." <privat@maxlissowski.de>
Date: Sat, 25 Nov 2023 02:18:39 +0100
Subject: [PATCH 4/5] Add emoji support

---
 script.js  | 16 ++++++++++++----
 styles.css |  4 ++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/script.js b/script.js
index 1b25f7b..6009dcb 100644
--- a/script.js
+++ b/script.js
@@ -104,6 +104,14 @@ const updateTimesOnPage = function() {
     });
 };
 
+// replace certain emojies in some text with images
+const replaceEmojies = (text, emojis) => {
+    emojis.forEach(emoji => {
+        text = text.replaceAll(`:${emoji.shortcode}:`, `<img class="emoji" src="${emoji.static_url}">`);
+    });
+    return text;
+};
+
 // displayPost creates and displays a post
 const displayPost = function(post) {
     if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return 0;
@@ -115,10 +123,10 @@ const displayPost = function(post) {
             <div class="card m-2 p-2">
                 <div class="d-flex align-items-center mb-2">
                     <img src="${post.account.avatar}" class="avatar-img rounded-circle mr-2">
-                    <p class="m-0">${DOMPurify.sanitize(post.account.display_name)}  <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
+                    <p class="m-0">${replaceEmojies(DOMPurify.sanitize(post.account.display_name), post.account.emojis)}  <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
                 </div>
                 ${post.media_attachments[0] ? `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">` : ''}
-                <p class="card-text">${DOMPurify.sanitize(post.content)}</p>
+                <p class="card-text">${replaceEmojies(DOMPurify.sanitize(post.content), post.emojis)}</p>
                 ${post.spoiler_text ? `<p class="card-text text-muted spoiler">${DOMPurify.sanitize(post.spoiler_text)}</p>` : ''}
                 <p class="card-text text-right"><small class="text-muted"><a class="time" href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a></small></p>
             </div>
@@ -185,12 +193,12 @@ const updateCarousel = function(slides, posts) {
         else {
             newHTML += `<div class="carousel-item" data-interval="${duration}" data-pause="false">`;
         }
-        const postContent = DOMPurify.sanitize(post.content);
+        const postContent = replaceEmojies(DOMPurify.sanitize(post.content), post.emojis);
         newHTML += `
             <div class="card-big">
                 <div class="d-flex align-items-center mb-4">
                     <img src="${post.account.avatar}" class="avatar-img-big rounded-circle mr-4">
-                    <p class="avatar-name">${DOMPurify.sanitize(post.account.display_name)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
+                    <p class="avatar-name">${replaceEmojies(DOMPurify.sanitize(post.account.display_name), post.account.emojis)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
                 </div>
                 <hr>
                 <div class="row align-items-center vertical-align-center">
diff --git a/styles.css b/styles.css
index 013fb4b..34f152b 100644
--- a/styles.css
+++ b/styles.css
@@ -223,4 +223,8 @@ body {
 
 .footer a {
     color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.emoji {
+    height: 1em;
 }
\ No newline at end of file

From ec902d12f2b1671f06dc2ad9ecb1245ff0f9aa5d Mon Sep 17 00:00:00 2001
From: "Max L." <privat@maxlissowski.de>
Date: Sat, 25 Nov 2023 02:21:55 +0100
Subject: [PATCH 5/5] Fix extra cards display duration

---
 script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/script.js b/script.js
index 6009dcb..af3bfbc 100644
--- a/script.js
+++ b/script.js
@@ -218,7 +218,7 @@ const updateCarousel = function(slides, posts) {
         newHTML += '</div>';
     }
     for( let i = 0; i < extraCards.length; i++ ) {
-        newHTML += `<div class="carousel-item" data-mdb-interval="${duration * 2}" data-mdb-pause="false">
+        newHTML += `<div class="carousel-item" data-interval="${duration * 2}" data-pause="false">
         <div className="card-big">
             <div class="d-flex align-items-center mb-4">
                 ${extraCards[i]}