@mindful-web/marko-web 1.0.0

package/components/element/object-link.js

@@ -0,0 +1,49 @@
+const { isObject } = require('@mindful-web/utils');
+const { get } = require('@mindful-web/object-path');
+
+/**
+ * Use `siteContext.path` first and then fallback to `canonicalPath`.
+ * Content uses the former, other models use the latter.
+ * This should be made consistent across all types at some point.
+ */
+const defaultHref = (obj) => get(obj, 'siteContext.path', get(obj, 'canonicalPath'));
+
+/**
+ * Converts `marko-web-obj` link input into "standard" `marko-web-link` input.
+ */
+module.exports = (linkInput, obj) => {
+  // Generate default link when link input is true.
+  if (linkInput === true) return { href: defaultHref(obj) };
+  // If no link input was provided, return null.
+  if (!isObject(linkInput)) return null;
+
+  const {
+    field,
+    href,
+    target,
+    rel,
+    title,
+    class: className,
+    attrs,
+  } = linkInput;
+  if (href) {
+    // When `href` is specifically set, do not convert the input.
+    return {
+      href,
+      target,
+      rel,
+      title,
+      class: className,
+      attrs,
+    };
+  }
+  // Return the customized input
+  return {
+    href: field && get(obj, field) ? get(obj, field) : defaultHref(obj),
+    target,
+    rel,
+    title,
+    class: className,
+    attrs,
+  };
+};

package/components/element/object-type.js

@@ -0,0 +1,9 @@
+const { dasherize } = require('@mindful-web/inflector');
+
+module.exports = (type, def = 'obj') => {
+  if (!type) return def;
+  const inflected = dasherize(type);
+  if (inflected === 'content-page') return 'dynamic-page';
+  if (/^content-/.test(inflected)) return inflected.replace(/^content-.*/, 'content');
+  return inflected;
+};

package/components/element/picture.marko

@@ -0,0 +1,38 @@
+import { getAsArray } from "@mindful-web/object-path";
+
+$ const { link, sources = [], image } = input;
+
+$ const hasImage = Boolean(image.src);
+
+<if(hasImage)>
+  <if(link)>
+    <marko-core-link
+      before=link.before
+      after=link.after
+      href=link.href
+      target=link.target
+      title=link.title
+      rel=link.rel
+      class=link.class
+      attrs=link.attrs
+    >
+      <marko-web-picture image=image sources=sources />
+    </marko-core-link>
+  </if>
+  <else>
+    <picture>
+      <for|s| of=sources>
+        $ const srcset = image.lazyload ? null : s.srcset.join(", ");
+        $ const dataSrcset = image.lazyload ? s.srcset.join(", ") : null;
+        <source
+          srcset=srcset
+          data-srcset=dataSrcset
+          media=s.media
+          width=s.width
+          height=s.height
+        >
+      </for>
+      <image ...image />
+    </picture>
+  </else>
+</if>

package/components/element/picture.marko.js

