Render cards

public/style.css

@@ -419,7 +419,6 @@ video {
 .profile-banner-color {
     width: 100%;
     padding-bottom: 25%;
-    margin-bottom: 8px;
 }
 
 .profile-card {
@@ -882,6 +881,131 @@ video {
     margin: 0;
 }
 
+.card {
+    margin: 5px 0;
+}
+
+.card-container {
+    border-radius: 10px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #404040;
+    background-color: #121212;
+    overflow: hidden;
+    color: inherit;
+    display: flex;
+    text-decoration: none !important;
+}
+
+.card-container:hover {
+    border-color: #808080;
+}
+
+.large .card-container {
+    display: block;
+}
+
+.card-content {
+    padding: 0.5em;
+}
+
+.card-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: bold;
+    font-size: 1.15em;
+}
+
+.card-description {
+    margin: 0.3em 0;
+}
+
+.card-destination {
+    color: hsla(240,1%,73%,.9);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+}
+
+.card-image-container {
+    width: 98px;
+    flex-shrink: 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.large .card-image-container {
+    width: unset;
+}
+
+.card-image-container:before {
+    content: "";
+    display: block;
+    padding-top: 100%;
+}
+
+.large .card-image-container:before {
+    display: none;
+}
+
+.card-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: white;
+}
+
+.large .card-image {
+    position: unset;
+    border-style: solid;
+    border-color: #404040;
+    border-width: 0;
+    border-bottom-width: 1px;
+}
+
+.card-image img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+}
+
+.card-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.8;
+}
+
+.card-overlay-circle {
+    border-radius: 50%;
+    background-color: #404040;
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    display: flex;
+    border-width: 5px;
+    border-color: #d8574d;
+    border-style: solid;
+}
+
+.card-overlay-triangle {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 12px 0 12px 17px;
+    border-color: transparent transparent transparent #d8574d;
+    margin-left: 14px;
+}
+
 .poll-meter {
     overflow: hidden;
     position: relative;

src/api.nim

@@ -179,7 +179,6 @@ proc getCard*(tweet: Tweet) {.async.} =
   if html == nil: return
 
   parseCard(get(tweet.card), html)
-  # echo tweet.card.get()
 
 proc getCards*(thread: Thread) {.async.} =
   if thread == nil: return

src/views/tweet.nim

@@ -77,6 +77,27 @@ proc renderPoll(poll: Poll): VNode =
     span(class="poll-info"):
       text $poll.votes & " votes • " & poll.status
 
+proc renderCard(card: Card): VNode =
+  const largeCards = {summaryLarge, liveEvent, promoWebsite}
+  let large = if card.kind in largeCards: " large" else: ""
+
+  buildHtml(tdiv(class=("card" & large))):
+    a(class="card-container", href=card.url):
+      if card.image.len > 0:
+        tdiv(class="card-image-container"):
+          tdiv(class="card-image"):
+            img(src=card.image.getSigUrl("pic"))
+            if card.kind == player:
+              tdiv(class="card-overlay"):
+                tdiv(class="card-overlay-circle"):
+                  span(class="card-overlay-triangle")
+
+      tdiv(class="card-content-container"):
+        tdiv(class="card-content"):
+          h2(class="card-title"): text card.title
+          p(class="card-description"): text card.text
+          span(class="card-destination"): text card.dest
+
 proc renderStats(stats: TweetStats): VNode =
   buildHtml(tdiv(class="tweet-stats")):
     span(class="tweet-stat"): text "💬 " & $stats.replies
@@ -168,6 +189,8 @@ proc renderTweet*(tweet: Tweet; class=""; index=0; total=(-1); last=false): VNod
           renderGif(tweet.gif.get())
         elif tweet.poll.isSome:
           renderPoll(tweet.poll.get())
+        elif tweet.card.isSome:
+          renderCard(tweet.card.get())
 
         renderStats(tweet.stats)