From 8549c3a79a6aeeee3c17837f7cf2f66b5e538176 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 1 Apr 2019 20:48:41 -0700
Subject: [PATCH] fix: add placeholder icon for opengraph cards without images
 (#1131)

---
 bin/svgs.js                                   |  3 ++-
 src/routes/_components/status/StatusCard.html | 12 ++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/bin/svgs.js b/bin/svgs.js
index 4f322b6b..c7d8c642 100644
--- a/bin/svgs.js
+++ b/bin/svgs.js
@@ -46,5 +46,6 @@ module.exports = [
   { id: 'fa-search-plus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search-plus.svg' },
   { id: 'fa-share-square-o', src: 'src/thirdparty/font-awesome-svg-png/white/svg/share-square-o.svg' },
   { id: 'fa-flag', src: 'src/thirdparty/font-awesome-svg-png/white/svg/flag.svg' },
-  { id: 'fa-suitcase', src: 'src/thirdparty/font-awesome-svg-png/white/svg/suitcase.svg' }
+  { id: 'fa-suitcase', src: 'src/thirdparty/font-awesome-svg-png/white/svg/suitcase.svg' },
+  { id: 'fa-file-text', src: 'src/thirdparty/font-awesome-svg-png/white/svg/file-text.svg' }
 ]
diff --git a/src/routes/_components/status/StatusCard.html b/src/routes/_components/status/StatusCard.html
index fb5ff66b..8db759d9 100644
--- a/src/routes/_components/status/StatusCard.html
+++ b/src/routes/_components/status/StatusCard.html
@@ -2,10 +2,13 @@
     <strong class="card-title">
      {title}
     </strong>
-  {#if hasBody}
+  {#if description}
     <div class="card-content">
   {#if imageUrl}
     <LazyImage forceSize={true} height="50" width="50" src={imageUrl} ariaHidden={true} />
+  {:else}
+    <SvgIcon style="width: 30px; height: 30px; padding: 10px; fill: var(--action-button-deemphasized-fill-color);"
+             href="#fa-file-text" />
   {/if}
   {#if description}
     <span class="card-description">
@@ -73,10 +76,12 @@
 
 </style>
 <script>
-  import LazyImage from '../LazyImage'
+  import LazyImage from '../LazyImage.html'
+  import SvgIcon from '../SvgIcon.html'
 
   export default {
     components: {
+      SvgIcon,
       LazyImage
     },
     computed: {
@@ -84,8 +89,7 @@
       title: ({ card }) => card.title,
       url: ({ card }) => card.url,
       description: ({ card }) => card.description || card.provider_name,
-      imageUrl: ({ card }) => card.image,
-      hasBody: ({ description, imageUrl }) => description && imageUrl
+      imageUrl: ({ card }) => card.image
     }
   }
 </script>