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

package/components/site-header.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/site-header.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,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    theme_menu_toggle_button_template = require("./menu-toggle-button.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_menu_toggle_button_tag = marko_loadTag(theme_menu_toggle_button_template),
+    theme_site_navbar_logo_template = require("./site-navbar/logo.marko"),
+    theme_site_navbar_logo_tag = marko_loadTag(theme_site_navbar_logo_template),
+    theme_site_navbar_brand_template = require("./site-navbar/brand.marko"),
+    theme_site_navbar_brand_tag = marko_loadTag(theme_site_navbar_brand_template),
+    theme_site_navbar_items_template = require("./site-navbar/items.marko"),
+    theme_site_navbar_items_tag = marko_loadTag(theme_site_navbar_items_template),
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template),
+    theme_site_navbar_search_icon_template = require("./site-navbar/search.marko"),
+    theme_site_navbar_search_icon_tag = marko_loadTag(theme_site_navbar_search_icon_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_site_navbar_template = require("./site-navbar/index.marko"),
+    theme_site_navbar_tag = marko_loadTag(theme_site_navbar_template),
+    marko_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template),
+    identity_x_newsletter_form_pushdown_template = require("./identity-x/newsletter-pushdown.marko"),
+    identity_x_newsletter_form_pushdown_tag = marko_loadTag(identity_x_newsletter_form_pushdown_template),
+    theme_site_newsletter_menu_template = require("./site-newsletter-menu.marko"),
+    theme_site_newsletter_menu_tag = marko_loadTag(theme_site_newsletter_menu_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { config, site } = out.global;
+
+  const newsletterConfig = site.getAsObject('newsletter.pushdown');
+
+  const newsletterMenuBlockProps = getAsObject(input, "newsletterMenuBlockProps");
+
+  const blockName = input.blockName || "site-header";
+
+  const useIdxNewsletterSignup = defaultValue(input.useIdxNewsletterSignup, true);
+
+  const enableIdxNewsletterSignup = !newsletterConfig.disabled && useIdxNewsletterSignup;
+
+  const showIdxNewsletterSignup = enableIdxNewsletterSignup;
+
+  const idxNesletterSignupIcon = (input.hasUser) ? 'person' : 'mail';
+
+  const showNewsletterSignup = !newsletterConfig.disabled && !enableIdxNewsletterSignup;
+
+  const showSearchIcon = defaultValue(input.showSearchIcon, false);
+
+  const { initiallyExpanded } = getAsObject(out.global, "newsletterState");
+
+  const menuBtnPosition = defaultValue(input.menuBtnPosition, 'left');
+
+  const navigation = {
+  primary: site.getAsArray("navigation.primary.items"),
+  secondary: site.getAsArray("navigation.secondary.items"),
+  tertiary: site.getAsArray("navigation.tertiary.items"),
+};
+
+  marko_web_block_tag({
+      name: blockName,
+      tag: input.tag || "header",
+      class: input.class,
+      modifiers: input.modifiers,
+      attrs: input.attrs,
+      renderBody: function(out) {
+        marko_dynamicTag(out, input.aboveNav, null, null, null, null, __component, "1");
+
+        theme_site_navbar_tag({
+            modifiers: [
+                "secondary"
+              ],
+            attrs: {
+                "aria-label": "Secondary Navigation"
+              },
+            renderBody: function(out) {
+              if (menuBtnPosition === "left") {
+                theme_menu_toggle_button_tag({
+                    class: "site-navbar__toggler",
+                    targets: [
+                        ".site-menu",
+                        "body"
+                      ],
+                    toggleClass: "site-menu--open",
+                    iconModifiers: [
+                        "lg"
+                      ],
+                    iconName: "three-bars"
+                  }, out, __component, "3");
+              }
+
+              theme_site_navbar_brand_tag({
+                  title: config.website("name") + " Homepage",
+                  renderBody: function(out) {
+                    theme_site_navbar_logo_tag({
+                        alt: config.website("name"),
+                        src: site.get("logos.navbar.src"),
+                        srcset: site.getAsArray("logos.navbar.srcset").join(", "),
+                        width: site.get("logos.navbar.width"),
+                        height: site.get("logos.navbar.height")
+                      }, out, __component, "5");
+                  }
+                }, out, __component, "4");
+
+              theme_site_navbar_items_tag({
+                  items: navigation.secondary,
+                  modifiers: [
+                      "secondary"
+                    ],
+                  regEnabled: input.regEnabled,
+                  hasUser: input.hasUser
+                }, out, __component, "6");
+
+              marko_web_element_tag({
+                  name: "icon-wrapper",
+                  tag: "div",
+                  blockName: "site-navbar",
+                  renderBody: function(out) {
+                    if (showIdxNewsletterSignup) {
+                      marko_web_browser_component_tag({
+                          name: "IdentityXNewsletterToggleButton",
+                          props: {
+                              iconName: idxNesletterSignupIcon,
+                              initiallyExpanded: initiallyExpanded
+                            },
+                          ssr: true
+                        }, out, __component, "8");
+                    } else if (showNewsletterSignup) {
+                      marko_web_browser_component_tag({
+                          name: "ThemeNewsletterToggleButton",
+                          props: {
+                              initiallyExpanded: initiallyExpanded
+                            },
+                          ssr: true
+                        }, out, __component, "9");
+                    }
+
+                    if (showSearchIcon) {
+                      theme_site_navbar_search_icon_tag({}, out, __component, "10");
+                    }
+
+                    if (menuBtnPosition === "right") {
+                      theme_menu_toggle_button_tag({
+                          class: "site-navbar__toggler",
+                          targets: [
+                              ".site-menu",
+                              "body"
+                            ],
+                          toggleClass: "site-menu--open",
+                          iconModifiers: [
+                              "lg"
+                            ],
+                          iconName: "three-bars"
+                        }, out, __component, "11");
+                    }
+                  }
+                }, out, __component, "7");
+            }
+          }, out, __component, "2");
+
+        theme_site_navbar_tag({
+            modifiers: [
+                "primary"
+              ],
+            attrs: {
+                "aria-label": "Primary Navigation"
+              },
+            renderBody: function(out) {
+              theme_site_navbar_items_tag({
+                  items: navigation.primary,
+                  modifiers: [
+                      "primary"
+                    ],
+                  regEnabled: input.regEnabled,
+                  hasUser: input.hasUser
+                }, out, __component, "13");
+            }
+          }, out, __component, "12");
+
+        marko_dynamicTag(out, input.belowNav, null, null, null, null, __component, "14");
+      }
+    }, out, __component, "0");
+
+  if (showIdxNewsletterSignup) {
+    identity_x_newsletter_form_pushdown_tag(newsletterMenuBlockProps, out, __component, "15");
+  } else if (showNewsletterSignup) {
+    theme_site_newsletter_menu_tag(newsletterMenuBlockProps, out, __component, "16");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/site-header.marko",
+    tags: [
+      "./menu-toggle-button.marko",
+      "./site-navbar/logo.marko",
+      "./site-navbar/brand.marko",
+      "./site-navbar/items.marko",
+      "@mindful-web/marko-web/components/browser-component.marko",
+      "./site-navbar/search.marko",
+      "@mindful-web/marko-web/components/element/index.marko",
+      "./site-navbar/index.marko",
+      "@mindful-web/marko-web/components/element/block.marko",
+      "./identity-x/newsletter-pushdown.marko",
+      "./site-newsletter-menu.marko"
+    ]
+  };

package/components/site-menu/components/search.marko

@@ -0,0 +1,27 @@
+import { randomElementId } from "@mindful-web/utils";
+
+$ const inputId = randomElementId({ prefix: "site-menu-search" });
+$ const { site } = out.global;
+$ const sponsorLogo = site.getAsObject("search.sponsorLogos.siteMenu");
+
+<marko-web-element block-name=input.blockName name="section" modifiers=["search"]>
+  <form method="GET" action="/search">
+    <label class="sr-only" for=inputId>Search Site</label>
+    <div class="input-group">
+      <input id=inputId class="form-control" placeholder="Search" type="search" name="searchQuery" />
+      <div class="input-group-append">
+        <button class="btn btn-primary" type="submit" aria-label="Search">
+          <marko-web-icon name="search" modifiers=["light"] />
+        </button>
+      </div>
+      <if(sponsorLogo)>
+        <marko-web-img
+          alt=sponsorLogo.alt
+          src=sponsorLogo.src
+          srcset=sponsorLogo.srcset
+          class="search-sponsor__logo"
+        />
+      </if>
+    </div>
+  </form>
+</marko-web-element>

package/components/site-menu/components/search.marko.js

@@ -0,0 +1,80 @@
+// 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/site-menu/components/search.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    randomElementId = module_utils_module.randomElementId,
+    marko_attr = require("marko/dist/runtime/html/helpers/attr"),
+    marko_web_icon_template = require("@mindful-web/marko-web-icons/components/icon.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_icon_tag = marko_loadTag(marko_web_icon_template),
+    marko_web_img_template = require("@mindful-web/marko-web/components/element/img.marko"),
+    marko_web_img_tag = marko_loadTag(marko_web_img_template),
+    marko_web_element_template = require("@mindful-web/marko-web/components/element/index.marko"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const inputId = randomElementId({ prefix: "site-menu-search" });
+
+  const { site } = out.global;
+
+  const sponsorLogo = site.getAsObject("search.sponsorLogos.siteMenu");
+
+  marko_web_element_tag({
+      name: "section",
+      tag: "div",
+      blockName: input.blockName,
+      modifiers: [
+          "search"
+        ],
+      renderBody: function(out) {
+        out.w("<form method=\"GET\" action=\"/search\"><label class=\"sr-only\"" +
+          marko_attr("for", inputId) +
+          ">Search Site</label><div class=\"input-group\"><input" +
+          marko_attr("id", inputId) +
+          " class=\"form-control\" placeholder=\"Search\" type=\"search\" name=\"searchQuery\"><div class=\"input-group-append\"><button class=\"btn btn-primary\" type=\"submit\" aria-label=\"Search\">");
+
+        marko_web_icon_tag({
+            blockName: "marko-web-icon",
+            tag: "span",
+            name: "search",
+            modifiers: [
+                "light"
+              ]
+          }, out, __component, "7");
+
+        out.w("</button></div>");
+
+        if (sponsorLogo) {
+          marko_web_img_tag({
+              lazyload: true,
+              alt: sponsorLogo.alt,
+              src: sponsorLogo.src,
+              srcset: sponsorLogo.srcset,
+              class: "search-sponsor__logo"
+            }, out, __component, "8");
+        }
+
+        out.w("</div></form>");
+      }
+    }, 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/site-menu/components/search.marko",
+    tags: [
+      "@mindful-web/marko-web-icons/components/icon.marko",
+      "@mindful-web/marko-web/components/element/img.marko",
+      "@mindful-web/marko-web/components/element/index.marko"
+    ]
+  };

package/components/site-menu/components/social-icons.marko

@@ -0,0 +1 @@
+<theme-social-follow dark=true modifiers=[input.blockName] />

package/components/site-menu/components/social-icons.marko.js

@@ -0,0 +1,32 @@
+// 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/site-menu/components/social-icons.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    theme_social_follow_template = require("../../social-follow.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_social_follow_tag = marko_loadTag(theme_social_follow_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  theme_social_follow_tag({
+      dark: true,
+      modifiers: [
+          input.blockName
+        ]
+    }, 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/site-menu/components/social-icons.marko",
+    tags: [
+      "../../social-follow.marko"
+    ]
+  };

package/components/site-menu/header.marko

@@ -0,0 +1,10 @@
+$ const blockName = input.blockName || "site-menu";
+
+<marko-web-element
+  block-name=blockName
+  name="header"
+  tag=input.tag
+  modifiers=input.modifiers
+>
+  <${input.renderBody} />
+</marko-web-element>

package/components/site-menu/header.marko.js

@@ -0,0 +1,38 @@
+// 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/site-menu/header.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    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);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const blockName = input.blockName || "site-menu";
+
+  marko_web_element_tag({
+      name: "header",
+      tag: input.tag,
+      blockName: blockName,
+      modifiers: input.modifiers,
+      renderBody: function(out) {
+        marko_dynamicTag(out, input.renderBody, null, null, null, null, __component, "1");
+      }
+    }, 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/site-menu/header.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/index.marko"
+    ]
+  };

