added send test functionnality

posabsolute · Dec 30, 2014 · 4804cb4 · 4804cb4
1 parent 6effe94
commit 4804cb4
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 8 deletions.
diff --git a/dist/output/example.html b/dist/output/example.html
@@ -3,7 +3,7 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="width=device-width">
-
+  <title>title of content</title>
 
 
 
@@ -104,6 +104,7 @@
 
 
 
+
 	<table class="button " align="left" style="border-collapse: collapse; border-spacing: 0; overflow: hidden; padding: 0; text-align: left; vertical-align: top; width: 100%;">
 		<tr style="padding: 0; text-align: left; vertical-align: top;">
 		  <td style="-moz-hyphens: auto; -webkit-hyphens: auto; background: #2ba6cb; border: 1px solid #2284a1; border-collapse: collapse; color: #ffffff; display: block; font-family: 'Helvetica', 'Arial', sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 8px 0; text-align: center; transition: background-color 0.5s ease; vertical-align: top; width: auto; word-break: break-word;">
@@ -114,6 +115,7 @@
 
 
 
+
         </center>
       </td>
     </tr>

diff --git a/dist/templates/example.html b/dist/templates/example.html
@@ -18,6 +18,7 @@
 
 
 
+
 	<table class="button " align="left">
 		<tr>
 		  <td>
@@ -28,6 +29,7 @@
 
 
 
+
         </center>
       </td>
     </tr>

diff --git a/gruntfile.js b/gruntfile.js
@@ -55,6 +55,38 @@ module.exports = function(grunt) {
             }]
           }
         },
+        litmus: {
+            test: {
+              src: ['dist/output/example.html'],
+              options: {
+                username: 'username',
+                password: 'password',
+                url: 'https://yourcompany.litmus.com',
+                clients: ['gmailnew', 'ffgmailnew', 'chromegmailnew']
+              }
+            }
+        },
+        nodemailer: {
+            options: {
+              transport: {
+                type: 'SMTP',
+                options: {
+                  service: 'Gmail',
+                  auth: {
+                    user: '[email protected]',
+                    pass: 'tamere123!'
+                  }
+                }
+              },
+              recipients: [
+                {
+                  email: '[email protected]',
+                  name: 'Jane Doe'
+                }
+              ]
+            },
+            src: ['dist/output/*.html']
+        },
         watch: {
             options: {
                 livereload: true
@@ -75,9 +107,14 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-email-builder');
     grunt.loadNpmTasks('grunt-nunjucks-2-html');
     grunt.loadNpmTasks('grunt-email-builder');
+    grunt.loadNpmTasks('grunt-litmus');
+    grunt.loadNpmTasks('grunt-nodemailer');
 
     grunt.registerTask('default',['watch']);
-    grunt.registerTask('buildcss',['sass']);
-    grunt.registerTask('buildhtml',['nunjucks','emailBuilder']);
+    grunt.registerTask('css',['sass']);
+    grunt.registerTask('html',['nunjucks','emailBuilder:inline']);
+    grunt.registerTask('build',['sass','nunjucks','emailBuilder:inline']);
+    grunt.registerTask('sendlitmus',['litmus:test']);
+    grunt.registerTask('email',['nodemailer']);
 
 };
diff --git a/package.json b/package.json
@@ -23,6 +23,8 @@
     "grunt": "^0.4.5",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-email-builder": "^2.0.11",
+    "grunt-litmus": "^0.1.8",
+    "grunt-nodemailer": "^0.2.1",
     "grunt-nunjucks": "^0.1.4",
     "grunt-nunjucks-2-html": "^0.2.2",
     "grunt-sass": "^0.17.0",

diff --git a/readme.md b/readme.md
@@ -34,6 +34,7 @@ You have now everything you need to use inker. There is template examples in src
 * grunt css *- Build CSS* 
 * grunt html *- Build HTML templates*
 * grunt build *- Build css & html*
+* grunt email *- Send a test email to any email inbox*
 * grunt litmus *- Send a test email to litmus*
 
 ## CSS with Inker
@@ -87,6 +88,52 @@ button('button-green', 'left', 'http://www.google.com', 'Go to google');
 
 **When creating new components remember to add them to the base.html file situates in _src/html-components_**
 
+### Inker with your back-end templating engine & application
+
+Inker is specially thought so it integrate with your back-end application, Inker templating engine use <# #> so it does not interfere with others templating engine making it possible to test your templates with inker & then use your back-end to place data & send your email.
+
+### Inker with dynamic custom data
+
+Inker can use json files as a source of dynamic data, an use example would be to test product loops. Of course this means that if you get that data from a back-end api you will need to replace the loop system to match your templating engine after.
+
+This is a built-in feature of grunt-nunjucks-2-html, please see their documentation for more information about customization.
+
+
+
+## Sending test email to your inbox
+
+Inker use grunt-nodemailer to send test. By default it send a test for all files that are in the output folders, you can easily change that in **gruntfile.js**. However a better way touse it would be to change the path directly from the grunt command.
+
+```bash
+// Override default src provided in gruntfile
+grunt email --fileSrc=dist/output/example.html
+```
+
+Config example:
+```javascript
+nodemailer: {
+    options: {
+      transport: {
+        type: 'SMTP',
+        options: {
+          service: 'Gmail',
+          auth: {
+            user: '[email protected]',
+            pass: 'BLAH'
+          }
+        }
+      },
+      recipients: [
+        {
+          email: '[email protected]',
+          name: 'Jane Doe'
+        }
+      ]
+    },
+    src: ['dist/output/*.html']
+},
+```
+
 ## Contributions
 
 I am always happy to accept contributions, but please follow ITCSS guidelines & please test your new components or fixes in most used email clients.

diff --git a/src/html-components/base.html b/src/html-components/base.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
+  <title>{% block meta_title %}{% endblock %}</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width"/>
-  <link href="../css/main.css" media="all" rel="stylesheet" type="text/css" />
-  <link href="../css/responsive.css" media="all" data-ignore="ignore" rel="stylesheet" type="text/css" />
+  {% block main_css %}<link href="../css/main.css" media="all" rel="stylesheet" type="text/css" />{% endblock %}
+  {% block responsive_css %}<link href="../css/responsive.css" media="all" data-ignore="ignore" rel="stylesheet" type="text/css" />{% endblock %}
+
   {% from "/html-components/template.button.html" import button %}
-  {% import "/html-components/template.caption.html" as caption %}
-  {% import "/html-components/template.progressbar.html" as progressbar %}
-  {% import "/html-components/template.video.html" as video %}
+  {% from "/html-components/template.caption.html" import caption %}
+  {% from "/html-components/template.progressbar.html" import progressbar %}
+  {% from "/html-components/template.video.html" import video %}
 </head>
 <body>
   <table class="body">
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,7 @@ @@
     	<table class="button " align="left">
     		<tr>
     		  <td>
@@ Expand All / @@ -28,6 +29,7 @@ @@
             </center>
           </td>
         </tr>
@@ Expand Down @@