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

package/components/gam/marko.json

@@ -0,0 +1,17 @@
+{
+  "<theme-gam-define-display-ad>": {
+    "template": "./define-display-ad.marko"
+  },
+  "<theme-gam-wallpaper-ad>": {
+    "template": "./wallpaper-ad.marko",
+    "@aliases": "array",
+    "@position": "string"
+  },
+  "<theme-gam-inject-ads>": {
+    "template": "./inject-ads.marko",
+    "@inject <inject>[]": {},
+    "@detect-embeds": "boolean",
+    "@selector": "string",
+    "@child-selector": "string"
+  }
+}

package/components/gam/utils/increment-pos.js

@@ -0,0 +1,13 @@
+// @todo: MERGE ~ marko-web-gam/utils/increment-pos.js
+// @todo: Move this logic into the <marko-web-gam-inject-ads> component when consolidating.
+module.exports = ({ res, position, inc = 1 } = {}) => {
+  // Do nothing if no position key is passed.
+  if (!position) return position;
+  res.locals.pos = res.locals.pos || {};
+
+  const val = parseInt(res.locals.pos[position], 10) || 0;
+  const n = inc + val;
+  res.locals.pos[position] = n;
+
+  return `${position}|${n}`;
+};

package/components/gam/wallpaper-ad.marko

@@ -0,0 +1,18 @@
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { aliases, position } = input;
+
+$ const disabledFeatures = out.global.disabledFeatures || new Set();
+
+$ const blockName = "wallpaper-ad";
+
+<if(!disabledFeatures.has('wallpaper'))>
+  <marko-web-block name=blockName>
+    <marko-web-element block-name=blockName name="left">
+      <theme-gam-define-display-ad name="wallpaper-left" position=position aliases=aliases show-label=false />
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="right">
+      <theme-gam-define-display-ad name="wallpaper-right" position=position aliases=aliases show-label=false />
+    </marko-web-element>
+  </marko-web-block>
+</if>

package/components/gam/wallpaper-ad.marko.js