package/components/site-menu/index.marko

@@ -0,0 +1,117 @@
+import { asObject } from "@mindful-web/utils";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const blockName = input.blockName || "site-menu";
+
+$ const { site, config } = out.global;
+
+$ const regEnabled = defaultValue(input.regEnabled, false);
+$ const hasUser = defaultValue(input.hasUser, false);
+
+$ const attrs = {
+  "aria-label": "Site Menu",
+  ...input.attrs
+}
+
+<marko-web-block
+  name=blockName
+  tag=(input.tag || "aside")
+  class=input.class
+  modifiers=input.modifiers
+  attrs=attrs
+>
+  <!-- desktop -->
+  <marko-web-element block-name=blockName name="contents-desktop">
+    <div class="row">
+      <div class="col-6 col-md-4 col-lg-4">
+        <!-- search box -->
+        <search block-name=blockName />
+        <!-- user section || IDX_NAV_ENABLE -->
+        <if(site.getAsArray("navigation.desktopMenu.user"))>
+          <!-- user section -->
+            <theme-site-menu-section
+            tag="nav"
+            block-name=blockName
+            label="Account"
+            items=site.getAsArray("navigation.desktopMenu.user")
+            modifiers=["user"]
+            reg-enabled=regEnabled
+            has-user=hasUser
+            attrs={ "aria-label": "Account Management Menu (Desktop)" }
+          />
+        </if>
+        <!-- social -->
+        <social-icons block-name=blockName />
+        <!-- about section -->
+        <theme-site-menu-section
+          tag="nav"
+          block-name=blockName
+          label="About"
+          items=site.getAsArray("navigation.desktopMenu.about")
+          modifiers=["secondary"]
+          reg-enabled=regEnabled
+          has-user=hasUser
+          attrs={ "aria-label": "About Menu (Desktop)" }
+        />
+      </div>
+      <div class="col-6 col-md-4 col-lg-3">
+        <!-- sections -->
+        <theme-site-menu-section
+          tag="nav"
+          block-name=blockName
+          label="Sections"
+          items=site.getAsArray("navigation.desktopMenu.sections")
+          modifiers=["primary"]
+          reg-enabled=regEnabled
+          has-user=hasUser
+          attrs={ "aria-label": "Site Sections Menu (Desktop)" }
+        />
+      </div>
+      <div class="d-none d-md-flex col-md-4">
+        <!-- top stories (defer to client-side loader) -->
+        <marko-web-browser-component name="ThemeTopStoriesMenu" />
+      </div>
+    </div>
+  </marko-web-element>
+  <!-- mobile -->
+  <marko-web-element block-name=blockName name="contents-mobile">
+    <!-- search box -->
+    <search block-name=blockName />
+    <!-- user section || IDX_NAV_ENABLE -->
+    <if(site.getAsArray("navigation.mobileMenu.user"))>
+      <!-- user section -->
+        <theme-site-menu-section
+        tag="nav"
+        block-name=blockName
+        label="Account"
+        items=site.getAsArray("navigation.mobileMenu.user")
+        modifiers=["user"]
+        reg-enabled=regEnabled
+        has-user=hasUser
+        attrs={ "aria-label": "Account Management Menu (Mobile)" }
+      />
+    </if>
+    <!-- social -->
+    <social-icons block-name=blockName />
+    <!-- primary section -->
+    <theme-site-menu-section
+      tag="nav"
+      block-name=blockName
+      items=site.getAsArray("navigation.mobileMenu.primary")
+      modifiers=["primary"]
+      reg-enabled=regEnabled
+      has-user=hasUser
+      attrs={ "aria-label": "About Menu (Mobile)" }
+    />
+    <!-- secondary section -->
+    <theme-site-menu-section
+      tag="nav"
+      block-name=blockName
+      items=site.getAsArray("navigation.mobileMenu.secondary")
+      modifiers=["secondary"]
+      reg-enabled=regEnabled
+      has-user=hasUser
+      attrs={ "aria-label": "Site Sections Menu" }
+    />
+  </marko-web-element>
+</marko-web-block>