npm
/
react-native-autoheight-webview
Watch 10
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 23 Wiki Activity
Browse Source

Added example newsletter with side margin on body element

Onno Schwanen 5 years ago
parent
35feca2d10
commit
2a112efac3
2 changed files with 545 additions and 1 deletions
Split View Show Diff Stats
  1. 3
    1
      demo/config.js
  2. 542
    0
      demo/newsletterZeit.js

+ 3
- 1
demo/config.js View File 

@@ -1,8 +1,10 @@
1 1 
 'use strict';
2 2
3 
+import newsletterZeit from "./newsletterZeit";
4 
+
3 5 
 const autoHeightHtml0 = `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;"><a href="https://github.com/iou90/react-native-autoheight-webview">Tags</a> are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn't only tag the piece with "moving". I’d also use the <a href="http://x-squad.com">tags</a> "pets", "marriage", "career change", and "travel tips".</span></p>`;
4 6
5 
-const autoHeightHtml1 = `Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with "moving".`;
7 
+const autoHeightHtml1 = newsletterZeit;//`Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with "moving".`;
6 8
7 9 
 const style0 = `
8 10 
     p {

+ 542
- 0
demo/newsletterZeit.js View File 

@@ -0,0 +1,542 @@
1 
+export default `<!doctype html>
2 
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
3 
+    <head>
4 
+        <!-- NAME: SIMPLE TEXT -->
5 
+        <!--[if gte mso 15]>
6 
+        <xml>
7 
+            <o:OfficeDocumentSettings>
8 
+            <o:AllowPNG/>
9 
+            <o:PixelsPerInch>96</o:PixelsPerInch>
10 
+            </o:OfficeDocumentSettings>
11 
+        </xml>
12 
+        <![endif]-->
13 
+        <meta charset="UTF-8">
14 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
15 
+        <meta name="viewport" content="width=device-width, initial-scale=1">
16 
+        <title>Node.js 8 – End-Of-Life</title>
17 
+
18 
+    <style type="text/css">
19 
+		p{
20 
+			margin:10px 0;
21 
+			padding:0;
22 
+		}
23 
+		table{
24 
+			border-collapse:collapse;
25 
+		}
26 
+		h1,h2,h3,h4,h5,h6{
27 
+			display:block;
28 
+			margin:0;
29 
+			padding:0;
30 
+		}
31 
+		img,a img{
32 
+			border:0;
33 
+			height:auto;
34 
+			outline:none;
35 
+			text-decoration:none;
36 
+		}
37 
+		body,#bodyTable,#bodyCell{
38 
+			height:100%;
39 
+			margin:0;
40 
+			padding:0;
41 
+			width:100%;
42 
+		}
43 
+		.mcnPreviewText{
44 
+			display:none !important;
45 
+		}
46 
+		#outlook a{
47 
+			padding:0;
48 
+		}
49 
+		img{
50 
+			-ms-interpolation-mode:bicubic;
51 
+		}
52 
+		table{
53 
+			mso-table-lspace:0pt;
54 
+			mso-table-rspace:0pt;
55 
+		}
56 
+		.ReadMsgBody{
57 
+			width:100%;
58 
+		}
59 
+		.ExternalClass{
60 
+			width:100%;
61 
+		}
62 
+		p,a,li,td,blockquote{
63 
+			mso-line-height-rule:exactly;
64 
+		}
65 
+		a[href^=tel],a[href^=sms]{
66 
+			color:inherit;
67 
+			cursor:default;
68 
+			text-decoration:none;
69 
+		}
70 
+		p,a,li,td,body,table,blockquote{
71 
+			-ms-text-size-adjust:100%;
72 
+			-webkit-text-size-adjust:100%;
73 
+		}
74 
+		.ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{
75 
+			line-height:100%;
76 
+		}
77 
+		a[x-apple-data-detectors]{
78 
+			color:inherit !important;
79 
+			text-decoration:none !important;
80 
+			font-size:inherit !important;
81 
+			font-family:inherit !important;
82 
+			font-weight:inherit !important;
83 
+			line-height:inherit !important;
84 
+		}
85 
+		#bodyCell{
86 
+			padding:10px;
87 
+		}
88 
+		.templateContainer{
89 
+			max-width:600px !important;
90 
+		}
91 
+		a.mcnButton{
92 
+			display:block;
93 
+		}
94 
+		.mcnImage,.mcnRetinaImage{
95 
+			vertical-align:bottom;
96 
+		}
97 
+		.mcnTextContent{
98 
+			word-break:break-word;
99 
+		}
100 
+		.mcnTextContent img{
101 
+			height:auto !important;
102 
+		}
103 
+		.mcnDividerBlock{
104 
+			table-layout:fixed !important;
105 
+		}
106 
+		body,#bodyTable{
107 
+			background-color:#ffffff;
108 
+			background-image:none;
109 
+			background-repeat:no-repeat;
110 
+			background-position:center;
111 
+			background-size:cover;
112 
+		}
113 
+		#bodyCell{
114 
+			border-top:0;
115 
+		}
116 
+		.templateContainer{
117 
+			border:0;
118 
+		}
119 
+		h1{
120 
+			color:#202020;
121 
+			font-family:Helvetica;
122 
+			font-size:26px;
123 
+			font-style:normal;
124 
+			font-weight:bold;
125 
+			line-height:125%;
126 
+			letter-spacing:normal;
127 
+			text-align:left;
128 
+		}
129 
+		h2{
130 
+			color:#202020;
131 
+			font-family:Helvetica;
132 
+			font-size:22px;
133 
+			font-style:normal;
134 
+			font-weight:bold;
135 
+			line-height:125%;
136 
+			letter-spacing:normal;
137 
+			text-align:left;
138 
+		}
139 
+		h3{
140 
+			color:#202020;
141 
+			font-family:Helvetica;
142 
+			font-size:20px;
143 
+			font-style:normal;
144 
+			font-weight:bold;
145 
+			line-height:125%;
146 
+			letter-spacing:normal;
147 
+			text-align:left;
148 
+		}
149 
+		h4{
150 
+			color:#202020;
151 
+			font-family:Helvetica;
152 
+			font-size:18px;
153 
+			font-style:normal;
154 
+			font-weight:bold;
155 
+			line-height:125%;
156 
+			letter-spacing:normal;
157 
+			text-align:left;
158 
+		}
159 
+		#templateHeader{
160 
+			border-top:0;
161 
+			border-bottom:0;
162 
+		}
163 
+		#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
164 
+			color:#202020;
165 
+			font-family:Helvetica;
166 
+			font-size:16px;
167 
+			line-height:150%;
168 
+			text-align:left;
169 
+		}
170 
+		#templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{
171 
+			color:#007C89;
172 
+			font-weight:normal;
173 
+			text-decoration:underline;
174 
+		}
175 
+		#templateBody{
176 
+			border-top:0;
177 
+			border-bottom:0;
178 
+		}
179 
+		#templateBody .mcnTextContent,#templateBody .mcnTextContent p{
180 
+			color:#202020;
181 
+			font-family:Helvetica;
182 
+			font-size:16px;
183 
+			line-height:150%;
184 
+			text-align:left;
185 
+		}
186 
+		#templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{
187 
+			color:#067df7;
188 
+			font-weight:normal;
189 
+			text-decoration:none;
190 
+		}
191 
+		#templateFooter{
192 
+			border-top:0;
193 
+			border-bottom:0;
194 
+		}
195 
+		#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
196 
+			color:#202020;
197 
+			font-family:Helvetica;
198 
+			font-size:12px;
199 
+			line-height:150%;
200 
+			text-align:left;
201 
+		}
202 
+		#templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{
203 
+			color:#202020;
204 
+			font-weight:normal;
205 
+			text-decoration:underline;
206 
+		}
207 
+	@media only screen and (min-width:768px){
208 
+		.templateContainer{
209 
+			width:600px !important;
210 
+		}
211 
+
212 
+}	@media only screen and (max-width: 480px){
213 
+		body,table,td,p,a,li,blockquote{
214 
+			-webkit-text-size-adjust:none !important;
215 
+		}
216 
+
217 
+}	@media only screen and (max-width: 480px){
218 
+		body{
219 
+			width:100% !important;
220 
+			min-width:100% !important;
221 
+		}
222 
+
223 
+}	@media only screen and (max-width: 480px){
224 
+		#bodyCell{
225 
+			padding-top:10px !important;
226 
+		}
227 
+
228 
+}	@media only screen and (max-width: 480px){
229 
+		.mcnRetinaImage{
230 
+			max-width:100% !important;
231 
+		}
232 
+
233 
+}	@media only screen and (max-width: 480px){
234 
+		.mcnImage{
235 
+			width:100% !important;
236 
+		}
237 
+
238 
+}	@media only screen and (max-width: 480px){
239 
+		.mcnCartContainer,.mcnCaptionTopContent,.mcnRecContentContainer,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer,.mcnImageCardRightTextContentContainer,.mcnImageCardLeftImageContentContainer,.mcnImageCardRightImageContentContainer{
240 
+			max-width:100% !important;
241 
+			width:100% !important;
242 
+		}
243 
+
244 
+}	@media only screen and (max-width: 480px){
245 
+		.mcnBoxedTextContentContainer{
246 
+			min-width:100% !important;
247 
+		}
248 
+
249 
+}	@media only screen and (max-width: 480px){
250 
+		.mcnImageGroupContent{
251 
+			padding:9px !important;
252 
+		}
253 
+
254 
+}	@media only screen and (max-width: 480px){
255 
+		.mcnCaptionLeftContentOuter .mcnTextContent,.mcnCaptionRightContentOuter .mcnTextContent{
256 
+			padding-top:9px !important;
257 
+		}
258 
+
259 
+}	@media only screen and (max-width: 480px){
260 
+		.mcnImageCardTopImageContent,.mcnCaptionBottomContent:last-child .mcnCaptionBottomImageContent,.mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent{
261 
+			padding-top:18px !important;
262 
+		}
263 
+
264 
+}	@media only screen and (max-width: 480px){
265 
+		.mcnImageCardBottomImageContent{
266 
+			padding-bottom:9px !important;
267 
+		}
268 
+
269 
+}	@media only screen and (max-width: 480px){
270 
+		.mcnImageGroupBlockInner{
271 
+			padding-top:0 !important;
272 
+			padding-bottom:0 !important;
273 
+		}
274 
+
275 
+}	@media only screen and (max-width: 480px){
276 
+		.mcnImageGroupBlockOuter{
277 
+			padding-top:9px !important;
278 
+			padding-bottom:9px !important;
279 
+		}
280 
+
281 
+}	@media only screen and (max-width: 480px){
282 
+		.mcnTextContent,.mcnBoxedTextContentColumn{
283 
+			padding-right:18px !important;
284 
+			padding-left:18px !important;
285 
+		}
286 
+
287 
+}	@media only screen and (max-width: 480px){
288 
+		.mcnImageCardLeftImageContent,.mcnImageCardRightImageContent{
289 
+			padding-right:18px !important;
290 
+			padding-bottom:0 !important;
291 
+			padding-left:18px !important;
292 
+		}
293 
+
294 
+}	@media only screen and (max-width: 480px){
295 
+		.mcpreview-image-uploader{
296 
+			display:none !important;
297 
+			width:100% !important;
298 
+		}
299 
+
300 
+}	@media only screen and (max-width: 480px){
301 
+		h1{
302 
+			font-size:22px !important;
303 
+			line-height:125% !important;
304 
+		}
305 
+
306 
+}	@media only screen and (max-width: 480px){
307 
+		h2{
308 
+			font-size:20px !important;
309 
+			line-height:125% !important;
310 
+		}
311 
+
312 
+}	@media only screen and (max-width: 480px){
313 
+		h3{
314 
+			font-size:18px !important;
315 
+			line-height:125% !important;
316 
+		}
317 
+
318 
+}	@media only screen and (max-width: 480px){
319 
+		h4{
320 
+			font-size:16px !important;
321 
+			line-height:150% !important;
322 
+		}
323 
+
324 
+}	@media only screen and (max-width: 480px){
325 
+		table.mcnBoxedTextContentContainer td.mcnTextContent,td.mcnBoxedTextContentContainer td.mcnTextContent p{
326 
+			font-size:14px !important;
327 
+			line-height:150% !important;
328 
+		}
329 
+
330 
+}	@media only screen and (max-width: 480px){
331 
+		td#templateHeader td.mcnTextContent,td#templateHeader td.mcnTextContent p{
332 
+			font-size:16px !important;
333 
+			line-height:150% !important;
334 
+		}
335 
+
336 
+}	@media only screen and (max-width: 480px){
337 
+		td#templateBody td.mcnTextContent,td#templateBody td.mcnTextContent p{
338 
+			font-size:16px !important;
339 
+			line-height:150% !important;
340 
+		}
341 
+
342 
+}	@media only screen and (max-width: 480px){
343 
+		td#templateFooter td.mcnTextContent,td#templateFooter td.mcnTextContent p{
344 
+			font-size:14px !important;
345 
+			line-height:150% !important;
346 
+		}
347 
+
348 
+}</style></head>
349 
+    <body style="background:#ffffff none no-repeat center/cover;height: 100%;margin: 0 30px;padding: 0;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #ffffff;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;">
350 
+        <!--
351 
+-->
352 
+        <!--[if !gte mso 9]><!----><span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">Our upstream provider AWS is deprecating support for Node.js 8. As a result, you need to switch to a more recent Node.js version.</span><!--<![endif]-->
353 
+        <!--
354 
+-->
355 
+        <center>
356 
+            <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="background:#ffffff none no-repeat center/cover;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 0;width: 100%;background-color: #ffffff;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;">
357 
+                <tr>
358 
+                    <td align="left" valign="top" id="bodyCell" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 10px;width: 100%;border-top: 0;padding-left: 0 !important;padding-right: 0 !important;">
359 
+                        <!-- BEGIN TEMPLATE // -->
360 
+                        <!--[if (gte mso 9)|(IE)]>
361 
+                        <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
362 
+                        <tr>
363 
+                        <td align="center" valign="top" width="600" style="width:600px;">
364 
+                        <![endif]-->
365 
+                        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border: 0;max-width: 600px !important;">
366 
+                            <tr>
367 
+                                <td valign="top" id="templateHeader" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border-top: 0;border-bottom: 0;"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
368 
+    <tbody class="mcnImageBlockOuter">
369 
+            <tr>
370 
+                <td valign="top" style="padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnImageBlockInner">
371 
+                    <table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
372 
+                        <tbody><tr>
373 
+                            <td class="mcnImageContent" valign="top" style="padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
374 
+
375 
+                                    <a href="https://zeit.us12.list-manage.com/track/click?u=3c9e9e13d7e6dae8faf375bed&id=fbf5042448&e=c9edb6a9f6" title="" class="" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
376 
+                                        <img align="left" alt="" src="https://gallery.mailchimp.com/3c9e9e13d7e6dae8faf375bed/images/d0280daa-f502-479f-885d-a16228c996f5.png" width="40" style="max-width: 80px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" class="mcnRetinaImage">
377 
+                                    </a>
378 
+
379 
+                            </td>
380 
+                        </tr>
381 
+                    </tbody></table>
382 
+                </td>
383 
+            </tr>
384 
+    </tbody>
385 
+</table></td>
386 
+                            </tr>
387 
+                            <tr>
388 
+                                <td valign="top" id="templateBody" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border-top: 0;border-bottom: 0;"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
389 
+    <tbody class="mcnTextBlockOuter">
390 
+        <tr>
391 
+            <td valign="top" class="mcnTextBlockInner" style="padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
392 
+              	<!--[if mso]>
393 
+				<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
394 
+				<tr>
395 
+				<![endif]-->
396 
+
397 
+				<!--[if mso]>
398 
+				<td valign="top" width="600" style="width:600px;">
399 
+				<![endif]-->
400 
+                <table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="100%" class="mcnTextContentContainer">
401 
+                    <tbody><tr>
402 
+
403 
+                        <td valign="top" class="mcnTextContent" style="padding: 0px 18px 9px;color: #000000;font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, Verdana, sans-serif;font-size: 14px;line-height: 150%;text-align: left;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;">
404 
+
405 
+                            <br>
406 
+Hey there,<br>
407 
+<br>
408 
+I am writing to give notice that <strong>Node.js 8</strong> will reach its <strong>End-Of-Life</strong> on <strong>December 31, 2019,</strong> and will no longer be supported by <a href="https://zeit.us12.list-manage.com/track/click?u=3c9e9e13d7e6dae8faf375bed&id=62e3d7fde7&e=c9edb6a9f6" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #067df7;font-weight: normal;text-decoration: none;">ZEIT Now</a> starting <strong>January 6, 2020</strong> (<a href="https://zeit.us12.list-manage.com/track/click?u=3c9e9e13d7e6dae8faf375bed&id=9845df9a61&e=c9edb6a9f6" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #067df7;font-weight: normal;text-decoration: none;">enforced</a> by our upstream provider <a href="https://zeit.us12.list-manage.com/track/click?u=3c9e9e13d7e6dae8faf375bed&id=43d08558eb&e=c9edb6a9f6" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #067df7;font-weight: normal;text-decoration: none;">AWS Lambda</a>).<br>
409 
+<br>
410 
+You can find more details about the Node.js End-Of-Life Schedule <a href="https://zeit.us12.list-manage.com/track/click?u=3c9e9e13d7e6dae8faf375bed&id=2d516b0a6e&e=c9edb6a9f6" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #067df7;font-weight: normal;text-decoration: none;">here</a>.<br>
411 
+<br>
412 
+&nbsp;
413 
+<h3 style="display: block;margin: 0;padding: 0;color: #202020;font-family: Helvetica;font-size: 20px;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: normal;text-align: left;">What Does This Mean?</h3>
414 
+<br>
415 
+Starting on&nbsp;<strong>January 6, 2020</strong>, new deployments without <span style="color:#cc00ff; font-family:menlo,monaco,lucida console,liberation mono,dejavu sans mono,bitstream vera sans mono,courier new,monospace; font-size:14px"><code>engines</code></span> defined in&nbsp;<span style="color:#cc00ff; font-family:menlo,monaco,lucida console,liberation mono,dejavu sans mono,bitstream vera sans mono,courier new,monospace; font-size:14px"><code>package.json</code></span>&nbsp;will use the most recent (<a href="https://zeit.us12.list-manage.com/track/click?u=3c9e9e13d7e6dae8faf375bed&id=972783ffb3&e=c9edb6a9f6" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #067df7;font-weight: normal;text-decoration: none;">LTS</a>) version of Node.js: 12.<br>
416 
+<br>
417 
+If your <span style="color:#cc00ff; font-family:menlo,monaco,lucida console,liberation mono,dejavu sans mono,bitstream vera sans mono,courier new,monospace; font-size:14px"><code>package.json</code></span> file contains&nbsp; <span style="color:#cc00ff; font-family:menlo,monaco,lucida console,liberation mono,dejavu sans mono,bitstream vera sans mono,courier new,monospace; font-size:14px"><code>"engines": { "node": "8.10.x" }</code></span>, it will fail to build and print an error message explaining you must use 12.x instead.<br>
418 
+<br>
419 
+&nbsp;
420 
+<h3 style="display: block;margin: 0;padding: 0;color: #202020;font-family: Helvetica;font-size: 20px;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: normal;text-align: left;">What Should You Do?</h3>
421 
+<br>
422 
+To avoid your project from ceasing to work, we recommend configuring the most recent Node.js version (12) in your <span style="color:#cc00ff; font-family:menlo,monaco,lucida console,liberation mono,dejavu sans mono,bitstream vera sans mono,courier new,monospace; font-size:14px"><code>package.json</code></span> file.<br>
423 
+<br>
424 
+To do so, you only need add the <span style="color:#cc00ff; font-family:menlo,monaco,lucida console,liberation mono,dejavu sans mono,bitstream vera sans mono,courier new,monospace; font-size:14px"><code>"engines": { "node": "12.x" }</code></span> property and create a new <a href="https://zeit.us12.list-manage.com/track/click?u=3c9e9e13d7e6dae8faf375bed&id=6309ae0eb3&e=c9edb6a9f6" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #067df7;font-weight: normal;text-decoration: none;">Production Deployment</a>.<br>
425 
+<br>
426 
+Learn more about how to set a custom Node.js version <a href="https://zeit.us12.list-manage.com/track/click?u=3c9e9e13d7e6dae8faf375bed&id=96958079cf&e=c9edb6a9f6" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #067df7;font-weight: normal;text-decoration: none;">in our documentation</a>.<br>
427 
+<br>
428 
+<style type="text/css">.email-image {
429 
+max-width: 550px;
430 
+}
431 
+    @media only screen and (max-width: 480px){
432 
+        .email-image{
433 
+            height:auto !important;
434 
+            max-width:550px !important;
435 
+            width: 100% !important;
436 
+        }
437 
+    }
438 
+</style>
439 
+
440 
+                        </td>
441 
+                    </tr>
442 
+                </tbody></table>
443 
+				<!--[if mso]>
444 
+				</td>
445 
+				<![endif]-->
446 
+
447 
+				<!--[if mso]>
448 
+				</tr>
449 
+				</table>
450 
+				<![endif]-->
451 
+            </td>
452 
+        </tr>
453 
+    </tbody>
454 
+</table><table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
455 
+    <tbody class="mcnTextBlockOuter">
456 
+        <tr>
457 
+            <td valign="top" class="mcnTextBlockInner" style="padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
458 
+              	<!--[if mso]>
459 
+				<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
460 
+				<tr>
461 
+				<![endif]-->
462 
+
463 
+				<!--[if mso]>
464 
+				<td valign="top" width="600" style="width:600px;">
465 
+				<![endif]-->
466 
+                <table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="100%" class="mcnTextContentContainer">
467 
+                    <tbody><tr>
468 
+
469 
+                        <td valign="top" class="mcnTextContent" style="padding: 0px 18px 9px;color: #000000;font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, Verdana, sans-serif;font-size: 14px;line-height: 150%;text-align: left;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;">
470 
+
471 
+                            –<br>
472 
+<a href="https://zeit.us12.list-manage.com/track/click?u=3c9e9e13d7e6dae8faf375bed&id=8a02a06799&e=c9edb6a9f6" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #067df7;font-weight: normal;text-decoration: none;">Leo Lamprecht</a><br>
473 
+Head of Product<br>
474 
+ZEIT, Inc.
475 
+<style type="text/css">#bodyCell { padding-left: 0 !important; padding-right: 0 !important; }
476 
+</style>
477 
+
478 
+                        </td>
479 
+                    </tr>
480 
+                </tbody></table>
481 
+				<!--[if mso]>
482 
+				</td>
483 
+				<![endif]-->
484 
+
485 
+				<!--[if mso]>
486 
+				</tr>
487 
+				</table>
488 
+				<![endif]-->
489 
+            </td>
490 
+        </tr>
491 
+    </tbody>
492 
+</table></td>
493 
+                            </tr>
494 
+                            <tr>
495 
+                                <td valign="top" id="templateFooter" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border-top: 0;border-bottom: 0;"></td>
496 
+                            </tr>
497 
+                        </table>
498 
+                        <!--[if (gte mso 9)|(IE)]>
499 
+                        </td>
500 
+                        </tr>
501 
+                        </table>
502 
+                        <![endif]-->
503 
+                        <!-- // END TEMPLATE -->
504 
+                    </td>
505 
+                </tr>
506 
+            </table>
507 
+        </center>
508 
+                <center>
509 
+                <br />
510 
+                <br />
511 
+                <br />
512 
+                <br />
513 
+                <br />
514 
+                <br />
515 
+                <table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
516 
+                    <tr>
517 
+                        <td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
518 
+                            <table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
519 
+                                <tr>
520 
+                                    <td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;">
521 
+                                        This email was sent to <a href="mailto:###@###.com" target="_blank" style="color:#404040 !important;">###@###.com</a>
522 
+                                        <br />
523 
+                                        <a href="https://zeit.us12.list-manage.com/about" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://zeit.us12.list-manage.com/unsubscribe" style="color:#404040 !important;">unsubscribe from this list</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://zeit.us12.list-manage.com/profile" style="color:#404040 !important;">update subscription preferences</a>
524 
+                                        <br />
525 
+                                        ▲ZEIT &middot; 1046 Kearny St &middot; San Francisco, CA 94133 &middot; USA
526 
+                                        <br />
527 
+                                        <br />
528 
+
529 
+                                    </td>
530 
+                                </tr>
531 
+                            </table>
532 
+                        </td>
533 
+                    </tr>
534 
+                </table>
535 
+                <style type="text/css">
536 
+                    @media only screen and (max-width: 480px){
537 
+                        table#canspamBar td{font-size:14px !important;}
538 
+                        table#canspamBar td a{display:block !important; margin-top:10px !important;}
539 
+                    }
540 
+                </style>
541 
+            </center><img src="https://zeit.us12.list-manage.com/track/open.php?u=3c9e9e13d7e6dae8faf375bed&id=ce66ec2f9f&e=c9edb6a9f6" height="1" width="1"></body>
542 
+</html>`;