feat: Add support for Open Graph cards (#1121)

* Add support for Open Graph cards

* use <strong> and aria-hidden on image to improve a11y

src/routes/_components/status/Status.html

@@ -25,6 +25,9 @@
   {#if content && (showContent || contentPreloaded)}
     <StatusContent {...params} shown={showContent}/>
   {/if}
+  {#if showCard }
+    <StatusCard {...params} />
+  {/if}
   {#if showMedia }
     <StatusMediaAttachments {...params} on:recalculateHeight />
   {/if}
@@ -54,6 +57,7 @@
         "sidebar spoiler-btn  spoiler-btn   spoiler-btn"
         "sidebar mentions     mentions      mentions"
         "sidebar content      content       content"
+        "sidebar card         card          card"
         "sidebar media-grp    media-grp     media-grp"
         "media   media        media         media"
         "....... toolbar      toolbar       toolbar"
@@ -87,6 +91,7 @@
       "spoiler-btn spoiler-btn"
       "mentions    mentions"
       "content     content"
+      "card        card"
       "media-grp   media-grp"
       "media       media"
       "details     details"
@@ -113,6 +118,7 @@
   import StatusAuthorHandle from './StatusAuthorHandle.html'
   import StatusRelativeDate from './StatusRelativeDate.html'
   import StatusDetails from './StatusDetails.html'
+  import StatusCard from './StatusCard.html'
   import StatusToolbar from './StatusToolbar.html'
   import StatusMediaAttachments from './StatusMediaAttachments.html'
   import StatusContent from './StatusContent.html'
@@ -169,6 +175,7 @@
       StatusToolbar,
       StatusMediaAttachments,
       StatusContent,
+      StatusCard,
       StatusSpoiler,
       StatusComposeBox,
       StatusMentions,
@@ -253,6 +260,12 @@
       ),
       spoilerShown: ({ $spoilersShown, uuid }) => !!$spoilersShown[uuid],
       replyShown: ({ $repliesShown, uuid }) => !!$repliesShown[uuid],
+      showCard: ({ originalStatus, isStatusInNotification, showMedia }) => (
+        !isStatusInNotification &&
+        !showMedia &&
+        originalStatus.card &&
+        originalStatus.card.title
+      ),
       showMedia: ({ originalStatus, isStatusInNotification }) => (
         !isStatusInNotification &&
         originalStatus.media_attachments &&

src/routes/_components/status/StatusCard.html

@@ -0,0 +1,91 @@
+<a href="{url}" class="status-card" target="_blank" rel="noopener noreferrer">
+    <strong class="card-title">
+     {title}
+    </strong>
+  {#if hasBody}
+    <div class="card-content">
+  {#if imageUrl}
+    <LazyImage forceSize={true} height="50" width="50" src={imageUrl} ariaHidden={true} />
+  {/if}
+  {#if description}
+    <span class="card-description">
+      {description}
+    </span>
+  {/if}
+  </div>
+  {/if}
+</a>
+<style>
+  .status-card {
+    grid-area: card;
+    display: flex;
+    flex-direction: column;
+    padding: 15px;
+
+    text-decoration: none;
+    color: inherit;
+
+    overflow: hidden;
+    max-width: calc(100vw - 40px);
+    margin: 10px 10px 10px 5px;
+
+    border: 1px solid var(--settings-list-item-border);
+    background: var(--settings-list-item-bg-hover);
+    border-radius: 6px;
+  }
+
+  .status-card:hover {
+    background: transparent;
+  }
+
+  .status-card :first-child {
+    flex-shrink: 0;
+  }
+
+  .card-content {
+    display: flex;
+    align-items: center;
+    margin-top: 5px;
+    opacity: 0.8;
+  }
+
+  .card-title {
+    font-weight: 500;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%;
+    display: inline-block;
+    opacity: 0.8;
+  }
+
+  .card-description {
+    font-size: small;
+    line-height: 1.4;
+    max-height: 5.6em; /* 4 * line-height */
+    overflow: hidden;
+  }
+
+  .card-description:not(:first-child) {
+    margin-left: 15px;
+  }
+
+
+</style>
+<script>
+  import LazyImage from '../LazyImage'
+
+  export default {
+    components: {
+      LazyImage
+    },
+    computed: {
+      title: ({ originalStatus }) => originalStatus.card.title,
+      url: ({ originalStatus }) => originalStatus.card.url,
+      description: ({ originalStatus }) => originalStatus.card.description,
+      imageUrl: ({ originalStatus }) => originalStatus.card.image,
+      hasBody: ({ description, imageUrl }) => description && imageUrl
+    }
+  }
+</script>