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

package/components/flows/marko.json

@@ -0,0 +1,42 @@
+{
+  "taglib-imports": [
+    "./content/marko.json"
+  ],
+  "<theme-card-deck-flow>": {
+    "template": "./card-deck.marko",
+    "@slots <slot>[]": {
+      "@position": "number",
+      "@index": "number",
+      "@tag": "string",
+      "@class": "string",
+      "@modifiers": "array",
+      "@attrs": "object"
+    },
+    "@nodes": "array",
+    "@cols": "number",
+    "@tag": "string",
+    "@class": "string",
+    "@modifiers": "array",
+    "@attrs": "object"
+  },
+  "<theme-section-feed-flow>": {
+    "template": "./section-feed.marko",
+    "<header>": {},
+    "<node>": {},
+    "<node-list>": {},
+    "@nodes": "array",
+    "@display-image": "boolean",
+    "@with-section": "boolean",
+    "@with-sponsored": "boolean",
+    "@lazyload": "boolean",
+    "@modifiers": "array",
+    "<native-x>": {
+      "@index": "number",
+      "@indexes": "array",
+      "@name": "string",
+      "@aliases": "array",
+      "@section-name": "string"
+    },
+    "@with-native-x-section": "boolean"
+  }
+}

package/components/flows/section-feed.marko

@@ -0,0 +1,66 @@
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+import { getAsArray, getAsObject } from "@mindful-web/object-path";
+import setSectionNameFromLabel from "../../utils/set-section-name-from-label";
+
+$ const blockName = "section-feed";
+$ const modifiers = defaultValue(input.modifiers, []);
+$ const lazyload = defaultValue(input.lazyload, true);
+$ const withSection = defaultValue(input.withSection, true);
+$ const withSponsored = defaultValue(input.withSponsored, false);
+
+$ const { nativeX: nxConfig } = out.global;
+$ const nativeX = getAsObject(input, "nativeX");
+$ const withNativeXSection = defaultValue(input.withNativeXSection, true);
+$ const setWithSection = (node, nxNode, withNativeXSection = true, nodeInput = {}) => {
+  if (nodeInput.withSection) return true;
+  if (!withNativeXSection) return false;
+  return node.id !== nxNode.id;
+};
+
+$ const nodes = withSponsored ? setSectionNameFromLabel({
+  nodes: getAsArray(input, "nodes"),
+  label: "Sponsored",
+  sectionName: "Sponsored"
+}) : getAsArray(input, "nodes");
+
+<marko-web-node-list
+  inner-justified=true
+  flush-x=true
+  flush-y=false
+  modifiers=[blockName, ...modifiers]
+  header=input.header
+  ...input.nodeList
+>
+  <@nodes nodes=nodes>
+    <@slot|{ node, index }|>
+      <if(nxConfig && nativeX.name)>
+        <marko-web-native-x-render|{ node: nxNode, linkAttrs, containerAttrs }|
+          ...nativeX
+          when=(index === nativeX.index || (nativeX.indexes && nativeX.indexes.includes(index)))
+          node=node
+          config=nxConfig
+        >
+          <theme-section-feed-content-node
+            ...input.node
+            display-image=input.displayImage
+            with-section=setWithSection(node, nxNode, withNativeXSection, input.node)
+            lazyload=lazyload
+            node=nxNode
+            container-attrs=containerAttrs
+            link-attrs=linkAttrs
+          />
+        </marko-web-native-x-render>
+      </if>
+      <else>
+        <theme-section-feed-content-node
+          with-section=withSection
+          with-sponsor-logo=node.withSponsorLogo
+          ...input.node
+          node=node
+          display-image=input.displayImage
+          lazyload=lazyload
+        />
+      </else>
+    </@slot>
+  </@nodes>
+</marko-web-node-list>

package/components/flows/section-feed.marko.js

