From b27ec058cae582e8b9ad9e56be0e9be57f865886 Mon Sep 17 00:00:00 2001
From: William Pitcock <nenolod@dereferenced.org>
Date: Sun, 27 Jan 2019 12:56:07 +0000
Subject: [PATCH 1/4] entity normalizer: add support for opengraph cards

---
 src/services/entity_normalizer/entity_normalizer.service.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index e69547b6..deffa537 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -215,6 +215,7 @@ export const parseStatus = (data) => {
 
   output.id = String(data.id)
   output.visibility = data.visibility
+  output.card = data.card
   output.created_at = new Date(data.created_at)
 
   // Converting to string, the right way.

From 0924907c64376249433e2fd16278662181c9e856 Mon Sep 17 00:00:00 2001
From: William Pitcock <nenolod@dereferenced.org>
Date: Sun, 27 Jan 2019 13:47:30 +0000
Subject: [PATCH 2/4] add link-preview component

---
 src/components/link-preview/link-preview.js  |  8 +++
 src/components/link-preview/link-preview.vue | 59 ++++++++++++++++++++
 src/components/status/status.js              |  4 +-
 src/components/status/status.vue             |  4 ++
 4 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 src/components/link-preview/link-preview.js
 create mode 100644 src/components/link-preview/link-preview.vue

diff --git a/src/components/link-preview/link-preview.js b/src/components/link-preview/link-preview.js
new file mode 100644
index 00000000..13264afb
--- /dev/null
+++ b/src/components/link-preview/link-preview.js
@@ -0,0 +1,8 @@
+const LinkPreview = {
+  name: 'LinkPreview',
+  props: [
+    'card'
+  ]
+}
+
+export default LinkPreview
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
new file mode 100644
index 00000000..49de654f
--- /dev/null
+++ b/src/components/link-preview/link-preview.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <a class="link-preview-card" :href="card.url" target="_blank" rel="noopener">
+      <div class="image">
+        <div :style="{ backgroundImage: 'url(' + card.image + ')' }"></div>
+      </div>
+      <div class="content">
+        <strong>{{ card.title }}</strong>
+        <p>{{ card.description }}</p>
+        <span class="host">{{ card.provider_name }}</span>
+      </div>
+    </a>
+  </div>
+</template>
+
+<script src="./link-preview.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.link-preview-card {
+  display: flex !important;
+  flex-direction: row;
+  cursor: pointer;
+  margin: 0.5em 0.7em 0.6em 0.0em;
+
+  .image {
+    flex: 0 0 100px;
+    position: relative;
+  }
+
+  .image > div {
+    display: block;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    background-size: cover;
+    background-position: center center;
+  }
+
+  .content {
+    padding: 1em;
+    flex: 1;
+
+    .host {
+      font-size: 90%;
+    }
+  }
+
+  color: $fallback--text;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: $fallback--attachmentRadius;
+  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+}
+</style>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index b14a74ec..681d0373 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -5,6 +5,7 @@ import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
 import StillImage from '../still-image/still-image.vue'
