mirror of
https://github.com/vale981/Vulcan
synced 2025-03-06 01:51:40 -05:00
working on HTML emails
This commit is contained in:
Sacha Greif
parent
d56c6ee1b1
commit
1631b9f89b
14 changed files with 191 additions and 22 deletions
|
|
@ -37,3 +37,4 @@ subs-manager
|
|||
telescope-module-embedly
|
||||
telescope-digest
|
||||
handlebars-server
|
||||
npm
|
||||
|
|
|
|||
3
packages.json
Normal file
3
packages.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"juice": "0.4.0"
|
||||
}
|
||||
1
packages/.gitignore
vendored
1
packages/.gitignore
vendored
|
|
@ -33,3 +33,4 @@ i18next-meteor
|
|||
/iron-core
|
||||
/iron-dynamic-template
|
||||
/handlebars-server
|
||||
/npm
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@ campaignSchema = new SimpleSchema({
|
|||
type: [String],
|
||||
optional: true
|
||||
},
|
||||
webHits: {
|
||||
type: Number,
|
||||
optional: true
|
||||
},
|
||||
});
|
||||
|
||||
Campaigns = new Meteor.Collection("campaigns", {
|
||||
|
|
|
|||
|
|
@ -6,11 +6,9 @@ buildCampaign = function (postsCount) {
|
|||
limit: postsCount
|
||||
});
|
||||
var campaignPosts = Posts.find(params.find, params.options).fetch();
|
||||
console.log(_.pluck(campaignPosts, 'title'))
|
||||
|
||||
// iterate through posts and pass each of them through a handlebars template
|
||||
var postsHTML = _.map(campaignPosts, function(post){
|
||||
console.log(post)
|
||||
|
||||
// the naked post object as stored in the database is missing a few properties, so let's add them
|
||||
var properties = _.extend(post, {
|
||||
|
|
@ -24,11 +22,15 @@ buildCampaign = function (postsCount) {
|
|||
if(post.url)
|
||||
properties.domain = getDomain(post.url)
|
||||
|
||||
var template = Handlebars.templates[getTemplate('postItemEmail')](properties);
|
||||
var template = Handlebars.templates[getTemplate('emailPostItem')](properties);
|
||||
return template;
|
||||
}).join('');
|
||||
|
||||
console.log(postsHTML)
|
||||
var emailHTML = buildEmailTemplate(postsHTML)
|
||||
|
||||
// console.log(emailHTML)
|
||||
|
||||
return emailHTML
|
||||
}
|
||||
|
||||
Meteor.methods({
|
||||
|
|
|
|||
19
packages/telescope-digest/lib/server/routes.js
Normal file
19
packages/telescope-digest/lib/server/routes.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
|
||||
Meteor.startup(function () {
|
||||
|
||||
Router.map(function() {
|
||||
|
||||
this.route('campaign', {
|
||||
where: 'server',
|
||||
path: '/campaign/:id?',
|
||||
action: function() {
|
||||
var campaignId = parseInt(this.params.id);
|
||||
var htmlContent = buildCampaign(2);
|
||||
this.response.write(htmlContent);
|
||||
this.response.end();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<style>
|
||||
.post-title{
|
||||
color: purple;
|
||||
}
|
||||
</style>
|
||||
|
||||
<a href="{{outgoingUrl}}" class="post-title" target="_blank">{{title}}</a><br /><br />
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<a href="{{outgoingUrl}}" class="post-title" target="_blank">
|
||||
<span style="font-size:24px; font-family: georgia, serif; line-height:1.3;">{{title}}</span>
|
||||
{{#if sticky}}
|
||||
<a style="margin-top:-5px;vertical-align:middle;border-radius:3px;background:#eee;font-size:10px;text-transform:uppercase;font-weight:regular;color:#aaa;padding:1px 5px;display:inline-block;" href="http://sidebar.io/sponsor">Sponsored</a>
|
||||
{{/if}}
|
||||
</a><br />
|
||||
<a href="{{outgoingUrl}}" style="color:#a9a9a9;">{{domain}}</a><br />
|
||||
<a href="http://twitter.com/{{twitterName}}">
|
||||
<img src="{{userAvatar}}" height="20px" width="20px" style="vertical-align:middle;"/>
|
||||
</a>
|
||||
Added by <a style="font-weight:bold; color:#f36c3d;" href="http://twitter.com/{{twitterName}}">@{{twitterName}}</a>
|
||||
<span style="color:#a9a9a9">|</span>
|
||||
<a href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fsidebar.io&text={{cleanHeadline}}&tw_p=tweetbutton&url={{cleanURL}}&via=SidebarIO&related={{twitterName}}" style="color:#a9a9a9; font-weight:bold" target="_blank"><img src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/sidebar.io/img/twitter-icon-grey.png" style="height:12px; width:12px;" /> Tweet</a>
|
||||
<br/><br/><br/>
|
||||
|
|
@ -29,7 +29,8 @@ Package.on_use(function (api) {
|
|||
|
||||
api.add_files([
|
||||
'lib/server/build_campaign.js',
|
||||
'lib/server/templates/postItemEmail.handlebars'
|
||||
'lib/server/routes.js',
|
||||
'lib/server/templates/emailPostItem.handlebars'
|
||||
], ['server']);
|
||||
|
||||
api.export([
|
||||
|
|
|
|||
|
|
@ -21,4 +21,30 @@ sendEmail = function(to, subject, text, html){
|
|||
text: text,
|
||||
html: html
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
buildEmailTemplate = function (htmlContent) {
|
||||
var juice = Meteor.require('juice');
|
||||
|
||||
var emailHTML = Handlebars.templates[getTemplate('emailMain')]({
|
||||
headerColor: getSetting('headerColor'),
|
||||
buttonColor: getSetting('buttonColor'),
|
||||
logo: '',
|
||||
siteName: getSetting('title'),
|
||||
siteUrl: getSiteUrl(),
|
||||
body: htmlContent,
|
||||
unsubscribe: '',
|
||||
footer: ''
|
||||
});
|
||||
|
||||
var inlinedHTML = Async.runSync(function(done) {
|
||||
juice.juiceContent(emailHTML, {
|
||||
url: getSiteUrl(),
|
||||
removeStyleTags: false
|
||||
}, function (error, result) {
|
||||
done(null, result);
|
||||
});
|
||||
}).result;
|
||||
|
||||
return inlinedHTML;
|
||||
}
|
||||
112
server/templates/emailMain.handlebars
Normal file
112
server/templates/emailMain.handlebars
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0"> <!-- So that mobile webkit will display zoomed in -->
|
||||
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
|
||||
|
||||
<title>Antwort - responsive Email Layout</title>
|
||||
<style type="text/css">
|
||||
|
||||
/* Resets: see reset.css for details */
|
||||
.ReadMsgBody { width: 100%; background-color: #ebebeb;}
|
||||
.ExternalClass {width: 100%; background-color: #ebebeb;}
|
||||
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
|
||||
body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
|
||||
body {margin:0; padding:0;}
|
||||
table {border-spacing:0;}
|
||||
table td {border-collapse:collapse;}
|
||||
.yshortcuts a {border-bottom: none !important;}
|
||||
|
||||
|
||||
/* Constrain email width for small screens */
|
||||
@media screen and (max-width: 600px) {
|
||||
table[class="container"] {
|
||||
width: 95% !important;
|
||||
}
|
||||
.main-container{
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Give content more room on mobile */
|
||||
@media screen and (max-width: 480px) {
|
||||
td[class="container-padding"] {
|
||||
padding-left: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.heading-container{
|
||||
background: {{headerColor}};
|
||||
color: white;
|
||||
font-family: Helvetica, sans-serif;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
}
|
||||
.container-padding{
|
||||
line-height: 1.7;
|
||||
background: white;
|
||||
padding: 0 30px;
|
||||
font-size: 15px;
|
||||
font-family: Helvetica, sans-serif;
|
||||
color: #555;
|
||||
}
|
||||
h3{
|
||||
color: {{buttonColor}};
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
.footer-container{
|
||||
background: #ccc;
|
||||
font-family: Helvetica, sans-serif;
|
||||
padding: 30px;
|
||||
color: #777;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin:0; padding:10px 0;" bgcolor="#ebebeb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
|
||||
|
||||
<br>
|
||||
|
||||
<!-- 100% wrapper (grey background) -->
|
||||
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#ebebeb">
|
||||
<tr>
|
||||
<td align="center" valign="top" bgcolor="#ebebeb" style="background-color: #ebebeb;">
|
||||
|
||||
<!-- 600px container (white background) -->
|
||||
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container" bgcolor="#ffffff">
|
||||
<tr>
|
||||
<td class="heading-container">
|
||||
{{siteName}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="main-container container-padding" bgcolor="#ffffff">
|
||||
<br>
|
||||
|
||||
{{{body}}}
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="footer-container">
|
||||
Telescope
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!--/600px container -->
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!--/100% wrapper-->
|
||||
<br>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
"bootstrap3-datepicker": {},
|
||||
"subs-manager": {},
|
||||
"telescope-module-embedly": {},
|
||||
"handlebars-server": {}
|
||||
"handlebars-server": {},
|
||||
"npm": {}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@
|
|||
"bootstrap3-datepicker": {},
|
||||
"subs-manager": {},
|
||||
"telescope-module-embedly": {},
|
||||
"handlebars-server": {}
|
||||
"handlebars-server": {},
|
||||
"npm": {}
|
||||
},
|
||||
"packages": {
|
||||
"momentjs": {
|
||||
|
|
@ -82,6 +83,11 @@
|
|||
"tag": "v1.2.0",
|
||||
"commit": "1b72c4e9d82af66293e50be4516c487d15d97464"
|
||||
},
|
||||
"npm": {
|
||||
"git": "https://github.com/arunoda/meteor-npm.git",
|
||||
"tag": "v0.2.6",
|
||||
"commit": "177ab6118de5bf8cffb19481343d5762ff7a2aaf"
|
||||
},
|
||||
"iron-layout": {
|
||||
"git": "https://github.com/EventedMind/iron-layout.git",
|
||||
"tag": "v0.2.0",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue