v2.2.0

justinsisley · Oct 17, 2017 · cc5e6b3 · cc5e6b3
1 parent 2aeb71f
commit cc5e6b3
Show file tree

Hide file tree

Showing 9 changed files with 229 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -45,6 +45,8 @@ mju --build -i ./templates -o ./build
 The `--build` command requires input (`-i`) and output (`-o`) arguments. `-i` is the directory in which your raw MJML templates are located, and `-o` is the directory you would like the compiled HTML files written to.
 With the optional extension (`-e`) argument you can specify the output file extension (default: `.html`) to your liking.
 
+> Note: only files with the `.mjml` file extension will be compiled.
+
 ```bash
 mju --build -i ./templates -o ./build -e .handlebars
 ```
@@ -53,6 +55,8 @@ mju --build -i ./templates -o ./build -e .handlebars
 
 The `mju --watch` command will monitor all MJML templates in a specified directory and compile them to HTML every time they're modified.
 
+> Note: only files with the `.mjml` file extension will be compiled.
+
 ```bash
 mju --watch -i ./templates -o ./build
 ```

diff --git a/demo/output/body.html b/demo/output/body.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<head>
+  <title></title>
+  <!--[if !mso]><!-- -->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!--<![endif]-->
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style type="text/css">
+  #outlook a { padding: 0; }
+  .ReadMsgBody { width: 100%; }
+  .ExternalClass { width: 100%; }
+  .ExternalClass * { line-height:100%; }
+  body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+  table, td { border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
+  img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
+  p { display: block; margin: 13px 0; }
+</style>
+<!--[if !mso]><!-->
+<style type="text/css">
+  @media only screen and (max-width:480px) {
+    @-ms-viewport { width:320px; }
+    @viewport { width:320px; }
+  }
+</style>
+<!--<![endif]-->
+<!--[if mso]>
+<xml>
+  <o:OfficeDocumentSettings>
+    <o:AllowPNG/>
+    <o:PixelsPerInch>96</o:PixelsPerInch>
+  </o:OfficeDocumentSettings>
+</xml>
+<![endif]-->
+<!--[if lte mso 11]>
+<style type="text/css">
+  .outlook-group-fix {
+    width:100% !important;
+  }
+</style>
+<![endif]-->
+
+<!--[if !mso]><!-->
+    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
+    <style type="text/css">
+
+        @import url(https://fonts.googleapis.com/css?family=Lato);
+
+    </style>
+  <!--<![endif]--><style type="text/css">
+  @media only screen and (min-width:480px) {
+    .mj-column-per-100 { width:100%!important; }
+  }
+</style>
+</head>
+<body style="background: #F2F2F2;">
+
+  <div class="mj-container" style="background-color:#F2F2F2;"><!--[if mso | IE]>
+      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
+        <tr>
+          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+      <![endif]--><div style="margin:0px auto;max-width:600px;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:10px 0px 20px 0px;"></td></tr></tbody></table></div><!--[if mso | IE]>
+      </td></tr></table>
+      <![endif]-->
+      <!--[if mso | IE]>
+      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
+        <tr>
+          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+      <![endif]--><!-- mj-include: file not found /Users/manmademammal/projects/mjml-utils/header.mjml --><div style="margin:0px auto;max-width:600px;background:#fff;" data-class=""><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#fff;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:0px 20px 0px 20px;"><!--[if mso | IE]>
+      <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+        <tr>
+          <td style="vertical-align:top;width:600px;">
+      <![endif]--><div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-wrap:break-word;font-size:0px;padding:40px 40px 0px 40px;" align="center"><div style="cursor:auto;color:#1B1C1D;font-family:Lato, Helvetica, Arial, sans-serif;font-size:38px;line-height:40px;text-align:center;">Thanks for signing up.</div></td></tr></tbody></table></div><!--[if mso | IE]>
+      </td></tr></table>
+      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
+      </td></tr></table>
+      <![endif]-->
+      <!--[if mso | IE]>
+      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
+        <tr>
+          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+      <![endif]--><div style="margin:0px auto;max-width:600px;background:#fff;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#fff;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:middle;direction:ltr;font-size:0px;padding:30px 20px 30px 20px;"><!--[if mso | IE]>
+      <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+        <tr>
+          <td style="vertical-align:top;width:600px;">
+      <![endif]--><div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-wrap:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0"><tbody><tr><td style="border:none;border-radius:4px;color:#fff;cursor:auto;padding:15px 30px;" align="center" valign="middle" bgcolor="#3BB748"><a href="{selfReviewUrl}" style="text-decoration:none;background:#3BB748;color:#fff;font-family:Lato, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;" target="_blank">Magic Login Button</a></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]>
+      </td></tr></table>
+      <![endif]--></td></tr></tbody></table></div><!-- mj-include: file not found /Users/manmademammal/projects/mjml-utils/footer.mjml --><!--[if mso | IE]>
+      </td></tr></table>
+      <![endif]--></div>
+</body>
+</html>
diff --git a/demo/templates/body.mjml b/demo/templates/body.mjml
@@ -0,0 +1,63 @@
+<mjml>
+  <mj-head>
+    <mj-font name="Lato" href="https://fonts.googleapis.com/css?family=Lato" />
+
+    <mj-attributes>
+      <mj-all font-family="Lato, Helvetica, Arial, sans-serif" />
+    </mj-attributes>
+
+    <mj-style inline="inline">
+      .link-nostyle {
+        color: inherit;
+      }
+    </mj-style>
+  </mj-head>
+
+  <mj-body>
+    <mj-container background-color="#F2F2F2">
+      <mj-section padding="10px 0 20px 0"></mj-section>
+
+      <mj-include path="./header" />
+
+      <mj-section
+        padding="0 20px 0 20px"
+        background-color="#fff"
+      >
+        <mj-column>
+          <mj-text
+            align="center"
+            padding="40px 40px 0 40px"
+            font-size="38px"
+            line-height="40px"
+            color="#1B1C1D"
+          >
+            Thanks for signing up.
+          </mj-text>
+        </mj-column>
+      </mj-section>
+
+      <mj-section
+        padding="30px 20px 30px 20px"
+        background-color="#fff"
+        vertical-align="middle"
+        background-size="cover"
+        background-repeat="no-repeat"
+      >
+        <mj-column width="100%">
+          <mj-button
+            href="{selfReviewUrl}"
+            align="center"
+            background-color="#3BB748"
+            color="#fff"
+            border-radius="4px"
+            inner-padding="15px 30px"
+          >
+            Magic Login Button
+          </mj-button>
+        </mj-column>
+      </mj-section>
+
+      <mj-include path="./footer" />
+    </mj-container>
+  </mj-body>
+</mjml>
diff --git a/demo/templates/footer.mjml b/demo/templates/footer.mjml
@@ -0,0 +1,16 @@
+<mj-section
+  padding="0 20px 0 20px"
+  background-color="#1B1C1D"
+>
+  <mj-column>
+    <mj-text
+      align="left"
+      padding="20px 40px 20px 40px"
+      font-size="14px"
+      line-height="40px"
+      color="#fff"
+    >
+      &copy; 2017 <a href="#" class="link-nostyle">Company</a>
+    </mj-text>
+  </mj-column>
+</mj-section>
diff --git a/demo/templates/header.mjml b/demo/templates/header.mjml
@@ -0,0 +1,14 @@
+<mj-section
+  padding="20px 20px 20px 20px"
+  background-color="#1B1C1D"
+>
+  <mj-column>
+    <mj-text
+      align="left"
+      font-size="14"
+      color="#fff"
+    >
+      Hello from Company!
+    </mj-text>
+  </mj-column>
+</mj-section>
diff --git a/lerna.json b/lerna.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mjml-utils",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "author": "Justin Sisley",
   "description": "The utility belt for MJML developers",
   "repository": "https://github.com/justinsisley/mjml-utils",
@@ -11,14 +11,15 @@
     "mju": "./src/mjml-utils.js"
   },
   "scripts": {
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "demo:watcher": "node ./src/mjml-utils.js --watch -i ./demo/templates/ -o ./demo/output/"
   },
   "dependencies": {
     "chokidar": "^1.7.0",
-    "inquirer": "^3.2.0",
-    "mjml": "^3.3.3",
-    "nodemailer": "^4.0.1",
-    "yargs": "^8.0.2"
+    "inquirer": "^3.3.0",
+    "mjml": "^3.3.5",
+    "nodemailer": "^4.2.0",
+    "yargs": "^9.0.1"
   },
   "devDependencies": {
     "babel-preset-es2015": "^6.24.1",
@@ -27,7 +28,6 @@
     "eslint-config-airbnb": "^15.0.2",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jsx-a11y": "^5.0.3",
-    "eslint-plugin-react": "^7.1.0",
-    "lerna": "^2.0.0"
+    "eslint-plugin-react": "^7.4.0"
   }
 }
