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

package/components/blocks/full-width-native-ad.marko

@@ -0,0 +1,21 @@
+import { get } from "@mindful-web/object-path";
+
+$ const blockName = "full-width-native-ad";
+
+<theme-native-x-render|{ node: nxNode, linkAttrs, containerAttrs }|
+  name="default"
+  when=true
+>
+  <if(nxNode)>
+    <marko-web-block name=blockName>
+      <theme-section-feed-content-node
+        modifiers=[blockName]
+        node=nxNode
+        sponsored-by=get(nxNode, "company.name")
+        with-dates=false
+        link-attrs=linkAttrs
+        container-attrs=containerAttrs
+      />
+    </marko-web-block>
+  </if>
+</theme-native-x-render>

package/components/blocks/full-width-native-ad.marko.js

@@ -0,0 +1,62 @@
+// 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/full-width-native-ad.marko",
+    marko_component = require("./full-width-native-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,
+    get = module_objectPath_module.get,
+    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_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template),
+    theme_native_x_render_template = require("../native-x/render.marko"),
+    theme_native_x_render_tag = marko_loadTag(theme_native_x_render_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const blockName = "full-width-native-ad";
+
+  theme_native_x_render_tag({
+      name: "default",
+      when: true,
+      renderBody: function(out, { node: nxNode, linkAttrs, containerAttrs }) {
+        if (nxNode) {
+          marko_web_block_tag({
+              name: blockName,
+              tag: "div",
+              renderBody: function(out) {
+                theme_section_feed_content_node_tag({
+                    modifiers: [
+                        blockName
+                      ],
+                    node: nxNode,
+                    sponsoredBy: get(nxNode, "company.name"),
+                    withDates: false,
+                    linkAttrs: linkAttrs,
+                    containerAttrs: containerAttrs
+                  }, out, __component, "2");
+              }
+            }, out, __component, "1");
+        }
+      }
+    }, 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/blocks/full-width-native-ad.marko",
+    component: "./full-width-native-ad.marko",
+    tags: [
+      "../nodes/section-feed-content.marko",
+      "@mindful-web/marko-web/components/element/block.marko",
+      "../native-x/render.marko"
+    ]
+  };

package/components/blocks/hero-card.marko

@@ -0,0 +1,91 @@
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+import queryFragment from "../../graphql/fragments/content-list";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const { i18n } = out.global;
+
+<!-- @todo determine how to display the sponsor logo -->
+$ const queryParams = {
+  ... input.queryParams,
+  sectionAlias: input.alias,
+  limit: 3,
+  queryFragment,
+  sectionFragment,
+};
+
+$ const name = defaultValue(input.name, "");
+$ const description = defaultValue(input.description, "");
+$ const blockName = "hero-card";
+
+<marko-web-query|{ nodes, section }| name="website-scheduled-content" params=queryParams>
+  <marko-web-block name=blockName>
+    <marko-web-element block-name=blockName name="header">
+      ${section && section.name || name}
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="description-wrapper">
+      <marko-web-element block-name=blockName name="description">
+        $!{section && section.description || description}
+      </marko-web-element>
+      <if(section)>
+        <marko-web-element block-name=blockName name="view-more">
+          <marko-web-link href=section.canonicalPath>
+            ${i18n("View more")} &raquo;
+          </marko-web-link>
+        </marko-web-element>
+      </if>
+    </marko-web-element>
+    <div class="row">
+      <div class="col-md col-md-9">
+        <theme-card-deck-flow
+          cols=1
+          nodes=nodes.slice(0,1)
+          modifiers=[blockName, "hero"]
+        >
+          <@slot|{ node }|>
+            <theme-content-node
+              image-position="top"
+              full-height=true
+              card=true
+              flush=false
+              modifiers=[blockName]
+              node=node
+              with-teaser=false
+              with-dates=false
+            >
+              <@image fluid=true width=790 ar="16:9" />
+            </theme-content-node>
+          </@slot>
+        </theme-card-deck-flow>
+      </div>
+      <div class="col-md col-md-3">
+        <theme-card-deck-flow
+          cols=1
+          nodes=nodes.slice(1)
+          modifiers=[blockName]
+        >
+          <@slot|{ node }|>
+            <theme-content-node
+              image-position="top"
+              full-height=true
+              card=true
+              flush=false
+              modifiers=[blockName]
+              node=node
+              with-teaser=false
+              with-dates=false
+            >
+              <@image fluid=true width=240 ar="16:9" />
+            </theme-content-node>
+          </@slot>
+        </theme-card-deck-flow>
+      </div>
+    </div>
+    <if(section)>
+      <marko-web-element block-name=blockName name="view-more-bottom">
+        <marko-web-link href=section.canonicalPath>
+          ${i18n("View more")} &raquo;
+        </marko-web-link>
+      </marko-web-element>
+    </if>
+  </marko-web-block>
+</marko-web-query>

package/components/blocks/hero-card.marko.js

@@ -0,0 +1,207 @@
+// 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/hero-card.marko",
+    marko_component = require("./hero-card.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_queryFragment = require("../../graphql/fragments/content-list"),
+    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_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_link_template = require("@mindful-web/marko-web/components/element/link.marko"),
+    marko_web_link_tag = marko_loadTag(marko_web_link_template),
+    theme_content_node_template = require("../nodes/content.marko"),
+    theme_content_node_tag = marko_loadTag(theme_content_node_template),
+    theme_card_deck_flow_template = require("../flows/card-deck.marko"),
+    theme_card_deck_flow_tag = marko_loadTag(theme_card_deck_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 queryParams = {
+  ... input.queryParams,
+  sectionAlias: input.alias,
+  limit: 3,
+  queryFragment,
+  sectionFragment,
+};
+
+  const name = defaultValue(input.name, "");
+
+  const description = defaultValue(input.description, "");
+
+  const blockName = "hero-card";
+
+  marko_web_query_tag({
+      collapsible: true,
+      name: "website-scheduled-content",
+      params: queryParams,
+      renderBody: function(out, { nodes, section }) {
+        marko_web_block_tag({
+            name: blockName,
+            tag: "div",
+            renderBody: function(out) {
+              marko_web_element_tag({
+                  name: "header",
+                  tag: "div",
+                  blockName: blockName,
+                  renderBody: function(out) {
+                    out.w(marko_escapeXml((section && section.name) || name));
+                  }
+                }, out, __component, "2");
+
+              marko_web_element_tag({
+                  name: "description-wrapper",
+                  tag: "div",
+                  blockName: blockName,
+                  renderBody: function(out) {
+                    marko_web_element_tag({
+                        name: "description",
+                        tag: "div",
+                        blockName: blockName,
+                        renderBody: function(out) {
+                          out.w(marko_str((section && section.description) || description));
+                        }
+                      }, out, __component, "4");
+
+                    if (section) {
+                      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("View more")) +
+                                    " »");
+                                }
+                              }, out, __component, "6");
+                          }
+                        }, out, __component, "5");
+                    }
+                  }
+                }, out, __component, "3");
+
+              out.w("<div class=\"row\"><div class=\"col-md col-md-9\">");
+
+              theme_card_deck_flow_tag({
+                  cols: 1,
+                  nodes: nodes.slice(0, 1),
+                  modifiers: [
+                      blockName,
+                      "hero"
+                    ],
+                  slots: [
+                      {
+                          renderBody: function(out, { node }) {
+                            theme_content_node_tag({
+                                imagePosition: "top",
+                                fullHeight: true,
+                                card: true,
+                                flush: false,
+                                modifiers: [
+                                    blockName
+                                  ],
+                                node: node,
+                                withTeaser: false,
+                                withDates: false,
+                                image: {
+                                    fluid: true,
+                                    width: 790,
+                                    ar: "16:9"
+                                  }
+                              }, out, __component, "11");
+                          }
+                        }
+                    ]
+                }, out, __component, "9");
+
+              out.w("</div><div class=\"col-md col-md-3\">");
+
+              theme_card_deck_flow_tag({
+                  cols: 1,
+                  nodes: nodes.slice(1),
+                  modifiers: [
+                      blockName
+                    ],
+                  slots: [
+                      {
+                          renderBody: function(out, { node }) {
+                            theme_content_node_tag({
+                                imagePosition: "top",
+                                fullHeight: true,
+                                card: true,
+                                flush: false,
+                                modifiers: [
+                                    blockName
+                                  ],
+                                node: node,
+                                withTeaser: false,
+                                withDates: false,
+                                image: {
+                                    fluid: true,
+                                    width: 240,
+                                    ar: "16:9"
+                                  }
+                              }, out, __component, "16");
+                          }
+                        }
+                    ]
+                }, out, __component, "14");
+
+              out.w("</div></div>");
+
+              if (section) {
+                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("View more")) +
+                              " &raquo;");
+                          }
+                        }, out, __component, "19");
+                    }
+                  }, out, __component, "18");
+              }
+            }
+          }, out, __component, "1");
+      }
+    }, 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/blocks/hero-card.marko",
+    component: "./hero-card.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/link.marko",
+      "../nodes/content.marko",
+      "../flows/card-deck.marko",
+      "@mindful-web/marko-web/components/element/block.marko",
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/blocks/latest-content-list.marko

