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

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

@@ -0,0 +1,182 @@
+// 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/item.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,
+    module_isActiveLink = require("./utils/is-active-link"),
+    isActiveLink = module_isActiveLink.default || module_isActiveLink,
+    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_str = require("marko/dist/runtime/helpers/to-string"),
+    marko_classAttr = require("marko/dist/runtime/html/helpers/class-attr"),
+    marko_web_link_template = require("@mindful-web/marko-web/components/element/link.marko"),
+    marko_web_link_tag = marko_loadTag(marko_web_link_template),
+    theme_menu_toggle_button_template = require("../menu-toggle-button.marko"),
+    theme_menu_toggle_button_tag = marko_loadTag(theme_menu_toggle_button_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_items_template = require("./items.marko"),
+    theme_site_navbar_items_tag = marko_loadTag(theme_site_navbar_items_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  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_tag({
+      name: "item",
+      tag: input.tag || "li",
+      blockName: blockName,
+      modifiers: listItemModifiers,
+      renderBody: function(out) {
+        const elementName = `${blockName}__link`;
+
+        const classNames = [elementName, ...linkMods(input.href).map(mod => `${elementName}--${mod}`)];
+
+        if (children && children.length) {
+          marko_web_element_tag({
+              name: "link-wrapper",
+              tag: "div",
+              blockName: blockName,
+              renderBody: function(out) {
+                marko_web_link_tag({
+                    href: input.href,
+                    title: input.title,
+                    target: input.target,
+                    class: classNames,
+                    renderBody: function(out) {
+                      if (input.icon) {
+                        marko_web_icon_tag({
+                            blockName: "marko-web-icon",
+                            tag: "span",
+                            name: input.icon,
+                            attrs: {
+                                title: input.label
+                              },
+                            class: blockName + "__icon"
+                          }, out, __component, "3");
+
+                        if (input.forceLabel) {
+                          out.w("<span" +
+                            marko_classAttr(blockName + "__label") +
+                            ">" +
+                            marko_str(input.label) +
+                            "</span>");
+                        }
+                      } else {
+                        out.w("<span" +
+                          marko_classAttr(blockName + "__label") +
+                          ">" +
+                          marko_str(input.label) +
+                          "</span>");
+                      }
+                    }
+                  }, out, __component, "2");
+
+                theme_menu_toggle_button_tag({
+                    class: blockName + "-items__toggler",
+                    targets: [
+                        (("." + blockName) + "__items--") + input.href.replace(/\W+/g, "")
+                      ],
+                    toggleClass: ((blockName + "__items--") + input.href.replace(/\W+/g, "")) + "-open",
+                    iconModifiers: [
+                        "sm"
+                      ],
+                    iconName: "chevron-right",
+                    initiallyExpanded: isActiveLink(req.path, input.href),
+                    expandedIconName: "chevron-down"
+                  }, out, __component, "6");
+              }
+            }, out, __component, "1");
+
+          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_tag({
+              blockName: blockName,
+              modifiers: modifiers,
+              class: activeClass,
+              items: input.children,
+              regEnabled: input.regEnabled,
+              hasUser: input.hasUser
+            }, out, __component, "7");
+        } else {
+          marko_web_link_tag({
+              href: input.href,
+              title: input.title,
+              target: input.target,
+              class: classNames,
+              renderBody: function(out) {
+                if (input.icon) {
+                  marko_web_icon_tag({
+                      blockName: "marko-web-icon",
+                      tag: "span",
+                      name: input.icon,
+                      attrs: {
+                          title: input.label
+                        },
+                      class: blockName + "__icon"
+                    }, out, __component, "9");
+
+                  if (input.forceLabel) {
+                    out.w("<span" +
+                      marko_classAttr(blockName + "__label") +
+                      ">" +
+                      marko_str(input.label) +
+                      "</span>");
+                  }
+                } else {
+                  out.w("<span" +
+                    marko_classAttr(blockName + "__label") +
+                    ">" +
+                    marko_str(input.label) +
+                    "</span>");
+                }
+              }
+            }, out, __component, "8");
+        }
+      }
+    }, 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/item.marko",
+    tags: [
+      "@mindful-web/marko-web-icons/components/icon.marko",
+      "@mindful-web/marko-web/components/element/link.marko",
+      "../menu-toggle-button.marko",
+      "@mindful-web/marko-web/components/element/index.marko",
+      "./items.marko"
+    ]
+  };

package/components/site-navbar/items.marko

@@ -0,0 +1,27 @@
+import { getAsArray } from "@mindful-web/object-path";
+import { asObject } from "@mindful-web/utils";
+import getNavItems from "./utils/get-nav-items";
+
+$ const blockName = input.blockName || "site-navbar";
+$ const items = getAsArray(input, "items");
+$ const regEnabled = input.regEnabled != null ? input.regEnabled : false;
+$ const hasUser = input.hasUser != null ? input.hasUser : false;
+
+<if(items.length)>
+  <marko-web-element tag="ul" class=input.class block-name=blockName name="items" modifiers=input.modifiers>
+    <for|item| of=getNavItems({ items, hasUser, regEnabled })>
+      $ const obj = asObject(item);
+      <theme-site-navbar-item
+        block-name=blockName
+        href=obj.href
+        title=obj.title
+        target=obj.target
+        label=obj.label
+        icon=obj.icon
+        children=obj.children
+        force-label=obj.forceLabel
+        modifiers=obj.modifiers
+      />
+    </for>
+  </marko-web-element>
+</if>

package/components/site-navbar/items.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-navbar/items.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,
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    asObject = module_utils_module.asObject,
+    module_getNavItems = require("./utils/get-nav-items"),
+    getNavItems = module_getNavItems.default || module_getNavItems,
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    theme_site_navbar_item_template = require("./item.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_site_navbar_item_tag = marko_loadTag(theme_site_navbar_item_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-navbar";
+
+  const items = getAsArray(input, "items");
+
+  const regEnabled = input.regEnabled != null ? input.regEnabled : false;
+
+  const hasUser = input.hasUser != null ? input.hasUser : false;
+
+  if (items.length) {
+    marko_web_element_tag({
+        name: "items",
+        tag: "ul",
+        class: input.class,
+        blockName: blockName,
+        modifiers: input.modifiers,
+        renderBody: function(out) {
+          var $for$0 = 0;
+
+          marko_forOf(getNavItems({
+              items: items,
+              hasUser: hasUser,
+              regEnabled: regEnabled
+            }), function(item) {
+            const obj = asObject(item);
+
+            var $keyScope$0 = "[" + (($for$0++) + "]");
+
+            theme_site_navbar_item_tag({
+                blockName: blockName,
+                href: obj.href,
+                title: obj.title,
+                target: obj.target,
+                label: obj.label,
+                icon: obj.icon,
+                children: obj.children,
+                forceLabel: obj.forceLabel,
+                modifiers: obj.modifiers
+              }, out, __component, "1" + $keyScope$0);
+          });
+        }
+      }, 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/items.marko",
+    tags: [
+      "./item.marko",
+      "@mindful-web/marko-web/components/element/index.marko"
+    ]
+  };

package/components/site-navbar/logo.marko

@@ -0,0 +1,15 @@
+$ const blockName = input.blockName || "site-navbar";
+$ const elementName = input.name || "logo";
+$ const classNames = [`${blockName}__${elementName}`, input.class];
+$ const lazyload = input.lazyload != null ? input.lazyload : false;
+$ const loading = (lazyload) ? "lazy" : null;
+
+<img
+  class=classNames
+  alt=input.alt
+  src=input.src
+  srcset=input.srcset
+  loading=loading
+  width=input.width
+  height=input.height
+>

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

@@ -0,0 +1,41 @@
+// 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/logo.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_classAttr = require("marko/dist/runtime/html/helpers/class-attr"),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const blockName = input.blockName || "site-navbar";
+
+  const elementName = input.name || "logo";
+
+  const classNames = [`${blockName}__${elementName}`, input.class];
+
+  const lazyload = input.lazyload != null ? input.lazyload : false;
+
+  const loading = (lazyload) ? "lazy" : null;
+
+  out.w("<img" +
+    marko_classAttr(classNames) +
+    marko_attr("alt", input.alt) +
+    marko_attr("src", input.src) +
+    marko_attr("srcset", input.srcset) +
+    marko_attr("loading", loading) +
+    marko_attr("width", input.width) +
+    marko_attr("height", input.height) +
+    ">");
+}
+
+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/logo.marko"
+  };

package/components/site-navbar/marko.json

@@ -0,0 +1,20 @@
+{
+  "<theme-site-navbar>": {
+    "template": "./index.marko"
+  },
+  "<theme-site-navbar-brand>": {
+    "template": "./brand.marko"
+  },
+  "<theme-site-navbar-logo>": {
+    "template": "./logo.marko"
+  },
+  "<theme-site-navbar-items>": {
+    "template": "./items.marko"
+  },
+  "<theme-site-navbar-item>": {
+    "template": "./item.marko"
+  },
+  "<theme-site-navbar-search-icon>": {
+    "template": "./search.marko"
+  }
+}

package/components/site-navbar/search.marko

@@ -0,0 +1,20 @@
+import { randomElementId } from "@mindful-web/utils";
+
+$ const elementName = "site-navbar__search";
+$ const inputId = randomElementId({ prefix: elementName });
+$ const { site } = out.global;
+$ const sponsorLogo = site.getAsObject("search.sponsorLogos.navbar");
+$ const classes = [elementName, "btn"];
+$ if (sponsorLogo) classes.push(`${elementName}--sponsored`);
+
+<marko-web-link class=classes.join(" ") title="Search" href="/search">
+  <marko-web-icon name="search" modifiers=["dark", "lg"] />
+  <if(sponsorLogo)>
+    <marko-web-img
+      alt=sponsorLogo.alt
+      src=sponsorLogo.src
+      srcset=sponsorLogo.srcset
+      class="search-sponsor__logo"
+    />
+  </if>
+</marko-web-link>

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

@@ -0,0 +1,73 @@
+// 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/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_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_link_template = require("@mindful-web/marko-web/components/element/link.marko"),
+    marko_web_link_tag = marko_loadTag(marko_web_link_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const elementName = "site-navbar__search";
+
+  const inputId = randomElementId({ prefix: elementName });
+
+  const { site } = out.global;
+
+  const sponsorLogo = site.getAsObject("search.sponsorLogos.navbar");
+
+  const classes = [elementName, "btn"];
+
+  if (sponsorLogo) classes.push(`${elementName}--sponsored`);
+
+  marko_web_link_tag({
+      class: classes.join(" "),
+      title: "Search",
+      href: "/search",
+      renderBody: function(out) {
+        marko_web_icon_tag({
+            blockName: "marko-web-icon",
+            tag: "span",
+            name: "search",
+            modifiers: [
+                "dark",
+                "lg"
+              ]
+          }, out, __component, "1");
+
+        if (sponsorLogo) {
+          marko_web_img_tag({
+              lazyload: true,
+              alt: sponsorLogo.alt,
+              src: sponsorLogo.src,
+              srcset: sponsorLogo.srcset,
+              class: "search-sponsor__logo"
+            }, 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-navbar/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/link.marko"
+    ]
+  };

package/components/site-navbar/utils/get-nav-items.js

@@ -0,0 +1,21 @@
+const { asArray } = require('@mindful-web/utils');
+
+module.exports = ({
+  regEnabled,
+  hasUser,
+  items,
+}) => asArray(items.filter((item) => {
+  const { when, href } = item;
+  if (!href) return false;
+  if (!when) return true;
+  if (!regEnabled) return false;
+  if (hasUser) {
+    if (when === 'logged-in') return true;
+    if (when === 'logged-out') return false;
+  }
+  if (!hasUser) {
+    if (when === 'logged-in') return false;
+    if (when === 'logged-out') return true;
+  }
+  return false;
+}));

package/components/site-navbar/utils/is-active-link.js

@@ -0,0 +1 @@
+module.exports = (requestPath, navItemPath) => requestPath.indexOf(navItemPath) === 0;

package/components/site-newsletter-menu.marko

@@ -0,0 +1,11 @@
+import buildProps from "@mindful-web/marko-web-theme-monorail/utils/site-newsletter-menu-props";
+
+$ const props = buildProps({ out });
+
+<if(props.name && props.description)>
+  <marko-web-browser-component
+    name="ThemeSiteNewsletterMenu"
+    ssr=true
+    props=props
+  />
+</if>

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

@@ -0,0 +1,37 @@
+// 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-newsletter-menu.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_buildProps = require("@mindful-web/marko-web-theme-monorail/utils/site-newsletter-menu-props"),
+    buildProps = module_buildProps.default || module_buildProps,
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const props = buildProps({ out });
+
+  if (props.name && props.description) {
+    marko_web_browser_component_tag({
+        name: "ThemeSiteNewsletterMenu",
+        ssr: true,
+        props: props
+      }, 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-newsletter-menu.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko"
+    ]
+  };

package/components/social/get-provider.js

@@ -0,0 +1,5 @@
+module.exports = ({ provider, label }) => {
+  let formatted = provider ? `${provider}`.toLowerCase() : '';
+  if (formatted === 'other' && label) formatted = `${label}`.toLowerCase();
+  return formatted;
+};

package/components/social/icon-link.marko

@@ -0,0 +1,22 @@
+import { get } from "@mindful-web/object-path";
+import getProvider from "./get-provider";
+
+$ const classNames = [(input.class || "social-icon-link")];
+$ const provider = get(input, "provider", "");
+$ const label = get(input, "label", "");
+
+$ const formatted = getProvider({ provider, label });
+$ const name = label || provider;
+$ const title = name ? `Visit us on ${name.charAt(0).toUpperCase()}${name.slice(1)}` : null;
+
+<if(formatted && input.href)>
+  <marko-web-link
+    class=classNames
+    href=input.href
+    target=input.target
+    title=title
+    attrs=input.attrs
+  >
+    <marko-web-icon name=provider modifiers=input.modifiers />
+  </marko-web-link>
+</if>

package/components/social/icon-link.marko.js

@@ -0,0 +1,63 @@
+// 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/social/icon-link.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,
+    get = module_objectPath_module.get,
+    module_getProvider = require("./get-provider"),
+    getProvider = module_getProvider.default || module_getProvider,
+    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_link_template = require("@mindful-web/marko-web/components/element/link.marko"),
+    marko_web_link_tag = marko_loadTag(marko_web_link_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const classNames = [(input.class || "social-icon-link")];
+
+  const provider = get(input, "provider", "");
+
+  const label = get(input, "label", "");
+
+  const formatted = getProvider({ provider, label });
+
+  const name = label || provider;
+
+  const title = name ? `Visit us on ${name.charAt(0).toUpperCase()}${name.slice(1)}` : null;
+
+  if (formatted && input.href) {
+    marko_web_link_tag({
+        class: classNames,
+        href: input.href,
+        target: input.target,
+        title: title,
+        attrs: input.attrs,
+        renderBody: function(out) {
+          marko_web_icon_tag({
+              blockName: "marko-web-icon",
+              tag: "span",
+              name: provider,
+              modifiers: input.modifiers
+            }, 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/social/icon-link.marko",
+    tags: [
+      "@mindful-web/marko-web-icons/components/icon.marko",
+      "@mindful-web/marko-web/components/element/link.marko"
+    ]
+  };

package/components/social/icons.marko

@@ -0,0 +1,22 @@
+import { getAsArray } from "@mindful-web/object-path";
+import { asObject } from "@mindful-web/utils";
+
+$ const blockName = input.blockName || "social-icons";
+$ const items = getAsArray(input, "items");
+
+<if(items.length)>
+  <marko-web-block
+    name=blockName
+    tag=input.tag
+    modifiers=input.modifiers
+  >
+    <for|item| of=items>
+      $ const link = asObject(item);
+      <theme-social-icon-link
+        provider=link.provider
+        href=link.href
+        modifiers=input.iconModifiers
+      />
+    </for>
+  </marko-web-block>
+</if>