diff --git a/src/builder/index.js b/src/builder/index.js
@@ -19,19 +19,25 @@ function mkdir(directory) {
 }
 
 builder.build = (filePath, outputDir, extension) => {
-  const outputPath = path.join(process.cwd(), outputDir);
-  mkdir(outputPath);
-
-  const startTime = Date.now();
-  const data = fs.readFileSync(`${filePath}`, 'utf8');
-  const rendered = mjml2html(data);
   const filename = getTemplateFilename(filePath).replace('.mjml', extension);
 
-  fs.writeFileSync(`${outputPath}/${filename}`, rendered.html);
+  try {
+    const outputPath = path.join(process.cwd(), outputDir);
+    mkdir(outputPath);
 
-  const endTime = Date.now();
-  const totalTime = endTime - startTime;
-  console.log(`Rendered ${filename} in ${totalTime}ms`); // eslint-disable-line
+    const startTime = Date.now();
+    const data = fs.readFileSync(`${filePath}`, 'utf8');
+    const rendered = mjml2html(data);
+
+    fs.writeFileSync(`${outputPath}/${filename}`, rendered.html);
+
+    const endTime = Date.now();
+    const totalTime = endTime - startTime;
+    console.log(`Rendered ${filename} in ${totalTime}ms`); // eslint-disable-line
+  } catch (error) {
+    console.error(`Unable to render ${filename}`);
+    console.error(error.message);
+  }
 };
 
 builder.buildAll = (inputDir, outputDir, extension) => {

diff --git a/src/watcher/index.js b/src/watcher/index.js
@@ -3,6 +3,16 @@ const chokidar = require('chokidar');
 const build = require('../builder').build;
 
 module.exports = (inputDir, outputDir, extension) => {
+  if (!inputDir) {
+    console.error('Error: Missing -i argument (input directory)\n');
+    return;
+  }
+
+  if (!outputDir) {
+    console.error('Error: Missing -o argument (output directory)\n');
+    return;
+  }
+
   const sourceDir = path.join(process.cwd(), inputDir);
   const watcher = chokidar.watch(sourceDir);
 
@@ -15,6 +25,10 @@ module.exports = (inputDir, outputDir, extension) => {
   });
 
   watcher.on('change', (filePath) => {
-    build(filePath.replace(/\\/g, '/'), outputDir, extension);
+    const isMjml = /\.mjml$/.test(filePath);
+
+    if (isMjml) {
+      build(filePath.replace(/\\/g, '/'), outputDir, extension);
+    }
   });
 };