@mindful-web/marko-web 1.0.0

package/components/font/marko.json

@@ -0,0 +1,21 @@
+{
+  "<marko-web-font-link>": {
+    "template": "./link.marko",
+    "@preconnects <preconnect>[]": {
+      "@href": "string",
+      "@crossorigin": "boolean"
+    },
+    "@href": "string",
+    "@preconnect-only": "boolean"
+  },
+  "<marko-web-google-font>": {
+    "template": "./google.marko",
+    "@family": "string",
+    "@preconnect-only": "boolean"
+  },
+  "<marko-web-typekit-font>": {
+    "template": "./typekit.marko",
+    "@id": "string",
+    "@preconnect-only": "boolean"
+  }
+}

package/components/font/typekit.marko

@@ -0,0 +1,5 @@
+$ const href = `https://use.typekit.net/${input.id}.css`;
+
+<marko-web-font-link href=href preconnect-only=input.preconnectOnly>
+  <@preconnect href="https://use.typekit.net" crossorigin />
+</marko-web-font-link>

package/components/font/typekit.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$1.0.0/components/font/typekit.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://use.typekit.net/${input.id}.css`;
+
+  marko_web_font_link_tag({
+      href: href,
+      preconnectOnly: input.preconnectOnly,
+      preconnects: [
+          {
+              href: "https://use.typekit.net",
+              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/typekit.marko",
+    tags: [
+      "./link.marko"
+    ]
+  };

package/components/load-more/index.marko

@@ -0,0 +1,53 @@
+import { getAsObject, getAsArray } from "@mindful-web/object-path";
+
+$ const { components, fragments } = out.global;
+
+$ const Component = components.get(input.componentName);
+$ const pageNumber = input.pageNumber || 1;
+
+$ const queryParams = {
+  ...getAsObject(input, "queryParams"),
+  queryName: "LoadMore",
+  queryFragment: fragments.get(input.fragmentName),
+};
+
+<if(Component)>
+  <marko-web-query|{ nodes, pageInfo }| name=input.queryName params=queryParams>
+    <if(nodes.length)>
+      <marko-web-page-container
+        tag="section"
+        ...input.pageInput
+        modifiers=["load-more", `page-${pageNumber}`, ...getAsArray(input, "pageInput.modifiers")]
+        attrs=input.attrs
+      >
+        <!-- Fire generic `load-more-in-view` event (other services can attach to this, e.g. GTM) -->
+        <marko-web-browser-component name="TriggerInViewEvent" props={ eventName: "load-more-in-view", data: { page_number: pageNumber + 1 } } />
+        <if(pageNumber === 1 && input.header)>
+          <div class="load-more-header">
+            $!{input.header}
+          </div>
+        </if>
+        <${Component} ...input.componentInput nodes=nodes page-info=pageInfo page-number=pageNumber />
+
+        $ const { endCursor, hasNextPage } = pageInfo;
+        $ delete queryParams.skip;
+        $ delete queryParams.queryFragment;
+        $ delete queryParams.renderBody;
+        $ const provide = {
+          ...input,
+          queryParams: { ...queryParams, after: endCursor },
+        };
+
+        <marko-web-load-more-trigger
+          ...input.triggerInput
+          append-to=input.appendTo
+          max-pages=input.maxPages
+          expand=input.expand
+          page-number=pageNumber
+          provide=provide
+          show=hasNextPage
+        />
+      </marko-web-page-container>
+    </if>
+  </marko-web-query>
+</if>

package/components/load-more/index.marko.js

@@ -0,0 +1,119 @@
+// 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/load-more/index.marko",
+    marko_component = require("./index.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,
+    getAsObject = module_objectPath_module.getAsObject,
+    getAsArray = module_objectPath_module.getAsArray,
+    marko_web_browser_component_template = require("../browser-component.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template),
+    marko_str = require("marko/dist/runtime/helpers/to-string"),
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_web_load_more_trigger_template = require("./trigger.marko"),
+    marko_web_load_more_trigger_tag = marko_loadTag(marko_web_load_more_trigger_template),
+    marko_web_page_container_template = require("../page/container.marko"),
+    marko_web_page_container_tag = marko_loadTag(marko_web_page_container_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 { components, fragments } = out.global;
+
+  const Component = components.get(input.componentName);
+
+  const pageNumber = input.pageNumber || 1;
+
+  const queryParams = {
+  ...getAsObject(input, "queryParams"),
+  queryName: "LoadMore",
+  queryFragment: fragments.get(input.fragmentName),
+};
+
+  if (Component) {
+    marko_web_query_tag({
+        collapsible: true,
+        name: input.queryName,
+        params: queryParams,
+        renderBody: function(out, { nodes, pageInfo }) {
+          if (nodes.length) {
+            marko_web_page_container_tag(marko_assign({
+                tag: "section"
+              }, input.pageInput, {
+                modifiers: ["load-more", `page-${pageNumber}`, ...getAsArray(input, "pageInput.modifiers")],
+                attrs: input.attrs,
+                renderBody: function(out) {
+                  marko_web_browser_component_tag({
+                      name: "TriggerInViewEvent",
+                      props: {
+                          eventName: "load-more-in-view",
+                          data: {
+                              page_number: pageNumber + 1
+                            }
+                        }
+                    }, out, __component, "2");
+
+                  if ((pageNumber === 1) && input.header) {
+                    out.w("<div class=\"load-more-header\">" +
+                      marko_str(input.header) +
+                      "</div>");
+                  }
+
+                  marko_dynamicTag(out, Component, function() {
+                    return marko_assign({}, input.componentInput, {
+                        nodes: nodes,
+                        "page-info": pageInfo,
+                        "page-number": pageNumber
+                      });
+                  }, null, null, null, __component, "4");
+
+                  const { endCursor, hasNextPage } = pageInfo;
+
+                  delete queryParams.skip;
+
+                  delete queryParams.queryFragment;
+
+                  delete queryParams.renderBody;
+
+                  const provide = {
+          ...input,
+          queryParams: { ...queryParams, after: endCursor },
+        };
+
+                  marko_web_load_more_trigger_tag(marko_assign({}, input.triggerInput, {
+                      appendTo: input.appendTo,
+                      maxPages: input.maxPages,
+                      expand: input.expand,
+                      pageNumber: pageNumber,
+                      provide: provide,
+                      show: hasNextPage
+                    }), out, __component, "5");
+                }
+              }), 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/load-more/index.marko",
+    component: "./index.marko",
+    tags: [
+      "../browser-component.marko",
+      "./trigger.marko",
+      "../page/container.marko",
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/load-more/marko.json

@@ -0,0 +1,30 @@
+{
+  "<marko-web-load-more>": {
+    "template": "./index.marko",
+    "@page-number": "number",
+    "@append-to": "string",
+    "@max-pages": "number",
+    "@expand": "number",
+    "@component-name": "string",
+    "@component-input": "object",
+    "@query-name": "string",
+    "@query-params": "object",
+    "@fragment-name": "string",
+    "@page-input": "object",
+    "@header": "string",
+    "@trigger-input": "object",
+    "@attrs": "object"
+  },
+  "<marko-web-load-more-trigger>": {
+    "template": "./trigger.marko",
+    "@show": "number",
+    "@page-number": "number",
+    "@provide": "object",
+    "@append-to": "string",
+    "@max-pages": "number",
+    "@expand": "number",
+    "@class-name": "string",
+    "@button-class": "string",
+    "@button-label": "string"
+  }
+}

package/components/load-more/trigger.marko

@@ -0,0 +1,11 @@
+$ const { config } = out.global;
+
+$ const props = {
+  ...input,
+  mountPoint: config.loadMoreMountPoint(),
+  appendTo: input.appendTo || ".document-container",
+};
+
+<if(input.show)>
+  <marko-web-browser-component name="LoadMoreTrigger" props=props/>
+</if>

package/components/load-more/trigger.marko.js

@@ -0,0 +1,40 @@
+// 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/load-more/trigger.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_web_browser_component_template = require("../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 { config } = out.global;
+
+  const props = {
+  ...input,
+  mountPoint: config.loadMoreMountPoint(),
+  appendTo: input.appendTo || ".document-container",
+};
+
+  if (input.show) {
+    marko_web_browser_component_tag({
+        name: "LoadMoreTrigger",
+        props: props
+      }, 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/load-more/trigger.marko",
+    tags: [
+      "../browser-component.marko"
+    ]
+  };

package/components/marko.json

@@ -0,0 +1,37 @@
+{
+  "taglib-imports": [
+    "./document/marko.json",
+    "./element/marko.json",
+    "./font/marko.json",
+    "./load-more/marko.json",
+    "./node/marko.json",
+    "./node-list/marko.json",
+    "./page/marko.json",
+    "./resolve/marko.json",
+    "./rss/marko.json"
+  ],
+  "<marko-web-browser-component>": {
+    "template": "./browser-component.marko",
+    "@name": {
+      "type": "string",
+      "required": true
+    },
+    "@hydrate": "boolean",
+    "@ssr": "boolean",
+    "@skip-when-exists": "boolean",
+    "@tag": "string",
+    "@class": "string",
+    "@attrs": "object",
+    "@props": "object"
+  },
+  "<marko-web-browser-component-script>": {
+    "template": "./browser-component/script.marko"
+  },
+  "<marko-web-deferred-stylesheet>": {
+    "template": "./deferred-stylesheet.marko",
+    "@href": {
+      "type": "string",
+      "required": true
+    }
+  }
+}

package/components/node/body.marko

@@ -0,0 +1,40 @@
+import { getAsArray, get } from "@mindful-web/object-path";
+import showElement from "../element/show-element";
+
+$ const showHeader = showElement(get(input.header, "left")) || showElement(get(input.header, "right"));
+$ const showTitle = showElement(input.title);
+$ const showText = getAsArray(input.text).some(t => showElement(t));
+$ const showFooter = showElement(get(input.footer, "left")) || showElement(get(input.footer, "right"));
+
+$ const showBody = showHeader || showTitle || showText || showFooter;
+
+<if(showBody)>
+  <marko-web-node-element
+    block-name=input.blockName
+    name="body"
+    tag=input.tag
+    modifiers=input.modifiers
+    attrs=input.attrs
+  >
+    <if(showHeader)>
+      <marko-web-node-header ...input.header modifiers=["body", ...getAsArray(input, "header.modifiers")] />
+    </if>
+    <if(showTitle || showText)>
+      <marko-web-node-element name="contents" modifiers=["body"]>
+        <if(showTitle)>
+          <marko-web-node-element name="title" ...input.title />
+        </if>
+        <if(showText)>
+          <for|text| of=input.text>
+            <if(showElement(text))>
+              <marko-web-node-element name="text" ...text />
+            </if>
+          </for>
+        </if>
+      </marko-web-node-element>
+    </if>
+    <if(showFooter)>
+      <marko-web-node-footer ...input.footer modifiers=["body", ...getAsArray(input, "footer.modifiers")] />
+    </if>
+  </marko-web-node-element>
+</if>

package/components/node/body.marko.js

@@ -0,0 +1,112 @@
+// 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/node/body.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,
+    get = module_objectPath_module.get,
+    module_showElement = require("../element/show-element"),
+    showElement = module_showElement.default || module_showElement,
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_node_header_template = require("./header.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_node_header_tag = marko_loadTag(marko_web_node_header_template),
+    marko_web_node_element_template = require("./element.marko"),
+    marko_web_node_element_tag = marko_loadTag(marko_web_node_element_template),
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    marko_web_node_footer_template = require("./footer.marko"),
+    marko_web_node_footer_tag = marko_loadTag(marko_web_node_footer_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const showHeader = showElement(get(input.header, "left")) || showElement(get(input.header, "right"));
+
+  const showTitle = showElement(input.title);
+
+  const showText = getAsArray(input.text).some(t => showElement(t));
+
+  const showFooter = showElement(get(input.footer, "left")) || showElement(get(input.footer, "right"));
+
+  const showBody = showHeader || showTitle || showText || showFooter;
+
+  if (showBody) {
+    marko_web_node_element_tag({
+        show: true,
+        tag: input.tag,
+        blockName: input.blockName,
+        name: "body",
+        modifiers: input.modifiers,
+        attrs: input.attrs,
+        renderBody: function(out) {
+          if (showHeader) {
+            marko_web_node_header_tag(marko_assign({}, input.header, {
+                modifiers: ["body", ...getAsArray(input, "header.modifiers")]
+              }), out, __component, "1");
+          }
+
+          if (showTitle || showText) {
+            marko_web_node_element_tag({
+                show: true,
+                tag: "div",
+                blockName: "node",
+                name: "contents",
+                modifiers: [
+                    "body"
+                  ],
+                renderBody: function(out) {
+                  if (showTitle) {
+                    marko_web_node_element_tag(marko_assign({
+                        show: true,
+                        tag: "div",
+                        blockName: "node",
+                        name: "title"
+                      }, input.title), out, __component, "3");
+                  }
+
+                  if (showText) {
+                    var $for$0 = 0;
+
+                    marko_forOf(input.text, function(text) {
+                      var $keyScope$0 = "[" + (($for$0++) + "]");
+
+                      if (showElement(text)) {
+                        marko_web_node_element_tag(marko_assign({
+                            show: true,
+                            tag: "div",
+                            blockName: "node",
+                            name: "text"
+                          }, text), out, __component, "4" + $keyScope$0);
+                      }
+                    });
+                  }
+                }
+              }, out, __component, "2");
+          }
+
+          if (showFooter) {
+            marko_web_node_footer_tag(marko_assign({}, input.footer, {
+                modifiers: ["body", ...getAsArray(input, "footer.modifiers")]
+              }), out, __component, "5");
+          }
+        }
+      }, 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/node/body.marko",
+    tags: [
+      "./header.marko",
+      "./element.marko",
+      "./footer.marko"
+    ]
+  };

package/components/node/element.marko

@@ -0,0 +1,6 @@
+$ const block = input.blockName || "node";
+$ const show = input.show != null ? input.show : true;
+
+<if(show)>
+  <marko-web-element ...input block-name=block />
+</if>

package/components/node/element.marko.js

@@ -0,0 +1,39 @@
+// 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/node/element.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_element_template = require("../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 block = input.blockName || "node";
+
+  const show = input.show != null ? input.show : true;
+
+  if (show) {
+    marko_web_element_tag(marko_assign({
+        name: "default",
+        tag: "div"
+      }, input, {
+        blockName: block
+      }), 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/node/element.marko",
+    tags: [
+      "../element/index.marko"
+    ]
+  };

package/components/node/footer.marko

@@ -0,0 +1,19 @@
+import { getAsObject } from "@mindful-web/object-path";
+
+$ const left = getAsObject(input, "left");
+$ const right = getAsObject(input, "right");
+
+<marko-web-node-element
+  block-name=input.blockName
+  name="footer"
+  tag=input.tag
+  modifiers=input.modifiers
+  attrs=input.attrs
+>
+  <if(left.renderBody)>
+    <marko-web-node-element ...left name="footer-left" />
+  </if>
+  <if(right.renderBody)>
+    <marko-web-node-element ...right name="footer-right" />
+  </if>
+</marko-web-node-element>

package/components/node/footer.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$1.0.0/components/node/footer.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,
+    getAsObject = module_objectPath_module.getAsObject,
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_node_element_template = require("./element.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_node_element_tag = marko_loadTag(marko_web_node_element_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const left = getAsObject(input, "left");
+
+  const right = getAsObject(input, "right");
+
+  marko_web_node_element_tag({
+      show: true,
+      tag: input.tag,
+      blockName: input.blockName,
+      name: "footer",
+      modifiers: input.modifiers,
+      attrs: input.attrs,
+      renderBody: function(out) {
+        if (left.renderBody) {
+          marko_web_node_element_tag(marko_assign({
+              show: true,
+              tag: "div",
+              blockName: "node"
+            }, left, {
+              name: "footer-left"
+            }), out, __component, "1");
+        }
+
+        if (right.renderBody) {
+          marko_web_node_element_tag(marko_assign({
+              show: true,
+              tag: "div",
+              blockName: "node"
+            }, right, {
+              name: "footer-right"
+            }), out, __component, "2");
+        }
+      }
+    }, 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/node/footer.marko",
+    tags: [
+      "./element.marko"
+    ]
+  };

package/components/node/header.marko

@@ -0,0 +1,19 @@
+import { getAsObject } from "@mindful-web/object-path";
+
+$ const left = getAsObject(input, "left");
+$ const right = getAsObject(input, "right");
+
+<marko-web-node-element
+  block-name=input.blockName
+  name="header"
+  tag=input.tag
+  modifiers=input.modifiers
+  attrs=input.attrs
+>
+  <if(left.renderBody)>
+    <marko-web-node-element ...left name="header-left" />
+  </if>
+  <if(right.renderBody)>
+    <marko-web-node-element ...right name="header-right" />
+  </if>
+</marko-web-node-element>