@@ -0,0 +1,118 @@
+// 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/components/flows/section-feed.marko",
+    marko_component = require("./section-feed.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    getAsArray = module_objectPath_module.getAsArray,
+    getAsObject = module_objectPath_module.getAsObject,
+    module_setSectionNameFromLabel = require("../../utils/set-section-name-from-label"),
+    setSectionNameFromLabel = module_setSectionNameFromLabel.default || module_setSectionNameFromLabel,
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    theme_section_feed_content_node_template = require("../nodes/section-feed-content.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_section_feed_content_node_tag = marko_loadTag(theme_section_feed_content_node_template),
+    marko_web_native_x_render_template = require("@mindful-web/marko-web-native-x/components/render.marko"),
+    marko_web_native_x_render_tag = marko_loadTag(marko_web_native_x_render_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);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const blockName = "section-feed";
+
+  const modifiers = defaultValue(input.modifiers, []);
+
+  const lazyload = defaultValue(input.lazyload, true);
+
+  const withSection = defaultValue(input.withSection, true);
+
+  const withSponsored = defaultValue(input.withSponsored, false);
+
+  const { nativeX: nxConfig } = out.global;
+
+  const nativeX = getAsObject(input, "nativeX");
+
+  const withNativeXSection = defaultValue(input.withNativeXSection, true);
+
+  const setWithSection = (node, nxNode, withNativeXSection = true, nodeInput = {}) => {
+  if (nodeInput.withSection) return true;
+  if (!withNativeXSection) return false;
+  return node.id !== nxNode.id;
+};
+
+  const nodes = withSponsored ? setSectionNameFromLabel({
+  nodes: getAsArray(input, "nodes"),
+  label: "Sponsored",
+  sectionName: "Sponsored"
+}) : getAsArray(input, "nodes");
+
+  marko_web_node_list_tag(marko_assign({
+      blockName: "node-list",
+      tag: "div",
+      justified: false,
+      innerJustified: true,
+      flushX: true,
+      flushY: false,
+      fullHeight: false,
+      collapsible: true,
+      modifiers: [blockName, ...modifiers],
+      header: input.header
+    }, input.nodeList, {
+      nodes: {
+          nodes: nodes,
+          slots: [
+              {
+                  renderBody: function(out, { node, index }) {
+                    if (nxConfig && nativeX.name) {
+                      marko_web_native_x_render_tag(marko_assign({}, nativeX, {
+                          when: (index === nativeX.index) || (nativeX.indexes && nativeX.indexes.includes(index)),
+                          node: node,
+                          config: nxConfig,
+                          renderBody: function(out, { node: nxNode, linkAttrs, containerAttrs }) {
+                            theme_section_feed_content_node_tag(marko_assign({}, input.node, {
+                                displayImage: input.displayImage,
+                                withSection: setWithSection(node, nxNode, withNativeXSection, input.node),
+                                lazyload: lazyload,
+                                node: nxNode,
+                                containerAttrs: containerAttrs,
+                                linkAttrs: linkAttrs
+                              }), out, __component, "4");
+                          }
+                        }), out, __component, "3");
+                    } else {
+                      theme_section_feed_content_node_tag(marko_assign({
+                          withSection: withSection,
+                          withSponsorLogo: node.withSponsorLogo
+                        }, input.node, {
+                          node: node,
+                          displayImage: input.displayImage,
+                          lazyload: lazyload
+                        }), out, __component, "5");
+                    }
+                  }
+                }
+            ]
+        }
+    }), 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/components/flows/section-feed.marko",
+    component: "./section-feed.marko",
+    tags: [
+      "../nodes/section-feed-content.marko",
+      "@mindful-web/marko-web-native-x/components/render.marko",
+      "@mindful-web/marko-web/components/node-list/index.marko"
+    ]
+  };

package/components/gam/components/define-display-ad.marko

@@ -0,0 +1,106 @@
+<!-- @todo: MERGE ~ marko-web-gam/components/defined-display-ad.marko -->
+<!-- @todo: replace with <marko-web-gam-define-display-ad> once logic is referrer and position targeting is migrated -->
+import { BEM, warn } from "@mindful-web/utils";
+import { get, getAsObject } from "@mindful-web/object-path";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+import generateId from "@mindful-web/marko-web-gam/utils/generate-id";
+import buildSlots from "@mindful-web/marko-web-gam/utils/build-slots";
+import slotStyle from "@mindful-web/marko-web-gam/utils/slot-size-style";
+import incrementPos from "../utils/increment-pos";
+
+$ const { req, res, site } = out.global;
+
+$ const parseReferrer = () => {
+  const referrer = req.get('referrer');
+  if (!referrer) return 'none';
+  return `${referrer}`.includes(req.hostname) ? 'internal' : 'external';
+};
+
+$ const { isArray } = Array;
+$ const {
+  path,
+  inc,
+  targeting,
+  sizeMapping,
+  templateName,
+  withWrapper,
+  collapseBeforeAdFetch,
+  requestOnMediaMatch,
+  position,
+} = input;
+$ const id = input.id || generateId({ inc });
+$ if (position) targeting.pos = incrementPos({ position, inc, res });
+$ targeting.referrer = parseReferrer();
+
+$ const collapse = defaultValue(input.collapse, true);
+$ const oop = defaultValue(input.oop, false);
+$ const size = typeof input.size === "string" ? [input.size] : (isArray(input.size) ? input.size : []);
+$ const applyStyle = input.applyStyle == null ? false : input.applyStyle;
+$ const style = applyStyle ? slotStyle(size) : null;
+
+$ const calls = [];
+$ const slots = {
+  [id]: {
+    path,
+    size,
+    sizeMapping,
+    targeting,
+    oop,
+    collapse,
+    collapseBeforeAdFetch: input.collapseBeforeAdFetch,
+  },
+};
+$ calls.push(...buildSlots(slots));
+
+$ const attrs = {
+  ...getAsObject(input.attrs),
+  "data-gam-path": path,
+  "data-gam-size": JSON.stringify(size),
+  "data-gam-size-mapping": sizeMapping ? JSON.stringify(sizeMapping) : undefined,
+  "data-gam-targeting": targeting ? JSON.stringify(targeting) : undefined,
+  "data-gam-template-name": templateName ? templateName : undefined,
+  "data-gam-collapse": `${collapse}`,
+  ...(collapseBeforeAdFetch && { "data-gam-collapse-before-ad-fetch": "true" }),
+  ...(oop && { "data-gam-oop": "true" }),
+};
+
+$ const blockName = input.blockName || "ad-container";
+$ const classNames = [blockName, ...BEM.applyModifiers(blockName, input.modifiers), input.class];
+
+$ const debugMediaQuery = Boolean(defaultValue(input.debugMediaQuery, false));
+$ if (requestOnMediaMatch) calls.push(`
+  var hasRequested = false; var debugMediaQuery = ${debugMediaQuery};
+  var handler = function(media) {
+    if (hasRequested) return;
+    if (media.matches) {
+      googletag.display('${id}'); hasRequested = true;
+      if (debugMediaQuery) console.log('GAM ad request sent based on media query', '${id}', '${requestOnMediaMatch}');
+    } else {
+      if (debugMediaQuery) console.log('GAM ad request ineligble based on media query', '${id}', '${requestOnMediaMatch}');
+    }
+  };
+  var mql = window.matchMedia('${requestOnMediaMatch}');
+  mql.addEventListener('change', function(event) { handler(event); });
+  handler(mql);
+`);
+$ if (!requestOnMediaMatch) calls.push(`googletag.display('${id}');`);
+
+<if(path)>
+  <div
+    id=(withWrapper ? null : id)
+    style=style
+    class=classNames
+    ...attrs
+  >
+    <marko-web-gam-ad-wrapper id=id enabled=withWrapper block-name=blockName>
+      <if(input.renderBody)>
+        <${input.renderBody} block-name=blockName />
+      </if>
+
+      <script>googletag.cmd.push(function() { ${calls.join(" ")} });</script>
+    </marko-web-gam-ad-wrapper>
+  </div>
+</if>
+<else>
+  $ warn("Unable to render ad unit: no `path` was provided.");
+</else>

package/components/gam/components/define-display-ad.marko.js

@@ -0,0 +1,171 @@
+// 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/components/gam/components/define-display-ad.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    BEM = module_utils_module.BEM,
+    warn = module_utils_module.warn,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    getAsObject = module_objectPath_module.getAsObject,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    module_generateId = require("@mindful-web/marko-web-gam/utils/generate-id"),
+    generateId = module_generateId.default || module_generateId,
+    module_buildSlots = require("@mindful-web/marko-web-gam/utils/build-slots"),
+    buildSlots = module_buildSlots.default || module_buildSlots,
+    module_slotStyle = require("@mindful-web/marko-web-gam/utils/slot-size-style"),
+    slotStyle = module_slotStyle.default || module_slotStyle,
+    module_incrementPos = require("../utils/increment-pos"),
+    incrementPos = module_incrementPos.default || module_incrementPos,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_escapeScript = require("marko/dist/runtime/html/helpers/escape-script-placeholder"),
+    marko_web_gam_ad_wrapper_template = require("@mindful-web/marko-web-gam/components/ad-wrapper.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_gam_ad_wrapper_tag = marko_loadTag(marko_web_gam_ad_wrapper_template),
+    marko_mergeAttrs = require("marko/dist/runtime/html/helpers/merge-attrs");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { req, res, site } = out.global;
+
+  const parseReferrer = () => {
+  const referrer = req.get('referrer');
+  if (!referrer) return 'none';
+  return `${referrer}`.includes(req.hostname) ? 'internal' : 'external';
+};
+
+  const { isArray } = Array;
+
+  const {
+  path,
+  inc,
+  targeting,
+  sizeMapping,
+  templateName,
+  withWrapper,
+  collapseBeforeAdFetch,
+  requestOnMediaMatch,
+  position,
+} = input;
+
+  const id = input.id || generateId({ inc });
+
+  if (position) targeting.pos = incrementPos({ position, inc, res });
+
+  targeting.referrer = parseReferrer();
+
+  const collapse = defaultValue(input.collapse, true);
+
+  const oop = defaultValue(input.oop, false);
+
+  const size = typeof input.size === "string" ? [input.size] : (isArray(input.size) ? input.size : []);
+
+  const applyStyle = input.applyStyle == null ? false : input.applyStyle;
+
+  const style = applyStyle ? slotStyle(size) : null;
+
+  const calls = [];
+
+  const slots = {
+  [id]: {
+    path,
+    size,
+    sizeMapping,
+    targeting,
+    oop,
+    collapse,
+    collapseBeforeAdFetch: input.collapseBeforeAdFetch,
+  },
+};
+
+  calls.push(...buildSlots(slots));
+
+  const attrs = {
+  ...getAsObject(input.attrs),
+  "data-gam-path": path,
+  "data-gam-size": JSON.stringify(size),
+  "data-gam-size-mapping": sizeMapping ? JSON.stringify(sizeMapping) : undefined,
+  "data-gam-targeting": targeting ? JSON.stringify(targeting) : undefined,
+  "data-gam-template-name": templateName ? templateName : undefined,
+  "data-gam-collapse": `${collapse}`,
+  ...(collapseBeforeAdFetch && { "data-gam-collapse-before-ad-fetch": "true" }),
+  ...(oop && { "data-gam-oop": "true" }),
+};
+
+  const blockName = input.blockName || "ad-container";
+
+  const classNames = [blockName, ...BEM.applyModifiers(blockName, input.modifiers), input.class];
+
+  const debugMediaQuery = Boolean(defaultValue(input.debugMediaQuery, false));
+
+  if (requestOnMediaMatch) calls.push(`
+  var hasRequested = false; var debugMediaQuery = ${debugMediaQuery};
+  var handler = function(media) {
+    if (hasRequested) return;
+    if (media.matches) {
+      googletag.display('${id}'); hasRequested = true;
+      if (debugMediaQuery) console.log('GAM ad request sent based on media query', '${id}', '${requestOnMediaMatch}');
+    } else {
+      if (debugMediaQuery) console.log('GAM ad request ineligble based on media query', '${id}', '${requestOnMediaMatch}');
+    }
+  };
+  var mql = window.matchMedia('${requestOnMediaMatch}');
+  mql.addEventListener('change', function(event) { handler(event); });
+  handler(mql);
+`);
+
+  if (!requestOnMediaMatch) calls.push(`googletag.display('${id}');`);
+
+  if (path) {
+    out.w("<div" +
+      marko_mergeAttrs({
+        id: withWrapper ? null : id,
+        style: style,
+        class: classNames
+      }, attrs) +
+      ">");
+
+    marko_web_gam_ad_wrapper_tag({
+        id: id,
+        enabled: withWrapper,
+        blockName: blockName,
+        renderBody: function(out) {
+          if (input.renderBody) {
+            marko_dynamicTag(out, input.renderBody, function() {
+              return {
+                  "block-name": blockName
+                };
+            }, null, null, null, __component, "2");
+          }
+
+          out.w("<script>" +
+            marko_escapeScript(("googletag.cmd.push(function() { " + calls.join(" ")) + " });") +
+            "</script>");
+        }
+      }, out, __component, "1");
+
+    out.w("</div>");
+  } else {
+    warn("Unable to render ad unit: no `path` was provided.");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/gam/components/define-display-ad.marko",
+    tags: [
+      "@mindful-web/marko-web-gam/components/ad-wrapper.marko"
+    ]
+  };

package/components/gam/define-display-ad.marko

@@ -0,0 +1,27 @@
+<!-- @todo: MERGE ~ marko-web-gam/defined-display-ad.marko -->
+<!-- @todo here: Merge this component into marko-web-gam's define-display-ad. Bring over the utility function and add the referrer and position targeting. -->
+import { getAsArray } from "@mindful-web/object-path";
+import { dasherize } from "@mindful-web/inflector";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { GAM, req } = out.global;
+
+$ const adUnit = GAM.getAdUnit({ name: input.name, aliases: input.aliases });
+$ const { templateName } = adUnit;
+$ const showLabel = defaultValue(input.showLabel, GAM.showLabel);
+$ const targeting = defaultValue(input.targeting, {});
+$ const modifiers = [
+  ...(showLabel ? ["with-label"] : []),
+  ...getAsArray(input.modifiers),
+];
+$ if (templateName) modifiers.push(`template-${dasherize(templateName)}`);
+
+<define-display-ad
+  ...adUnit
+  position=input.position
+  targeting=targeting
+  modifiers=modifiers
+  with-wrapper=true
+  class=input.class
+  collapse-before-ad-fetch=true
+/>

package/components/gam/define-display-ad.marko.js

@@ -0,0 +1,60 @@
+// 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/components/gam/define-display-ad.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,
+    getAsArray = module_objectPath_module.getAsArray,
+    module_inflector_module = require("@mindful-web/inflector"),
+    inflector_module = module_inflector_module.default || module_inflector_module,
+    dasherize = module_inflector_module.dasherize,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    define_display_ad_template = require("./components/define-display-ad.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    define_display_ad_tag = marko_loadTag(define_display_ad_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { GAM, req } = out.global;
+
+  const adUnit = GAM.getAdUnit({ name: input.name, aliases: input.aliases });
+
+  const { templateName } = adUnit;
+
+  const showLabel = defaultValue(input.showLabel, GAM.showLabel);
+
+  const targeting = defaultValue(input.targeting, {});
+
+  const modifiers = [
+  ...(showLabel ? ["with-label"] : []),
+  ...getAsArray(input.modifiers),
+];
+
+  if (templateName) modifiers.push(`template-${dasherize(templateName)}`);
+
+  define_display_ad_tag(marko_assign({}, adUnit, {
+      position: input.position,
+      targeting: targeting,
+      modifiers: modifiers,
+      withWrapper: true,
+      class: input.class,
+      collapseBeforeAdFetch: true
+    }), 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/components/gam/define-display-ad.marko",
+    tags: [
+      "./components/define-display-ad.marko"
+    ]
+  };

package/components/gam/inject-ads.marko

@@ -0,0 +1,28 @@
+<!-- @todo: MERGE ~ marko-web-gam/inject-ads.marko -->
+<!-- @todo: Merge this with <marko-web-gam-inject-ads>. The $global: out.global trick is providing access to the express request and response objects for retrieving the referrer and incrementing/storing the position counter. Investigate if this can be done better -- perhaps passing the referrer directly, along with the res.local prop (or a reference to it). -->
+
+<!-- This line and the default value for position are the only differences. -->
+
+import { getAsArray } from "@mindful-web/object-path";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+import DefineDisplayAd from "./define-display-ad";
+
+$ const props = {
+  selector: input.selector,
+  childSelector: input.childSelector,
+  detectEmbeds: input.detectEmbeds,
+};
+
+$ const inject = getAsArray(input, "inject").filter(o => o && o.at);
+$ props.toInject = inject.reduce((o, i) => {
+  const { at } = i;
+  delete i.at;
+  i.position = defaultValue(input.position, "content_body");
+  // Ensure closing HMTL tags are escaped.
+  const html = DefineDisplayAd.renderToString({ ...i, $global: out.global }).replace(/<\/(.+?)>/g, '<\\/$1>');
+  return { ...o, [at]: html };
+}, {});
+
+<if(Object.keys(props.toInject).length)>
+  <marko-web-browser-component name="GAMInjectAds" props=props />
+</if>

package/components/gam/inject-ads.marko.js

@@ -0,0 +1,56 @@
+// 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/components/gam/inject-ads.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,
+    getAsArray = module_objectPath_module.getAsArray,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    module_DefineDisplayAd = require("./define-display-ad"),
+    DefineDisplayAd = module_DefineDisplayAd.default || module_DefineDisplayAd,
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const props = {
+  selector: input.selector,
+  childSelector: input.childSelector,
+  detectEmbeds: input.detectEmbeds,
+};
+
+  const inject = getAsArray(input, "inject").filter(o => o && o.at);
+
+  props.toInject = inject.reduce((o, i) => {
+  const { at } = i;
+  delete i.at;
+  i.position = defaultValue(input.position, "content_body");
+  // Ensure closing HMTL tags are escaped.
+  const html = DefineDisplayAd.renderToString({ ...i, $global: out.global }).replace(/<\/(.+?)>/g, '<\\/$1>');
+  return { ...o, [at]: html };
+}, {});
+
+  if (Object.keys(props.toInject).length) {
+    marko_web_browser_component_tag({
+        name: "GAMInjectAds",
+        props: props
+      }, 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/components/gam/inject-ads.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko"
+    ]
+  };