Procházet zdrojové kódy

Merge pull request #144 from 0nn0/scrollWhenZoomin

Added another example + added scalesPageToFit prop
iou90 před 4 roky
rodič
revize
445cdd51e0
No account linked to committer's email address
5 změnil soubory, kde provedl 706 přidání a 4 odebrání
  1. 2
    2
      autoHeightWebView/index.js
  2. 12
    1
      demo/App.js
  3. 4
    1
      demo/config.js
  4. 146
    0
      demo/newsletterBahn.js
  5. 542
    0
      demo/newsletterZeit.js

+ 2
- 2
autoHeightWebView/index.js Zobrazit soubor

@@ -54,9 +54,9 @@ const AutoHeightWebView = React.memo(
54 54
           width
55 55
         });
56 56
     };
57
-
57
+    
58 58
     const currentScrollEnabled = scrollEnabled === false && scrollEnabledWithZoomedin ? scrollable : scrollEnabled;
59
-
59
+    
60 60
     const { currentSource, script } = reduceData(props);
61 61
 
62 62
     const { width, height } = size;

+ 12
- 1
demo/App.js Zobrazit soubor

@@ -115,7 +115,18 @@ const Explorer = () => {
115 115
         alignItems: 'center',
116 116
       }}>
117 117
       <AutoHeightWebView
118
-        customStyle={heightStyle}
118
+        scalesPageToFit
119
+        scrollableWhenZoomin
120
+        scrollEnabled={false}
121
+        customStyle={
122
+          `
123
+          #rnahw-wrapper {
124
+            padding: 0 30px;
125
+            width: 100vw;
126
+            box-sizing: border-box;
127
+          }
128
+          `
129
+        }
119 130
         onError={onError}
120 131
         onLoad={onHeightLoad}
121 132
         onLoadStart={onHeightLoadStart}

+ 4
- 1
demo/config.js Zobrazit soubor

@@ -1,6 +1,9 @@
1 1
 'use strict';
2 2
 
3
-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>`;
3
+import newsletter from "./newsletterZeit";
4
+// import newsletter from "./newsletterBahn";
5
+
6
+const autoHeightHtml0 = newsletter;//`<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 7
 
5 8
 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".`;
6 9
 

+ 146
- 0
demo/newsletterBahn.js Zobrazit soubor

