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

package/components/nodes/components/section-sponsor.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/nodes/components/section-sponsor.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,
+    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_web_website_section_name_template = require("@mindful-web/marko-web/components/element/website-section/name.marko"),
+    marko_web_website_section_name_tag = marko_loadTag(marko_web_website_section_name_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { blockName } = input;
+
+  const labels = getAsArray(input, "labels");
+
+  const sponsors = labels.filter((label) => /^sponsored by/i.test(label));
+
+  if (sponsors.length) {
+    marko_web_element_tag({
+        name: "website-section-name",
+        tag: "div",
+        blockName: blockName,
+        renderBody: function(out) {
+          out.w(marko_escapeXml(labels[0]));
+        }
+      }, out, __component, "0");
+  } else {
+    marko_web_website_section_name_tag({
+        blockName: blockName,
+        obj: input.section,
+        link: true
+      }, out, __component, "1");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/nodes/components/section-sponsor.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/website-section/name.marko"
+    ]
+  };

package/components/nodes/content-published.marko

@@ -0,0 +1,46 @@
+import dayjs from "@mindful-web/dayjs";
+import { getAsObject } from "@mindful-web/object-path";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { i18n } = out.global;
+
+$ const config = getAsObject(out.global, "markoCoreDate");
+
+$ const { obj, blockName } = input;
+
+$ const format = defaultValue(input.format, "MMM D, YYYY");
+$ const timezone = defaultValue(input.timezone, config.timezone || "America/Chicago");
+$ const locale = defaultValue(input.locale, config.locale);
+$ const publishedDate = defaultValue(obj.published, null, v => dayjs(v).tz(timezone));
+$ const updatedDate = defaultValue(obj.updated, null, v => dayjs(v).tz(timezone));
+$ const displayUpdatedDate = defaultValue(input.displayUpdatedDate, true);
+
+<marko-web-obj-date|{ value }|
+  type="content"
+  block-name=blockName
+  obj=obj
+  field="published"
+  format=format
+  locale=locale
+  timezone=timezone
+>
+  <if(input.publishedPrefix)>
+    ${input.publishedPrefix} ${value}
+  </if>
+  <else>
+    ${value}
+  </else>
+</marko-web-obj-date>
+<if(updatedDate && updatedDate.isAfter(publishedDate, "day") && displayUpdatedDate)>
+  <marko-web-obj-date|{ value }|
+    type="content"
+    block-name=blockName
+    obj=obj
+    field="updated"
+    format=format
+    locale=locale
+    timezone=timezone
+  >
+    ${i18n("Updated")} ${value}
+  </marko-web-obj-date>
+</if>

package/components/nodes/content-published.marko.js

