4 files changed, 74 insertions, 1 deletions
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')">