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

package/components/blocks/products.marko

@@ -0,0 +1,57 @@
+import queryFragment from "../../graphql/fragments/products-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const { i18n } = out.global;
+
+$ const queryParams = {
+  sectionAlias: input.alias,
+  limit: 3,
+  queryFragment,
+  sectionFragment,
+};
+
+$ const blockName = "products-block";
+
+<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.name}
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="description-wrapper">
+      <marko-web-element block-name=blockName name="description">
+        $!{section.description || input.defaultDescription}
+      </marko-web-element>
+      <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>
+    </marko-web-element>
+    <theme-card-deck-flow
+      cols=3
+      nodes=nodes
+      modifiers=[blockName]
+    >
+      <@slot|{ node }|>
+        <theme-content-node
+          image-position="right"
+          full-height=true
+          card=true
+          flush=false
+          modifiers=[blockName]
+          node=node
+          with-teaser=false
+          with-dates=false
+        >
+          <@image width=112 ar="1:1" />
+        </theme-content-node>
+      </@slot>
+    </theme-card-deck-flow>
+
+    <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>
+  </marko-web-block>
+</marko-web-query>

package/components/blocks/products.marko.js

@@ -0,0 +1,157 @@
+// 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/products.marko",
+    marko_component = require("./products.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_queryFragment = require("../../graphql/fragments/products-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_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 = {
+  sectionAlias: input.alias,
+  limit: 3,
+  queryFragment,
+  sectionFragment,
+};
+
+  const blockName = "products-block";
+
+  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.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.description || input.defaultDescription));
+                        }
+                      }, out, __component, "4");
+
+                    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");
+
+              theme_card_deck_flow_tag({
+                  cols: 3,
+                  nodes: nodes,
+                  modifiers: [
+                      blockName
+                    ],
+                  slots: [
+                      {
+                          renderBody: function(out, { node }) {
+                            theme_content_node_tag({
+                                imagePosition: "right",
+                                fullHeight: true,
+                                card: true,
+                                flush: false,
+                                modifiers: [
+                                    blockName
+                                  ],
+                                node: node,
+                                withTeaser: false,
+                                withDates: false,
+                                image: {
+                                    width: 112,
+                                    ar: "1:1"
+                                  }
+                              }, out, __component, "9");
+                          }
+                        }
+                    ]
+                }, out, __component, "7");
+
+              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")) +
+                            " »");
+                        }
+                      }, out, __component, "12");
+                  }
+                }, out, __component, "11");
+            }
+          }, 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/products.marko",
+    component: "./products.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/read-next.marko

@@ -0,0 +1,42 @@
+import queryFragment from "../../graphql/fragments/read-next-block";
+
+$ const { i18n } = out.global;
+
+$ const queryParams = {
+  publishedAfter: input.published,
+  excludeContentIds: [input.contentId],
+  sectionId: input.sectionId,
+  limit: 1,
+  queryFragment,
+};
+$ const blockName = "read-next";
+
+<marko-web-query|{ nodes }| name="all-published-content" params=queryParams>
+  <if(nodes.length)>
+    <marko-web-block name=blockName>
+      <marko-web-element block-name=blockName name="header">
+        ${i18n("Read Next")}
+      </marko-web-element>
+
+      <marko-web-node-list
+        inner-justified=false
+        flush-x=true
+        flush-y=true
+        modifiers=[blockName]
+      >
+        <@nodes nodes=nodes>
+          <@slot|{ node }|>
+            <theme-content-node
+              image-position="left"
+              flush=true
+              node=node
+              modifiers=[blockName]
+            >
+              <@image width=160 ar="3:2" />
+            </theme-content-node>
+          </@slot>
+        </@nodes>
+      </marko-web-node-list>
+    </marko-web-block>
+  </if>
+</marko-web-query>

package/components/blocks/read-next.marko.js