@@ -0,0 +1,85 @@
+// 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$1.0.0/components/element/picture.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_web_picture_template = require("./picture.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_picture_tag = marko_loadTag(marko_web_picture_template),
+    marko_core_link_template = require("@mindful-web/marko-core/components/elements/link.marko"),
+    marko_core_link_tag = marko_loadTag(marko_core_link_template),
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr"),
+    image_template = require("./components/image.marko"),
+    image_tag = marko_loadTag(image_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { link, sources = [], image } = input;
+
+  const hasImage = Boolean(image.src);
+
+  if (hasImage) {
+    if (link) {
+      marko_core_link_tag({
+          before: link.before,
+          after: link.after,
+          href: link.href,
+          target: link.target,
+          title: link.title,
+          rel: link.rel,
+          class: link.class,
+          attrs: link.attrs,
+          renderBody: function(out) {
+            marko_web_picture_tag({
+                image: image,
+                sources: sources
+              }, out, __component, "1");
+          }
+        }, out, __component, "0");
+    } else {
+      out.w("<picture>");
+
+      var $for$0 = 0;
+
+      marko_forOf(sources, function(s) {
+        const srcset = image.lazyload ? null : s.srcset.join(", ");
+
+        const dataSrcset = image.lazyload ? s.srcset.join(", ") : null;
+
+        var $keyScope$0 = "[" + (($for$0++) + "]");
+
+        out.w("<source" +
+          marko_attr("srcset", srcset) +
+          marko_attr("data-srcset", dataSrcset) +
+          marko_attr("media", s.media) +
+          marko_attr("width", s.width) +
+          marko_attr("height", s.height) +
+          ">");
+      });
+
+      image_tag(image, out, __component, "4");
+
+      out.w("</picture>");
+    }
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/element/picture.marko",
+    tags: [
+      "./picture.marko",
+      "@mindful-web/marko-core/components/elements/link.marko",
+      "./components/image.marko"
+    ]
+  };

package/components/element/show-element.js

@@ -0,0 +1,8 @@
+const { asObject } = require('@mindful-web/utils');
+
+module.exports = (input) => {
+  const o = asObject(input);
+  if (o.show === false) return false;
+  if (o.renderBody) return true;
+  return false;
+};

package/components/element/text.marko

@@ -0,0 +1,37 @@
+$ const tag = input.tag === undefined ? "div" : input.tag;
+$ const value = input.value != null ? `${input.value}`.trim() : null;
+
+$ const textInput = {
+  html: input.html,
+  renderBody: input.renderBody,
+  value,
+};
+
+<!-- @deprecated This should be replaced with <marko-core-text> -->
+
+<if(value)>
+  <if(input.link)>
+    <if(tag)>
+      <${tag} ...input.attrs class=input.class>
+        <marko-web-link ...input.link>
+          <text ...textInput />
+        </marko-web-link>
+      </>
+    </if>
+    <else>
+      <marko-web-link ...input.link>
+        <text ...textInput />
+      </marko-web-link>
+    </else>
+  </if>
+  <else>
+    <if(tag)>
+      <${tag} ...input.attrs class=input.class>
+        <text ...textInput />
+      </>
+    </if>
+    <else>
+      <text ...textInput />
+    </else>
+  </else>
+</if>

package/components/element/text.marko.js

@@ -0,0 +1,76 @@
+// 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$1.0.0/components/element/text.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    text_template = require("./components/text.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    text_tag = marko_loadTag(text_template),
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_link_template = require("./link.marko"),
+    marko_web_link_tag = marko_loadTag(marko_web_link_template),
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const tag = input.tag === undefined ? "div" : input.tag;
+
+  const value = input.value != null ? `${input.value}`.trim() : null;
+
+  const textInput = {
+  html: input.html,
+  renderBody: input.renderBody,
+  value,
+};
+
+  if (value) {
+    if (input.link) {
+      if (tag) {
+        marko_dynamicTag(out, tag, function() {
+          return marko_assign({}, input.attrs, {
+              class: input.class
+            });
+        }, function(out) {
+          marko_web_link_tag(marko_assign({}, input.link, {
+              renderBody: function(out) {
+                text_tag(textInput, out, __component, "2");
+              }
+            }), out, __component, "1");
+        }, null, null, __component, "0");
+      } else {
+        marko_web_link_tag(marko_assign({}, input.link, {
+            renderBody: function(out) {
+              text_tag(textInput, out, __component, "4");
+            }
+          }), out, __component, "3");
+      }
+    } else {
+      if (tag) {
+        marko_dynamicTag(out, tag, function() {
+          return marko_assign({}, input.attrs, {
+              class: input.class
+            });
+        }, function(out) {
+          text_tag(textInput, out, __component, "6");
+        }, null, null, __component, "5");
+      } else {
+        text_tag(textInput, out, __component, "7");
+      }
+    }
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/element/text.marko",
+    tags: [
+      "./components/text.marko",
+      "./link.marko"
+    ]
+  };

package/components/element/website-section/description.marko

@@ -0,0 +1,16 @@
+import { get } from "@mindful-web/object-path";
+import extractRender from "../extract-render";
+
+<marko-web-obj-text
+  type="website-section"
+  block-name=input.blockName
+  obj=input.obj
+  field="description"
+  html=true
+  tag=input.tag
+  class=input.class
+  modifiers=input.modifiers
+  attrs=input.attrs
+  link=input.link
+  ...extractRender(input)
+/>

package/components/element/website-section/description.marko.js

@@ -0,0 +1,44 @@
+// 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$1.0.0/components/element/website-section/description.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_extractRender = require("../extract-render"),
+    extractRender = module_extractRender.default || module_extractRender,
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_obj_text_template = require("../obj-text.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_obj_text_tag = marko_loadTag(marko_web_obj_text_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  marko_web_obj_text_tag(marko_assign({
+      type: "website-section",
+      blockName: input.blockName,
+      obj: input.obj,
+      field: "description",
+      html: true,
+      tag: input.tag,
+      class: input.class,
+      modifiers: input.modifiers,
+      attrs: input.attrs,
+      link: input.link
+    }, extractRender(input)), out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/element/website-section/description.marko",
+    tags: [
+      "../obj-text.marko"
+    ]
+  };

