Merge pull request #206 from parameter1/html-teaser

Add mindful link attributes, support html teasers
parameter1 · Nov 16, 2024 · 7307484 · 7307484
2 parents 67c5739 + 4ba93dd
commit 7307484
Show file tree

Hide file tree

Showing 42 changed files with 275 additions and 222 deletions.
diff --git a/package.json b/package.json
@@ -18,8 +18,8 @@
     "test": "lerna run test"
   },
   "devDependencies": {
-    "@parameter1/base-cms-eslint": "^4.5.12",
-    "@parameter1/base-cms-marko-compiler": "^4.40.3",
+    "@parameter1/base-cms-eslint": "^4.74.0",
+    "@parameter1/base-cms-marko-compiler": "^4.74.0",
     "lerna": "^6.5.1"
   },
   "resolutions": {

diff --git a/packages/common/components/blocks/2024-head.marko b/packages/common/components/blocks/2024-head.marko
@@ -25,6 +25,7 @@ $ const title = get(newsletterConfig, "title");
   </xml>
 <![endif]-->
 <style type="text/css">
+  .teaser p { margin: 0; }
   #outlook a {
     padding:0;
   }

diff --git a/packages/common/components/blocks/2024/ad/native-download.marko b/packages/common/components/blocks/2024/ad/native-download.marko
@@ -8,10 +8,18 @@ $ const newsletter = getAsObject(input, "newsletter");
 $ const nativeX = config.getAsObject("nativeX");
 $ const placementId = get(nativeX, `placements.${newsletter.alias}.${placement}`);
 <if(nativeX.uri && placementId)>
-  <core-native-x-fetch|{ data: nxData }| uri=nativeX.uri date=date placement-id=placementId>
+  <core-native-x-fetch|{ data: nxData, tenant }| uri=nativeX.uri date=date placement-id=placementId>
     <if(nxData)>
       $ const content = convertAdToContent(nxData);
-      <common-2024-download-block content=content with-image=withImage newsletter=newsletter />
+      $ const creativeId = get(nxData, "creative.mindfulCreativeId");
+      <common-2024-download-block
+        content=content
+        with-image=withImage
+        newsletter=newsletter
+        mindful-creative-id=creativeId
+        mindful-tenant=tenant
+        link={ attrs: nxData.elements.a }
+      />
     </if>
   </core-native-x-fetch>
 </if>
