From 6c3c1eca309b05501a6eab4575c9d85bd50bb4ab Mon Sep 17 00:00:00 2001
From: Dekkia <github@dekkia.de>
Date: Mon, 15 Apr 2024 19:58:30 +0200
Subject: [PATCH] added support for cards (closes #13)

---
 thread/css/style.css | 17 +++++++++++++++++
 thread/js/main.js    | 24 ++++++++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/thread/css/style.css b/thread/css/style.css
index d0c0652..1f086a8 100644
--- a/thread/css/style.css
+++ b/thread/css/style.css
@@ -110,6 +110,23 @@ section:hover {
     color: inherit;
 }
 
+.cardWrapper,
+.cardWrapper:visited {
+    color: inherit;
+    overflow: hidden;
+    display: block;
+    margin: 2vw;
+    padding: 1vw;
+    border-radius: 2vh;
+    text-decoration: inherit;
+    background-color: var(--accent-bg);
+}
+
+.cardWrapper:hover,
+.cardWrapper:visited:hover {
+    background-color: var(--bg);
+}
+
 #pageFooter {
     grid-row: 3;
 }
\ No newline at end of file
diff --git a/thread/js/main.js b/thread/js/main.js
index dc453d2..768e7e3 100644
--- a/thread/js/main.js
+++ b/thread/js/main.js
@@ -146,6 +146,30 @@ const threadUnroll = {
                     });
                 }
 
+                if (status.card && status.card.image) {
+                    var cardWrapper = document.createElement("a");
+                    cardWrapper.className = "cardWrapper";
+                    cardWrapper.href = status.card.url;
+
+                    var cardImage = document.createElement("img");
+                    cardImage.src = status.card.image;
+                    cardWrapper.appendChild(cardImage);
+
+                    var cardImageSubline = document.createElement("p");
+                    cardImageSubline.innerHTML = status.card.provider_name + " - " + new Date(status.card.published_at).toLocaleString();;
+                    cardWrapper.appendChild(cardImageSubline);
+
+                    var cardHeadline = document.createElement("h4");
+                    cardHeadline.innerHTML = status.card.title;
+                    cardWrapper.appendChild(cardHeadline);
+
+                    var cardAutor = document.createElement("p");
+                    cardAutor.innerHTML = status.card.author_name;
+                    cardWrapper.appendChild(cardAutor);
+
+                    statusBox.appendChild(cardWrapper);
+                }
+
                 mb.appendChild(statusBoxWrapper);
                 postCnt++;
             }