@@ -0,0 +1,89 @@
+// 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/nodes/content-published.marko",
+    marko_component = require("./content-published.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_dayjs = require("@mindful-web/dayjs"),
+    dayjs = module_dayjs.default || module_dayjs,
+    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_obj_date_template = require("@mindful-web/marko-web/components/element/obj-date.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_obj_date_tag = marko_loadTag(marko_web_obj_date_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { i18n } = out.global;
+
+  const config = getAsObject(out.global, "markoCoreDate");
+
+  const { obj, blockName } = input;
+
+  const format = defaultValue(input.format, "MMM D, YYYY");
+
+  const timezone = defaultValue(input.timezone, config.timezone || "America/Chicago");
+
+  const locale = defaultValue(input.locale, config.locale);
+
+  const publishedDate = defaultValue(obj.published, null, v => dayjs(v).tz(timezone));
+
+  const updatedDate = defaultValue(obj.updated, null, v => dayjs(v).tz(timezone));
+
+  const displayUpdatedDate = defaultValue(input.displayUpdatedDate, true);
+
+  marko_web_obj_date_tag({
+      type: "content",
+      blockName: blockName,
+      obj: obj,
+      field: "published",
+      format: format,
+      locale: locale,
+      timezone: timezone,
+      renderBody: function(out, { value }) {
+        if (input.publishedPrefix) {
+          out.w(marko_escapeXml(input.publishedPrefix) +
+            " " +
+            marko_escapeXml(value));
+        } else {
+          out.w(marko_escapeXml(value));
+        }
+      }
+    }, out, __component, "0");
+
+  if ((updatedDate && updatedDate.isAfter(publishedDate, "day")) && displayUpdatedDate) {
+    marko_web_obj_date_tag({
+        type: "content",
+        blockName: blockName,
+        obj: obj,
+        field: "updated",
+        format: format,
+        locale: locale,
+        timezone: timezone,
+        renderBody: function(out, { value }) {
+          out.w(marko_escapeXml(i18n("Updated")) +
+            " " +
+            marko_escapeXml(value));
+        }
+      }, out, __component, "1");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/nodes/content-published.marko",
+    component: "./content-published.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/obj-date.marko"
+    ]
+  };

package/components/nodes/content.marko

@@ -0,0 +1,175 @@
+import { getAsObject, getAsArray, get } from "@mindful-web/object-path";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { site } = out.global;
+
+$ const content = getAsObject(input, "node");
+$ const primaryImage = getAsObject(content, "primaryImage");
+$ const primarySection = getAsObject(content, "primarySection");
+
+$ const contentType = defaultValue(content.type, 'article');
+$ const imageOnly = defaultValue(input.imageOnly, false);
+$ const withTeaser = defaultValue(input.withTeaser, true);
+$ const withBody = defaultValue(input.withBody, false);
+$ const withSection = defaultValue(input.withSection, true);
+$ const withAttribution = defaultValue(input.withAttribution, false);
+$ const withDates = defaultValue(input.withDates, true);
+$ const withPrimarySectionModifier = defaultValue(input.withPrimarySectionModifier, true);
+$ const displayButton = defaultValue(input.displayButton, false);
+$ const callToAction = defaultValue(input.callToAction, "View Profile");
+$ const dateFormat = defaultValue(input.dateFormat, "MMMM D, YYYY");
+
+$ const isWebinar = content.type === "webinar";
+$ const isPromotion = content.type === "promotion";
+$ const isEvent = ["event", "webinar"].includes(content.type);
+$ const isUpcoming = content.startDate > Date.now();
+
+$ const aspectRatio = get(input, "image.ar", "3:2");
+
+$ const { linkAttrs } = input;
+$ const headerAttributes = {};
+$ const modifiers = getAsArray(input, "modifiers");
+$ const { alias } = primarySection;
+
+$ if (withSection && alias && withPrimarySectionModifier) {
+  headerAttributes['data-section-alias'] = alias;
+  modifiers.push(`section-${primarySection.alias}`);
+}
+
+$ const withSponsored = primarySection && primarySection.name === 'Sponsored' && input.withSponsored;
+
+// linkOffsite is an object like the following:
+/**
+  {
+    webinar: 'linkUrl',
+    event: 'website'
+  }
+  Keys are content types (all lowercase), values are the field to use when available on that type.
+**/
+$ const linkOffsite = getAsObject(site, "config.linkOffsite");
+$ const linkField = get(linkOffsite, contentType) ? "externalContentUrl" : null;
+$ const externalLink = linkField ? get(content, linkField) : null;
+$ const linkTarget = externalLink ? defaultValue(get(linkOffsite, "target"), "") : "";
+$ const href = externalLink ? externalLink : get(content, "siteContext.path");
+$ const imageLink = primaryImage.src ? { href, attrs: linkAttrs, target: linkTarget } : false;
+
+<marko-web-node
+  type=`${content.type}-content`
+  image-position=defaultValue(input.imagePosition, "left")
+  card=defaultValue(input.card, false)
+  flush=defaultValue(input.flush, true)
+  full-height=defaultValue(input.fullHeight, false)
+  attrs=input.attrs
+  modifiers=modifiers
+>
+  <if(defaultValue(input.displayImage, true))>
+    <@image
+      width=250
+      align="top"
+      use-placeholder=false
+      fluid=false
+      ...input.image
+      ar=aspectRatio
+      src=primaryImage.src
+      alt=primaryImage.alt
+      is-logo=primaryImage.isLogo
+      link=imageLink
+    />
+  </if>
+  <if(!imageOnly)>
+    <@body>
+      <if(withSection || isEvent || withSponsored)>
+        <@header attrs=headerAttributes>
+          <@left|{ blockName }|>
+            <if(withSection || withSponsored)>
+              <section-sponsor block-name=blockName section=primarySection labels=content.labels />
+            </if>
+            <else-if(isEvent)>
+              <marko-web-element tag="span" name="upcoming-archived" block-name=blockName>
+                <if(isUpcoming)>
+                  Upcoming ${content.type}
+                </if>
+                <else>
+                  Archived ${content.type}
+                </else>
+              </marko-web-element>
+            </else-if>
+          </@left>
+        </@header>
+      </if>
+      <@title tag="h5" ...input.title>
+        <marko-web-content-short-name
+          tag=null
+          obj=content
+          link={ field: linkField, target: linkTarget, attrs: linkAttrs }
+        />
+      </@title>
+      <@text|{ blockName }|
+        modifiers=["event-details"]
+        show=(Boolean(isEvent && (content.startDate || content.endDate || content.linkUrl)))
+      >
+        <if(content.startDate || content.endDate)>
+          <div class=`${blockName}__content-event-dates`>
+            <marko-web-content-start-date tag="span" block-name=blockName obj=content format=dateFormat />
+            <marko-web-content-end-date tag="span" block-name=blockName obj=content format=dateFormat />
+          </div>
+        </if>
+        <if(isWebinar && content.linkUrl)>
+          <marko-web-link
+            class=`${blockName}__content-link-url`
+            href=content.linkUrl
+            title="View / Register"
+            target="_blank"
+          >
+            <if(isUpcoming)>Register</if>
+            <else>View</else>
+          </marko-web-link>
+        </if>
+      </@text>
+      <@text
+        modifiers=["teaser", ...getAsArray(input, "teaser.modifiers").map(mod => `teaser-${mod}`)]
+        show=(Boolean(withTeaser && content.teaser))
+      >
+        <marko-web-content-teaser
+          tag=null
+          obj=content
+          link={ field: linkField, target: linkTarget, attrs: linkAttrs }
+        />
+      </@text>
+      <@text
+        modifiers=["body"]
+        show=(Boolean(withBody && content.body))
+      >
+        <marko-web-content-body tag=null obj=content />
+      </@text>
+      <@text
+        modifiers=["promotion-link-button"]
+        show=(Boolean(isPromotion && content.linkUrl && content.linkText))
+      >
+        <marko-web-link
+          class="btn btn-primary btn-block"
+          href=content.linkUrl
+          title=content.linkText
+          target="_blank"
+        >
+          ${content.linkText}
+        </marko-web-link>
+      </@text>
+      <@text modifiers=["attribution"] show=(Boolean(withAttribution))>
+        <attribution ...input.attribution content=content />
+      </@text>
+      <@text|{ blockName }| show=(Boolean(withDates && !isEvent))>
+        <marko-web-content-published block-name=blockName obj=content format=dateFormat />
+      </@text>
+      <@text show=displayButton>
+        <marko-web-link
+          class="btn btn-primary btn-block"
+          href=content.siteContext.path
+          title=content.shortName
+        >
+          ${callToAction}
+        </marko-web-link>
+      </@text>
+    </@body>
+  </if>
+</marko-web-node>