finished base template

2022-08-04 14:17:08 +03:00
parent 7ff28e3306
commit 1159050bf8
10 changed files with 257 additions and 17 deletions
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}
@@ -4,7 +4,8 @@

 	// List of extensions which should be recommended for users of this workspace.
 	"recommendations": [
-		"mjmlio.vscode-mjml"
+		"mjmlio.vscode-mjml",
+		"esbenp.prettier-vscode",
 	],
 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
 	"unwantedRecommendations": [
@@ -1,5 +1,8 @@
 {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[mjml]": {
    "editor.defaultFormatter": "mjmlio.vscode-mjml"
-  }
+  },
+  "mjml.previewBackgroundColor": "white",
+  "mjml.mailSubject": "Speckle Email Templates Test"
 }
@@ -2,14 +2,33 @@

 Uses the [MJML](https://mjml.io/) framework to build e-mail templates without dealing with a lot of the complexity that often arises out of doing so.

+## Env setup
+
+- Make sure you have `yarn 1.x` available globally (e.g. through corepack)
+- Make sure you have `docker-compose`
+
 ## Development

 Use VSCode and make sure you install the recommended MJML extension. Through this extension you can will get syntax highlighting in .mjml files and also the option to trigger a live preview right from the specific .mjml file.

+Before development do `yarn env:up` to start the docker environment that serves a local file server. You'll need that to be able to see assets in the preview pane, cause it expects assets to be hosted somewhere and accessed through HTTP, not loaded from a relative path on your PC.
+
+The file server is accessible at `localhost:3030`, assets are served from `/assets` and built templates from `/templates`.
+
 ## Building

 Run `yarn build` to build everything. Run `yarn watch` to build in watch mode.

 ## Testing

-You can use a trial for one of these kinds of services: https://www.emailonacid.com/. The goal here is to evaluate that the template looks right in different kinds of e-mail clients and their versions.
+### Sending out email template
+
+You can configure the MJML VSCode extension to actually send out an email of your template. To do so, make sure to configure the `mjml.mailjetAPIKey`, `mjml.mailjetAPISecret` and `mjml.mailSender` settings or `mjml.nodemailer` settings in your **user** settings.
+
+Do not save these values into the workspace settings we don't want tokens being commited to Git!
+
+Read more: https://marketplace.visualstudio.com/items?itemName=mjmlio.vscode-mjml
+
+### Validating on multiple clients
+
+You can use a trial for one of these kinds of services: https://www.emailonacid.com/. The goal here is to evaluate that the template looks right in different kinds of e-mail clients and their versions.
@@ -59,6 +59,32 @@
    </style>
    <![endif]-->
  <style type="text/css">
+    @media only screen and (min-width:480px) {
+      .mj-column-per-100 {
+        width: 100% !important;
+        max-width: 100%;
+      }
+    }
+
+  </style>
+  <style media="screen and (min-width:480px)">
+    .moz-text-html .mj-column-per-100 {
+      width: 100% !important;
+      max-width: 100%;
+    }
+
+  </style>
+  <style type="text/css">
+    @media only screen and (max-width:480px) {
+      table.mj-full-width-mobile {
+        width: 100% !important;
+      }
+
+      td.mj-full-width-mobile {
+        width: auto !important;
+      }
+    }
+
  </style>
  <style type="text/css">
  </style>
@@ -67,27 +93,127 @@
 <body style="word-spacing:normal;">
  <div style="">
    <!-- Header -->
-    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
-    <div style="margin:0px auto;max-width:600px;">
-      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%)" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);background-color:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);background-color:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);width:100%;">
        <tbody>
          <tr>
-            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
-              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+            <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                          <tbody>
+                            <tr>
+                              <td style="width:100px;">
+                                <img alt="Speckle" height="auto" src="http://localhost:3030/assets/logo-slab-white.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:16px;" width="100" />
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><![endif]-->
-    <!-- Body -->
+    <!-- Body - Start -->
    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div style="margin:0px auto;max-width:600px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
-              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                  <tbody>
+                    <!-- Some example text -->
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Helvetica;font-size:16px;line-height:1;text-align:left;color:#000000;">
+                          <p> Hello, </p>
+                          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor. In fermentum et sollicitudin ac. Arcu cursus vitae congue mauris rhoncus aenean. Odio ut enim blandit volutpat maecenas. Et molestie ac feugiat sed lectus. Diam vulputate ut pharetra sit amet aliquam id. Purus semper eget duis at tellus at urna condimentum mattis. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Convallis aenean et tortor at risus viverra. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. In iaculis nunc sed augue lacus viverra vitae congue. </p>
+                          <p> Here's a basic <a href="#" alt="link title">link</a>. </p>
+                        </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]-->
+    <!-- CTA -->
+    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                          <tbody>
+                            <tr>
+                              <td align="center" bgcolor="linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%)" role="presentation" style="border:none;border-radius:8px;cursor:auto;mso-padding-alt:10px 25px;background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);" valign="middle">
+                                <a href="#" title="CTA Title" style="display:inline-block;background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);color:white;font-family:Helvetica;font-size:16px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:8px;" target="_blank"> Call To Action (CTA) </a>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><![endif]-->
+    <!-- Body - End -->
+    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="margin:0px auto;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                  <tbody>
+                    <!-- Some example finishing text -->
+                    <tr>
+                      <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Helvetica;font-size:16px;line-height:1;text-align:left;color:#000000;">
+                          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor. In fermentum et sollicitudin ac. Arcu cursus vitae congue mauris rhoncus aenean. </p>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
@@ -100,8 +226,20 @@
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
          <tr>
