ghost/admin/app/templates/mentions.hbs
<section class="gh-canvas" {{scroll-top}}>
<GhCanvasHeader class="gh-canvas-header">
<div class="flex flex-column flex-grow-1">
{{#if this.post }}
<div class="gh-canvas-breadcrumb">
<LinkTo @route="posts">
Posts
</LinkTo>
{{svg-jar "arrow-right-small"}}
<LinkTo @route="posts.analytics" @model={{this.post.id}}>
Analytics
</LinkTo>
{{svg-jar "arrow-right-small"}}Mentions
</div>
{{else}}
<div class="gh-canvas-breadcrumb">
<LinkTo @route="dashboard">
Dashboard
</LinkTo>
{{svg-jar "arrow-right-small"}}Mentions
</div>
{{/if}}
<h2 class="gh-canvas-title gh-post-title" data-test-screen-title>
{{#if this.post }}
{{this.post.title}}
{{else}}
Mentions
{{/if}}
</h2>
{{#if (and this.post this.mentionsInfinityModel)}}
<div class="gh-post-analytics-meta">
<div class="gh-post-analytics-meta-text">
This post was mentioned in:
</div>
</div>
{{/if}}
</div>
</GhCanvasHeader>
<section class="gh-mentions-main-section">
<div class="gh-mentions-list {{unless this.mentionsInfinityModel "is-empty"}}">
{{#if this.mentionsInfinityModel}}
<div>
{{#each this.mentionsInfinityModel as |mention|}}
<a href="{{mention.source}}" class="gh-mention-card" rel="noreferrer noopener" target="_blank">
{{!-- TODO: link to the post analytics page of your post --}}
<div class="gh-mention-header">
{{#if mention.sourceFavicon}}
<img src="{{mention.sourceFavicon}}" alt="{{mention.sourceSiteTitle}}" class="gh-mention-icon">
{{/if}}
<div class="gh-mention-publisher">{{mention.sourceSiteTitle}}</div>
{{#if (gt mention.mentions.length 1) }}
<div class="gh-mention-link-icon">
{{svg-jar "twitter-link"}}
</div>
<div>
<span class="gh-mention-your-link has-multiple-links">{{mention.mentions.length}} links</span>
<EmberPopover @tooltipClass="popover" @spacing={{8}} @arrowClass="popover-arrow" @side="bottom">
<ul class="gh-mention-multiple-links">
{{#each mention.mentions as |submention|}}
<li class="gh-mention-multiple-links-link">{{if submention.resource submention.resource.name submention.target}}</li>
{{/each}}
</ul>
</EmberPopover>
</div>
{{else}}
{{#unless this.post }}
<div class="gh-mention-link-icon">
{{svg-jar "twitter-link"}}
</div>
<span class="gh-mention-your-link">{{if mention.resource mention.resource.name mention.target}}</span>
{{/unless}}
{{/if}}
<span class="gh-mention-timestamp" title={{gh-format-post-time mention.timestamp}}>{{moment-from-now mention.timestamp}}</span>
</div>
<div class="gh-mention-content">
<div class="gh-mention-source">
<h3 class="gh-mention-title">{{or mention.sourceTitle mention.sourceSiteTitle mention.source}}</h3>
{{#if mention.sourceExcerpt}}
<p class="gh-mention-description">{{mention.sourceExcerpt}}</p>
{{/if}}
<div class="gh-mention-metadata">
{{#if mention.sourceAuthor}}
<span class="gh-mention-author">{{mention.sourceAuthor}}</span>
{{/if}}
</div>
</div>
{{#if mention.sourceFeaturedImage}}
<div class="gh-mention-thumbnail">
<img src="{{mention.sourceFeaturedImage}}" alt="" role="presentation">
</div>
{{/if}}
</div>
</a>
{{/each}}
</div>
{{else}}
<div class="gh-mentions-list-cta">
{{svg-jar "email-love-letter" class="love-letter"}}
<h4>No mentions yet</h4>
<p>When other sites mention your posts, they'll appear here.</p>
</div>
{{/if}}
<GhInfinityLoader
@infinityModel={{this.mentionsInfinityModel}}
@scrollable=".gh-main"
@triggerOffset={{1000}} />
</div>
{{#if this.mentionsInfinityModel}}
<div class="gh-mentions-sidebar">
<div class="gh-mentions-explainer">
<img src="assets/img/mentions-background.png" alt="" role="presentation"/>
<h2>Introducing Mentions</h2>
<p>Whenever another person or site links to you, you’ll receive a notification in your dashboard to show you who’s talking about your content — and, when you link to someone else’s work, they’ll be notified, too.</p>
</div>
</div>
{{/if}}
</section>
</section>