+import LinkPreview from '../link-preview/link-preview.vue'
 import { filter, find } from 'lodash'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -220,7 +221,8 @@ const Status = {
     DeleteButton,
     PostStatusForm,
     UserCardContent,
-    StillImage
+    StillImage,
+    LinkPreview
   },
   methods: {
     visibilityIcon (visibility) {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 5c956467..e959544b 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -98,6 +98,10 @@
             </attachment>
           </div>
 
+          <div v-if='status.card && !hideSubjectStatus' class='link-preview media-body'>
+            <link-preview :card="status.card"></link-preview>
+          </div>
+
           <div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
             <div v-if="loggedIn">
               <a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')">

From 2b86f6e883878bcec624d4a99aadac81d87f2826 Mon Sep 17 00:00:00 2001
From: William Pitcock <nenolod@dereferenced.org>
Date: Sun, 27 Jan 2019 13:57:37 +0000
Subject: [PATCH 3/4] status: only show link preview in main post view

---
 src/components/status/status.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e959544b..aa37ad51 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -98,7 +98,7 @@
             </attachment>
           </div>
 
-          <div v-if='status.card && !hideSubjectStatus' class='link-preview media-body'>
+          <div v-if='status.card && !hideSubjectStatus && !noHeading' class='link-preview media-body'>
             <link-preview :card="status.card"></link-preview>
           </div>
 

From 96c36af73168913768818f5293358f460e30c24f Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Sun, 27 Jan 2019 22:33:36 +0200
Subject: [PATCH 4/4] refactor the FE parts

---
 src/components/link-preview/link-preview.js  | 17 ++++-
 src/components/link-preview/link-preview.vue | 76 ++++++++++++--------
 src/components/status/status.vue             | 18 +++--
 3 files changed, 74 insertions(+), 37 deletions(-)

diff --git a/src/components/link-preview/link-preview.js b/src/components/link-preview/link-preview.js
index 13264afb..2f6da55e 100644
--- a/src/components/link-preview/link-preview.js
+++ b/src/components/link-preview/link-preview.js
@@ -1,8 +1,21 @@
 const LinkPreview = {
   name: 'LinkPreview',
   props: [
-    'card'
-  ]
+    'card',
+    'size',
+    'nsfw'
+  ],
+  computed: {
+    useImage () {
+      // Currently BE shoudn't give cards if tagged NSFW, this is a bit paranoid
+      // as it makes sure to hide the image if somehow NSFW tagged preview can
+      // exist.
+      return this.card.image && !this.nsfw && this.size !== 'hide'
+    },
+    useDescription () {
+      return this.card.description && /\S/.test(this.card.description)
+    }
+  }
 }
 
 export default LinkPreview
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 49de654f..9b3f2550 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <a class="link-preview-card" :href="card.url" target="_blank" rel="noopener">
-      <div class="image">
-        <div :style="{ backgroundImage: 'url(' + card.image + ')' }"></div>
+      <div class="card-image" :class="{ 'small-image': size === 'small' }" v-if="useImage">
+        <img :src="card.image"></img>
       </div>
-      <div class="content">
-        <strong>{{ card.title }}</strong>
-        <p>{{ card.description }}</p>
-        <span class="host">{{ card.provider_name }}</span>
+      <div class="card-content">
+        <span class="card-host faint">{{ card.provider_name }}</span>
+        <h4 class="card-title">{{ card.title }}</h4>
+        <p class="card-description" v-if="useDescription">{{ card.description }}</p>
       </div>
     </a>
   </div>
@@ -19,36 +19,56 @@
 @import '../../_variables.scss';
 
 .link-preview-card {
-  display: flex !important;
+  display: flex;
   flex-direction: row;
   cursor: pointer;
-  margin: 0.5em 0.7em 0.6em 0.0em;
+  overflow: hidden;
 
-  .image {
-    flex: 0 0 100px;
-    position: relative;
-  }
+  // TODO: clean up the random margins in attachments, this makes preview line
+  // up with attachments...
+  margin-right: 0.7em;
 
-  .image > div {
-    display: block;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    background-size: cover;
-    background-position: center center;
-  }
-
-  .content {
-    padding: 1em;
-    flex: 1;
-
-    .host {
-      font-size: 90%;
+  .card-image {
+    flex-shrink: 0;
+    width: 120px;
+    max-width: 25%;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: $fallback--attachmentRadius;
+      border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
     }
   }
 
+  .small-image {
+    width: 80px;
+  }
+
+  .card-content {
+    max-height: 100%;
+    margin: 0.5em;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card-host {
+    font-size: 12px;
+  }
+
+  .card-description {
+    margin: 0.5em 0 0 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    line-height: 1.2em;
+    // cap description at 3 lines, the 1px is to clean up some stray pixels
+    // TODO: fancier fade-out at the bottom to show off that it's too long?
+    max-height: calc(1.2em * 3 - 1px);
+  }
+
   color: $fallback--text;
+  color: var(--text, $fallback--text);
   border-style: solid;
   border-width: 1px;
   border-radius: $fallback--attachmentRadius;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index aa37ad51..d88428c7 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -98,8 +98,8 @@
             </attachment>
           </div>
 
-          <div v-if='status.card && !hideSubjectStatus && !noHeading' class='link-preview media-body'>
-            <link-preview :card="status.card"></link-preview>
+          <div v-if="status.card && !hideSubjectStatus && !noHeading" class="link-preview media-body">
+            <link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" />
           </div>
 
           <div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
@@ -225,6 +225,11 @@
     vertical-align: bottom;
     flex-basis: 100%;
 
+    a {
+      display: inline-block;
+      word-break: break-all;
+    }
+
     small {
       font-weight: lighter;
     }
@@ -300,11 +305,6 @@
     }
   }
 
-  a {
-    display: inline-block;
-    word-break: break-all;
-  }
-
   .tall-status {
     position: relative;
     height: 220px;
@@ -313,6 +313,8 @@
   }
 
   .tall-status-hider {
+    display: inline-block;
+    word-break: break-all;
     position: absolute;
     height: 70px;
     margin-top: 150px;
@@ -330,6 +332,8 @@
   .status-unhider, .cw-status-hider {
     width: 100%;
     text-align: center;
+    display: inline-block;
+    word-break: break-all;
   }
 
   .status-content {