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

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

@@ -0,0 +1,221 @@
+// 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-forbes.marko",
+    marko_component = require("./section-forbes.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/content-card-deck-block"),
+    queryFragment = module_queryFragment.default || module_queryFragment,
+    module_sectionFragment = require("../../graphql/fragments/section-info"),
+    sectionFragment = module_sectionFragment.default || module_sectionFragment,
+    module_setSectionNameFromLabel = require("../../utils/set-section-name-from-label"),
+    setSectionNameFromLabel = module_setSectionNameFromLabel.default || module_setSectionNameFromLabel,
+    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),
+    theme_latest_content_list_block_template = require("./latest-content-list.marko"),
+    theme_latest_content_list_block_tag = marko_loadTag(theme_latest_content_list_block_template),
+    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_styleAttr = require("marko/dist/runtime/html/helpers/style-attr"),
+    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 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_tag({
+      collapsible: true,
+      name: "website-scheduled-content",
+      params: queryParams,
+      renderBody: function(out, { nodes: returnedNodes, section: querySection }) {
+        const nodes = withSponsored ? setSectionNameFromLabel({
+    nodes: returnedNodes,
+    label: "Sponsored",
+    sectionName: "Sponsored"
+  }) : returnedNodes;
+
+        marko_web_element_tag({
+            name: "header",
+            tag: "h1",
+            blockName: "top-stories",
+            renderBody: function(out) {
+              if (linkHeader && input.alias) {
+                marko_web_link_tag({
+                    href: "" + input.alias,
+                    renderBody: function(out) {
+                      out.w(marko_escapeXml(i18n(querySection.name)));
+                    }
+                  }, out, __component, "2");
+              } else {
+                out.w(marko_escapeXml(i18n(querySection.name)));
+              }
+            }
+          }, out, __component, "1");
+
+        out.w("<div class=\"row section-forbes\"" +
+          marko_styleAttr(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_tag({
+            name: "row",
+            tag: "div",
+            blockName: "top-story",
+            renderBody: function(out) {
+              marko_web_element_tag({
+                  name: "col",
+                  tag: "div",
+                  blockName: "top-story",
+                  modifiers: [
+                      "hero"
+                    ],
+                  renderBody: function(out) {
+                    theme_content_node_tag({
+                        imagePosition: "top",
+                        card: true,
+                        flush: true,
+                        imageOnly: true,
+                        modifiers: [
+                            "top-story-hero-image"
+                          ],
+                        node: heroImageNode,
+                        image: {
+                            fluid: true,
+                            width: 685,
+                            ar: "3:2",
+                            lazyload: false
+                          }
+                      }, out, __component, "7");
+                  }
+                }, out, __component, "6");
+
+              marko_web_element_tag({
+                  name: "col",
+                  tag: "div",
+                  blockName: "top-story",
+                  modifiers: [
+                      "list"
+                    ],
+                  renderBody: function(out) {
+                    theme_content_node_tag({
+                        fullHeight: true,
+                        card: true,
+                        displayImage: false,
+                        flush: true,
+                        withDates: false,
+                        modifiers: [
+                            "top-story-hero"
+                          ],
+                        node: heroNode
+                      }, out, __component, "10");
+                  }
+                }, out, __component, "9");
+            }
+          }, out, __component, "5");
+
+        out.w("<div class=\"row\"><div class=\"col-lg-6 first\">");
+
+        const leftNodes = nodes.slice(1, 3);
+
+        theme_latest_content_list_block_tag({
+            nodes: leftNodes,
+            title: ""
+          }, out, __component, "13");
+
+        out.w("</div><div class=\"col-lg-6\">");
+
+        const rightNodes = nodes.slice(3, 5);
+
+        theme_latest_content_list_block_tag({
+            nodes: rightNodes,
+            title: ""
+          }, out, __component, "15");
+
+        out.w("</div></div></div><div class=\"col-lg-4\">");
+
+        const cardNodes = nodes.slice(5, 7);
+
+        theme_content_card_deck_col_flow_tag({
+            nodes: cardNodes,
+            modifiers: [
+                blockName
+              ],
+            cols: 1,
+            node: {
+                withSection: false,
+                withSponsored: withSponsored
+              }
+          }, out, __component, "17");
+
+        out.w("</div></div>");
+      }
+    }, 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-forbes.marko",
+    component: "./section-forbes.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/link.marko",
+      "@mindful-web/marko-web/components/element/index.marko",
+      "../nodes/content.marko",
+      "./latest-content-list.marko",
+      "../flows/content/card-deck-col.marko",
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/blocks/section-list-deck.marko

@@ -0,0 +1,38 @@
+import { getAsArray } from "@mindful-web/object-path";
+
+$ const blockName = "section-list-deck";
+$ const aliases = getAsArray(input, "aliases");
+$ const sections = getAsArray(input, "sections");
+
+$ if (sections.length && aliases.length) {
+    process.emitWarning(
+    '<theme-section-list-deck-block />. Aliases takes precedent over sections, pick one!',
+    'UnsupportedWarning'
+  );
+} else if (sections.length > 3 || aliases.length > 3) {
+  process.emitWarning(
+    '<theme-section-list-deck-block /> is designed for at most 3 sections, use an additional theme-section-list-deck-block for additional section(s)',
+    'UnsupportedWarning'
+  );
+};
+
+<marko-web-block name=blockName>
+  <if(aliases.length)>
+    <marko-web-element block-name=blockName name="row">
+      <for|alias| of=aliases>
+        <marko-web-element block-name=blockName name="col">
+          <theme-section-list-block alias=alias />
+        </marko-web-element>
+      </for>
+    </marko-web-element>
+  </if>
+  <else-if(sections.length)>
+    <marko-web-element block-name=blockName name="row">
+      <for|section| of=sections>
+        <marko-web-element block-name=blockName name="col">
+          <theme-section-list-block section=section />
+        </marko-web-element>
+      </for>
+    </marko-web-element>
+  </else-if>
+</marko-web-block>

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

@@ -0,0 +1,109 @@
+// 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-list-deck.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,
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    theme_section_list_block_template = require("./section-list.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_section_list_block_tag = marko_loadTag(theme_section_list_block_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_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const blockName = "section-list-deck";
+
+  const aliases = getAsArray(input, "aliases");
+
+  const sections = getAsArray(input, "sections");
+
+  if (sections.length && aliases.length) {
+    process.emitWarning(
+    '<theme-section-list-deck-block />. Aliases takes precedent over sections, pick one!',
+    'UnsupportedWarning'
+  );
+} else if (sections.length > 3 || aliases.length > 3) {
+  process.emitWarning(
+    '<theme-section-list-deck-block /> is designed for at most 3 sections, use an additional theme-section-list-deck-block for additional section(s)',
+    'UnsupportedWarning'
+  );
+};
+
+  marko_web_block_tag({
+      name: blockName,
+      tag: "div",
+      renderBody: function(out) {
+        if (aliases.length) {
+          marko_web_element_tag({
+              name: "row",
+              tag: "div",
+              blockName: blockName,
+              renderBody: function(out) {
+                var $for$0 = 0;
+
+                marko_forOf(aliases, function(alias) {
+                  var $keyScope$0 = "[" + (($for$0++) + "]");
+
+                  marko_web_element_tag({
+                      name: "col",
+                      tag: "div",
+                      blockName: blockName,
+                      renderBody: function(out) {
+                        theme_section_list_block_tag({
+                            alias: alias
+                          }, out, __component, "3" + $keyScope$0);
+                      }
+                    }, out, __component, "2" + $keyScope$0);
+                });
+              }
+            }, out, __component, "1");
+        } else if (sections.length) {
+          marko_web_element_tag({
+              name: "row",
+              tag: "div",
+              blockName: blockName,
+              renderBody: function(out) {
+                var $for$1 = 0;
+
+                marko_forOf(sections, function(section) {
+                  var $keyScope$1 = "[" + (($for$1++) + "]");
+
+                  marko_web_element_tag({
+                      name: "col",
+                      tag: "div",
+                      blockName: blockName,
+                      renderBody: function(out) {
+                        theme_section_list_block_tag({
+                            section: section
+                          }, out, __component, "6" + $keyScope$1);
+                      }
+                    }, out, __component, "5" + $keyScope$1);
+                });
+              }
+            }, out, __component, "4");
+        }
+      }
+    }, out, __component, "0");
+}
+
+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/section-list-deck.marko",
+    tags: [
+      "./section-list.marko",
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };

package/components/blocks/section-list.marko

@@ -0,0 +1,89 @@
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+import { getAsObject } from "@mindful-web/object-path";
+import cardFragment from "../../graphql/fragments/section-list-card-block";
+import listFragment from "../../graphql/fragments/section-list-block";
+import sectionFragment from "../../graphql/fragments/section-info";
+
+$ const { i18n } = out.global;
+
+$ const { alias, section: inputSection } = input;
+
+$ const withSection = defaultValue(input.withSection, true);
+$ const withViewMore = defaultValue(input.withViewMore, true);
+$ const sectionAlias = inputSection && inputSection.alias ? inputSection.alias : alias;
+
+$ const queryParams = {
+  limit: 4,
+  ...getAsObject(input, "queryParams"),
+  queryFragment: listFragment,
+  sectionFragment,
+  sectionAlias,
+};
+$ const heroParams = {
+  ...queryParams,
+  limit: 1,
+  requiresImage: true,
+  queryFragment: cardFragment,
+};
+
+$ const blockName = "section-list";
+
+<marko-web-query|{ nodes: heroNodes, section }| name="website-scheduled-content" params=heroParams>
+  $ const listParams = {
+    ...queryParams,
+    limit: queryParams.limit - 1,
+    excludeContentIds: heroNodes.map((node) => node.id),
+    sectionFragment: undefined,
+  };
+  <marko-web-query|{ nodes: listNodes }| name="website-scheduled-content" params=listParams>
+    $ const nodes = [...heroNodes, ...listNodes];
+    <marko-web-node-list
+      inner-justified=true
+      flush-x=true
+      flush-y=true
+      modifiers=[blockName]
+      ...input.nodeList
+    >
+      <@header>
+        $ const obj = { ...section, ...inputSection };
+        <marko-web-website-section-name obj=obj link=true />
+      </@header>
+      <@nodes nodes=nodes>
+        <@slot|{ node, index }|>
+          <if(index === 0)>
+            <theme-content-node
+              image-position="top"
+              card=true
+              flush=true
+              modifiers=[`${blockName}-card`]
+              with-teaser=false
+              with-dates=false
+              with-section=withSection
+              node=node
+            >
+              <@image fluid=true width=330 ar="3:2" />
+            </theme-content-node>
+          </if>
+          <else>
+            <theme-content-node
+              display-image=false
+              flush=true
+              modifiers=[`${blockName}-item`]
+              with-teaser=false
+              with-dates=false
+              with-section=withSection
+              node=node
+            />
+          </else>
+        </@slot>
+      </@nodes>
+      <if(withViewMore)>
+        <@footer modifiers=["view-more"]>
+          <marko-web-website-section-name obj=section link=true>
+            ${i18n("View More")} &raquo;
+          </marko-web-website-section-name>
+        </@footer>
+      </if>
+    </marko-web-node-list>
+  </marko-web-query>
+</marko-web-query>

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

@@ -0,0 +1,179 @@
+// 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-list.marko",
+    marko_component = require("./section-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_cardFragment = require("../../graphql/fragments/section-list-card-block"),
+    cardFragment = module_cardFragment.default || module_cardFragment,
+    module_listFragment = require("../../graphql/fragments/section-list-block"),
+    listFragment = module_listFragment.default || module_listFragment,
+    module_sectionFragment = require("../../graphql/fragments/section-info"),
+    sectionFragment = module_sectionFragment.default || module_sectionFragment,
+    marko_web_website_section_name_template = require("@mindful-web/marko-web/components/element/website-section/name.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_website_section_name_tag = marko_loadTag(marko_web_website_section_name_template),
+    theme_content_node_template = require("../nodes/content.marko"),
+    theme_content_node_tag = marko_loadTag(theme_content_node_template),
+    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_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_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 { alias, section: inputSection } = input;
+
+  const withSection = defaultValue(input.withSection, true);
+
+  const withViewMore = defaultValue(input.withViewMore, true);
+
+  const sectionAlias = inputSection && inputSection.alias ? inputSection.alias : alias;
+
+  const queryParams = {
+  limit: 4,
+  ...getAsObject(input, "queryParams"),
+  queryFragment: listFragment,
+  sectionFragment,
+  sectionAlias,
+};
+
+  const heroParams = {
+  ...queryParams,
+  limit: 1,
+  requiresImage: true,
+  queryFragment: cardFragment,
+};
+
+  const blockName = "section-list";
+
+  marko_web_query_tag({
+      collapsible: true,
+      name: "website-scheduled-content",
+      params: heroParams,
+      renderBody: function(out, { nodes: heroNodes, section }) {
+        const listParams = {
+    ...queryParams,
+    limit: queryParams.limit - 1,
+    excludeContentIds: heroNodes.map((node) => node.id),
+    sectionFragment: undefined,
+  };
+
+        marko_web_query_tag({
+            collapsible: true,
+            name: "website-scheduled-content",
+            params: listParams,
+            renderBody: function(out, { nodes: listNodes }) {
+              const nodes = [...heroNodes, ...listNodes];
+
+              marko_web_node_list_tag(marko_assign({
+                  blockName: "node-list",
+                  tag: "div",
+                  justified: false,
+                  innerJustified: true,
+                  flushX: true,
+                  flushY: true,
+                  fullHeight: false,
+                  collapsible: true,
+                  modifiers: [
+                      blockName
+                    ]
+                }, input.nodeList, {
+                  header: {
+                      renderBody: function(out) {
+                        const obj = { ...section, ...inputSection };
+
+                        marko_web_website_section_name_tag({
+                            obj: obj,
+                            link: true
+                          }, out, __component, "4");
+                      }
+                    },
+                  nodes: {
+                      nodes: nodes,
+                      slots: [
+                          {
+                              renderBody: function(out, { node, index }) {
+                                if (index === 0) {
+                                  theme_content_node_tag({
+                                      imagePosition: "top",
+                                      card: true,
+                                      flush: true,
+                                      modifiers: [
+                                          blockName + "-card"
+                                        ],
+                                      withTeaser: false,
+                                      withDates: false,
+                                      withSection: withSection,
+                                      node: node,
+                                      image: {
+                                          fluid: true,
+                                          width: 330,
+                                          ar: "3:2"
+                                        }
+                                    }, out, __component, "7");
+                                } else {
+                                  theme_content_node_tag({
+                                      displayImage: false,
+                                      flush: true,
+                                      modifiers: [
+                                          blockName + "-item"
+                                        ],
+                                      withTeaser: false,
+                                      withDates: false,
+                                      withSection: withSection,
+                                      node: node
+                                    }, out, __component, "9");
+                                }
+                              }
+                            }
+                        ]
+                    },
+                  footer: withViewMore && {
+                      modifiers: [
+                          "view-more"
+                        ],
+                      renderBody: function(out) {
+                        marko_web_website_section_name_tag({
+                            obj: section,
+                            link: true,
+                            renderBody: function(out) {
+                              out.w(marko_escapeXml(i18n("View More")) +
+                                " »");
+                            }
+                          }, out, __component, "11");
+                      }
+                    }
+                }), 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/section-list.marko",
+    component: "./section-list.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/website-section/name.marko",
+      "../nodes/content.marko",
+      "@mindful-web/marko-web/components/node-list/index.marko",
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/blocks/section-search.marko

@@ -0,0 +1,14 @@
+import queryFragment from "../../graphql/fragments/sections-search"
+import { getChildSectionsById } from "../../utils/get-child-sections-by-id";
+
+$ const { sectionIds, includeSelf } = input;
+
+<if(sectionIds.length)>
+  <marko-web-query|{ nodes: parent }|
+    name="website-sections"
+    params={ includeIds: sectionIds, queryFragment }
+  >
+    $ const nodesById = getChildSectionsById(parent[0], {}, includeSelf);
+    <marko-web-browser-component name="ThemeSectionSearch" props={ sections: Object.values(nodesById) } />
+  </marko-web-query>
+</if>