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

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

@@ -0,0 +1,201 @@
+// 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/index.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,
+    asObject = module_utils_module.asObject,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    search_template = require("./components/search.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    search_tag = marko_loadTag(search_template),
+    theme_site_menu_section_template = require("./section.marko"),
+    theme_site_menu_section_tag = marko_loadTag(theme_site_menu_section_template),
+    social_icons_template = require("./components/social-icons.marko"),
+    social_icons_tag = marko_loadTag(social_icons_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),
+    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 = 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_tag({
+      name: blockName,
+      tag: input.tag || "aside",
+      class: input.class,
+      modifiers: input.modifiers,
+      attrs: attrs,
+      renderBody: function(out) {
+        marko_web_element_tag({
+            name: "contents-desktop",
+            tag: "div",
+            blockName: blockName,
+            renderBody: function(out) {
+              out.w("<div class=\"row\"><div class=\"col-6 col-md-4 col-lg-4\">");
+
+              search_tag({
+                  blockName: blockName
+                }, out, __component, "4");
+
+              if (site.getAsArray("navigation.desktopMenu.user")) {
+                theme_site_menu_section_tag({
+                    tag: "nav",
+                    blockName: blockName,
+                    label: "Account",
+                    items: site.getAsArray("navigation.desktopMenu.user"),
+                    modifiers: [
+                        "user"
+                      ],
+                    regEnabled: regEnabled,
+                    hasUser: hasUser,
+                    attrs: {
+                        "aria-label": "Account Management Menu (Desktop)"
+                      }
+                  }, out, __component, "5");
+              }
+
+              social_icons_tag({
+                  blockName: blockName
+                }, out, __component, "6");
+
+              theme_site_menu_section_tag({
+                  tag: "nav",
+                  blockName: blockName,
+                  label: "About",
+                  items: site.getAsArray("navigation.desktopMenu.about"),
+                  modifiers: [
+                      "secondary"
+                    ],
+                  regEnabled: regEnabled,
+                  hasUser: hasUser,
+                  attrs: {
+                      "aria-label": "About Menu (Desktop)"
+                    }
+                }, out, __component, "7");
+
+              out.w("</div><div class=\"col-6 col-md-4 col-lg-3\">");
+
+              theme_site_menu_section_tag({
+                  tag: "nav",
+                  blockName: blockName,
+                  label: "Sections",
+                  items: site.getAsArray("navigation.desktopMenu.sections"),
+                  modifiers: [
+                      "primary"
+                    ],
+                  regEnabled: regEnabled,
+                  hasUser: hasUser,
+                  attrs: {
+                      "aria-label": "Site Sections Menu (Desktop)"
+                    }
+                }, out, __component, "9");
+
+              out.w("</div><div class=\"d-none d-md-flex col-md-4\">");
+
+              marko_web_browser_component_tag({
+                  name: "ThemeTopStoriesMenu"
+                }, out, __component, "11");
+
+              out.w("</div></div>");
+            }
+          }, out, __component, "1");
+
+        marko_web_element_tag({
+            name: "contents-mobile",
+            tag: "div",
+            blockName: blockName,
+            renderBody: function(out) {
+              search_tag({
+                  blockName: blockName
+                }, out, __component, "13");
+
+              if (site.getAsArray("navigation.mobileMenu.user")) {
+                theme_site_menu_section_tag({
+                    tag: "nav",
+                    blockName: blockName,
+                    label: "Account",
+                    items: site.getAsArray("navigation.mobileMenu.user"),
+                    modifiers: [
+                        "user"
+                      ],
+                    regEnabled: regEnabled,
+                    hasUser: hasUser,
+                    attrs: {
+                        "aria-label": "Account Management Menu (Mobile)"
+                      }
+                  }, out, __component, "14");
+              }
+
+              social_icons_tag({
+                  blockName: blockName
+                }, out, __component, "15");
+
+              theme_site_menu_section_tag({
+                  tag: "nav",
+                  blockName: blockName,
+                  items: site.getAsArray("navigation.mobileMenu.primary"),
+                  modifiers: [
+                      "primary"
+                    ],
+                  regEnabled: regEnabled,
+                  hasUser: hasUser,
+                  attrs: {
+                      "aria-label": "About Menu (Mobile)"
+                    }
+                }, out, __component, "16");
+
+              theme_site_menu_section_tag({
+                  tag: "nav",
+                  blockName: blockName,
+                  items: site.getAsArray("navigation.mobileMenu.secondary"),
+                  modifiers: [
+                      "secondary"
+                    ],
+                  regEnabled: regEnabled,
+                  hasUser: hasUser,
+                  attrs: {
+                      "aria-label": "Site Sections Menu"
+                    }
+                }, out, __component, "17");
+            }
+          }, out, __component, "12");
+      }
+    }, 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/index.marko",
+    tags: [
+      "./components/search.marko",
+      "./section.marko",
+      "./components/social-icons.marko",
+      "@mindful-web/marko-web/components/browser-component.marko",
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };

package/components/site-menu/marko.json

@@ -0,0 +1,11 @@
+{
+  "<theme-site-menu>": {
+    "template": "./index.marko"
+  },
+  "<theme-site-menu-section>": {
+    "template": "./section.marko"
+  },
+  "<theme-site-menu-header>": {
+    "template": "./header.marko"
+  }
+}

package/components/site-menu/section.marko

@@ -0,0 +1,26 @@
+import { getAsArray } from "@mindful-web/object-path";
+
+$ const blockName = input.blockName || "site-menu";
+$ const items = getAsArray(input, "items");
+
+<if(items.length)>
+  <marko-web-element
+    block-name=blockName
+    name="section"
+    tag=input.tag
+    modifiers=input.modifiers
+    attrs=input.attrs
+  >
+    <if(input.label)>
+      <theme-site-menu-header block-name=blockName>
+        ${input.label}
+      </theme-site-menu-header>
+    </if>
+    <theme-site-navbar-items
+      block-name=blockName
+      items=items
+      reg-enabled=input.regEnabled
+      has-user=input.hasUser
+    />
+  </marko-web-element>
+</if>

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

@@ -0,0 +1,67 @@
+// 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/section.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,
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    theme_site_menu_header_template = require("./header.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_site_menu_header_tag = marko_loadTag(theme_site_menu_header_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_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 blockName = input.blockName || "site-menu";
+
+  const items = getAsArray(input, "items");
+
+  if (items.length) {
+    marko_web_element_tag({
+        name: "section",
+        tag: input.tag,
+        blockName: blockName,
+        modifiers: input.modifiers,
+        attrs: input.attrs,
+        renderBody: function(out) {
+          if (input.label) {
+            theme_site_menu_header_tag({
+                blockName: blockName,
+                renderBody: function(out) {
+                  out.w(marko_escapeXml(input.label));
+                }
+              }, out, __component, "1");
+          }
+
+          theme_site_navbar_items_tag({
+              blockName: blockName,
+              items: items,
+              regEnabled: input.regEnabled,
+              hasUser: input.hasUser
+            }, out, __component, "2");
+        }
+      }, 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/section.marko",
+    tags: [
+      "./header.marko",
+      "../site-navbar/items.marko",
+      "@mindful-web/marko-web/components/element/index.marko"
+    ]
+  };

package/components/site-navbar/brand.marko

@@ -0,0 +1,8 @@
+$ const blockName = input.blockName || "site-navbar";
+$ const elementName = input.name || "brand";
+$ const classNames = [`${blockName}__${elementName}`, input.class];
+$ const href = input.href || "/";
+
+<marko-web-link href=(input.href || "/") class=classNames target=input.target>
+  <${input.renderBody} />
+</marko-web-link>

package/components/site-navbar/brand.marko.js

@@ -0,0 +1,43 @@
+// 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-navbar/brand.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    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);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const blockName = input.blockName || "site-navbar";
+
+  const elementName = input.name || "brand";
+
+  const classNames = [`${blockName}__${elementName}`, input.class];
+
+  const href = input.href || "/";
+
+  marko_web_link_tag({
+      href: input.href || "/",
+      class: classNames,
+      target: input.target,
+      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-navbar/brand.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/link.marko"
+    ]
+  };

package/components/site-navbar/index.marko

@@ -0,0 +1,13 @@
+$ const blockName = input.blockName || "site-navbar";
+
+<marko-web-block
+  name=blockName
+  tag=(input.tag || "nav")
+  class=input.class
+  modifiers=input.modifiers
+  attrs=input.attrs
+>
+  <marko-web-element block-name=blockName name="container">
+    <${input.renderBody} />
+  </marko-web-element>
+</marko-web-block>

package/components/site-navbar/index.marko.js

@@ -0,0 +1,49 @@
+// 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-navbar/index.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),
+    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 = input.blockName || "site-navbar";
+
+  marko_web_block_tag({
+      name: blockName,
+      tag: input.tag || "nav",
+      class: input.class,
+      modifiers: input.modifiers,
+      attrs: input.attrs,
+      renderBody: function(out) {
+        marko_web_element_tag({
+            name: "container",
+            tag: "div",
+            blockName: blockName,
+            renderBody: function(out) {
+              marko_dynamicTag(out, input.renderBody, null, null, null, null, __component, "2");
+            }
+          }, out, __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-navbar/index.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };

package/components/site-navbar/item.marko

@@ -0,0 +1,96 @@
+import { getAsArray } from "@mindful-web/object-path";
+import isActiveLink from "./utils/is-active-link";
+
+$ const { req } = out.global;
+
+$ const blockName = input.blockName || "site-navbar";
+$ const linkMods = (href) => {
+  const mods = [];
+  if (isActiveLink(req.path, href)) mods.push("active");
+  return mods;
+};
+$ const containerMods = (href) => {
+  const mods = [...getAsArray(input, "modifiers")];
+  if (isActiveLink(req.path, href)) mods.push("active");
+  return mods;
+};
+
+$ const children = getAsArray(input, 'children');
+$ const listItemModifiers = [...containerMods(input.href)];
+$ if (children.length) listItemModifiers.push('with-children');
+<marko-web-element
+  block-name=blockName
+  name="item"
+  tag=(input.tag || "li")
+  modifiers=listItemModifiers
+>
+
+  $ const elementName = `${blockName}__link`;
+  $ const classNames = [elementName, ...linkMods(input.href).map(mod => `${elementName}--${mod}`)];
+  <if(children && children.length)>
+    <marko-web-element block-name=blockName name="link-wrapper">
+      <marko-web-link
+        href=input.href
+        title=input.title
+        target=input.target
+        class=classNames
+      >
+        <if(input.icon)>
+          <marko-web-icon name=input.icon attrs={ title: input.label } class=`${blockName}__icon` />
+          <if(input.forceLabel)>
+            <span class=`${blockName}__label`>
+              $!{input.label}
+            </span>
+          </if>
+        </if>
+        <else>
+          <span class=`${blockName}__label`>
+            $!{input.label}
+          </span>
+        </else>
+      </marko-web-link>
+      <theme-menu-toggle-button
+        class=`${blockName}-items__toggler`
+        targets=[`.${blockName}__items--${input.href.replace(/\W+/g, "")}`]
+        toggle-class=`${blockName}__items--${input.href.replace(/\W+/g, "")}-open`
+        icon-modifiers=["sm"]
+        icon-name="chevron-right"
+        initiallyExpanded=isActiveLink(req.path, input.href)
+        expanded-icon-name="chevron-down"
+
+      />
+    </marko-web-element>
+    $ const modifiers = [`${input.href.replace(/\W+/g, "")}`];
+    $ const activeClass = (isActiveLink(req.path, input.href)) ? `${blockName}__items--${input.href.replace(/\W+/g, "")}-open` : '';
+    <theme-site-navbar-items
+      block-name=blockName
+      modifiers=modifiers
+      class=activeClass
+      items=input.children
+      reg-enabled=input.regEnabled
+      has-user=input.hasUser
+    />
+  </if>
+  <else>
+    <marko-web-link
+      href=input.href
+      title=input.title
+      target=input.target
+      class=classNames
+    >
+      <if(input.icon)>
+        <marko-web-icon name=input.icon attrs={ title: input.label } class=`${blockName}__icon` />
+        <if(input.forceLabel)>
+          <span class=`${blockName}__label`>
+            $!{input.label}
+          </span>
+        </if>
+      </if>
+      <else>
+        <span class=`${blockName}__label`>
+          $!{input.label}
+        </span>
+      </else>
+    </marko-web-link>
+  </else>
+</marko-web-element>