@@ -0,0 +1,89 @@
+import { getAsObject, getAsArray } from "@mindful-web/object-path";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+import queryFragment from "../../graphql/fragments/content-list";
+
+$ const modifiers = ["latest-content-list", ...(input.modifiers ? input.modifiers : [])];
+$ const title = defaultValue(input.title, 'Latest in');
+$ const withSection = defaultValue(input.withSection, false);
+$ const withNativeXSection = defaultValue(input.withNativeXSection, true);
+$ const linkHeader = input.linkHeader || false;
+$ const link = getAsObject(input, "link");
+
+$ const nodeInput = {
+  withTeaser: false,
+  imagePosition: "right",
+  withSection,
+  ...input.node,
+};
+$ const nodeImageInput = {
+  lazyload: true,
+  width: 100,
+  height: 100,
+  ar: "1:1",
+  ...getAsObject(input, "node.image"),
+};
+
+<if(input.nodes && input.nodes.length)>
+  <theme-content-list-flow
+    nodes=input.nodes
+    inner-justified=false
+    flush-x=input.flushX
+    flush-y=input.flushY
+    native-x=input.nativeX
+    modifiers=modifiers
+    with-native-x-section=withNativeXSection
+    class=input.class
+  >
+    <@header>
+      <if(linkHeader && (input.alias || input.title))>
+        <marko-web-link href=`${input.alias}` ...link>
+          ${title}
+        </marko-web-link>
+      </if>
+      <else>
+        ${title}
+      </else>
+    </@header>
+    <@node ...nodeInput >
+      <@image ...nodeImageInput />
+    </@node>
+  </theme-content-list-flow>
+</if>
+<else>
+  $ const queryName = defaultValue(input.queryName, "website-scheduled-content");
+  $ const queryParams = {
+    sectionAlias: input.alias,
+    limit: 4,
+    queryFragment,
+    ...input.queryParams,
+  };
+  <marko-web-query|{ nodes }|
+    name=queryName
+    params=queryParams
+  >
+    <theme-content-list-flow
+      nodes=nodes
+      inner-justified=false
+      flush-x=input.flushX
+      flush-y=input.flushY
+      native-x=input.nativeX
+      modifiers=modifiers
+      with-native-x-section=withNativeXSection
+      class=input.class
+    >
+      <@header>
+        <if(linkHeader && (input.alias || input.title))>
+          <marko-web-link href=`${input.alias}` ...link>
+            ${title}
+          </marko-web-link>
+        </if>
+        <else>
+          ${title}
+        </else>
+      </@header>
+      <@node ...nodeInput >
+        <@image ...nodeImageInput />
+      </@node>
+    </theme-content-list-flow>
+  </marko-web-query>
+</else>