@@ -0,0 +1,146 @@
1
+export default `
2
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3
+<html>
4
+  <head>
5
+    <title>DB BAHN - Current information about your connection:</title>
6
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
7
+    <meta name="viewport" content="width=device-width">
8
+  </head>
9
+  <body style="background-color: rgb(206, 206, 206);margin: 0; width:100%;">
10
+    <div id="doc" style="font-family:Arial,sans-serif;font-size:12px;height:100%; min-width:500px; max-width: 944px; background: #fff; margin: 0; color:#333333">
11
+      <table style="width: 100%;">
12
+        <tr style="height: 48px;">
13
+          <td style="vertical-align:bottom;padding-left:24px;">
14
+              &nbsp;
15
+          </td>
16
+          <td style="vertical-align:bottom;text-align: right;">
17
+            <img style="padding-right:16px;" src="http://www.bahn.de/wmedia/view/mdb/media/app/push-email/logo-db.gif" width="126" height="32" alt="DB Bahn" />
18
+          </td>
19
+        </tr>
20
+      </table>
21
+
22
+      <div style="padding:0;border:0;background-color:#f00;height:48px;">
23
+        <p style="padding-top:12px;">
24
+          <span style="color:#fff; font-weight:bold; font-size:16px;padding-left:24px;margin-top:12px;">Current information on your connection (order HFRXDK)</span>
25
+        </p>
26
+      </div>
27
+      <div style="overflow: hidden;">
28
+        <img src="http://www.bahn.de/wmedia/view/mdb/media/app/push-email/push_uhr1_944x70.jpg" />
29
+      </div>
30
+
31
+      <div style="padding-left: 24px;padding-top:16px;padding-right:24px;">
32
+        <div style="margin-bottom: 8px;font-weight:bold;">
33
+          Dear Mr Foo,
34
+        </div>
35
+
36
+        <div style="margin-bottom: 4px;">
37
+          There are some changes affecting the connection you booked.
38
+          <br/>
39
+          Please click on the red button to request the latest information:
40
+        </div>
41
+        <div style="margin-top:20px; margin-bottom: 20px;" class="button-inside">
42
+           <span><a style="text-decoration: none; color: #FFFFFF; cursor: pointer; font-weight: bold; letter-spacing: 1px;background: none repeat scroll 0 0 #FF0000;border: 1px solid #AF1818;padding:2px;" href="http://reiseauskunft.bahn.de/bin/query.exe/en?E=P&storeRecData=pushService&dbkanal_009=L01_S01_D001_KNL0011_pushm_LZ03&timestamp=1562346136&SS=8000036&ZS=8400285&T=201907051626&VH=T%248000036%248000086%24201907051626%24201907051747%24ICE++848%C2%A7T%248000086%248400058%24201907051827%24201907052028%24ICE++122%C2%A7T%248400058%248400285%24201907052034%24201907052049%24IC++2270"><span>Current information about your connection:</span></a></span>
43
+        </div>
44
+        <div style="margin-bottom:8px;font-weight:bold;">
45
+          Deviation calculated from the time the mail was sent at 19:02 o'clock:
46
+        </div>
47
+        <div style="margin-bottom:8px;">
48
+            You may not reach your connecting train in time
49
+        </div>
50
+        <div style="margin-bottom: 4px;">
51
+          All data are included without warranty, express or implied. Please note that the current traffic situation can change at any time.
52
+        </div>
53
+        <div style="margin-top: 28px;margin-bottom:4px;"><span style="font-weight:bold;">Booked connection</span></div>
54
+        <table style="font-family:Arial,sans-serif;font-size:12px;border-collapse: collapse;border-spacing: 0;">
55
+            <tr>
56
+                <th style="border-top: 1px solid #000; font-weight: bold; padding: 2px 12px 2px 4px;">Station/Stop</th>
57
+                <th style="border-top: 1px solid #000; font-weight: bold; padding: 2px 12px 2px 4px;">Date</th>
58
+                <th style="border-top: 1px solid #000; font-weight: bold; padding: 2px 12px 2px 4px;" colspan="2">Time</th>
59
+                <th style="border-top: 1px solid #000; font-weight: bold; padding: 2px 12px 2px 4px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
60
+            </tr>
61
+           <tr class="first">
62
+                <td style="padding: 2px 12px 2px 4px;border-top: 1px solid #000;">Bielefeld Hbf</td>
63
+                <td style="padding: 2px 12px 2px 4px;border-top: 1px solid #000;">05.07.2019</td>
64
+                <td style="padding: 2px 12px 2px 4px;border-top: 1px solid #000;">ab</td>
65
+                <td style="padding: 2px 12px 2px 4px;border-top: 1px solid #000;">16:26</td>
66
+                <td style="padding: 2px 12px 2px 4px;border-top: 1px solid #000;"><a style="text-decoration: underline; color:#333333;word-wrap:normal;" href="http://reiseauskunft.bahn.de/bin/query.exe/en?E=P&storeRecData=pushService&dbkanal_009=L01_S01_D001_KNL0011_pushm_LZ03&timestamp=1562346136&SS=8000036&ZS=8400285&T=201907051626&VH=T%248000036%248000086%24201907051626%24201907051747%24ICE++848%C2%A7T%248000086%248400058%24201907051827%24201907052028%24ICE++122%C2%A7T%248400058%248400285%24201907052034%24201907052049%24IC++2270"><span>Access current information</span></a></td>
67
+           </tr>
68
+           <tr class="last">
69
+                <td style="padding: 2px 12px 2px 4px;border-bottom: 1px solid #000;">Haarlem</td>
70
+                <td style="padding: 2px 12px 2px 4px;border-bottom: 1px solid #000;">05.07.2019</td>
71
+                <td style="padding: 2px 12px 2px 4px;border-bottom: 1px solid #000;">an</td>
72
+                <td style="padding: 2px 12px 2px 4px;border-bottom: 1px solid #000;">20:49</td>
73
+                <td style="padding: 2px 12px 2px 4px;border-bottom: 1px solid #000;">&nbsp;</td>
74
+           </tr>
75
+        </table>
76
+        <br/>
77
+
78
+        <div style="margin-top: 20px; margin-bottom: 4px;">
79
+          Kind regards,
80
+        </div>
81
+        <p>
82
+          <div style="overflow: hidden;">
83
+              <img title="Your Team from www.bahn.de" alt="Your Team from www.bahn.de" src="http://www.bahn.de/wmedia/view/mdb/media/app/push-email/unterschrift_pk_en.gif" />
84
+          </div>
85
+        </p>
86
+
87
+        <div style="margin-top:20px; margin-bottom:20px; border-color:#cccccc; border-width:1px 0 0 0; border-style:solid;"></div>
88
+
89
+        <p style="margin-bottom: 4px;">
90
+          <span style="font-weight:bold;">Additional information</span>
91
+        </p>
92
+
93
+        <p style="margin-bottom: 4px;">
94
+          <a style="color: #333333; text-decoration: underline;" href="http://www.bahn.de/app_tarifinfo_pk_en.shtml">Information on the validity of tickets and reservations</a>
95
+        </p>
96
+
97
+        <p style="margin-bottom: 4px;">
98
+          Current real-time information is not available for all modes of transportation. Possible portions of your itinerary by public transportation (e.g. by bus or tram) may therefore not be included in our information service.
99
+          <br/><br/>
100
+          Should your trip not be possible as planned (e.g. a missed connection due to a delay, or cancellation etc.), your passenger rights are still valid. These can be read at <a style="color: #333333;text-decoration: underline;" href="http://www.bahn.de/passengersrights">www.bahn.de/passengersrights</a>. 
101
+          <br/>
102
+        </p>
103
+
104
+        <p style="margin-bottom: 4px;">
105
+            All information on the delay alarm will be deleted at the end of the journey.
106
+        </p>
107
+        <p style="margin-bottom: 4px;margin-top: 20px;">
108
+          <a style="color: #333333; text-decoration: underline;" href="http://www.bahn.de/app_hilfe_pushnotification_pk_en_GBR.shtml">Push notification instead of e-mail</a>
109
+        </p>
110
+        <p style="margin-bottom: 4px;">
111
+          If you use the DB Navigator app, you can receive the delay alarm on your smart phone as a push notification instead of as an e-mail.
112
+        </p>
113
+        <p style="margin-bottom: 4px;">
114
+          <a style="color: #333333; text-decoration: underline;" href="http://www.bahn.de/app_hilfe_pushnotification_pk_en_GBR.shtml">How to activate push notifications</a>
115
+        </p>
116
+      </div>
117
+
118
+      <div style="margin-left:24px; margin-right:24px;margin-top:20px; margin-bottom:20px; border-color:#cccccc; border-width:1px 0 0 0; border-style:solid;"></div>
119
+      <div style="font-size:10px; padding-left: 24px;padding-right:24px;">
120
+        <p><span style="font-weight:bold;">Publishing details</span></p>
121
+        <p>
122
+          DB Vertrieb GmbH<br/>
123
+          Stephensonstraße 1<br/>
124
+          60326 Frankfurt am Main, Germany<br/>
125
+        </p>
126
+        <p>
127
+          German Register of Companies (Handelsregister) B for the Local Court of Frankfurt am Main<br/>
128
+          HRB 79808<br/>
129
+          VAT ID No.: DE 814160246<br/>
130
+        </p>
131
+        <p>DB Vertrieb GmbH is represented by the Chairman of the Management Board Georg Lauber, the Managing Director responsible for Digital Business, Nils Hartgen and the Managing Director responsible for Finance & Controlling, Dr. Christian Runzheimer.</p>
132
+      </div>
133
+
134
+      <div style="margin-top:16px;padding:0;border:0;background-color:#f00;height:32px;text-align:right;vertival-align:bottom;">
135
+        <p style="padding-top:10px;">
136
+          <span style="padding-right:40px;color:#fff">&copy;&nbsp;Deutsche Bahn AG&nbsp;</span>
137
+        </p>
138
+      </div>
139
+    </div>
140
+	<p class="webtrack">
141
+	  <img src="http://t.bahn.de/b/ss/dbbahnprod/1/H.20.3--NS/996711116?pageName=BAHN_ASK_DEU_DE_BAHN_PushServiceMail&amp;ch=BAHN_ASK_DEU_DE_BAHN&amp;events=event48" width="5" height="5" alt="" />
142
+	</p>
143
+</p>
144
+
145
+  </body>
146
+</html>`;

+ 542
- 0
demo/newsletterZeit.js Zobrazit soubor

@@ -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%;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>`;