121 lines
6.5 KiB
Handlebars
121 lines
6.5 KiB
Handlebars
<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>
|