@@ -0,0 +1,113 @@
+// 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/read-next.marko",
+    marko_component = require("./read-next.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_queryFragment = require("../../graphql/fragments/read-next-block"),
+    queryFragment = module_queryFragment.default || module_queryFragment,
+    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),
+    theme_content_node_template = require("../nodes/content.marko"),
+    theme_content_node_tag = marko_loadTag(theme_content_node_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),
+    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 = {
+  publishedAfter: input.published,
+  excludeContentIds: [input.contentId],
+  sectionId: input.sectionId,
+  limit: 1,
+  queryFragment,
+};
+
+  const blockName = "read-next";
+
+  marko_web_query_tag({
+      collapsible: true,
+      name: "all-published-content",
+      params: queryParams,
+      renderBody: function(out, { nodes }) {
+        if (nodes.length) {
+          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(i18n("Read Next")));
+                    }
+                  }, out, __component, "2");
+
+                marko_web_node_list_tag({
+                    blockName: "node-list",
+                    tag: "div",
+                    justified: false,
+                    innerJustified: false,
+                    flushX: true,
+                    flushY: true,
+                    fullHeight: false,
+                    collapsible: true,
+                    modifiers: [
+                        blockName
+                      ],
+                    nodes: {
+                        nodes: nodes,
+                        slots: [
+                            {
+                                renderBody: function(out, { node }) {
+                                  theme_content_node_tag({
+                                      imagePosition: "left",
+                                      flush: true,
+                                      node: node,
+                                      modifiers: [
+                                          blockName
+                                        ],
+                                      image: {
+                                          width: 160,
+                                          ar: "3:2"
+                                        }
+                                    }, out, __component, "6");
+                                }
+                              }
+                          ]
+                      }
+                  }, out, __component, "3");
+              }
+            }, 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/read-next.marko",
+    component: "./read-next.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/index.marko",
+      "../nodes/content.marko",
+      "@mindful-web/marko-web/components/node-list/index.marko",
+      "@mindful-web/marko-web/components/element/block.marko",
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/blocks/related-stories.marko

@@ -0,0 +1,74 @@
+import { defaultValue } from "@mindful-web/marko-web/utils";
+import queryFragment from "../../graphql/fragments/related-stories-block";
+
+$ const { i18n } = out.global;
+$ const { contentId, sectionId, published } = input;
+
+$ const withNativeX = defaultValue(input.withNativeX, false);
+$ const nativeX = {
+  name: "default",
+  index: 3,
+  sectionName: `${i18n("Sponsor Content")}`,
+  ...input.nativeX,
+};
+
+$ const limit = 4;
+$ const queryParams = {
+  contentId,
+  limit,
+  requiresImage: true,
+  queryFragment,
+};
+
+$ const title = `${i18n("Related Stories")}`;
+$ const blockName = "related-stories";
+
+<marko-web-query|{ nodes }| name="related-published-content" params=queryParams collapsible=false>
+  <if(nodes.length < limit)>
+    <!-- query for more content -->
+    $ const excludeContentIds = [contentId, ...nodes.map(node => node.id)];
+    $ const sinceParams = {
+      sectionId,
+      since: published,
+      limit: limit - nodes.length,
+      excludeContentIds,
+      requiresImage: true,
+      excludeContentTypes: ["Contact", "Company", "Document", "Product", "Promotion", "TextAd"],
+      queryFragment
+    };
+    <marko-web-query|{ nodes: related }|
+      name="all-published-content"
+      params=sinceParams
+    >
+      $ nodes.push(...related);
+      <if(nodes.length)>
+        <marko-web-block name=blockName attrs={ role: "region", "aria-label": "Related Stories" }>
+          <marko-web-element block-name=blockName name="header">
+            ${title}
+          </marko-web-element>
+          <theme-content-card-deck-col-flow
+            nodes=nodes
+            modifiers=[blockName]
+            ...(withNativeX && { nativeX })
+          >
+            <@node modifiers=[blockName] ...input.node />
+          </theme-content-card-deck-col-flow>
+        </marko-web-block>
+      </if>
+    </marko-web-query>
+  </if>
+  <else>
+    <marko-web-block name=blockName>
+      <marko-web-element block-name=blockName name="header">
+        ${title}
+      </marko-web-element>
+      <theme-content-card-deck-col-flow
+        nodes=nodes
+        modifiers=[blockName]
+        ...(withNativeX && { nativeX })
+      >
+        <@node modifiers=[blockName] ...input.node />
+      </theme-content-card-deck-col-flow>
+    </marko-web-block>
+  </else>
+</marko-web-query>

package/components/blocks/related-stories.marko.js