diff --git a/packages/common/components/blocks/2024/ad/nativex.marko b/packages/common/components/blocks/2024/ad/nativex.marko
@@ -17,6 +17,7 @@ $ const placementId = get(nativeX, `placements.${newsletter.alias}.${placement}`
         newsletter=newsletter
         mindful-creative-id=get(nxData, "creative.mindfulCreativeId")
         mindful-tenant=tenant
+        link={ attrs: nxData.elements.a }
       />
     </if>
   </core-native-x-fetch>

diff --git a/packages/common/components/blocks/2024/article.marko b/packages/common/components/blocks/2024/article.marko
@@ -63,9 +63,9 @@ $ const queryParams = {
                   </tr>
                   <tr>
                     <td align="left" style="padding:0;margin:0">
-                      <p style="margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;font-size:14px">
-                        ${content.teaser}
-                      </p>
+                      <div style="margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;font-size:14px" class="teaser">
+                        $!{content.teaser}
+                      </div>
                     </td>
                   </tr>
                 </table>

diff --git a/packages/common/components/blocks/2024/download.marko b/packages/common/components/blocks/2024/download.marko
@@ -3,6 +3,8 @@ import { get, getAsObject } from "@parameter1/base-cms-object-path";
 $ const { config } = out.global;
 $ const { newsletter, content, withImage } = input;
 
+$ const creativeId = get(input, "mindfulCreativeId");
+$ const tenant = get(input, "mindfulTenant");
 $ const siteContext = getAsObject(content, 'siteContext');
 $ const { url } = siteContext;
 $ const newsletterConfig = config.get(newsletter.alias);
@@ -19,6 +21,16 @@ $ const sectionNameStyle = {
   "text-transform": "uppercase",
 };
 
+$ const linkAttrs = {
+  ...(getAsObject(input, "link.attrs")),
+  ...(creativeId && { 'data-mindful-creative-id': creativeId }),
+  ...(tenant && { 'data-mindful-tenant': tenant }),
+};
+
+$ const imgLinkAttrs = {
+  ...linkAttrs,
+};
+
 <tr>
   <td class="es-m-p20r es-m-p20l" align="left" style="Margin:0;padding-top:10px;padding-bottom:10px;padding-left:40px;padding-right:40px">
     <!--[if mso]><table dir="ltr" cellpadding="0" cellspacing="0"><tr><td><table dir="rtl" style="width:560px" cellpadding="0" cellspacing="0"><tr><td dir="ltr" style="width:400px" valign="top"><![endif]-->
@@ -36,7 +48,7 @@ $ const sectionNameStyle = {
             <tr>
               <td align="left" style="padding:0;Margin:0;padding-bottom:10px">
                 <h2 style="Margin:0;line-height:27px;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:18px;font-style:normal;font-weight:bold;color:#333333">
-                  <a href=url target="_blank" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:none;color:#333333;font-size:18px;line-height:27px">
+                  <a href=url target="_blank" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:none;color:#333333;font-size:18px;line-height:27px" ...linkAttrs>
                     $!{content.name}
                   </a>
                 </h2>
@@ -60,7 +72,7 @@ $ const sectionNameStyle = {
                     class="adapt-img"
                     options={ w: 138 }
                   >
-                    <@link href=url target="_blank" />
+                    <@link href=url target="_blank" ...imgLinkAttrs />
                   </marko-newsletter-imgix>
                 </marko-core-obj-value>
               </td>

diff --git a/packages/common/components/blocks/2024/promo.marko b/packages/common/components/blocks/2024/promo.marko
@@ -78,11 +78,11 @@ $ const linkAttrs = {
               </tr>
               <tr>
                 <td align="left" class="es-m-txt-c" style="padding:0;margin:0">
-                  <p style="margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:27px;color:#333333;font-size:14px">
+                  <div style="margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:27px;color:#333333;font-size:14px" class="teaser">
                     <a href=url target="_blank" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:none;color:#333333;font-size:18px" ...linkAttrs>
                       <u>$!{content.teaser}</u>
                     </a>
-                  </p>
+                  </div>
                 </td>
               </tr>
             </table>
@@ -118,9 +118,9 @@ $ const linkAttrs = {
               </tr>
               <tr>
                 <td align="left" style="padding:0;margin:0">
-                  <p style="margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;font-size:14px">
+                  <div style="margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;font-size:14px" class="teaser">
                     $!{content.teaser}
-                  </p>
+                  </div>
                 </td>
               </tr>
             </table>

diff --git a/packages/common/components/blocks/ad/nativex.marko b/packages/common/components/blocks/ad/nativex.marko
@@ -16,6 +16,7 @@ $ const placementId = get(nativeX, `placements.${newsletter.alias}.${placement}`
         content=content
         mindful-creative-id=get(nxData, "creative.mindfulCreativeId")
         mindful-tenant=tenant
+        link={ attrs: nxData.elements.a }
       />
     </if>
   </core-native-x-fetch>

diff --git a/packages/common/components/blocks/ad/wrapper.marko b/packages/common/components/blocks/ad/wrapper.marko
@@ -29,6 +29,7 @@ $ const PromotionComponent = promotionComponents[defaultValue(input.promotionCom
         content=content
         mindful-creative-id=get(data, "creative.mindfulCreativeId")
         mindful-tenant=tenant
+        link={ attrs: data.elements.a }
       />
     </if>
     <else-if(adUnit)>

diff --git a/packages/common/components/blocks/cpgnext/announcement.marko b/packages/common/components/blocks/cpgnext/announcement.marko
@@ -74,7 +74,7 @@ $ const linkAttrs = {
                           </td>
                         </tr>
                         <tr>
-                          <td align="left" class="auddev-bodysmall" style="color: #5d5d5d; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 26px; font-weight: normal; padding: 0 0 12px 0;">
+                          <td align="left" class="auddev-bodysmall" style="color: #5d5d5d; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 26px; font-weight: normal; padding: 0 0 12px 0;" class="teaser">
                             <a href=url style="color: #5d5d5d;" target="_blank" ...linkAttrs>
                               $!{content.teaser}
                             </a>

diff --git a/packages/common/components/blocks/cpgnext/article.marko b/packages/common/components/blocks/cpgnext/article.marko
@@ -37,8 +37,8 @@ $ const queryParams = {
                   </tr>
                   <if(withTeaser === true)>
                     <tr>
-                      <td align="left" class="es-m-p0l" style="padding:0;margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;font-size:14px">
-                        ${content.teaser}
+                      <td align="left" class="es-m-p0l" style="padding:0;margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;font-size:14px" class="teaser">
+                        $!{content.teaser}
                       </td>
                     </tr>
                   </if>

diff --git a/packages/common/components/blocks/cpgnext/ask-andy.marko b/packages/common/components/blocks/cpgnext/ask-andy.marko
@@ -50,8 +50,8 @@ $ const queryParams = {
                     </td>
                   </tr>
                   <tr>
-                    <td align="left" class="es-m-p0l" style="padding:0;margin:0;padding-left:20px;padding-right:20px;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;font-size:14px">
-                      <em>-${content.teaser}</em>
+                    <td align="left" class="es-m-p0l" style="padding:0;margin:0;padding-left:20px;padding-right:20px;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;font-size:14px" class="teaser">
+                      <em>-$!{content.teaser}</em>
                     </td>
                   </tr>
                   <tr>

diff --git a/packages/common/components/blocks/cpgnext/nativex.marko b/packages/common/components/blocks/cpgnext/nativex.marko
@@ -16,6 +16,7 @@ $ const placementId = get(nativeX, `placements.${newsletter.alias}.${placement}`
         with-image=withImage
         mindful-creative-id=get(nxData, "creative.mindfulCreativeId")
         mindful-tenant=tenant
+        link={ attrs: nxData.elements.a }
       />
     </if>
   </core-native-x-fetch>

diff --git a/packages/common/components/blocks/expo/content-list-item.marko b/packages/common/components/blocks/expo/content-list-item.marko
@@ -69,8 +69,8 @@ $ const imgStyles = {
                           </td>
                         </tr>
                         <tr>
-                          <td style="color: #636466; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 22px;padding-bottom:8px;" align="left" class="body-text">
-                            ${content.teaser}
+                          <td style="color: #636466; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 22px;padding-bottom:8px;" align="left" class="body-text" class="teaser">
+                            $!{content.teaser}
                           </td>
                         </tr>
                         <tr>

diff --git a/packages/common/components/blocks/expo/main-video.marko b/packages/common/components/blocks/expo/main-video.marko
@@ -75,13 +75,13 @@ $ const imgStyles = {
                                   <tr>
                                     <td style="padding: 0 0 8px 0; color: #3c3c3c; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-weight: bold; line-height: 30px;letter-spacing:.13px;" align="left" class="mobileheader">
                                       <a href=content.siteContext.url target="_blank" style="color: #3c3c3c; text-decoration: none;">
-                                        ${content.name}
+                                        $!{content.name}
                                       </a>
                                     </td>
                                   </tr>
                                   <tr>
-                                    <td style="color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; " align="left" class="body-text">
-                                      ${content.teaser}&nbsp;
+                                    <td style="color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; " align="left" class="body-text teaser">
+                                      $!{content.teaser}&nbsp;
                                       <common-expo-action-link-block content=content />
                                     </td>
                                   </tr>

diff --git a/packages/common/components/blocks/expo/schedule-list-item.marko b/packages/common/components/blocks/expo/schedule-list-item.marko
@@ -16,14 +16,14 @@ $ const { newsletter, date, content, sectionName } = input;
               <td class="content-table-flex-main" style="width:68%;display:inline-block;padding-right: 16px;" valign="top">
                 <table border="0" cellpadding="0" cellspacing="0" width="100%" align="left">
                   <tr>
-                    <td style="color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 12px;text-transform:uppercase;letter-spacing: .5px;font-weight: bold; padding: 0 0 8px 0;" align="left" class="body-text">
-                      ${content.teaser}
+                    <td style="color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 12px;text-transform:uppercase;letter-spacing: .5px;font-weight: bold; padding: 0 0 8px 0;" align="left" class="body-text teaser">
+                      $!{content.teaser}
                     </td>
                   </tr>
                   <tr>
                     <td style="padding: 0 0 12px 0; color: #3a3636; font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; line-height: 24px;">
                       <a href=content.siteContext.url target="_blank" style="color: #3a3636; text-decoration: none;">
-                        ${content.name}
+                        $!{content.name}
                       </a>
                     </td>
                   </tr>

diff --git a/packages/common/components/blocks/expo/video-list-item.marko b/packages/common/components/blocks/expo/video-list-item.marko
@@ -59,8 +59,8 @@ $ const imgStyles = {
                               </td>
                             </tr>
                             <tr>
-                              <td style="color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 22px; " align="left" class="body-text">
-                                ${content.teaser}&nbsp;
+                              <td style="color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 22px; " align="left" class="body-text teaser">
+                                $!{content.teaser}&nbsp;
                                 <common-expo-action-link-block content=content />
                                 <html-comment> The quick brown fox interviews the dog in the aisle of the main hall talking about ecommerce. <a href="#" style="color:#00b8ab;text-decoration:underline;">Watch now &rarr;</a> </html-comment>
                               </td>

diff --git a/packages/common/components/blocks/numeric/ad-native.marko b/packages/common/components/blocks/numeric/ad-native.marko
@@ -16,6 +16,7 @@ $ const placementId = get(nativeX, `placements.${newsletter.alias}.${placement}`
         newsletter=newsletter
         mindful-creative-id=get(nxData, "creative.mindfulCreativeId")
         mindful-tenant=tenant
+        link={ attrs: nxData.elements.a }
       />
     </if>
   </core-native-x-fetch>

diff --git a/packages/common/components/blocks/numeric/row-five-new.marko b/packages/common/components/blocks/numeric/row-five-new.marko
@@ -101,17 +101,17 @@ $ const headlineStyle = {
                                                                         <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                                             <tr>
                                                                                 <td style="padding: 0 0 8px 0; color: #3c3c3c; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-weight: bold; line-height: 30px;" align="left" class="mobileheader">
-                                                                                    <a href=contentLink target="_blank" style=headlineStyle>${content.name}</a>
+                                                                                  <a href=contentLink target="_blank" style=headlineStyle>${content.name}</a>
                                                                                 </td>
                                                                             </tr>
                                                                             <tr>
-                                                                                <td style="color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; padding: 0 0 12px 0;" align="left" class="body-text">
-                                                                                    ${content.teaser}
+                                                                                <td style="color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; padding: 0 0 12px 0;" align="left" class="body-text teaser">
+                                                                                  $!{content.teaser}
                                                                                 </td>
                                                                             </tr>
                                                                             <tr>
                                                                                 <td style="color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; padding: 0 0 12px 0;" align="left" class="body-text">
-                                                                                    <a href=contentLink target="_blank" style="color: #27BCE2; text-decoration: underline;">Read More →</a>
+                                                                                  <a href=contentLink target="_blank" style="color: #27BCE2; text-decoration: underline;">Read More →</a>
                                                                                 </td>
                                                                             </tr>
                                                                         </table>

diff --git a/packages/common/components/blocks/numeric/row-four-new.marko b/packages/common/components/blocks/numeric/row-four-new.marko
@@ -105,8 +105,8 @@ $ const headlineStyle = {
                                                                             </td>
                                                                         </tr>
                                                                         <tr>
-                                                                            <td style="color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; padding: 0 0 12px 0;" align="left" class="body-text">
-                                                                                ${content.teaser}
+                                                                            <td style="color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; padding: 0 0 12px 0;" align="left" class="body-text teaser">
+                                                                                $!{content.teaser}
                                                                             </td>
                                                                         </tr>
                                                                         <tr>

diff --git a/packages/common/components/blocks/numeric/row-four.marko b/packages/common/components/blocks/numeric/row-four.marko
@@ -35,8 +35,8 @@ $ const queryParams = {
               </td>
             </tr>
             <tr>
-              <td style="color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 24px;" align="left" class="body-text">
-                ${content.teaser}
+              <td style="color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 24px;" align="left" class="body-text teaser">
+                $!{content.teaser}
               </td>
             </tr>
           </if>