-            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
-              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+            <td style="direction:ltr;font-size:0px;padding:20px 0;padding-top:0;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                  <tbody>
+                    <tr>
+                      <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family:Helvetica;font-size:14px;line-height:1;text-align:center;color:#999999;">Sent from %SERVERNAME% at <a href="#">%SERVERURL%</a>, deployed and managed by %COMPANY%. Your admin contact is %ADMINCONTACT%.</div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
@@ -0,0 +1,9 @@
+version: '3'
+services:
+  assetserver:
+    image: flashspys/nginx-static
+    ports:
+      - 3030:80
+    volumes:
+      - ./assets:/static/assets
+      - ./dist:/static/templates
@@ -2,10 +2,13 @@
  "name": "speckle-email-templates",
  "packageManager": "yarn@3.2.2",
  "scripts": {
+    "env:up": "docker-compose up -d",
+    "env:down": "docker-compose down",
    "build": "mjml ./src/*.mjml -o ./dist/",
    "watch": "mjml -w ./src/*.mjml -o ./dist/"
  },
  "devDependencies": {
-    "mjml": "^4.13.0"
+    "mjml": "^4.13.0",
+    "prettier": "^2.7.1"
  }
 }
@@ -1,12 +1,65 @@
 <mjml>
+  <mj-head>
+    <mj-attributes>
+      <mj-all font-family="Helvetica" font-size="16px" />
+    </mj-attributes>
+  </mj-head>
  <mj-body>
    <!-- Header -->
-    <mj-section>a</mj-section>
+    <mj-section background-color="linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%)" padding="0">
+      <mj-column>
+        <mj-image width="100px" src="http://localhost:3030/assets/logo-slab-white.png" alt="Speckle" />
+      </mj-column>
+    </mj-section>

-    <!-- Body -->
-    <mj-section>a</mj-section>
+    <!-- Body - Start -->
+    <mj-section>
+      <mj-column>
+        <!-- Some example text -->
+        <mj-text>
+          <p>
+            Hello,
+          </p>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor. In fermentum et sollicitudin ac. Arcu cursus vitae congue mauris rhoncus aenean. Odio ut enim blandit volutpat maecenas. Et molestie ac feugiat sed lectus. Diam vulputate ut pharetra sit amet aliquam id. Purus semper eget duis at tellus at urna condimentum mattis. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Convallis aenean et tortor at risus viverra. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. In iaculis nunc sed augue lacus viverra vitae congue.
+          </p>
+
+          <p>
+            Here's a basic <a href="#" alt="link title">link</a>.
+          </p>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+
+    <!-- CTA -->
+    <mj-section padding="0">
+      <mj-column>
+        <mj-button background-color="linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%)" border-radius="8px" color="white" href="#" title="CTA Title">
+          Call To Action (CTA)
+        </mj-button>
+      </mj-column>
+    </mj-section>
+
+    <!-- Body - End -->
+    <mj-section>
+      <mj-column>
+        <!-- Some example finishing text -->
+        <mj-text>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor. In fermentum et sollicitudin ac. Arcu cursus vitae congue mauris rhoncus aenean.
+          </p>
+        </mj-text>
+      </mj-column>
+    </mj-section>

    <!-- Footer -->
-    <mj-section>a</mj-section>
+    <mj-section padding-top="0">
+      <mj-column>
+        <mj-text font-size="14px" align="center" color="#999">
+          Sent from %SERVERNAME% at <a href="#">%SERVERURL%</a>, deployed and managed by %COMPANY%. Your admin contact is %ADMINCONTACT%.
+        </mj-text>
+      </mj-column>
+    </mj-section>
  </mj-body>
 </mjml>
@@ -1728,6 +1728,15 @@ __metadata:
  languageName: node
  linkType: hard

+"prettier@npm:^2.7.1":
+  version: 2.7.1
+  resolution: "prettier@npm:2.7.1"
+  bin:
+    prettier: bin-prettier.js
+  checksum: 55a4409182260866ab31284d929b3cb961e5fdb91fe0d2e099dac92eaecec890f36e524b4c19e6ceae839c99c6d7195817579cdffc8e2c80da0cb794463a748b
+  languageName: node
+  linkType: hard
+
 "promise-inflight@npm:^1.0.1":
  version: 1.0.1
  resolution: "promise-inflight@npm:1.0.1"
@@ -1920,6 +1929,7 @@ __metadata:
  resolution: "speckle-email-templates@workspace:."
  dependencies:
    mjml: ^4.13.0
+    prettier: ^2.7.1
  languageName: unknown
  linkType: soft