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

package/components/blocks/content-card-deck.marko

@@ -0,0 +1,142 @@
+import { defaultValue } from "@mindful-web/marko-web/utils";
+import { getAsObject } from "@mindful-web/object-path";
+import queryFragment from "../../graphql/fragments/content-card-deck-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const { i18n } = out.global;
+
+$ const viewMore = defaultValue(input.viewMore, true);
+$ const viewMoreText = defaultValue(input.viewMoreText, "View More");
+$ const withNativeX = defaultValue(input.withNativeX, false);
+$ const queryName = defaultValue(input.queryName, "website-scheduled-content");
+$ const nativeX = {
+  name: "default",
+  index: 3,
+  sectionName: `${i18n("Sponsor Content")}`,
+  ...input.nativeX,
+};
+
+$ const queryParams = {
+  sectionAlias: input.alias,
+  requiresImage: true,
+  limit: 3,
+  ...input.queryParams,
+  queryFragment,
+  sectionFragment,
+};
+
+$ const cols = input.cols || queryParams.limit;
+$ const blockName = "content-card-deck";
+$ const linkHeader = input.linkHeader || false;
+$ const link = getAsObject(input, "link");
+
+<if(input.nodes && input.nodes.length)>
+  $ const section = { ...input.section };
+  $ const title = input.title || section && section.name;
+  $ const description = input.description || section && section.description || input.defaultDescription;
+  <marko-web-block name=blockName>
+    <if(title)>
+      <marko-web-element block-name=blockName name="header">
+        <marko-web-element block-name=blockName name="header-left">
+          <marko-web-element block-name=blockName name="title">
+            <if(linkHeader && (input.alias || input.title))>
+              <marko-web-link href=`${input.alias}` ...link>
+                ${title}
+              </marko-web-link>
+            </if>
+            <else>
+              ${title}
+            </else>
+          </marko-web-element>
+          <if(description)>
+            <marko-web-element block-name=blockName name="description">
+              $!{description}
+            </marko-web-element>
+          </if>
+        </marko-web-element>
+        <marko-web-element block-name=blockName name="header-right">
+          <if(viewMore && section && section.canonicalPath)>
+            <marko-web-element block-name=blockName name="view-more">
+              <marko-web-link href=section.canonicalPath>
+                ${i18n(viewMoreText)} &raquo;
+              </marko-web-link>
+            </marko-web-element>
+          </if>
+        </marko-web-element>
+      </marko-web-element>
+    </if>
+
+    <theme-content-card-deck-col-flow
+      nodes=input.nodes
+      modifiers=[blockName]
+      cols=cols
+      ...(withNativeX && { nativeX })
+    >
+      <@node modifiers=[blockName] ...input.node />
+    </theme-content-card-deck-col-flow>
+
+    <if(viewMore && section && section.canonicalPath)>
+      <marko-web-element block-name=blockName name="view-more-bottom">
+        <marko-web-link href=section.canonicalPath>
+          ${i18n(viewMoreText)} &raquo;
+        </marko-web-link>
+      </marko-web-element>
+    </if>
+  </marko-web-block>
+</if>
+<else>
+  <marko-web-query|{ nodes, section: querySection }| name=queryName params=queryParams>
+    $ const section = { ...querySection, ...input.section };
+    $ const title = input.title || section && section.name;
+    $ const description = input.description || section && section.description || input.defaultDescription;
+    <marko-web-block name=blockName>
+      <if(title)>
+        <marko-web-element block-name=blockName name="header">
+          <marko-web-element block-name=blockName name="header-left">
+            <marko-web-element block-name=blockName name="title">
+              <if(linkHeader && (input.alias || input.title))>
+                <marko-web-link href=`${input.alias}` ...link>
+                  ${title}
+                </marko-web-link>
+              </if>
+              <else>
+                ${title}
+              </else>
+            </marko-web-element>
+            <if(description)>
+              <marko-web-element block-name=blockName name="description">
+                $!{description}
+              </marko-web-element>
+            </if>
+          </marko-web-element>
+          <marko-web-element block-name=blockName name="header-right">
+            <if(viewMore && section && section.canonicalPath)>
+              <marko-web-element block-name=blockName name="view-more">
+                <marko-web-link href=section.canonicalPath>
+                  ${i18n(viewMoreText)} &raquo;
+                </marko-web-link>
+              </marko-web-element>
+            </if>
+          </marko-web-element>
+        </marko-web-element>
+      </if>
+
+      <theme-content-card-deck-col-flow
+        nodes=nodes
+        modifiers=[blockName]
+        cols=cols
+        ...(withNativeX && { nativeX })
+      >
+        <@node modifiers=[blockName] ...input.node />
+      </theme-content-card-deck-col-flow>
+
+      <if(viewMore && section && section.canonicalPath)>
+        <marko-web-element block-name=blockName name="view-more-bottom">
+          <marko-web-link href=section.canonicalPath>
+            ${i18n(viewMoreText)} &raquo;
+          </marko-web-link>
+        </marko-web-element>
+      </if>
+    </marko-web-block>
+  </marko-web-query>
+</else>