@@ -0,0 +1,75 @@
+// 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/wallpaper-ad.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,
+    theme_gam_define_display_ad_template = require("./define-display-ad.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_gam_define_display_ad_tag = marko_loadTag(theme_gam_define_display_ad_template),
+    marko_web_element_template = require("@mindful-web/marko-web/components/element/index.marko"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_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 { aliases, position } = input;
+
+  const disabledFeatures = out.global.disabledFeatures || new Set();
+
+  const blockName = "wallpaper-ad";
+
+  if (!disabledFeatures.has("wallpaper")) {
+    marko_web_block_tag({
+        name: blockName,
+        tag: "div",
+        renderBody: function(out) {
+          marko_web_element_tag({
+              name: "left",
+              tag: "div",
+              blockName: blockName,
+              renderBody: function(out) {
+                theme_gam_define_display_ad_tag({
+                    name: "wallpaper-left",
+                    position: position,
+                    aliases: aliases,
+                    showLabel: false
+                  }, out, __component, "2");
+              }
+            }, out, __component, "1");
+
+          marko_web_element_tag({
+              name: "right",
+              tag: "div",
+              blockName: blockName,
+              renderBody: function(out) {
+                theme_gam_define_display_ad_tag({
+                    name: "wallpaper-right",
+                    position: position,
+                    aliases: aliases,
+                    showLabel: false
+                  }, out, __component, "4");
+              }
+            }, out, __component, "3");
+        }
+      }, 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/wallpaper-ad.marko",
+    tags: [
+      "./define-display-ad.marko",
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };

package/components/identity-x/comment-stream.marko

@@ -0,0 +1,33 @@
+<!-- @todo: MERGE with marko-web-identity-x/comopnents/comment-stream.marko -->
+<!-- @todo: Use toggler based on input (default false)-->
+import { getAsObject } from "@mindful-web/object-path";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { site } = out.global;
+$ const content = getAsObject(input, "content");
+$ const lang = site.config.lang || "en";
+
+<div class="comment-stream">
+  <div class="idx-comment-stream-wrapper">
+    <marko-web-identity-x-comment-stream
+      identifier=`${content.id}`
+      additional-event-data=input.additionalEventData
+      title=content.name
+      description=content.teaser
+      url=content.siteContext.canonicalUrl
+      load-more-button-class="btn btn-secondary"
+      login-button-labels={ continue: "Continue", logout: "Logout"}
+    />
+    <marko-web-browser-component
+      name="ThemeCommentToggleButton"
+      props={
+        identifier: `${content.id}`,
+        isExpanded: false,
+        classes: "btn btn-secondary comment-stream__toggle-btn",
+        targets: [".idx-comment-stream-wrapper"],
+        toggleClass: "idx-comment-stream-wrapper--open",
+        lang
+      }
+    />
+  </div>
+</div>

package/components/identity-x/comment-stream.marko.js

@@ -0,0 +1,71 @@
+// 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/identity-x/comment-stream.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,
+    getAsObject = module_objectPath_module.getAsObject,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    marko_web_identity_x_comment_stream_template = require("@mindful-web/marko-web-identity-x/components/comment-stream.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_identity_x_comment_stream_tag = marko_loadTag(marko_web_identity_x_comment_stream_template),
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { site } = out.global;
+
+  const content = getAsObject(input, "content");
+
+  const lang = site.config.lang || "en";
+
+  out.w("<div class=\"comment-stream\"><div class=\"idx-comment-stream-wrapper\">");
+
+  marko_web_identity_x_comment_stream_tag({
+      loginSource: "comments",
+      identifier: "" + content.id,
+      additionalEventData: input.additionalEventData,
+      title: content.name,
+      description: content.teaser,
+      url: content.siteContext.canonicalUrl,
+      loadMoreButtonClass: "btn btn-secondary",
+      loginButtonLabels: {
+          continue: "Continue",
+          logout: "Logout"
+        }
+    }, out, __component, "2");
+
+  marko_web_browser_component_tag({
+      name: "ThemeCommentToggleButton",
+      props: {
+          identifier: "" + content.id,
+          isExpanded: false,
+          classes: "btn btn-secondary comment-stream__toggle-btn",
+          targets: [
+              ".idx-comment-stream-wrapper"
+            ],
+          toggleClass: "idx-comment-stream-wrapper--open",
+          lang: lang
+        }
+    }, out, __component, "3");
+
+  out.w("</div></div>");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/identity-x/comment-stream.marko",
+    tags: [
+      "@mindful-web/marko-web-identity-x/components/comment-stream.marko",
+      "@mindful-web/marko-web/components/browser-component.marko"
+    ]
+  };

package/components/identity-x/content-page-gate.marko

@@ -0,0 +1,85 @@
+import { getAsObject } from "@mindful-web/object-path";
+import defaultValue  from "@mindful-web/marko-core/utils/default-value";
+
+$ const { config, site } = out.global;
+
+$ const blockName = "content-page-gate";
+$ const {
+  canAccess,
+  isLoggedIn,
+  hasRequiredAccessLevel,
+  requiresAccessLevel,
+  requiresUserInput,
+  profileCallToAction,
+  profileButtonLabel,
+  buttonLabels,
+  loginEmailLabel,
+  actionText
+} = input;
+$ const messages = getAsObject(input, "messages");
+$ const title = defaultValue(input.title, "Log in to view the full article");
+$ const profileConfirmation = defaultValue(input.profileConfirmation, "Email Confirmed!")
+$ const userInputTitle = defaultValue(input.userInputTitle, "Complete your profile to view the full article");
+$ const contentGateType = defaultValue(input.contentGateType, "default");
+$ const additionalEventData = {
+  promoCode: site.get("contentMetering.promoCode", undefined),
+  ...defaultValue(input.additionalEventData, {}),
+  contentGateType,
+  ...(input.loginEventName === "content_meter_login" && { contentGateType: "metered" }),
+  ...(input.profileEventName === "content_meter_profile" && { contentGateType: "metered" }),
+};
+
+<marko-web-block name=blockName>
+  <if(!canAccess)>
+    <marko-web-element tag="h5" name="title" block-name=blockName>
+      ${title}
+    </marko-web-element>
+    <if(isLoggedIn && !hasRequiredAccessLevel)>
+      <marko-web-element name="body" block-name=blockName>
+        $!{messages.loggedInNoAccess}
+      </marko-web-element>
+    </if>
+    <else>
+      <marko-web-element name="body" block-name=blockName>
+        <if(!requiresAccessLevel)>
+          $!{messages.loggedOutNoAccess}
+        </if>
+        <else>
+          <p>Register on ${config.website("name")} and gain access to premium content, including this article and much more.</p>
+          <p>To log in or register, begin by entering your email address below.</p>
+        </else>
+      </marko-web-element>
+
+      <marko-web-element name="form-wrapper" block-name=blockName>
+        <marko-web-identity-x-form-login
+          additional-event-data=additionalEventData
+          source="contentGate"
+          login-email-label=loginEmailLabel
+          button-labels=buttonLabels
+          action-text=actionText
+          lang=defaultValue(site.config.lang, "en")
+        />
+      </marko-web-element>
+    </else>
+  </if>
+  <else-if(isLoggedIn && requiresUserInput)>
+    <if(profileConfirmation)>
+      <marko-web-element name="confirmation" block-name=blockName>
+        ${profileConfirmation}
+      </marko-web-element>
+    </if>
+    <marko-web-element tag="h5" name="title" block-name=blockName>
+      ${userInputTitle}
+    </marko-web-element>
+
+    <marko-web-element name="form-wrapper" block-name=blockName>
+      <marko-web-identity-x-form-profile
+        call-to-action=profileCallToAction
+        button-label=profileButtonLabel
+        reload-page-on-submit=true
+        additional-event-data=additionalEventData
+        login-source="contentGate"
+      />
+    </marko-web-element>
+  </else-if>
+</marko-web-block>

package/components/identity-x/content-page-gate.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/identity-x/content-page-gate.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,
+    getAsObject = module_objectPath_module.getAsObject,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    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_str = require("marko/dist/runtime/helpers/to-string"),
+    marko_web_identity_x_form_login_template = require("@mindful-web/marko-web-identity-x/components/form-login.marko"),
+    marko_web_identity_x_form_login_tag = marko_loadTag(marko_web_identity_x_form_login_template),
+    marko_web_identity_x_form_profile_template = require("@mindful-web/marko-web-identity-x/components/form-profile.marko"),
+    marko_web_identity_x_form_profile_tag = marko_loadTag(marko_web_identity_x_form_profile_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 { config, site } = out.global;
+
+  const blockName = "content-page-gate";
+
+  const {
+  canAccess,
+  isLoggedIn,
+  hasRequiredAccessLevel,
+  requiresAccessLevel,
+  requiresUserInput,
+  profileCallToAction,
+  profileButtonLabel,
+  buttonLabels,
+  loginEmailLabel,
+  actionText
+} = input;
+
+  const messages = getAsObject(input, "messages");
+
+  const title = defaultValue(input.title, "Log in to view the full article");
+
+  const profileConfirmation = defaultValue(input.profileConfirmation, "Email Confirmed!")
+
+  const userInputTitle = defaultValue(input.userInputTitle, "Complete your profile to view the full article");
+
+  const contentGateType = defaultValue(input.contentGateType, "default");
+
+  const additionalEventData = {
+  promoCode: site.get("contentMetering.promoCode", undefined),
+  ...defaultValue(input.additionalEventData, {}),
+  contentGateType,
+  ...(input.loginEventName === "content_meter_login" && { contentGateType: "metered" }),
+  ...(input.profileEventName === "content_meter_profile" && { contentGateType: "metered" }),
+};
+
+  marko_web_block_tag({
+      name: blockName,
+      tag: "div",
+      renderBody: function(out) {
+        if (!canAccess) {
+          marko_web_element_tag({
+              name: "title",
+              tag: "h5",
+              blockName: blockName,
+              renderBody: function(out) {
+                out.w(marko_escapeXml(title));
+              }
+            }, out, __component, "1");
+
+          if (isLoggedIn && (!hasRequiredAccessLevel)) {
+            marko_web_element_tag({
+                name: "body",
+                tag: "div",
+                blockName: blockName,
+                renderBody: function(out) {
+                  out.w(marko_str(messages.loggedInNoAccess));
+                }
+              }, out, __component, "2");
+          } else {
+            marko_web_element_tag({
+                name: "body",
+                tag: "div",
+                blockName: blockName,
+                renderBody: function(out) {
+                  if (!requiresAccessLevel) {
+                    out.w(marko_str(messages.loggedOutNoAccess));
+                  } else {
+                    out.w("<p>Register on " +
+                      marko_escapeXml(config.website("name")) +
+                      " and gain access to premium content, including this article and much more.</p><p>To log in or register, begin by entering your email address below.</p>");
+                  }
+                }
+              }, out, __component, "3");
+
+            marko_web_element_tag({
+                name: "form-wrapper",
+                tag: "div",
+                blockName: blockName,
+                renderBody: function(out) {
+                  marko_web_identity_x_form_login_tag({
+                      source: "contentGate",
+                      additionalEventData: additionalEventData,
+                      loginEmailLabel: loginEmailLabel,
+                      buttonLabels: buttonLabels,
+                      actionText: actionText,
+                      lang: defaultValue(site.config.lang, "en")
+                    }, out, __component, "7");
+                }
+              }, out, __component, "6");
+          }
+        } else if (isLoggedIn && requiresUserInput) {
+          if (profileConfirmation) {
+            marko_web_element_tag({
+                name: "confirmation",
+                tag: "div",
+                blockName: blockName,
+                renderBody: function(out) {
+                  out.w(marko_escapeXml(profileConfirmation));
+                }
+              }, out, __component, "8");
+          }
+
+          marko_web_element_tag({
+              name: "title",
+              tag: "h5",
+              blockName: blockName,
+              renderBody: function(out) {
+                out.w(marko_escapeXml(userInputTitle));
+              }
+            }, out, __component, "9");
+
+          marko_web_element_tag({
+              name: "form-wrapper",
+              tag: "div",
+              blockName: blockName,
+              renderBody: function(out) {
+                marko_web_identity_x_form_profile_tag({
+                    loginSource: "contentGate",
+                    callToAction: profileCallToAction,
+                    buttonLabel: profileButtonLabel,
+                    reloadPageOnSubmit: true,
+                    additionalEventData: additionalEventData
+                  }, out, __component, "11");
+              }
+            }, out, __component, "10");
+        }
+      }
+    }, 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/identity-x/content-page-gate.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web-identity-x/components/form-login.marko",
+      "@mindful-web/marko-web-identity-x/components/form-profile.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };

package/components/identity-x/marko.json

@@ -0,0 +1,38 @@
+{
+  "<theme-identity-x-comment-stream>": {
+    "template": "./comment-stream.marko"
+  },
+  "<theme-content-page-gate>": {
+    "template": "./content-page-gate.marko",
+    "@can-access": "boolean",
+    "@is-logged-in": "boolean",
+    "@has-required-access-level": "boolean",
+    "@requires-access-level": "boolean",
+    "@requires-user-input": "boolean",
+    "@messages": "object",
+    "@title": "string",
+    "@user-input-title": "string",
+    "@profile-confirmation": "string",
+    "@profile-call-to-action": "string",
+    "@profile-button-label": "string",
+    "@additional-event-data": "object",
+    "@content-gate-type": "string",
+    "@login-event-name": "string",
+    "@profile-event-name": "string",
+    "@button-labels": "object",
+    "@login-email-label": "string",
+    "@action-text": "string"
+  },
+  "<identity-x-newsletter-form-pushdown>": {
+    "template": "./newsletter-pushdown.marko"
+  },
+  "<identity-x-newsletter-modal>": {
+    "template": "./newsletter-modal.marko"
+  },
+  "<identity-x-newsletter-form-inline>": {
+    "template": "./newsletter-inline.marko"
+  },
+  "<identity-x-newsletter-form-footer>": {
+    "template": "./newsletter-footer.marko"
+  }
+}

package/components/identity-x/newsletter-footer.marko

@@ -0,0 +1,56 @@
+import { buildImgixUrl } from "@mindful-web/image";
+import { get } from "@mindful-web/object-path";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const blockName = "newsletter-signup-banner";
+
+$ const { config, site, req } = out.global;
+$ const { identityX } = req;
+$ const additionalEventData = defaultValue(input.additionalEventData, {});
+$ const buttonLabels = defaultValue(input.buttonLabels, { continue: "Sign Up" })
+$ const loginEmailPlaceholder = defaultValue(input.loginEmailPlaceholder, "example@gmail.com");
+$ const source = defaultValue(input.source, "newsletterSignup");
+$ const configName = defaultValue(input.configName, "signupFooter");
+
+$ const {
+  name,
+  description,
+  imagePath,
+  disabled,
+} = site.getAsObject(`newsletter.${configName}`);
+
+$ const lang = site.config.lang || "en";
+
+<if(Boolean(identityX))>
+  <marko-web-identity-x-context|{ user, isEnabled, application }|>
+    <if(name && description)>
+      <marko-web-browser-component
+        name="IdentityXNewsletterFormFooter"
+        props={
+          modifiers: ["footer"],
+          siteName: config.website("name"),
+          name,
+          description,
+          disabled,
+          lang,
+          additionalEventData,
+          source,
+          type: "footer",
+          activeUser: user,
+          endpoints: identityX.config.getEndpoints(),
+          buttonLabels,
+          redirect: input.redirect,
+          loginEmailPlaceholder,
+          loginEmailLabel: input.loginEmailLabel,
+          actionText: input.actionText,
+          consentPolicy: input.consentPolicy || get(application, "organization.consentPolicy"),
+          emailConsentRequest: get(application, "organization.emailConsentRequest"),
+          regionalConsentPolicies: get(application, "organization.regionalConsentPolicies"),
+          appContextId: identityX.config.get("appContextId"),
+          requiredCreateFields: identityX.config.getRequiredCreateFields(),
+          defaultFieldLabels: identityX.config.get("defaultFieldLabels"),
+        }
+      />
+    </if>
+  </marko-web-identity-x-context>
+</if>