package/components/blocks/latest-content-list.marko.js

@@ -0,0 +1,146 @@
+// 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/latest-content-list.marko",
+    marko_component = require("./latest-content-list.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,
+    getAsArray = module_objectPath_module.getAsArray,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    module_queryFragment = require("../../graphql/fragments/content-list"),
+    queryFragment = module_queryFragment.default || module_queryFragment,
+    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),
+    theme_content_list_flow_template = require("../flows/content/list.marko"),
+    theme_content_list_flow_tag = marko_loadTag(theme_content_list_flow_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 modifiers = ["latest-content-list", ...(input.modifiers ? input.modifiers : [])];
+
+  const title = defaultValue(input.title, 'Latest in');
+
+  const withSection = defaultValue(input.withSection, false);
+
+  const withNativeXSection = defaultValue(input.withNativeXSection, true);
+
+  const linkHeader = input.linkHeader || false;
+
+  const link = getAsObject(input, "link");
+
+  const nodeInput = {
+  withTeaser: false,
+  imagePosition: "right",
+  withSection,
+  ...input.node,
+};
+
+  const nodeImageInput = {
+  lazyload: true,
+  width: 100,
+  height: 100,
+  ar: "1:1",
+  ...getAsObject(input, "node.image"),
+};
+
+  if (input.nodes && input.nodes.length) {
+    theme_content_list_flow_tag({
+        nodes: input.nodes,
+        innerJustified: false,
+        flushX: input.flushX,
+        flushY: input.flushY,
+        nativeX: input.nativeX,
+        modifiers: modifiers,
+        withNativeXSection: withNativeXSection,
+        class: input.class,
+        header: {
+            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, "2");
+              } else {
+                out.w(marko_escapeXml(title));
+              }
+            }
+          },
+        node: marko_assign({}, nodeInput, {
+            image: nodeImageInput
+          })
+      }, out, __component, "0");
+  } else {
+    const queryName = defaultValue(input.queryName, "website-scheduled-content");
+
+    const queryParams = {
+    sectionAlias: input.alias,
+    limit: 4,
+    queryFragment,
+    ...input.queryParams,
+  };
+
+    marko_web_query_tag({
+        collapsible: true,
+        name: queryName,
+        params: queryParams,
+        renderBody: function(out, { nodes }) {
+          theme_content_list_flow_tag({
+              nodes: nodes,
+              innerJustified: false,
+              flushX: input.flushX,
+              flushY: input.flushY,
+              nativeX: input.nativeX,
+              modifiers: modifiers,
+              withNativeXSection: withNativeXSection,
+              class: input.class,
+              header: {
+                  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, "8");
+                    } else {
+                      out.w(marko_escapeXml(title));
+                    }
+                  }
+                },
+              node: marko_assign({}, nodeInput, {
+                  image: nodeImageInput
+                })
+            }, out, __component, "6");
+        }
+      }, out, __component, "5");
+  }
+}
+
+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/latest-content-list.marko",
+    component: "./latest-content-list.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/link.marko",
+      "../flows/content/list.marko",
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/blocks/latest-podcast.marko

