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

package/components/blocks/section-card-list.marko.js

@@ -0,0 +1,236 @@
+// 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/section-card-list.marko",
+    marko_component = require("./section-card-list.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_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/section-card-list-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_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),
+    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 = {
+  limit: 3,
+  requiresImage: true,
+  sectionAlias: input.alias,
+  queryFragment,
+  sectionFragment,
+  ...input.queryParams,
+};
+
+  const blockName = "section-card-list";
+
+  const buttonClass = input.buttonClass || "btn btn-secondary";
+
+  const linkHeader = input.linkHeader || false;
+
+  const imageProps = getAsObject(input.imageProps);
+
+  const imageFluid = defaultValue(imageProps.fluid, true);
+
+  const imageWidth = defaultValue(imageProps.width, 340);
+
+  const imageAspectRatio = defaultValue(imageProps.ar, "3:2");
+
+  marko_web_query_tag({
+      collapsible: true,
+      name: "website-scheduled-content",
+      params: queryParams,
+      renderBody: function(out, { nodes, section }) {
+        const heroNode = nodes.slice(0, 1)[0];
+
+        const heroImageNode = {
+    id: heroNode.id,
+    type: heroNode.type,
+    siteContext: heroNode.siteContext,
+    primaryImage: heroNode.primaryImage,
+  };
+
+        const listNodes = nodes.slice(1);
+
+        marko_web_block_tag({
+            name: blockName,
+            tag: "div",
+            renderBody: function(out) {
+              marko_web_element_tag({
+                  name: "header",
+                  tag: "div",
+                  blockName: blockName,
+                  renderBody: function(out) {
+                    if (linkHeader && input.alias) {
+                      marko_web_link_tag({
+                          href: "" + input.alias,
+                          renderBody: function(out) {
+                            out.w(marko_escapeXml(section.name));
+                          }
+                        }, out, __component, "3");
+                    } else {
+                      out.w(marko_escapeXml(section.name));
+                    }
+                  }
+                }, out, __component, "2");
+
+              marko_web_element_tag({
+                  name: "description",
+                  tag: "div",
+                  blockName: blockName,
+                  renderBody: function(out) {
+                    out.w(marko_escapeXml((input.description || section.description) || input.defaultDescription));
+                  }
+                }, out, __component, "4");
+
+              marko_web_element_tag({
+                  name: "row",
+                  tag: "div",
+                  blockName: blockName,
+                  renderBody: function(out) {
+                    marko_web_element_tag({
+                        name: "col",
+                        tag: "div",
+                        blockName: blockName,
+                        renderBody: function(out) {
+                          theme_content_node_tag({
+                              imagePosition: "top",
+                              card: true,
+                              flush: true,
+                              imageOnly: true,
+                              modifiers: [
+                                  blockName + "-hero-image"
+                                ],
+                              node: heroImageNode,
+                              image: {
+                                  fluid: imageFluid,
+                                  width: imageWidth,
+                                  ar: imageAspectRatio
+                                }
+                            }, out, __component, "7");
+                        }
+                      }, out, __component, "6");
+
+                    marko_web_element_tag({
+                        name: "col",
+                        tag: "div",
+                        blockName: blockName,
+                        renderBody: function(out) {
+                          theme_content_node_tag({
+                              fullHeight: true,
+                              card: true,
+                              displayImage: false,
+                              flush: true,
+                              modifiers: [
+                                  blockName + "-hero"
+                                ],
+                              withDates: false,
+                              withSection: false,
+                              node: heroNode
+                            }, out, __component, "10");
+                        }
+                      }, out, __component, "9");
+
+                    marko_web_element_tag({
+                        name: "col",
+                        tag: "div",
+                        blockName: blockName,
+                        renderBody: function(out) {
+                          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: listNodes,
+                                  slots: [
+                                      {
+                                          renderBody: function(out, { node }) {
+                                            theme_content_node_tag({
+                                                displayImage: false,
+                                                flush: true,
+                                                modifiers: [
+                                                    blockName + "-item"
+                                                  ],
+                                                withTeaser: false,
+                                                withDates: false,
+                                                withSection: false,
+                                                node: node
+                                              }, out, __component, "15");
+                                          }
+                                        }
+                                    ]
+                                }
+                            }, out, __component, "12");
+
+                          marko_web_element_tag({
+                              name: "btn-wrapper",
+                              tag: "div",
+                              blockName: blockName,
+                              renderBody: function(out) {
+                                marko_web_link_tag({
+                                    href: section.canonicalPath,
+                                    class: buttonClass,
+                                    renderBody: function(out) {
+                                      out.w(marko_escapeXml(i18n("More")) +
+                                        " " +
+                                        marko_escapeXml(section.name));
+                                    }
+                                  }, out, __component, "17");
+                              }
+                            }, out, __component, "16");
+                        }
+                      }, out, __component, "11");
+                  }
+                }, out, __component, "5");
+            }
+          }, 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/section-card-list.marko",
+    component: "./section-card-list.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/link.marko",
+      "@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/section-feed.marko

@@ -0,0 +1,46 @@
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+import queryFragment from "../../graphql/fragments/section-feed-block";
+
+$ const queryName = input.queryName ? input.queryName : "website-scheduled-content";
+$ const queryParams = {
+  ...input.queryParams,
+  ...(queryName === "website-scheduled-content") && {
+    sectionAlias: input.alias,
+    queryFragment,
+  },
+  ...(queryName === "website-optioned-content") && {
+    sectionAlias: input.alias,
+    queryFragment,
+  },
+};
+
+$ const countOnly = defaultValue(input.countOnly, false);
+
+<if(countOnly)>
+  <theme-query-total-count|data| name=queryName params=queryParams>
+    <${input.renderBody} ...data />
+  </theme-query-total-count>
+</if>
+<else>
+  <marko-web-query|{ nodes }| name=queryName params=queryParams>
+    <if(input.before)>
+      <${input.before.renderBody} />
+    </if>
+    <theme-section-feed-flow
+      nodes=nodes
+      header=input.header
+      node=input.node
+      node-list=input.nodeList
+      display-image=input.displayImage
+      with-section=input.withSection
+      with-sponsored=input.withSponsored
+      lazyload=input.lazyload
+      modifiers=input.modifiers
+      native-x=input.nativeX
+      with-native-x-section=input.withNativeXSection
+    />
+    <if(input.after)>
+      <${input.after.renderBody} />
+    </if>
+  </marko-web-query>
+</else>

package/components/blocks/section-feed.marko.js

@@ -0,0 +1,94 @@
+// 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/section-feed.marko",
+    marko_component = require("./section-feed.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/section-feed-block"),
+    queryFragment = module_queryFragment.default || module_queryFragment,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    theme_query_total_count_template = require("../query-total-count.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_query_total_count_tag = marko_loadTag(theme_query_total_count_template),
+    theme_section_feed_flow_template = require("../flows/section-feed.marko"),
+    theme_section_feed_flow_tag = marko_loadTag(theme_section_feed_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 queryName = input.queryName ? input.queryName : "website-scheduled-content";
+
+  const queryParams = {
+  ...input.queryParams,
+  ...(queryName === "website-scheduled-content") && {
+    sectionAlias: input.alias,
+    queryFragment,
+  },
+  ...(queryName === "website-optioned-content") && {
+    sectionAlias: input.alias,
+    queryFragment,
+  },
+};
+
+  const countOnly = defaultValue(input.countOnly, false);
+
+  if (countOnly) {
+    theme_query_total_count_tag({
+        name: queryName,
+        params: queryParams,
+        renderBody: function(out, data) {
+          marko_dynamicTag(out, input.renderBody, function() {
+            return data;
+          }, null, null, null, __component, "1");
+        }
+      }, out, __component, "0");
+  } else {
+    marko_web_query_tag({
+        collapsible: true,
+        name: queryName,
+        params: queryParams,
+        renderBody: function(out, { nodes }) {
+          if (input.before) {
+            marko_dynamicTag(out, input.before.renderBody, null, null, null, null, __component, "3");
+          }
+
+          theme_section_feed_flow_tag({
+              nodes: nodes,
+              header: input.header,
+              node: input.node,
+              nodeList: input.nodeList,
+              displayImage: input.displayImage,
+              withSection: input.withSection,
+              withSponsored: input.withSponsored,
+              lazyload: input.lazyload,
+              modifiers: input.modifiers,
+              nativeX: input.nativeX,
+              withNativeXSection: input.withNativeXSection
+            }, out, __component, "4");
+
+          if (input.after) {
+            marko_dynamicTag(out, input.after.renderBody, null, null, null, null, __component, "5");
+          }
+        }
+      }, out, __component, "2");
+  }
+}
+
+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/section-feed.marko",
+    component: "./section-feed.marko",
+    tags: [
+      "../query-total-count.marko",
+      "../flows/section-feed.marko",
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/blocks/section-forbes.marko

@@ -0,0 +1,102 @@
+import { defaultValue } from "@mindful-web/marko-web/utils";
+import queryFragment from "../../graphql/fragments/content-card-deck-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+import setSectionNameFromLabel from "../../utils/set-section-name-from-label"
+
+$ const { i18n } = out.global;
+
+$ const viewMore = defaultValue(input.viewMore, true);
+$ const withNativeX = defaultValue(input.withNativeX, false);
+$ const nativeX = {
+  name: "default",
+  index: 3,
+  sectionName: `${i18n("Sponsor Content")}`,
+  ...input.nativeX,
+};
+
+$ const withSponsored = defaultValue(input.withSponsored, false);
+
+$ const queryParams = {
+  sectionAlias: input.alias,
+  requiresImage: true,
+  limit: 7,
+  ...input.queryParams,
+  queryFragment,
+  sectionFragment,
+};
+
+$ const cols = input.cols || queryParams.limit;
+$ const blockName = "section-forbes";
+$ const linkHeader = input.linkHeader || false;
+
+$ const rowStyle = (input.reverse) ? "flex-direction: row-reverse" : "";
+
+<marko-web-query|{ nodes: returnedNodes, section: querySection }| name="website-scheduled-content" params=queryParams>
+  $ const nodes = withSponsored ? setSectionNameFromLabel({
+    nodes: returnedNodes,
+    label: "Sponsored",
+    sectionName: "Sponsored"
+  }) : returnedNodes;
+  <marko-web-element tag="h1" block-name="top-stories" name="header">
+    <if(linkHeader && input.alias)>
+      <marko-web-link href=`${input.alias}`>
+        ${i18n(querySection.name)}
+      </marko-web-link>
+    </if>
+    <else>
+      ${i18n(querySection.name)}
+    </else>
+  </marko-web-element>
+  <div class="row section-forbes" style=rowStyle>
+    <div class="col-lg-8">
+      $ const heroNode = nodes.slice(0, 1)[0];
+      $ const heroImageNode = {
+        id: heroNode.id,
+        type: heroNode.type,
+        siteContext: heroNode.siteContext,
+        primaryImage: heroNode.primaryImage,
+      };
+      <marko-web-element block-name="top-story" name="row">
+        <marko-web-element block-name="top-story" name="col" modifiers=["hero"]>
+          <theme-content-node
+            image-position="top"
+            card=true
+            flush=true
+            image-only=true
+            modifiers=["top-story-hero-image"]
+            node=heroImageNode
+          >
+            <@image fluid=true width=685 ar="3:2" lazyload=false />
+          </theme-content-node>
+        </marko-web-element>
+        <marko-web-element block-name="top-story" name="col" modifiers=["list"]>
+          <theme-content-node
+            full-height=true
+            card=true
+            display-image=false
+            flush=true
+            with-dates=false
+            modifiers=["top-story-hero"]
+            node=heroNode
+          />
+        </marko-web-element>
+      </marko-web-element>
+      <div class="row">
+        <div class="col-lg-6 first">
+          $ const leftNodes = nodes.slice(1, 3);
+          <theme-latest-content-list-block nodes=leftNodes title="" />
+        </div>
+        <div class="col-lg-6">
+          $ const rightNodes = nodes.slice(3, 5);
+          <theme-latest-content-list-block nodes=rightNodes title="" />
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-4">
+      $ const cardNodes = nodes.slice(5, 7);
+      <theme-content-card-deck-col-flow nodes=cardNodes modifiers=[blockName] cols=1>
+        <@node withSection=false withSponsored=withSponsored />
+      </theme-content-card-deck-col-flow>
+    </div>
+  </div>
+</marko-web-query>