diff --git a/index.js b/index.js new file mode 100644 index 0000000..a73eca2 --- /dev/null +++ b/index.js @@ -0,0 +1,37 @@ +var path = require('path') +var sampleDir = path.join(__dirname, 'templates', 'sample') +var EmailTemplate = require('email-templates').EmailTemplate +var fs = require('fs-extra') +var async = require('async') +var slug = require('slug') + +var sample = new EmailTemplate(sampleDir) + +var tests = [ + { + background: 'https://gallery.mailchimp.com/4ca7b1922d93f327ebc560d44/images/041b0b62-52c0-483f-a5e2-57bed9cad390.png', + title: 'Done in 3, 2, 1!', + subtitle: 'Power your marketing with user-generated content in 3 steps.', + cta: 'Check it out' + } +] + +var outputDir = path.join(sampleDir, 'output') + +fs.remove(outputDir, function (err) { + if (err) return console.error(err) + console.log('output folder removed') +}) + +async.each(tests, function (test, next) { + sample.render(test, function (err, result) { + if (err) return next(err) + + fs.outputFile(path.join(outputDir, slug(test.title + '.html')), result.html, function (err) { + console.log(err || test.title) // => null + }) + + }) +}, function (err) { + console.log(err); +}) diff --git a/package.json b/package.json new file mode 100644 index 0000000..3197908 --- /dev/null +++ b/package.json @@ -0,0 +1,27 @@ +{ + "name": "climb-email-templates", + "version": "1.0.0", + "description": "A system to generate all the emails", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/Climb-social/email-templates.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/Climb-social/email-templates/issues" + }, + "homepage": "https://github.com/Climb-social/email-templates#readme", + "dependencies": { + "ejs": "^2.4.1", + "email-templates": "^2.2.0", + "fs-extra": "^0.26.7", + "jade": "^1.11.0", + "node-sass": "^3.4.2", + "slug": "^0.9.1" + } +} diff --git a/templates/sample/html.ejs b/templates/sample/html.ejs new file mode 100644 index 0000000..9441d6d --- /dev/null +++ b/templates/sample/html.ejs @@ -0,0 +1,327 @@ + + + + + + + + + Climb.Social + + + +
+ + + + +
+ + + + + + + + + + + + + +
+ + + + + +
+ + + + + + +
+ + + + + + + +
+
+ + +  
+
+ + + + + + +
+ + +
+
+
+ +
+ + + + + +
+ + + + + + +
+ + + + + + +
+ +
+

+ <%= title %> +

+

+ <%= subtitle %> +

+ +
+ +
+
+
+ +
+ + + + + +
+ + + + + + +
+
+ {{ content }} +
+
+ + + + + + +
+ + + + + + +
+ +
+ +
+ + + + + + +
+ + + + + + +
+

Still have questions?

+

Feel free to contact our support team.

+
+
+ + + + + + +
+
+ + + +
+
+
+ +
+ + + + + +
+ + + + + + +
+ + + + + + +
+ + + +

Stay connected with tips, updates and resources +
+
+ + + + + + +

+ You have received this email because you signed up for a 30-day trial at Climb.social. +
If that wasn't you, please reply to this message and let us know. +
+ +
+ + + + + + +
+
+ {{ unsubscribe_link }} +
+
+
+ +
+
+
+ + diff --git a/templates/sample/output/Done-in-3-2-1html b/templates/sample/output/Done-in-3-2-1html new file mode 100644 index 0000000..90add21 --- /dev/null +++ b/templates/sample/output/Done-in-3-2-1html @@ -0,0 +1,327 @@ + + + + + + + + + Climb.Social + + + +
+ + + + +
+ + + + + + + + + + + + + +
+ + + + + +
+ + + + + + +
+ + + + + + + +
+
+ + +  
+
+ + + + + + +
+ + +
+
+
+ +
+ + + + + +
+ + + + + + +
+ + + + + + +
+ +
+

+ Done in 3, 2, 1! +

+

+ Power your marketing with user-generated content in 3 steps. +

+ +
+ +
+
+
+ +
+ + + + + +
+ + + + + + +
+
+ {{ content }} +
+
+ + + + + + +
+ + + + + + +
+ +
+ +
+ + + + + + +
+ + + + + + +
+

Still have questions?

+

Feel free to contact our support team.

+
+
+ + + + + + +
+
+ + + +
+
+
+ +
+ + + + + +
+ + + + + + +
+ + + + + + +
+ + + +

Stay connected with tips, updates and resources +
+
+ + + + + + +

+ You have received this email because you signed up for a 30-day trial at Climb.social. +
If that wasn't you, please reply to this message and let us know. +
+ +
+ + + + + + +
+
+ {{ unsubscribe_link }} +
+
+
+ +
+
+
+ + diff --git a/templates/sample/style.sass b/templates/sample/style.sass new file mode 100644 index 0000000..4189e80 --- /dev/null +++ b/templates/sample/style.sass @@ -0,0 +1,518 @@ +p { + margin : 10px 0; + padding: 0; +} +table { + border-collapse: collapse; +} +h1, +h2, +h3, +h4, +h5, +h6 { + display: block; + margin : 0; + padding: 0; +} +img, +a img { + border : 0; + height : auto; + outline : none; + text-decoration: none; +} +body, +#bodyTable, +#bodyCell { + height : 100%; + margin : 0; + padding: 0; + width : 100%; +} +#outlook a { + padding: 0; +} +img { + -ms-interpolation-mode: bicubic; +} +table { + mso-table-lspace: 0; + mso-table-rspace: 0; +} +.ReadMsgBody { + width: 100%; +} +.ExternalClass { + width: 100%; +} +p, +a, +li, +td, +blockquote { + mso-line-height-rule: exactly; +} +a[href^=tel], +a[href^=sms] { + color : inherit; + cursor : default; + text-decoration: none; +} +p, +a, +li, +td, +body, +table, +blockquote { + -ms-text-size-adjust : 100%; + -webkit-text-size-adjust: 100%; +} +.ExternalClass, +.ExternalClass p, +.ExternalClass td, +.ExternalClass div, +.ExternalClass span, +.ExternalClass font { + line-height: 100%; +} +a[x-apple-data-detectors] { + color : inherit !important; + text-decoration: none !important; + font-size : inherit !important; + font-family : inherit !important; + font-weight : inherit !important; + line-height : inherit !important; +} +.templateContainer { + max-width: 600px !important; +} +a.mcnButton { + display: block; +} +.mcnImage { + vertical-align: bottom; +} +.mcnTextContent { + word-break: break-word; +} +.mcnTextContent img { + height: auto !important; +} +.mcnDividerBlock { + table-layout: fixed !important; +} +body, +#bodyTable { + /*@editable*/ + background-color: #1a5077; +} +#bodyCell { + /*@editable*/ + border-top: 0; +} +h1 { + /*@editable*/ + color : #fff; + /*@editable*/ + font-family : Helvetica; + /*@editable*/ + font-size : 28px; + /*@editable*/ + font-style : normal; + /*@editable*/ + font-weight : normal; + /*@editable*/ + line-height : 200%; + /*@editable*/ + letter-spacing: normal; + /*@editable*/ + text-align : center; +} +h2 { + /*@editable*/ + color : #1a5077; + /*@editable*/ + font-family : Helvetica; + /*@editable*/ + font-size : 22px; + /*@editable*/ + font-style : normal; + /*@editable*/ + font-weight : normal; + /*@editable*/ + line-height : 200%; + /*@editable*/ + letter-spacing: normal; + /*@editable*/ + text-align : left; +} +h3 { + /*@editable*/ + color : #fff; + /*@editable*/ + font-family : Helvetica; + /*@editable*/ + font-size : 18px; + /*@editable*/ + font-style : normal; + /*@editable*/ + font-weight : normal; + /*@editable*/ + line-height : 125%; + /*@editable*/ + letter-spacing: normal; + /*@editable*/ + text-align : center; +} +h4 { + /*@editable*/ + color : #202020; + /*@editable*/ + font-family : Helvetica; + /*@editable*/ + font-size : 18px; + /*@editable*/ + font-style : normal; + /*@editable*/ + font-weight : bold; + /*@editable*/ + line-height : 125%; + /*@editable*/ + letter-spacing: normal; + /*@editable*/ + text-align : left; +} +#templatePreheader { + /*@editable*/ + background-color: #1a5077; + /*@editable*/ + border-top : 0; + /*@editable*/ + border-bottom : 0; + /*@editable*/ + padding-top : 10px; + /*@editable*/ + padding-bottom : 0; +} +#templatePreheader .mcnTextContent, +#templatePreheader .mcnTextContent p { + /*@editable*/ + color : #fff; + /*@editable*/ + font-family: Helvetica; + /*@editable*/ + font-size : 12px; + /*@editable*/ + line-height: 200%; + /*@editable*/ + text-align : left; +} +#templatePreheader .mcnTextContent a, +#templatePreheader .mcnTextContent p a { + /*@editable*/ + color : #fff; + /*@editable*/ + font-weight : normal; + /*@editable*/ + text-decoration: none; +} +#templateHeader { + /*@editable*/ + background-color: #1a5077; + /*@editable*/ + border-top : 0; + /*@editable*/ + border-bottom : 0; + /*@editable*/ + padding-top : 0; + /*@editable*/ + padding-bottom : 0; +} +#templateHeader .mcnTextContent, +#templateHeader .mcnTextContent p { + /*@editable*/ + color : #fff; + /*@editable*/ + font-family: Helvetica; + /*@editable*/ + font-size : 16px; + /*@editable*/ + line-height: 100%; + /*@editable*/ + text-align : center; +} +#templateHeader .mcnTextContent a, +#templateHeader .mcnTextContent p a { + /*@editable*/ + color : #fff; + /*@editable*/ + font-weight : normal; + /*@editable*/ + text-decoration: underline; +} +#templateBody { + /*@editable*/ + background-color: #fff; + /*@editable*/ + border-top : 0; + /*@editable*/ + border-bottom : 0; + /*@editable*/ + padding-top : 9px; + /*@editable*/ + padding-bottom : 80px; +} +#templateBody .mcnTextContent, +#templateBody .mcnTextContent p { + /*@editable*/ + color : #b0b0b0; + /*@editable*/ + font-family: Helvetica; + /*@editable*/ + font-size : 16px; + /*@editable*/ + line-height: 150%; + /*@editable*/ + text-align : left; +} +#templateBody .mcnTextContent a, +#templateBody .mcnTextContent p a { + /*@editable*/ + color : #00bcfc; + /*@editable*/ + font-weight : normal; + /*@editable*/ + text-decoration: none; +} +#templateFooter { + /*@editable*/ + background-color: #1a5077; + /*@editable*/ + border-top : 0; + /*@editable*/ + border-bottom : 0; + /*@editable*/ + padding-top : 25px; + /*@editable*/ + padding-bottom : 9px; +} +/* +@tab Footer +@section Footer Text +@tip Set the styling for your email's footer text. Choose a size and color that is easy to read. +*/ +#templateFooter .mcnTextContent, +#templateFooter .mcnTextContent p { + /*@editable*/ + color : #fff; + /*@editable*/ + font-family: Helvetica; + /*@editable*/ + font-size : 12px; + /*@editable*/ + line-height: 200%; + /*@editable*/ + text-align : center; +} +#templateFooter .mcnTextContent a, +#templateFooter .mcnTextContent p a { + /*@editable*/ + color : #656565; + /*@editable*/ + font-weight : normal; + /*@editable*/ + text-decoration: underline; +} +@media only screen and (min-width:768px) { + .templateContainer { + width: 600px !important; + } +} +@media only screen and (max-width: 480px) { + body, + table, + td, + p, + a, + li, + blockquote { + -webkit-text-size-adjust: none !important; + } +} +@media only screen and (max-width: 480px) { + body { + width : 100% !important; + min-width: 100% !important; + } +} +@media only screen and (max-width: 480px) { + #bodyCell { + padding-top: 10px !important; + } +} +@media only screen and (max-width: 480px) { + .mcnImage { + width: 100% !important; + } +} +@media only screen and (max-width: 480px) { + .mcnCaptionTopContent, + .mcnCaptionBottomContent, + .mcnTextContentContainer, + .mcnBoxedTextContentContainer, + .mcnImageGroupContentContainer, + .mcnCaptionLeftTextContentContainer, + .mcnCaptionRightTextContentContainer, + .mcnCaptionLeftImageContentContainer, + .mcnCaptionRightImageContentContainer, + .mcnImageCardLeftTextContentContainer, + .mcnImageCardRightTextContentContainer { + max-width: 100% !important; + width : 100% !important; + } +} +@media only screen and (max-width: 480px) { + .mcnBoxedTextContentContainer { + min-width: 100% !important; + } +} +@media only screen and (max-width: 480px) { + .mcnImageGroupContent { + padding: 9px !important; + } +} +@media only screen and (max-width: 480px) { + .mcnCaptionLeftContentOuter .mcnTextContent, + .mcnCaptionRightContentOuter .mcnTextContent { + padding-top: 9px !important; + } +} +@media only screen and (max-width: 480px) { + .mcnImageCardTopImageContent, + .mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent { + padding-top: 18px !important; + } +} +@media only screen and (max-width: 480px) { + .mcnImageCardBottomImageContent { + padding-bottom: 9px !important; + } +} +@media only screen and (max-width: 480px) { + .mcnImageGroupBlockInner { + padding-top : 0 !important; + padding-bottom: 0 !important; + } +} +@media only screen and (max-width: 480px) { + .mcnImageGroupBlockOuter { + padding-top : 9px !important; + padding-bottom: 9px !important; + } +} +@media only screen and (max-width: 480px) { + .mcnTextContent, + .mcnBoxedTextContentColumn { + padding-right: 18px !important; + padding-left : 18px !important; + } +} +@media only screen and (max-width: 480px) { + .mcnImageCardLeftImageContent, + .mcnImageCardRightImageContent { + padding-right : 18px !important; + padding-bottom: 0 !important; + padding-left : 18px !important; + } +} +@media only screen and (max-width: 480px) { + .mcpreview-image-uploader { + display: none !important; + width : 100% !important; + } +} +@media only screen and (max-width: 480px) { + h1 { + /*@editable*/ + font-size : 22px !important; + /*@editable*/ + line-height: 125% !important; + } +} +@media only screen and (max-width: 480px) { + h2 { + /*@editable*/ + font-size : 20px !important; + /*@editable*/ + line-height: 125% !important; + } +} +@media only screen and (max-width: 480px) { + h3 { + /*@editable*/ + font-size : 18px !important; + /*@editable*/ + line-height: 125% !important; + } +} +@media only screen and (max-width: 480px) { + h4 { + /*@editable*/ + font-size : 16px !important; + /*@editable*/ + line-height: 150% !important; + } +} +@media only screen and (max-width: 480px) { + .mcnBoxedTextContentContainer .mcnTextContent, + .mcnBoxedTextContentContainer .mcnTextContent p { + /*@editable*/ + font-size : 14px !important; + /*@editable*/ + line-height: 150% !important; + } +} +@media only screen and (max-width: 480px) { + #templatePreheader { + /*@editable*/ + display: block !important; + } +} +@media only screen and (max-width: 480px) { + #templatePreheader .mcnTextContent, + #templatePreheader .mcnTextContent p { + /*@editable*/ + font-size : 14px !important; + /*@editable*/ + line-height: 150% !important; + } +} +@media only screen and (max-width: 480px) { + #templateHeader .mcnTextContent, + #templateHeader .mcnTextContent p { + /*@editable*/ + font-size : 16px !important; + /*@editable*/ + line-height: 150% !important; + } +} +@media only screen and (max-width: 480px) { + #templateBody .mcnTextContent, + #templateBody .mcnTextContent p { + /*@editable*/ + font-size : 16px !important; + /*@editable*/ + line-height: 150% !important; + } +} +@media only screen and (max-width: 480px) { + #templateFooter .mcnTextContent, + #templateFooter .mcnTextContent p { + /*@editable*/ + font-size : 14px !important; + /*@editable*/ + line-height: 150% !important; + } +}