Added image fallback and site icon/title to <GhPostBookmark> (#2401)

no issue

- adds `{{get-setting "key"}}` helper to make settings available in templates without needing a backing class
- updated `<GhPostBookmark>` component
  - if post feature image isn't present, fall back to site cover image
  - add site icon (if present) and title to the details line
  - removed author image

Co-authored-by: Sanne de Vries <sannedv@protonmail.com>

ghost/admin/app/components/gh-post-bookmark.hbs

@@ -1,19 +1,20 @@
 <div class="gh-post-bookmark-container">
     <div class="gh-post-bookmark">
-        {{#if @post.featureImage}}
+        {{#let (or @post.featureImage (get-setting "coverImage")) as |imageUrl|}}
-            <div class="gh-post-bookmark-image">
+            {{#if imageUrl}}
-                <img src={{@post.featureImage}} alt="" role="presentation" />
+                <div class="gh-post-bookmark-image">
-            </div>
+                    <img src={{imageUrl}} alt="" role="presentation" />
-        {{/if}}
+                </div>
+            {{/if}}
+        {{/let}}
         <div class="gh-post-bookmark-content">
             <div class="gh-post-bookmark-title">{{@post.title}}</div>
             <div class="gh-post-bookmark-text truncate">{{@post.excerpt}}</div>
             <div class="gh-post-bookmark-details">
-                {{#if @post.primaryAuthor.profileImage}}
+                {{#if (get-setting "icon")}}
-                    <div class="gh-post-bookmark-author-image">
+                    <div class="gh-post-bookmark-site-icon"><img src={{get-setting "icon"}} alt="" role="presentation" /></div>
-                        <img src={{@post.primaryAuthor.profileImage}} alt="" role="presentation" />
-                    </div>
                 {{/if}}
+                <div class="gh-post-bookmark-site-title">{{get-setting "title"}}</div>
                 <div class="gh-post-bookmark-authors">{{post-author-names @post}}</div>
             </div>
         </div>

ghost/admin/app/helpers/get-setting.js

@@ -0,0 +1,11 @@
+import Helper from '@ember/component/helper';
+import {get} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default class GetSetting extends Helper {
+    @service settings;
+
+    compute([key = '']) {
+        return get(this.settings, key);
+    }
+}

ghost/admin/app/styles/components/publishmenu.css

@@ -657,8 +657,8 @@
 }
 
 .gh-post-bookmark {
-    display: flex;
+    display: grid;
-    align-items: center;
+    grid-template-columns: 1fr minmax(0, 2fr);
     width: 100%;
     max-width: 640px;
     margin-top: 1.6rem;
@@ -681,33 +681,39 @@
 }
 
 .gh-post-bookmark-image {
-    max-width: 33%;
-    max-height: 152px;
     display: inherit;
 }
 
 .gh-post-bookmark-image img {
     width: 100%;
+    height: 100%;
+    max-height: 152px;
     object-fit: cover;
     border-radius: var(--border-radius) 0 0 var(--border-radius);
 }
 
 .gh-post-bookmark-content {
-    max-width: 67%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     padding: 2rem;
 }
 
 .gh-post-bookmark-title {
+    display: -webkit-box;
     margin-bottom: .4rem;
     color: var(--darkgrey);
     font-size: 1.5rem;
     font-weight: 600;
-    line-height: 1.4em;
+    line-height: 1.4em;line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;  
+    overflow: hidden;
 }
 
 .gh-post-bookmark-text {
     margin-bottom: 1.6rem;
-    color: var(--midgrey);
+    color: var(--middarkgrey);
     font-size: 1.4rem;
     font-weight: 400;
 }
@@ -715,15 +721,27 @@
 .gh-post-bookmark-details {
     display: flex;
     align-items: center;
-    color: var(--midgrey);
+    color: var(--middarkgrey);
     font-size: 1.4rem;
-    font-weight: 500;
+    font-weight: 400;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
+.gh-post-bookmark-site-title {
+    color: var(--darkgrey);
+    font-weight: 500;
+}
+
+.gh-post-bookmark-authors:before {
+    content: "•";
+    margin: 0 6px;
+    color: var(--darkgrey);
+}
+
+.gh-post-bookmark-site-icon,
 .gh-post-bookmark-author-image {
     width: 20px;
     height: 20px;
     margin-right: 6px;
-}
+}