@@ -0,0 +1,64 @@
+import queryFragment from "../../graphql/fragments/latest-podcast-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const queryParams = {
+  sectionAlias: input.alias,
+  includeContentTypes: ["Podcast"],
+  limit: 1,
+  queryFragment,
+  sectionFragment,
+};
+
+$ const { site, i18n } = out.global;
+$ const podcastLinks = site.getAsArray("podcastLinks");
+$ const blockName = "latest-podcast";
+
+<marko-web-query|{ nodes, section }| name="website-scheduled-content" params=queryParams>
+  $ const [node] = nodes;
+  <marko-web-block name=blockName>
+    <marko-web-element block-name=blockName name="header">
+      <marko-web-icon name="file" modifiers=[blockName] />
+      ${section.name}
+    </marko-web-element>
+
+    <marko-web-node
+      type=`${node.type}-content`
+      card=true
+      flush=true
+      full-height=false
+      modifiers=[blockName]
+    >
+      <@body>
+        <@header>
+          <@left>
+            ${i18n("Latest Episode")}
+          </@left>
+        </@header>
+        <@title tag="h5">
+          <marko-web-content-short-name tag=null obj=node link=true />
+        </@title>
+        <@text modifiers=["more-episodes"]>
+          <marko-web-website-section-name|{ value }| tag=null obj=section link=true>
+            ${i18n("More episodes")} &raquo;
+          </marko-web-website-section-name>
+        </@text>
+        <if(podcastLinks.length)>
+          <@footer>
+            <@left modifiers=["buttons"]>
+              <for|link| of=podcastLinks>
+                <marko-web-link
+                  class=`btn btn-light ${blockName}__btn`
+                  href=link.href
+                  title=link.label
+                  target="_blank"
+                >
+                  ${link.label}
+                </marko-web-link>
+              </for>
+            </@left>
+          </@footer>
+        </if>
+      </@body>
+    </marko-web-node>
+  </marko-web-block>
+</marko-web-query>