@mindful-web/marko-web-theme-monorail 1.0.0

package/templates/ad-preview.marko.js

@@ -0,0 +1,151 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/templates/ad-preview.marko",
+    marko_component = require("./ad-preview.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    module_converter = require("../utils/convert-mindful-ad-preview"),
+    converter = module_converter.default || module_converter,
+    theme_section_feed_flow_template = require("../components/flows/section-feed.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_section_feed_flow_tag = marko_loadTag(theme_section_feed_flow_template),
+    theme_latest_content_list_block_template = require("../components/blocks/latest-content-list.marko"),
+    theme_latest_content_list_block_tag = marko_loadTag(theme_latest_content_list_block_template),
+    theme_content_node_template = require("../components/nodes/content.marko"),
+    theme_content_node_tag = marko_loadTag(theme_content_node_template),
+    theme_card_deck_flow_template = require("../components/flows/card-deck.marko"),
+    theme_card_deck_flow_tag = marko_loadTag(theme_card_deck_flow_template),
+    theme_ad_preview_layout_template = require("../components/layouts/ad-preview.marko"),
+    theme_ad_preview_layout_tag = marko_loadTag(theme_ad_preview_layout_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { creativeId, namespace } = input;
+
+  theme_ad_preview_layout_tag({
+      creativeId: creativeId,
+      namespace: namespace,
+      sections: [
+          {
+              renderBody: function(out, {creative}) {
+                const creativeNode = converter(creative);
+
+                if (creative && (get(creative, "_form.label") === "Native Website")) {
+                  out.w("<div class=\"node-list node-list--latest-content-list node-list--flush-x\"><div class=\"node-list__header\">Preview #1</div></div>");
+
+                  theme_section_feed_flow_tag({
+                      nodes: [
+                          creativeNode
+                        ],
+                      nodeList: {
+                          innerJustified: false
+                        },
+                      node: {
+                          withDates: false,
+                          withSection: true
+                        }
+                    }, out, __component, "4");
+
+                  out.w("<hr>");
+                }
+              }
+            },
+          {
+              renderBody: function(out, {creative}) {
+                const creativeNode = converter(creative);
+
+                if (creative && (get(creative, "_form.label") === "Native Website")) {
+                  out.w("<div class=\"row\"><div class=\"col-lg-4\">");
+
+                  theme_latest_content_list_block_tag({
+                      title: "Preview #2",
+                      alias: "home",
+                      nodes: [
+                          creativeNode
+                        ]
+                    }, out, __component, "11");
+
+                  out.w("</div></div><hr>");
+                }
+              }
+            },
+          {
+              renderBody: function(out, {creative}) {
+                const creativeNode = converter(creative);
+
+                if (creative && (get(creative, "_form.label") === "Native Website")) {
+                  out.w("<div class=\"node-list node-list--latest-content-list node-list--flush-x\"><div class=\"node-list__header\">Preview #3<span class=\"small\">(with/without teaser)</span></div></div>");
+
+                  theme_card_deck_flow_tag({
+                      cols: 3,
+                      nodes: [
+                          creativeNode,
+                          creativeNode
+                        ],
+                      slots: [
+                          {
+                              renderBody: function(out, { node, index }) {
+                                if (index === 0) {
+                                  theme_content_node_tag({
+                                      node: node,
+                                      withTeaser: true,
+                                      imagePosition: "top",
+                                      card: true,
+                                      flush: true,
+                                      modifiers: [
+                                          "section-tag"
+                                        ],
+                                      image: {
+                                          fluid: true,
+                                          width: 330,
+                                          ar: "3:2"
+                                        }
+                                    }, out, __component, "19");
+                                } else {
+                                  theme_content_node_tag({
+                                      node: node,
+                                      withTeaser: false,
+                                      imagePosition: "top",
+                                      card: true,
+                                      flush: true,
+                                      modifiers: [
+                                          "section-tag"
+                                        ],
+                                      image: {
+                                          fluid: true,
+                                          width: 330,
+                                          ar: "3:2"
+                                        }
+                                    }, out, __component, "21");
+                                }
+                              }
+                            }
+                        ]
+                    }, out, __component, "17");
+                }
+              }
+            }
+        ]
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/templates/ad-preview.marko",
+    component: "./ad-preview.marko",
+    tags: [
+      "../components/flows/section-feed.marko",
+      "../components/blocks/latest-content-list.marko",
+      "../components/nodes/content.marko",
+      "../components/flows/card-deck.marko",
+      "../components/layouts/ad-preview.marko"
+    ]
+  };

package/templates/content/components/presented-by.marko

@@ -0,0 +1,22 @@
+import { buildImgixUrl } from "@mindful-web/image";
+import { get } from "@mindful-web/object-path";
+
+$ const { advertiser } = input;
+$ const imgDefaults = { auto: "format,compress", h: 50 };
+$ const imgSrc = get(advertiser, "logo.src");
+
+<if(imgSrc)>
+  $ const src = buildImgixUrl(imgSrc, imgDefaults);
+  $ const srcset = [`${src}&dpr=2 2x`];
+  <marko-web-block name="sponsor-logo">
+    <marko-web-element block-name="sponsor-logo" name="label">
+      Presented by
+    </marko-web-element>
+    <marko-web-img
+      class="sponsor-logo__logo"
+      src=src
+      srcset=srcset
+      alt="Sponsor Logo"
+    />
+  </marko-web-block>
+</if>

package/templates/content/components/presented-by.marko.js

@@ -0,0 +1,72 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/templates/content/components/presented-by.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_image_module = require("@mindful-web/image"),
+    image_module = module_image_module.default || module_image_module,
+    buildImgixUrl = module_image_module.buildImgixUrl,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    marko_web_element_template = require("@mindful-web/marko-web/components/element/index.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_template),
+    marko_web_img_template = require("@mindful-web/marko-web/components/element/img.marko"),
+    marko_web_img_tag = marko_loadTag(marko_web_img_template),
+    marko_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { advertiser } = input;
+
+  const imgDefaults = { auto: "format,compress", h: 50 };
+
+  const imgSrc = get(advertiser, "logo.src");
+
+  if (imgSrc) {
+    const src = buildImgixUrl(imgSrc, imgDefaults);
+
+    const srcset = [`${src}&dpr=2 2x`];
+
+    marko_web_block_tag({
+        name: "sponsor-logo",
+        tag: "div",
+        renderBody: function(out) {
+          marko_web_element_tag({
+              name: "label",
+              tag: "div",
+              blockName: "sponsor-logo",
+              renderBody: function(out) {
+                out.w("Presented by");
+              }
+            }, out, __component, "1");
+
+          marko_web_img_tag({
+              lazyload: true,
+              class: "sponsor-logo__logo",
+              src: src,
+              srcset: srcset,
+              alt: "Sponsor Logo"
+            }, out, __component, "2");
+        }
+      }, out, __component, "0");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/templates/content/components/presented-by.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/img.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };

package/templates/content/native-x-story.marko

@@ -0,0 +1,82 @@
+import convert from "@mindful-web/marko-web-native-x/utils/convert-story-to-content";
+
+$ const { nativeX } = out.global;
+
+$ const { story } = input;
+$ const content = convert(story);
+$ const { id, type } = content;
+$ const { primarySection } = content;
+
+<theme-default-page title=story.title description=story.teaser>
+  <@head>
+    <marko-web-native-x-gtm-init />
+  </@head>
+  <@page>
+    <marko-web-native-x-story-track-init story=story />
+    <marko-web-native-x-story-track-page-view />
+    <marko-web-native-x-story-track-social-share />
+
+    <marko-web-page-wrapper>
+      <@section|{ blockName }| modifiers=["nativex-story-header"]>
+        <div class="content-page-header">
+          <theme-breadcrumbs modifiers=["content-page"]>
+            <@item>
+              ${primarySection.name}
+            </@item>
+          </theme-breadcrumbs>
+          <marko-web-content-name tag="h1" block-name=blockName obj=content />
+          <presented-by advertiser=story.advertiser />
+        </div>
+      </@section>
+
+      <@section>
+        <div class="content-page-body" id="native-x-story-body">
+          <theme-page-contents|{ blockName }|>
+            <theme-primary-image-block obj=content.primaryImage />
+            <marko-web-content-body block-name=blockName obj=content />
+            <marko-web-social-sharing
+              url=content.siteContext.canonicalUrl
+              providers=["facebook", "linkedin", "twitter", "pinterest"]
+            />
+          </theme-page-contents>
+        </div>
+      </@section>
+
+      <@section modifiers=["related-native-x-stories"]>
+        <if(nativeX.publisherId)>
+          <marko-web-native-x-story-advertiser-related-stories|{ nodes }|
+            publisher-id=nativeX.publisherId
+            advertiser-id=story.advertiser.id
+            exclude-story-ids=[story.id]
+          >
+            <marko-web-node-list
+              inner-justified=true
+              flush-x=true
+              flush-y=false
+              modifiers=["section-feed"]
+            >
+              <@header>
+                <h2 title=`More from ${story.advertiser.name}` class="page-wrapper__website-section-name" >
+                  More from ${story.advertiser.name}
+                </h2>
+              </@header>
+              <@nodes nodes=nodes>
+                <@slot|{ node }|>
+                  <theme-section-feed-content-node
+                    node=convert(node)
+                    display-image=true
+                    with-section=false
+                    lazyload=false
+                  />
+                </@slot>
+              </@nodes>
+            </marko-web-node-list>
+          </marko-web-native-x-story-advertiser-related-stories>
+        </if>
+      </@section>
+    </marko-web-page-wrapper>
+
+    <marko-web-native-x-story-track-outbound-links container="#native-x-story-body" />
+    <marko-web-native-x-story-track-end-of-content />
+  </@page>
+</theme-default-page>

package/templates/content/native-x-story.marko.js

@@ -0,0 +1,248 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/templates/content/native-x-story.marko",
+    marko_component = require("./native-x-story.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_convert = require("@mindful-web/marko-web-native-x/utils/convert-story-to-content"),
+    convert = module_convert.default || module_convert,
+    marko_web_native_x_gtm_init_template = require("@mindful-web/marko-web-native-x/components/gtm-init.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_native_x_gtm_init_tag = marko_loadTag(marko_web_native_x_gtm_init_template),
+    marko_web_native_x_story_track_init_template = require("@mindful-web/marko-web-native-x/components/story/track-init.marko"),
+    marko_web_native_x_story_track_init_tag = marko_loadTag(marko_web_native_x_story_track_init_template),
+    marko_web_native_x_story_track_page_view_template = require("@mindful-web/marko-web-native-x/components/story/track-page-view.marko"),
+    marko_web_native_x_story_track_page_view_tag = marko_loadTag(marko_web_native_x_story_track_page_view_template),
+    marko_web_native_x_story_track_social_share_template = require("@mindful-web/marko-web-native-x/components/story/track-social-share.marko"),
+    marko_web_native_x_story_track_social_share_tag = marko_loadTag(marko_web_native_x_story_track_social_share_template),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    theme_breadcrumbs_template = require("../../components/breadcrumbs/index.marko"),
+    theme_breadcrumbs_tag = marko_loadTag(theme_breadcrumbs_template),
+    marko_web_content_name_template = require("@mindful-web/marko-web/components/element/content/name.marko"),
+    marko_web_content_name_tag = marko_loadTag(marko_web_content_name_template),
+    presented_by_template = require("./components/presented-by.marko"),
+    presented_by_tag = marko_loadTag(presented_by_template),
+    theme_primary_image_block_template = require("../../components/blocks/primary-image.marko"),
+    theme_primary_image_block_tag = marko_loadTag(theme_primary_image_block_template),
+    marko_web_content_body_template = require("@mindful-web/marko-web/components/element/content/body.marko"),
+    marko_web_content_body_tag = marko_loadTag(marko_web_content_body_template),
+    marko_web_social_sharing_template = require("@mindful-web/marko-web-social-sharing/components/social-sharing.marko"),
+    marko_web_social_sharing_tag = marko_loadTag(marko_web_social_sharing_template),
+    theme_page_contents_template = require("../../components/page/contents.marko"),
+    theme_page_contents_tag = marko_loadTag(theme_page_contents_template),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr"),
+    theme_section_feed_content_node_template = require("../../components/nodes/section-feed-content.marko"),
+    theme_section_feed_content_node_tag = marko_loadTag(theme_section_feed_content_node_template),
+    marko_web_node_list_template = require("@mindful-web/marko-web/components/node-list/index.marko"),
+    marko_web_node_list_tag = marko_loadTag(marko_web_node_list_template),
+    marko_web_native_x_story_advertiser_related_stories_template = require("@mindful-web/marko-web-native-x/components/story/advertiser-related-stories.marko"),
+    marko_web_native_x_story_advertiser_related_stories_tag = marko_loadTag(marko_web_native_x_story_advertiser_related_stories_template),
+    marko_web_page_wrapper_template = require("@mindful-web/marko-web/components/page/wrapper.marko"),
+    marko_web_page_wrapper_tag = marko_loadTag(marko_web_page_wrapper_template),
+    marko_web_native_x_story_track_outbound_links_template = require("@mindful-web/marko-web-native-x/components/story/track-outbound-links.marko"),
+    marko_web_native_x_story_track_outbound_links_tag = marko_loadTag(marko_web_native_x_story_track_outbound_links_template),
+    marko_web_native_x_story_track_end_of_content_template = require("@mindful-web/marko-web-native-x/components/story/track-end-of-content.marko"),
+    marko_web_native_x_story_track_end_of_content_tag = marko_loadTag(marko_web_native_x_story_track_end_of_content_template),
+    theme_default_page_template = require("../../components/page/default.marko"),
+    theme_default_page_tag = marko_loadTag(theme_default_page_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { nativeX } = out.global;
+
+  const { story } = input;
+
+  const content = convert(story);
+
+  const { id, type } = content;
+
+  const { primarySection } = content;
+
+  theme_default_page_tag({
+      title: story.title,
+      description: story.teaser,
+      head: {
+          renderBody: function(out) {
+            marko_web_native_x_gtm_init_tag({}, out, __component, "2");
+          }
+        },
+      page: {
+          renderBody: function(out) {
+            marko_web_native_x_story_track_init_tag({
+                story: story
+              }, out, __component, "4");
+
+            marko_web_native_x_story_track_page_view_tag({}, out, __component, "5");
+
+            marko_web_native_x_story_track_social_share_tag({}, out, __component, "6");
+
+            marko_web_page_wrapper_tag({
+                blockName: "page-wrapper",
+                tag: "div",
+                sections: [
+                    {
+                        tag: "div",
+                        modifiers: [
+                            "nativex-story-header"
+                          ],
+                        renderBody: function(out, { blockName }) {
+                          out.w("<div class=\"content-page-header\">");
+
+                          theme_breadcrumbs_tag({
+                              modifiers: [
+                                  "content-page"
+                                ],
+                              items: [
+                                  {
+                                      renderBody: function(out) {
+                                        out.w(marko_escapeXml(primarySection.name));
+                                      }
+                                    }
+                                ]
+                            }, out, __component, "10");
+
+                          marko_web_content_name_tag({
+                              tag: "h1",
+                              blockName: blockName,
+                              obj: content
+                            }, out, __component, "12");
+
+                          presented_by_tag({
+                              advertiser: story.advertiser
+                            }, out, __component, "13");
+
+                          out.w("</div>");
+                        }
+                      },
+                    {
+                        tag: "div",
+                        renderBody: function(out) {
+                          out.w("<div class=\"content-page-body\" id=\"native-x-story-body\">");
+
+                          theme_page_contents_tag({
+                              tag: "div",
+                              renderBody: function(out, { blockName }) {
+                                theme_primary_image_block_tag({
+                                    obj: content.primaryImage
+                                  }, out, __component, "17");
+
+                                marko_web_content_body_tag({
+                                    blockName: blockName,
+                                    obj: content
+                                  }, out, __component, "18");
+
+                                marko_web_social_sharing_tag({
+                                    url: content.siteContext.canonicalUrl,
+                                    providers: [
+                                        "facebook",
+                                        "linkedin",
+                                        "twitter",
+                                        "pinterest"
+                                      ]
+                                  }, out, __component, "19");
+                              }
+                            }, out, __component, "16");
+
+                          out.w("</div>");
+                        }
+                      },
+                    {
+                        tag: "div",
+                        modifiers: [
+                            "related-native-x-stories"
+                          ],
+                        renderBody: function(out) {
+                          if (nativeX.publisherId) {
+                            marko_web_native_x_story_advertiser_related_stories_tag({
+                                publisherId: nativeX.publisherId,
+                                advertiserId: story.advertiser.id,
+                                excludeStoryIds: [
+                                    story.id
+                                  ],
+                                renderBody: function(out, { nodes }) {
+                                  marko_web_node_list_tag({
+                                      blockName: "node-list",
+                                      tag: "div",
+                                      justified: false,
+                                      innerJustified: true,
+                                      flushX: true,
+                                      flushY: false,
+                                      fullHeight: false,
+                                      collapsible: true,
+                                      modifiers: [
+                                          "section-feed"
+                                        ],
+                                      header: {
+                                          renderBody: function(out) {
+                                            out.w("<h2" +
+                                              marko_attr("title", "More from " + story.advertiser.name) +
+                                              " class=\"page-wrapper__website-section-name\">More from " +
+                                              marko_escapeXml(story.advertiser.name) +
+                                              "</h2>");
+                                          }
+                                        },
+                                      nodes: {
+                                          nodes: nodes,
+                                          slots: [
+                                              {
+                                                  renderBody: function(out, { node }) {
+                                                    theme_section_feed_content_node_tag({
+                                                        node: convert(node),
+                                                        displayImage: true,
+                                                        withSection: false,
+                                                        lazyload: false
+                                                      }, out, __component, "27");
+                                                  }
+                                                }
+                                            ]
+                                        }
+                                    }, out, __component, "22");
+                                }
+                              }, out, __component, "21");
+                          }
+                        }
+                      }
+                  ]
+              }, out, __component, "7");
+
+            marko_web_native_x_story_track_outbound_links_tag({
+                container: "#native-x-story-body"
+              }, out, __component, "28");
+
+            marko_web_native_x_story_track_end_of_content_tag({}, out, __component, "29");
+          }
+        }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/templates/content/native-x-story.marko",
+    component: "./native-x-story.marko",
+    tags: [
+      "@mindful-web/marko-web-native-x/components/gtm-init.marko",
+      "@mindful-web/marko-web-native-x/components/story/track-init.marko",
+      "@mindful-web/marko-web-native-x/components/story/track-page-view.marko",
+      "@mindful-web/marko-web-native-x/components/story/track-social-share.marko",
+      "../../components/breadcrumbs/index.marko",
+      "@mindful-web/marko-web/components/element/content/name.marko",
+      "./components/presented-by.marko",
+      "../../components/blocks/primary-image.marko",
+      "@mindful-web/marko-web/components/element/content/body.marko",
+      "@mindful-web/marko-web-social-sharing/components/social-sharing.marko",
+      "../../components/page/contents.marko",
+      "../../components/nodes/section-feed-content.marko",
+      "@mindful-web/marko-web/components/node-list/index.marko",
+      "@mindful-web/marko-web-native-x/components/story/advertiser-related-stories.marko",
+      "@mindful-web/marko-web/components/page/wrapper.marko",
+      "@mindful-web/marko-web-native-x/components/story/track-outbound-links.marko",
+      "@mindful-web/marko-web-native-x/components/story/track-end-of-content.marko",
+      "../../components/page/default.marko"
+    ]
+  };