mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-24 11:22:19 +03:00
57fcfe76d8
refs https://github.com/TryGhost/Team/issues/2845 We needed to update the html out of the cards to include images for light and dark mode, and then we've used CSS to show/hide them Co-authored-by: Fabien "egg" O'Carroll <fabien@allou.is>
270 lines
20 KiB
Handlebars
270 lines
20 KiB
Handlebars
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta name="viewport" content="width=device-width" />
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
<!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
|
||
<title>{{post.title}}</title>
|
||
{{>styles}}
|
||
</head>
|
||
<body>
|
||
<span class="preheader">{{preheader}}</span>
|
||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" width="100%">
|
||
<!-- Outlook doesn't respect max-width so we need an extra centered table -->
|
||
<!--[if mso]>
|
||
<tr>
|
||
<td>
|
||
<center>
|
||
<table border="0" cellpadding="0" cellspacing="0" width="640">
|
||
<![endif]-->
|
||
<tr>
|
||
<td> </td>
|
||
<td class="container">
|
||
<div class="content">
|
||
<!-- START CENTERED WHITE CONTAINER -->
|
||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main" width="100%">
|
||
|
||
<!-- START MAIN CONTENT AREA -->
|
||
<tr>
|
||
<td class="wrapper">
|
||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
|
||
{{#if headerImage}}
|
||
<tr class="header-image-row">
|
||
<td class="header-image" width="100%" align="center">
|
||
<img
|
||
src="{{headerImage}}"
|
||
{{#if headerImageWidth}}
|
||
width="{{headerImageWidth}}"
|
||
{{/if}}
|
||
>
|
||
</td>
|
||
</tr>
|
||
{{/if}}
|
||
|
||
{{#if (or showHeaderIcon showHeaderTitle showHeaderName) }}
|
||
<tr>
|
||
<td class="{{#if (and newsletter.showPostTitleSection showHeaderTitle) }}site-info-bordered{{else}}site-info{{/if}}" width="100%" align="center">
|
||
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
|
||
{{#if (and showHeaderIcon site.iconUrl) }}
|
||
<tr>
|
||
<td class="site-icon"><a href="{{site.url}}"><img src="{{site.iconUrl}}" alt="{{site.title}}" border="0"></a></td>
|
||
</tr>
|
||
{{/if}}
|
||
{{#if showHeaderTitle }}
|
||
<tr>
|
||
<td class="site-url {{#unless showHeaderName}}site-url-bottom-padding{{/unless}}"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-title">{{site.title}}</a></div></td>
|
||
</tr>
|
||
{{/if}}
|
||
{{#if (and showHeaderName showHeaderTitle) }}
|
||
<tr>
|
||
<td class="site-url site-url-bottom-padding"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-subtitle">{{newsletter.name}}</a></div></td>
|
||
</tr>
|
||
{{/if}}
|
||
{{#if (and showHeaderName (not showHeaderTitle)) }}
|
||
<tr>
|
||
<td class="site-url site-url-bottom-padding"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-title">{{newsletter.name}}</a></div></td>
|
||
</tr>
|
||
{{/if}}
|
||
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
{{/if}}
|
||
|
||
{{#if newsletter.showPostTitleSection}}
|
||
<tr>
|
||
<td class="{{classes.title}}">
|
||
<a href="{{post.url}}" class="{{classes.titleLink}}">{{post.title}}</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="width: 100%">
|
||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-bottom: 48px;">
|
||
<tr>
|
||
<td height="20" class="{{classes.meta}}" style="padding: 0;">
|
||
By {{post.authors}} • <span class="post-meta-date">{{post.publishedAt}} </span>
|
||
{{#if newsletter.showCommentCta}}
|
||
<a href="{{post.commentUrl}}" class="comment-link" valign="middle">
|
||
{{#if backgroundIsDark}}
|
||
• <img src="https://static.ghost.org/v5.0.0/images/comment-icon-darkmode.png" border="0" width="16" height="16" alt="Comment">
|
||
{{else}}
|
||
• <img src="https://static.ghost.org/v5.0.0/images/comment-icon.png" border="0" width="16" height="16" alt="Comment">
|
||
{{/if}}
|
||
</a>
|
||
{{/if}}
|
||
</td>
|
||
<td class="{{classes.meta}} view-online desktop">
|
||
<a href="{{post.url}}" class="view-online-link">View in browser</a>
|
||
</td>
|
||
</tr>
|
||
<tr class="{{classes.meta}} view-online-mobile">
|
||
<td height="20" class="view-online">
|
||
<a href="{{post.url}}" class="view-online-link">View in browser</a>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
{{/if}}
|
||
|
||
{{#if showFeatureImage }}
|
||
<tr class="feature-image-row">
|
||
<td class="feature-image
|
||
{{#if post.feature_image_caption }}
|
||
feature-image-with-caption
|
||
{{/if}}
|
||
"><img
|
||
src="{{post.feature_image}}"
|
||
{{#if post.feature_image_width }}
|
||
width="{{post.feature_image_width}}"
|
||
{{/if}}
|
||
{{#if post.feature_image_alt }}
|
||
alt="{{post.feature_image_alt}}"
|
||
{{/if}}
|
||
></td>
|
||
</tr>
|
||
{{#if post.feature_image_caption }}
|
||
<tr>
|
||
<td class="feature-image-caption" align="center">{{{post.feature_image_caption}}}</td>
|
||
</tr>
|
||
{{/if}}
|
||
{{/if}}
|
||
<tr class="post-content-row">
|
||
<td class="{{classes.body}}">
|
||
<!-- POST CONTENT START -->
|
||
{{{html}}}
|
||
<!-- POST CONTENT END -->
|
||
|
||
{{#if paywall}}
|
||
{{>paywall}}
|
||
{{/if}}
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- END MAIN CONTENT AREA -->
|
||
|
||
{{#if (or feedbackButtons newsletter.showCommentCta) }}
|
||
<tr>
|
||
<td dir="ltr" width="100%" style="background-color: {{backgroundColor}}; text-align: center; padding: 32px 0 24px; border-bottom: 1px solid #e5eff5; border-bottom: 1px solid {{secondaryBorderColor}};" align="center">
|
||
{{#if backgroundIsDark}}
|
||
<table class="feedback-buttons" role="presentation" border="0" cellpadding="0" cellspacing="0">
|
||
<tr>
|
||
{{#if feedbackButtons }}
|
||
{{> feedbackButton feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/feedback-more-darkmode.png" width="145" height="36" }}
|
||
{{> feedbackButton feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/feedback-less-darkmode.png" width="142" height="36" }}
|
||
{{/if}}
|
||
{{#if newsletter.showCommentCta}}
|
||
{{> feedbackButton href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment-cta-darkmode.png" width="122" height="36" }}
|
||
{{/if}}
|
||
</tr>
|
||
</table>
|
||
<table class="feedback-buttons-mobile" role="presentation" border="0" cellpadding="0" cellspacing="0">
|
||
<tr>
|
||
{{#if feedbackButtons }}
|
||
{{> feedbackButtonMobile feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/feedback-more-mobile-darkmode.png" width="42" height="42" }}
|
||
{{> feedbackButtonMobile feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/feedback-less-mobile-darkmode.png" width="42" height="42" }}
|
||
{{/if}}
|
||
{{#if newsletter.showCommentCta}}
|
||
{{> feedbackButtonMobile href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment-cta-mobile-darkmode.png" width="42" height="42" }}
|
||
{{/if}}
|
||
</tr>
|
||
</table>
|
||
{{else}}
|
||
<table class="feedback-buttons" role="presentation" border="0" cellpadding="0" cellspacing="0">
|
||
<tr>
|
||
{{#if feedbackButtons }}
|
||
{{> feedbackButton feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/feedback-more.png" width="145" height="36" }}
|
||
{{> feedbackButton feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/feedback-less.png" width="142" height="36" }}
|
||
{{/if}}
|
||
{{#if newsletter.showCommentCta}}
|
||
{{> feedbackButton href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment-cta.png" width="122" height="36" }}
|
||
{{/if}}
|
||
</tr>
|
||
</table>
|
||
<table class="feedback-buttons-mobile" role="presentation" border="0" cellpadding="0" cellspacing="0">
|
||
<tr>
|
||
{{#if feedbackButtons }}
|
||
{{> feedbackButtonMobile feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/feedback-more-mobile.png" width="42" height="42" }}
|
||
{{> feedbackButtonMobile feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/feedback-less-mobile.png" width="42" height="42" }}
|
||
{{/if}}
|
||
{{#if newsletter.showCommentCta}}
|
||
{{> feedbackButtonMobile href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment-cta-mobile.png" width="42" height="42" }}
|
||
{{/if}}
|
||
</tr>
|
||
</table>
|
||
{{/if}}
|
||
</td>
|
||
</tr>
|
||
{{/if}}
|
||
|
||
{{#if latestPosts.length}}
|
||
<tr>
|
||
<td style="padding: 24px 0; border-bottom: 1px solid #e5eff5; border-bottom: 1px solid {{secondaryBorderColor}};">
|
||
<h3 class="latest-posts-header">Keep reading</h3>
|
||
{{> latestPosts}}
|
||
</td>
|
||
</tr>
|
||
{{/if}}
|
||
|
||
{{#if newsletter.showSubscriptionDetails}}
|
||
<tr>
|
||
<td class="subscription-box">
|
||
<h3>Subscription details</h3>
|
||
<p style="margin-bottom: 16px;">
|
||
<span>You are receiving this because you are a <strong>%%{status}%% subscriber</strong> to {{site.title}}.</span> %%{status_text}%%
|
||
</p>
|
||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
|
||
<tr>
|
||
<td class="subscription-details">
|
||
<p class="%%{name_class}%%">Name: %%{name, "not provided"}%%</p>
|
||
<p>Email: <a href="#">%%{email}%%</a></p>
|
||
<p>Member since: %%{created_at}%%</p>
|
||
</td>
|
||
<td align="right" valign="bottom" class="manage-subscription">
|
||
<a href="%%{manage_account_url}%%"> Manage subscription →</a>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
{{/if}}
|
||
|
||
<tr>
|
||
<td class="wrapper" align="center">
|
||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-top: 40px; padding-bottom: 30px;">
|
||
{{#if footerContent }}
|
||
<tr><td class="footer">{{{footerContent}}}</td></tr>
|
||
{{/if}}
|
||
<tr>
|
||
<td class="footer">{{site.title}} © {{year}} – <a href="%%{unsubscribe_url}%%">Unsubscribe</a></td>
|
||
</tr>
|
||
|
||
{{#if showBadge }}
|
||
<tr>
|
||
<td class="footer-powered"><a href="https://ghost.org/"><img src="https://static.ghost.org/v4.0.0/images/powered.png" border="0" width="142" height="30" class="gh-powered" alt="Powered by Ghost"></a></td>
|
||
</tr>
|
||
{{/if}}
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
|
||
</table>
|
||
<!-- END CENTERED WHITE CONTAINER -->
|
||
</div>
|
||
</td>
|
||
<td> </td>
|
||
</tr>
|
||
|
||
<!--[if mso]>
|
||
</table>
|
||
</center>
|
||
</td>
|
||
</tr>
|
||
<![endif]-->
|
||
</table>
|
||
</body>
|
||
</html>
|