Use mjml template instead of plain html

package.json

@@ -18,6 +18,7 @@
     "gatsby-transformer-remark": "^1.7.40",
     "gatsby-transformer-sharp": "^1.6.22",
     "lodash": "^4.17.5",
+    "mjml-loader": "^1.0.1",
     "mongodb": "^3.0.7",
     "netlify-cms": "^1.5.0",
     "nodemailer": "^4.6.4",
@@ -38,8 +39,8 @@
     "develop": "gatsby develop",
     "serve": "gatsby serve",
     "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
-    "lambda-start": "netlify-lambda serve src/lambda",
-    "lambda-build": "netlify-lambda build src/lambda"
+    "lambda-start": "netlify-lambda serve src/lambda -c webpack.lambda.js",
+    "lambda-build": "netlify-lambda build src/lambda -c webpack.lambda.js"
   },
   "devDependencies": {
     "netlify-lambda": "^0.4.0",

src/components/PageCounter/style.scss

@@ -1,5 +1,6 @@
 div.counter {
   padding: 0;
+  flex-grow: 0;
   text-align: center;
   background: #ffb93a;
   color: white;

src/lambda/email-response.js

@@ -1,6 +1,6 @@
 require("dotenv").config();
 const nodemailer = require("nodemailer");
-const createHtmlMail = require("./modules/mail-template");
+const createMailTemplate = require("./modules/create-mail-template");
 
 exports.handler = function(event, context, callback) {
   const user = process.env.MAIL_USER;
@@ -30,7 +30,7 @@ exports.handler = function(event, context, callback) {
     from: `"Maciej 🥝 Smoothielicious" <${user}>`,
     to: data.email,
     subject: "🍇 Contact submission received! 🍌",
-    html: createHtmlMail({ name: data.name })
+    html: createMailTemplate({ title: 'Smoothielicious', name: data.name })
   };
 
   transporter.sendMail(mailOptions, (error, info) => {

src/lambda/modules/create-mail-template.js

@@ -0,0 +1,6 @@
+const mailString = require('./mail-template.mjml');
+const template = require('lodash/template')
+
+module.exports = ({ title, name }) => {
+  return template(mailString)({ title, name });
+}

src/lambda/modules/mail-template.mjml

@@ -0,0 +1,39 @@
+<mjml>
+  <mj-head>
+    <mj-title><%= title %></mj-title>
+
+    <mj-attributes>
+      <mj-class name="body-text" font-family="Open Sans, Arial, sans-serif" color="#111111" font-size="16px" line-height="26px" align="center">
+      </mj-class>
+    </mj-attributes>
+
+    <mj-font name="Open Sans" href="http://fonts.googleapis.com/css?family=Open+Sans">
+    </mj-font>
+  </mj-head>
+
+  <mj-body background-color="#ffffff" padding="0px">
+    <mj-section background-color="#f0f0f0">
+      <mj-column>
+        <mj-text mj-class="body-text" font-size="20px">Hello, <%= name %>!</mj-text>
+        <mj-text align="left" mj-class="body-text">
+          I hope you like my imaginary smoothie shop website. You can go back to the
+          <a href="https://medium.com/@maciejmatu">article</a> if you'd like. Don't worry, you didn't actually order 500,000 smoothies.
+          If you would like to contact me, feel free to reach out on
+          <a target="_blank" rel="noopener" href="https://www.linkedin.com/in/maciej-matuszewski-5087a975/">linked.in</a>,
+          <a target="_blank" rel="noopener" href="http://github.com/maciejmatu">github</a>&#xA0;or send me a message at
+          <a href="mailto:[email protected]">[email protected]</a>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+
+    <mj-section padding-top="0">
+      <mj-column>
+        <mj-social font-size="12px" icon-size="30px" mode="horizontal">
+          <mj-social-element border-radius="4px" name="twitter" href="https://mjml.io/"></mj-social-element>
+
+          <mj-social-element border-radius="4px"  name="linkedin" href="https://www.linkedin.com/in/maciej-matuszewski-5087a975/"></mj-social-element>
+        </mj-social>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>

webpack.lambda.js

@@ -0,0 +1,7 @@
+module.exports = {
+  module: {
+    rules: [
+      { test: /\.mjml$/, loader: 'mjml-loader' }
+    ]
+  }
+}