package/components/blocks/content-card-deck.marko.js

@@ -0,0 +1,325 @@
+// 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/blocks/content-card-deck.marko",
+    marko_component = require("./content-card-deck.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_utils_module = require("@mindful-web/marko-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    defaultValue = module_utils_module.defaultValue,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    getAsObject = module_objectPath_module.getAsObject,
+    module_queryFragment = require("../../graphql/fragments/content-card-deck-block"),
+    queryFragment = module_queryFragment.default || module_queryFragment,
+    module_sectionFragment = require("../../graphql/fragments/section-info"),
+    sectionFragment = module_sectionFragment.default || module_sectionFragment,
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_link_template = require("@mindful-web/marko-web/components/element/link.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_link_tag = marko_loadTag(marko_web_link_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_str = require("marko/dist/runtime/helpers/to-string"),
+    theme_content_card_deck_col_flow_template = require("../flows/content/card-deck-col.marko"),
+    theme_content_card_deck_col_flow_tag = marko_loadTag(theme_content_card_deck_col_flow_template),
+    marko_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template),
+    marko_web_query_template = require("@mindful-web/marko-core/components/queries/index.marko"),
+    marko_web_query_tag = marko_loadTag(marko_web_query_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { i18n } = out.global;
+
+  const viewMore = defaultValue(input.viewMore, true);
+
+  const viewMoreText = defaultValue(input.viewMoreText, "View More");
+
+  const withNativeX = defaultValue(input.withNativeX, false);
+
+  const queryName = defaultValue(input.queryName, "website-scheduled-content");
+
+  const nativeX = {
+  name: "default",
+  index: 3,
+  sectionName: `${i18n("Sponsor Content")}`,
+  ...input.nativeX,
+};
+
+  const queryParams = {
+  sectionAlias: input.alias,
+  requiresImage: true,
+  limit: 3,
+  ...input.queryParams,
+  queryFragment,
+  sectionFragment,
+};
+
+  const cols = input.cols || queryParams.limit;
+
+  const blockName = "content-card-deck";
+
+  const linkHeader = input.linkHeader || false;
+
+  const link = getAsObject(input, "link");
+
+  if (input.nodes && input.nodes.length) {
+    const section = { ...input.section };
+
+    const title = input.title || section && section.name;
+
+    const description = input.description || section && section.description || input.defaultDescription;
+
+    marko_web_block_tag({
+        name: blockName,
+        tag: "div",
+        renderBody: function(out) {
+          if (title) {
+            marko_web_element_tag({
+                name: "header",
+                tag: "div",
+                blockName: blockName,
+                renderBody: function(out) {
+                  marko_web_element_tag({
+                      name: "header-left",
+                      tag: "div",
+                      blockName: blockName,
+                      renderBody: function(out) {
+                        marko_web_element_tag({
+                            name: "title",
+                            tag: "div",
+                            blockName: blockName,
+                            renderBody: function(out) {
+                              if (linkHeader && (input.alias || input.title)) {
+                                marko_web_link_tag(marko_assign({
+                                    href: "" + input.alias
+                                  }, link, {
+                                    renderBody: function(out) {
+                                      out.w(marko_escapeXml(title));
+                                    }
+                                  }), out, __component, "4");
+                              } else {
+                                out.w(marko_escapeXml(title));
+                              }
+                            }
+                          }, out, __component, "3");
+
+                        if (description) {
+                          marko_web_element_tag({
+                              name: "description",
+                              tag: "div",
+                              blockName: blockName,
+                              renderBody: function(out) {
+                                out.w(marko_str(description));
+                              }
+                            }, out, __component, "5");
+                        }
+                      }
+                    }, out, __component, "2");
+
+                  marko_web_element_tag({
+                      name: "header-right",
+                      tag: "div",
+                      blockName: blockName,
+                      renderBody: function(out) {
+                        if ((viewMore && section) && section.canonicalPath) {
+                          marko_web_element_tag({
+                              name: "view-more",
+                              tag: "div",
+                              blockName: blockName,
+                              renderBody: function(out) {
+                                marko_web_link_tag({
+                                    href: section.canonicalPath,
+                                    renderBody: function(out) {
+                                      out.w(marko_escapeXml(i18n(viewMoreText)) +
+                                        " »");
+                                    }
+                                  }, out, __component, "8");
+                              }
+                            }, out, __component, "7");
+                        }
+                      }
+                    }, out, __component, "6");
+                }
+              }, out, __component, "1");
+          }
+
+          theme_content_card_deck_col_flow_tag(marko_assign({
+              nodes: input.nodes,
+              modifiers: [
+                  blockName
+                ],
+              cols: cols
+            }, withNativeX && {
+              nativeX: nativeX
+            }, {
+              node: marko_assign({
+                  modifiers: [
+                      blockName
+                    ]
+                }, input.node)
+            }), out, __component, "9");
+
+          if ((viewMore && section) && section.canonicalPath) {
+            marko_web_element_tag({
+                name: "view-more-bottom",
+                tag: "div",
+                blockName: blockName,
+                renderBody: function(out) {
+                  marko_web_link_tag({
+                      href: section.canonicalPath,
+                      renderBody: function(out) {
+                        out.w(marko_escapeXml(i18n(viewMoreText)) +
+                          " »");
+                      }
+                    }, out, __component, "12");
+                }
+              }, out, __component, "11");
+          }
+        }
+      }, out, __component, "0");
+  } else {
+    marko_web_query_tag({
+        collapsible: true,
+        name: queryName,
+        params: queryParams,
+        renderBody: function(out, { nodes, section: querySection }) {
+          const section = { ...querySection, ...input.section };
+
+          const title = input.title || section && section.name;
+
+          const description = input.description || section && section.description || input.defaultDescription;
+
+          marko_web_block_tag({
+              name: blockName,
+              tag: "div",
+              renderBody: function(out) {
+                if (title) {
+                  marko_web_element_tag({
+                      name: "header",
+                      tag: "div",
+                      blockName: blockName,
+                      renderBody: function(out) {
+                        marko_web_element_tag({
+                            name: "header-left",
+                            tag: "div",
+                            blockName: blockName,
+                            renderBody: function(out) {
+                              marko_web_element_tag({
+                                  name: "title",
+                                  tag: "div",
+                                  blockName: blockName,
+                                  renderBody: function(out) {
+                                    if (linkHeader && (input.alias || input.title)) {
+                                      marko_web_link_tag(marko_assign({
+                                          href: "" + input.alias
+                                        }, link, {
+                                          renderBody: function(out) {
+                                            out.w(marko_escapeXml(title));
+                                          }
+                                        }), out, __component, "18");
+                                    } else {
+                                      out.w(marko_escapeXml(title));
+                                    }
+                                  }
+                                }, out, __component, "17");
+
+                              if (description) {
+                                marko_web_element_tag({
+                                    name: "description",
+                                    tag: "div",
+                                    blockName: blockName,
+                                    renderBody: function(out) {
+                                      out.w(marko_str(description));
+                                    }
+                                  }, out, __component, "19");
+                              }
+                            }
+                          }, out, __component, "16");
+
+                        marko_web_element_tag({
+                            name: "header-right",
+                            tag: "div",
+                            blockName: blockName,
+                            renderBody: function(out) {
+                              if ((viewMore && section) && section.canonicalPath) {
+                                marko_web_element_tag({
+                                    name: "view-more",
+                                    tag: "div",
+                                    blockName: blockName,
+                                    renderBody: function(out) {
+                                      marko_web_link_tag({
+                                          href: section.canonicalPath,
+                                          renderBody: function(out) {
+                                            out.w(marko_escapeXml(i18n(viewMoreText)) +
+                                              " »");
+                                          }
+                                        }, out, __component, "22");
+                                    }
+                                  }, out, __component, "21");
+                              }
+                            }
+                          }, out, __component, "20");
+                      }
+                    }, out, __component, "15");
+                }
+
+                theme_content_card_deck_col_flow_tag(marko_assign({
+                    nodes: nodes,
+                    modifiers: [
+                        blockName
+                      ],
+                    cols: cols
+                  }, withNativeX && {
+                    nativeX: nativeX
+                  }, {
+                    node: marko_assign({
+                        modifiers: [
+                            blockName
+                          ]
+                      }, input.node)
+                  }), out, __component, "23");
+
+                if ((viewMore && section) && section.canonicalPath) {
+                  marko_web_element_tag({
+                      name: "view-more-bottom",
+                      tag: "div",
+                      blockName: blockName,
+                      renderBody: function(out) {
+                        marko_web_link_tag({
+                            href: section.canonicalPath,
+                            renderBody: function(out) {
+                              out.w(marko_escapeXml(i18n(viewMoreText)) +
+                                " »");
+                            }
+                          }, out, __component, "26");
+                      }
+                    }, out, __component, "25");
+                }
+              }
+            }, out, __component, "14");
+        }
+      }, out, __component, "13");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/blocks/content-card-deck.marko",
+    component: "./content-card-deck.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/link.marko",
+      "@mindful-web/marko-web/components/element/index.marko",
+      "../flows/content/card-deck-col.marko",
+      "@mindful-web/marko-web/components/element/block.marko",
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/blocks/content-meter.marko

@@ -0,0 +1,85 @@
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { config, site, contentMeterState } = out.global;
+$ const {
+  displayGate,
+  displayOverlay,
+  viewLimit,
+  views,
+} = contentMeterState;
+$ const additionalEventData = {
+  promoCode: site.get("contentMeter.promoCode", undefined),
+  views,
+  viewLimit,
+  displayGate,
+  displayOverlay,
+  contentGateType: "metered",
+};
+
+
+
+$ const setTextVariables = () => {
+  // Set title based on views remaining
+  let dynamicTitle = defaultValue(input.dynamicTitle, "Create an account");
+  if (views < viewLimit) dynamicTitle = `You have ${viewLimit - views} article views remaining.`;
+  if (viewLimit - views === 1) dynamicTitle = `You have 1 article view remaining.`;
+  if (viewLimit === views && !displayOverlay) dynamicTitle = `This is your last free article.`;
+  if (viewLimit === 1 && !displayOverlay) dynamicTitle = 'Enjoy this free article.';
+
+  return {
+    title: dynamicTitle,
+    collapsedTitle: "Create a free account",
+    callToAction: `Create a free <span class="content-meter__call-to-action--site-name">${config.siteName()}</span> account to continue reading`,
+  };
+}
+$ const textVariables = setTextVariables();
+$ const customTextVariables = input.customSetTextVariablesFunction && typeof input.customSetTextVariablesFunction === 'function' ? input.customSetTextVariablesFunction(contentMeterState) : {};
+$ const allTextVariables = {
+  ...textVariables,
+  ...customTextVariables,
+};
+$ const { title, collapsedTitle, callToAction } = allTextVariables;
+
+$ const classes = [
+  "content-meter",
+  "content-meter--open",
+  `${(displayGate && displayOverlay) ? "content-meter--display-overlay" : "" }`,
+].join(" ");
+
+<if(displayGate)>
+  <div class=classes>
+    <if(displayOverlay)>
+      <div class="content-meter__overlay"/>
+    </if>
+    <div class="content-meter__bar" role="region" aria-label="Content Meter">
+      <marko-web-browser-component name="ContentMeterTrack" props=contentMeterState />
+      <div class="content-meter__title">
+        <theme-menu-toggle-button
+          class="content-meter__toggler"
+          targets=[
+            ".content-meter"
+          ]
+          beforeExpanded=`${title}`
+          beforeCollapsed=`${collapsedTitle}`
+          toggle-class="content-meter--open"
+          icon-modifiers=["xl"]
+          initially-expanded=true
+          icon-name="chevron-up"
+          expanded-icon-name="chevron-down"
+        />
+      </div>
+      <p class="content-meter__call-to-action">
+        $!{callToAction}
+      </p>
+      <div class="content-meter__body">
+        <div class="content-meter__login-form">
+          <marko-web-identity-x-form-login
+            login-email-placeholder="your@email.com"
+            source="content_meter_login"
+            additional-event-data=additionalEventData
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</if>

package/components/blocks/content-meter.marko.js

@@ -0,0 +1,132 @@
+// 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/blocks/content-meter.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,
+    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),
+    theme_menu_toggle_button_template = require("../menu-toggle-button.marko"),
+    theme_menu_toggle_button_tag = marko_loadTag(theme_menu_toggle_button_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_classAttr = require("marko/dist/runtime/html/helpers/class-attr");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { config, site, contentMeterState } = out.global;
+
+  const {
+  displayGate,
+  displayOverlay,
+  viewLimit,
+  views,
+} = contentMeterState;
+
+  const additionalEventData = {
+  promoCode: site.get("contentMeter.promoCode", undefined),
+  views,
+  viewLimit,
+  displayGate,
+  displayOverlay,
+  contentGateType: "metered",
+};
+
+  const setTextVariables = () => {
+  // Set title based on views remaining
+  let dynamicTitle = defaultValue(input.dynamicTitle, "Create an account");
+  if (views < viewLimit) dynamicTitle = `You have ${viewLimit - views} article views remaining.`;
+  if (viewLimit - views === 1) dynamicTitle = `You have 1 article view remaining.`;
+  if (viewLimit === views && !displayOverlay) dynamicTitle = `This is your last free article.`;
+  if (viewLimit === 1 && !displayOverlay) dynamicTitle = 'Enjoy this free article.';
+
+  return {
+    title: dynamicTitle,
+    collapsedTitle: "Create a free account",
+    callToAction: `Create a free <span class="content-meter__call-to-action--site-name">${config.siteName()}</span> account to continue reading`,
+  };
+}
+
+  const textVariables = setTextVariables();
+
+  const customTextVariables = input.customSetTextVariablesFunction && typeof input.customSetTextVariablesFunction === 'function' ? input.customSetTextVariablesFunction(contentMeterState) : {};
+
+  const allTextVariables = {
+  ...textVariables,
+  ...customTextVariables,
+};
+
+  const { title, collapsedTitle, callToAction } = allTextVariables;
+
+  const classes = [
+  "content-meter",
+  "content-meter--open",
+  `${(displayGate && displayOverlay) ? "content-meter--display-overlay" : "" }`,
+].join(" ");
+
+  if (displayGate) {
+    out.w("<div" +
+      marko_classAttr(classes) +
+      ">");
+
+    if (displayOverlay) {
+      out.w("<div class=\"content-meter__overlay\"></div>");
+    }
+
+    out.w("<div class=\"content-meter__bar\" role=\"region\" aria-label=\"Content Meter\">");
+
+    marko_web_browser_component_tag({
+        name: "ContentMeterTrack",
+        props: contentMeterState
+      }, out, __component, "3");
+
+    out.w("<div class=\"content-meter__title\">");
+
+    theme_menu_toggle_button_tag({
+        class: "content-meter__toggler",
+        targets: [
+            ".content-meter"
+          ],
+        beforeExpanded: "" + title,
+        beforeCollapsed: "" + collapsedTitle,
+        toggleClass: "content-meter--open",
+        iconModifiers: [
+            "xl"
+          ],
+        initiallyExpanded: true,
+        iconName: "chevron-up",
+        expandedIconName: "chevron-down"
+      }, out, __component, "5");
+
+    out.w("</div><p class=\"content-meter__call-to-action\">" +
+      marko_str(callToAction) +
+      "</p><div class=\"content-meter__body\"><div class=\"content-meter__login-form\">");
+
+    marko_web_identity_x_form_login_tag({
+        source: "content_meter_login",
+        loginEmailPlaceholder: "your@email.com",
+        additionalEventData: additionalEventData
+      }, out, __component, "9");
+
+    out.w("</div></div></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/blocks/content-meter.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko",
+      "../menu-toggle-button.marko",
+      "@mindful-web/marko-web-identity-x/components/form-login.marko"
+    ]
+  };