Format emails WIP

Author: mrkvon

.env.sample

@@ -1,6 +1,9 @@
 # port on which the service will run
 PORT=3005
 
+# name of the app that sends the emails - featured in the message subject or body
+APP_NAME=sleepy.bike
+
 # server base url, e.g. to construct correct email verification link
 # this is the base url that end users see
 BASE_URL=http://localhost:3005

package.json

@@ -3,7 +3,9 @@
   "version": "0.0.1",
   "main": "dist/index.js",
   "scripts": {
-    "start": "tsc && node dist/index.js",
+    "start": "yarn build && node dist/index.js",
+    "build": "rm -rf dist && tsc && yarn copy-hbs",
+    "copy-hbs": "cp src/templates/*.hbs dist/templates && cp src/templates/*.css dist/templates",
     "format": "prettier 'src/**/*.ts' '**/*.{md,yml,yaml,json}' --write",
     "lint": "eslint . --ext .ts",
     "test": "mocha",
@@ -64,7 +66,9 @@
     "css-authn": "^0.0.14",
     "dotenv": "^16.0.0",
     "fs-extra": "^11.2.0",
+    "handlebars": "^4.7.8",
     "jsonwebtoken": "^9.0.2",
+    "juice": "^10.0.0",
     "koa": "^2.14.2",
     "koa-helmet": "^7.0.2",
     "koa-static": "^5.0.0",

src/config/index.ts

@@ -7,6 +7,8 @@ import SMTPTransport from 'nodemailer/lib/smtp-transport'
 // server base url, e.g. to construct correct email verification links
 export const baseUrl = process.env.BASE_URL ?? 'http://localhost:3005'
 
+export const appName = process.env.APP_NAME ?? 'sleepy.bike'
+
 // identity under which the mailer is operating
 export const mailerCredentials = {
   email: process.env.MAILER_IDENTITY_EMAIL ?? 'bot@example',
@@ -39,7 +41,8 @@ export const smtpTransportOptions: SMTPTransport.Options = {
 }
 
 // email address which will be the sender of the notifications and email verification messages
-export const emailSender = process.env.EMAIL_SENDER
+export const emailSender =
+  process.env.EMAIL_SENDER ?? '[email protected]'
 
 export const port: number = +(process.env.PORT ?? 3005)
 

src/controllers/integration.ts

@@ -33,7 +33,7 @@ export const initializeIntegration: Middleware = async ctx => {
   await sendMail({
     from: config.emailSender,
     to: email,
-    subject: 'Verify your email for sleepy.bike notifications',
+    subject: `Verify your email for ${config.appName} notifications`,
     html: `Please verify your email <a href="${emailVerificationLink}">click here</a>`,
     text: `Please verify your email ${emailVerificationLink}`,
   })

src/controllers/notification.ts

@@ -1,6 +1,7 @@
 import { DefaultContext, Middleware } from 'koa'
-import { emailSender } from '../config'
+import { appName, emailSender } from '../config'
 import { sendMail } from '../services/mailerService'
+import { generateHtmlMessage } from '../templates/generateMessage'
 import { getVerifiedEmails } from './status'
 
 export type GoodBody = {
@@ -31,10 +32,18 @@ export const notification: Middleware<
 
   for (const email of emails) {
     await sendMail({
-      from: emailSender,
-      to: email,
-      subject: 'You have a new message from sleepy.bike!', // TODO generalize
-      html: body.object.content,
+      from: {
+        name: body.actor.name
+          ? `${body.actor.name} (via ${appName})`
+          : `${appName} notifications`,
+        address: emailSender,
+      },
+      to: {
+        name: body.target.name ?? '',
+        address: email,
+      },
+      subject: `${body.actor.name || 'Someone'} wrote you from ${appName}`,
+      html: await generateHtmlMessage('message', body),
       text: body.object.content,
     })
   }

src/templates/generateMessage.ts

@@ -0,0 +1,17 @@
+import * as fs from 'fs-extra'
+import Handlebars from 'handlebars'
+import juice from 'juice'
+import path from 'path'
+
+export const generateHtmlMessage = async <T>(type: string, data: T) => {
+  const layout = await fs.readFile(path.join(__dirname, 'layout.hbs'), 'utf8')
+  const layoutTemplate = Handlebars.compile(layout)
+  const content = await fs.readFile(path.join(__dirname, `${type}.hbs`), 'utf8')
+  const contentTemplate = Handlebars.compile<T>(content)
+
+  const compiledContent = contentTemplate(data)
+  const emailHtml = layoutTemplate({ title: 'asdf', body: compiledContent })
+  const emailHtmlInlineCss = juice(emailHtml)
+
+  return emailHtmlInlineCss
+}

src/templates/layout.hbs

@@ -0,0 +1,16 @@
+<html>
+  <head>
+    <meta charset='utf-8' />
+    <title>{{title}}</title>
+    <style>
+      /* Email styles go here */ body { font-family: Arial, sans-serif; }
+    </style>
+  </head>
+  <body>
+    {{{body}}}
+    <footer>
+      <p>Contact us at
+        <a href='mailto:[email protected]'>[email protected]</a></p>
+    </footer>
+  </body>
+</html>

src/templates/message.hbs

@@ -0,0 +1,10 @@
+<p>
+  Hello
+  {{target.name}}!</p>
+<a href={{actor.id}}>{{actor.name}}</a>
+sent you a message from
+{{appName}}.
+
+<p>{{object.content}}</p>
+
+<a href='https://sleepy.bike/messages/{{actor.id}}'>Reply on {{appName}}</a>

src/templates/styles.css

@@ -76,7 +76,7 @@ describe('send notification via /notification', () => {
     const emailNotification = sendMailSpy.firstCall.firstArg
 
     expect(emailNotification).to.exist
-    expect(emailNotification.to).to.equal(email)
+    expect(emailNotification.to).to.haveOwnProperty('address', email)
 
     // TODO
   })