package/components/element/website-section/hierarchy.marko

@@ -0,0 +1,19 @@
+import { getAsArray, getAsObject } from "@mindful-web/object-path";
+
+<marko-web-obj|{ value, classNames }|
+  type="website-section"
+  block-name=input.blockName
+  obj=input.obj
+  field="hierarchy"
+  class=input.class
+  modifiers=input.modifiers
+>
+  <marko-web-array|{ value: node, index, length }|
+    attrs=input.attrs
+    tag=input.tag
+    value=value
+    class=classNames
+  >
+    <${input.renderBody} node=node index=index length=length />
+  </marko-web-array>
+</marko-web-obj>

package/components/element/website-section/hierarchy.marko.js

@@ -0,0 +1,60 @@
+// 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$1.0.0/components/element/website-section/hierarchy.marko",
+    marko_component = require("./hierarchy.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,
+    getAsObject = module_objectPath_module.getAsObject,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_web_array_template = require("../array.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_array_tag = marko_loadTag(marko_web_array_template),
+    marko_web_obj_template = require("../obj.marko"),
+    marko_web_obj_tag = marko_loadTag(marko_web_obj_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  marko_web_obj_tag({
+      type: "website-section",
+      blockName: input.blockName,
+      obj: input.obj,
+      field: "hierarchy",
+      class: input.class,
+      modifiers: input.modifiers,
+      renderBody: function(out, { value, classNames }) {
+        marko_web_array_tag({
+            attrs: input.attrs,
+            tag: input.tag,
+            value: value,
+            class: classNames,
+            renderBody: function(out, { value: node, index, length }) {
+              marko_dynamicTag(out, input.renderBody, function() {
+                return {
+                    node: node,
+                    index: index,
+                    length: length
+                  };
+              }, null, null, null, __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$1.0.0/components/element/website-section/hierarchy.marko",
+    component: "./hierarchy.marko",
+    tags: [
+      "../array.marko",
+      "../obj.marko"
+    ]
+  };

package/components/element/website-section/marko.json

@@ -0,0 +1,31 @@
+{
+  "<marko-web-website-section-name>": {
+    "template": "./name.marko",
+    "@block-name": "string",
+    "@obj": "object",
+    "@tag": "string",
+    "@class": "string",
+    "@modifiers": "string",
+    "@attrs": "object",
+    "@link": "expression"
+  },
+  "<marko-web-website-section-description>": {
+    "template": "./description.marko",
+    "@block-name": "string",
+    "@obj": "object",
+    "@tag": "string",
+    "@class": "string",
+    "@modifiers": "string",
+    "@attrs": "object",
+    "@link": "expression"
+  },
+  "<marko-web-website-section-hierarchy>": {
+    "template": "./hierarchy.marko",
+    "@block-name": "string",
+    "@obj": "object",
+    "@tag": "string",
+    "@class": "string",
+    "@modifiers": "string",
+    "@attrs": "object"
+  }
+}

package/components/element/website-section/name.marko

@@ -0,0 +1,18 @@
+import { get } from "@mindful-web/object-path";
+import extractRender from "../extract-render";
+
+$ const attrs = { title: get(input.obj, "fullName"), ...input.attrs };
+
+<marko-web-obj-text
+  type="website-section"
+  block-name=input.blockName
+  obj=input.obj
+  field="name"
+  tag=input.tag
+  class=input.class
+  modifiers=input.modifiers
+  attrs=attrs
+  link=input.link
+  html=true
+  ...extractRender(input)
+/>

package/components/element/website-section/name.marko.js

@@ -0,0 +1,46 @@
+// 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$1.0.0/components/element/website-section/name.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_extractRender = require("../extract-render"),
+    extractRender = module_extractRender.default || module_extractRender,
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_obj_text_template = require("../obj-text.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_obj_text_tag = marko_loadTag(marko_web_obj_text_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const attrs = { title: get(input.obj, "fullName"), ...input.attrs };
+
+  marko_web_obj_text_tag(marko_assign({
+      type: "website-section",
+      blockName: input.blockName,
+      obj: input.obj,
+      field: "name",
+      tag: input.tag,
+      class: input.class,
+      modifiers: input.modifiers,
+      attrs: attrs,
+      link: input.link,
+      html: true
+    }, extractRender(input)), out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/element/website-section/name.marko",
+    tags: [
+      "../obj-text.marko"
+    ]
+  };

package/components/font/google.marko

@@ -0,0 +1,6 @@
+$ const href = `https://fonts.googleapis.com/css2?family=${input.family}&display=swap`;
+
+<marko-web-font-link href=href preconnect-only=input.preconnectOnly>
+  <@preconnect href="https://fonts.googleapis.com" />
+  <@preconnect href="https://fonts.gstatic.com" crossorigin />
+</marko-web-font-link>

package/components/font/google.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$1.0.0/components/font/google.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_web_font_link_template = require("./link.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_font_link_tag = marko_loadTag(marko_web_font_link_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const href = `https://fonts.googleapis.com/css2?family=${input.family}&display=swap`;
+
+  marko_web_font_link_tag({
+      href: href,
+      preconnectOnly: input.preconnectOnly,
+      preconnects: [
+          {
+              href: "https://fonts.googleapis.com"
+            },
+          {
+              href: "https://fonts.gstatic.com",
+              crossorigin: true
+            }
+        ]
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/font/google.marko",
+    tags: [
+      "./link.marko"
+    ]
+  };

package/components/font/link.marko

@@ -0,0 +1,14 @@
+import { getAsArray } from "@mindful-web/object-path";
+
+$ const preconnects = getAsArray(input, "preconnects");
+
+<for|preconnect| of=preconnects>
+  <link rel="preconnect" href=preconnect.href crossorigin=preconnect.crossorigin>
+</for>
+
+<if(!input.preconnectOnly)>
+  <link href=input.href rel="stylesheet" media="print" onload='this.onload=null,this.removeAttribute("media")'>
+  <noscript>
+    <link href=input.href rel="stylesheet">
+  </noscript>
+</if>

package/components/font/link.marko.js

@@ -0,0 +1,45 @@
+// 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$1.0.0/components/font/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,
+    getAsArray = module_objectPath_module.getAsArray,
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const preconnects = getAsArray(input, "preconnects");
+
+  var $for$0 = 0;
+
+  marko_forOf(preconnects, function(preconnect) {
+    var $keyScope$0 = "[" + (($for$0++) + "]");
+
+    out.w("<link rel=\"preconnect\"" +
+      marko_attr("href", preconnect.href) +
+      marko_attr("crossorigin", preconnect.crossorigin) +
+      ">");
+  });
+
+  if (!input.preconnectOnly) {
+    out.w("<link" +
+      marko_attr("href", input.href) +
+      " rel=\"stylesheet\" media=\"print\" onload=\"this.onload=null,this.removeAttribute(&#34;media&#34;)\"><noscript><link" +
+      marko_attr("href", input.href) +
+      " rel=\"stylesheet\"></noscript>");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/font/link.marko"
+  };