@@ -0,0 +1,165 @@
+// 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/related-stories.marko",
+    marko_component = require("./related-stories.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_queryFragment = require("../../graphql/fragments/related-stories-block"),
+    queryFragment = module_queryFragment.default || module_queryFragment,
+    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_assign = require("marko/dist/runtime/helpers/assign"),
+    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 { contentId, sectionId, published } = input;
+
+  const withNativeX = defaultValue(input.withNativeX, false);
+
+  const nativeX = {
+  name: "default",
+  index: 3,
+  sectionName: `${i18n("Sponsor Content")}`,
+  ...input.nativeX,
+};
+
+  const limit = 4;
+
+  const queryParams = {
+  contentId,
+  limit,
+  requiresImage: true,
+  queryFragment,
+};
+
+  const title = `${i18n("Related Stories")}`;
+
+  const blockName = "related-stories";
+
+  marko_web_query_tag({
+      collapsible: false,
+      name: "related-published-content",
+      params: queryParams,
+      renderBody: function(out, { nodes }) {
+        if (nodes.length < limit) {
+          const excludeContentIds = [contentId, ...nodes.map(node => node.id)];
+
+          const sinceParams = {
+      sectionId,
+      since: published,
+      limit: limit - nodes.length,
+      excludeContentIds,
+      requiresImage: true,
+      excludeContentTypes: ["Contact", "Company", "Document", "Product", "Promotion", "TextAd"],
+      queryFragment
+    };
+
+          marko_web_query_tag({
+              collapsible: true,
+              name: "all-published-content",
+              params: sinceParams,
+              renderBody: function(out, { nodes: related }) {
+                nodes.push(...related);
+
+                if (nodes.length) {
+                  marko_web_block_tag({
+                      name: blockName,
+                      tag: "div",
+                      attrs: {
+                          role: "region",
+                          "aria-label": "Related Stories"
+                        },
+                      renderBody: function(out) {
+                        marko_web_element_tag({
+                            name: "header",
+                            tag: "div",
+                            blockName: blockName,
+                            renderBody: function(out) {
+                              out.w(marko_escapeXml(title));
+                            }
+                          }, out, __component, "3");
+
+                        theme_content_card_deck_col_flow_tag(marko_assign({
+                            nodes: nodes,
+                            modifiers: [
+                                blockName
+                              ]
+                          }, withNativeX && {
+                            nativeX: nativeX
+                          }, {
+                            node: marko_assign({
+                                modifiers: [
+                                    blockName
+                                  ]
+                              }, input.node)
+                          }), out, __component, "4");
+                      }
+                    }, out, __component, "2");
+                }
+              }
+            }, out, __component, "1");
+        } else {
+          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(title));
+                    }
+                  }, out, __component, "7");
+
+                theme_content_card_deck_col_flow_tag(marko_assign({
+                    nodes: nodes,
+                    modifiers: [
+                        blockName
+                      ]
+                  }, withNativeX && {
+                    nativeX: nativeX
+                  }, {
+                    node: marko_assign({
+                        modifiers: [
+                            blockName
+                          ]
+                      }, input.node)
+                  }), out, __component, "8");
+              }
+            }, out, __component, "6");
+        }
+      }
+    }, 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/related-stories.marko",
+    component: "./related-stories.marko",
+    tags: [
+      "@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/resource-library.marko

@@ -0,0 +1,77 @@
+import queryFragment from "../../graphql/fragments/resource-library-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const { i18n } = out.global;
+
+<!-- @todo likely should change the name of this component -->
+$ const queryParams = {
+  ...input.queryParams,
+  sectionAlias: input.alias,
+  requiresImage: true,
+  limit: 4,
+  queryFragment,
+  sectionFragment,
+};
+
+$ const blockName = "resource-library";
+
+<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 || input.name}
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="description-wrapper">
+      <marko-web-element block-name=blockName name="description">
+        $!{section && section.description || input.defaultDescription}
+      </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>
+    <marko-web-element block-name=blockName name="deck-wrapper">
+
+      <marko-web-element block-name=blockName name="row">
+        <for|node| of=nodes>
+          $ const imageLink = node.primaryImage.src ? { href: node.siteContext.path } : false;
+          <marko-web-element block-name=blockName name="col">
+            <marko-web-node
+              type=`${node.type}-content`
+              image-position="top"
+              card=true
+              flush=true
+              modifiers=[blockName]
+            >
+              <@image
+                fluid=true
+                gradient=true
+                width=250
+                ar="3:4"
+                src=node.primaryImage.src
+                alt=node.primaryImage.alt
+                link=imageLink
+              >
+                <@body>
+                  <@title tag="h5">
+                    <marko-web-content-short-name tag=null obj=node link=true />
+                  </@title>
+                </@body>
+              </@image>
+            </marko-web-node>
+          </marko-web-element>
+        </for>
+      </marko-web-element>
+    </marko-web-element>
+
+    <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>