@mindful-web/marko-web 1.0.0

package/components/page/metadata/google-structured-data/content.js

@@ -0,0 +1,138 @@
+const objectPath = require('@mindful-web/object-path');
+const cheerio = require('cheerio');
+
+const convertHtmlToString = (value) => {
+  if (!value) return null;
+  const $ = cheerio.load(value);
+  return $.text();
+};
+
+const { getAsArray } = objectPath;
+
+const get = (o, path) => {
+  const v = objectPath.get(o, path);
+  return v == null ? undefined : v;
+};
+
+const getAuthor = (node) => {
+  const authors = getAsArray(node, 'authors.edges').map((e) => get(e, 'node.name'));
+  return authors.length ? { '@type': 'Person', name: authors.join(', ') } : undefined;
+};
+
+const getImages = (node) => {
+  const images = getAsArray(node, 'images.edges').map((e) => get(e, 'node.src'));
+  return images.length ? images : undefined;
+};
+
+module.exports = (node, contentGatingHandler) => {
+  const publishedISOString = node.published ? (new Date(node.published)).toISOString() : undefined;
+  const updatedISOString = node.updated ? (new Date(node.updated)).toISOString() : undefined;
+  const siteUrl = get(node, 'siteContext.url');
+  const canonicalUrl = get(node, 'siteContext.canonicalUrl');
+
+  const defaultStructuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': get(node, 'siteContext.canonicalUrl'),
+    },
+    headline: get(node, 'metadata.title'),
+    name: get(node, 'metadata.title'),
+    ...(get(node, 'metadata.description') && { description: get(node, 'metadata.description') }),
+    ...(get(node, 'metadata.image.src') && { thumbnailUrl: get(node, 'metadata.image.src') }),
+    ...(getImages(node) && { image: getImages(node) }),
+    datePublished: publishedISOString,
+    dateModified: updatedISOString,
+    url: canonicalUrl,
+    ...(siteUrl !== canonicalUrl && { url: siteUrl, isBasedOn: canonicalUrl }),
+    ...(getAuthor(node) && { author: getAuthor(node) }),
+    ...(contentGatingHandler({ content: node }) && {
+      isAccessibleForFree: false,
+      hasPart: {
+        '@type': 'WebPageElement',
+        isAccessibleForFree: false,
+        cssSelector: '.page-contents__content-body--ld-json',
+      },
+    }),
+  };
+
+  if (node.type === 'video') {
+    return JSON.stringify({
+      ...defaultStructuredData,
+      '@type': 'VideoObject',
+      uploadDate: publishedISOString,
+      contentUrl: get(node, 'siteContext.canonicalUrl'),
+      embedUrl: get(node, 'embedSrc'),
+      ...(get(node, 'transcript') && convertHtmlToString(get(node, 'transcript')) && { transcript: convertHtmlToString(get(node, 'transcript')) }),
+    });
+  }
+
+  if (node.type === 'podcast') {
+    // Set associatedMedia if audio file is present
+    const associatedMedia = (get(node, 'fileName') && get(node, 'fileSrc'))
+      ? {
+        '@type': 'AudioObject',
+        contentUrl: get(node, 'fileSrc'),
+        name: get(node, 'fileName'),
+      }
+      : undefined;
+    return JSON.stringify({
+      ...defaultStructuredData,
+      '@type': 'PodcastEpisode',
+      headline: get(node, 'metadata.title'),
+      ...(associatedMedia && { associatedMedia }),
+      ...(get(node, 'transcript') && convertHtmlToString('     ') && { transcript: convertHtmlToString('    ') }),
+    });
+  }
+
+  if (node.type === 'company') {
+    // Concat address1 && address2 if present
+    const streetAddresses = [];
+    if (get(node, 'address1')) streetAddresses.push(get(node, 'address1'));
+    if (get(node, 'address2')) streetAddresses.push(get(node, 'address2'));
+    const streetAddress = streetAddresses.join(' ');
+    // Display and set address info if present
+    const showAddress = (streetAddress || get(node, 'city') || get(node, 'state') || get(node, 'zip'));
+    const address = (showAddress)
+      ? {
+        '@type': 'PostalAddress',
+        ...(get(node, 'city') && { addressLocality: get(node, 'city') }),
+        ...(get(node, 'state') && { addressLocality: get(node, 'state') }),
+        ...(get(node, 'zip') && { postalCode: get(node, 'zip') }),
+        ...(streetAddress && { streetAddress }),
+      }
+      : undefined;
+    // Set tollfree || phone if present
+    const telephone = get(node, 'tollfree') || get(node, 'phone');
+
+    return JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'Organization',
+      mainEntityOfPage: {
+        '@type': 'WebPage',
+        '@id': get(node, 'siteContext.canonicalUrl'),
+      },
+      name: get(node, 'metadata.title'),
+      ...(get(node, 'metadata.description') && { description: get(node, 'metadata.description') }),
+      ...(getImages(node) && { image: getImages(node) }),
+      url: canonicalUrl,
+      ...(siteUrl !== canonicalUrl && { url: { url: siteUrl, isBasedOn: canonicalUrl } }),
+      ...(address && { address }),
+      ...(telephone && { telephone }),
+      ...(get(node, 'email') && { email: get(node, 'email') }),
+      ...(get(node, 'metadata.image.src') && { logo: get(node, 'metadata.image.src') }),
+      ...(get(node, 'fax') && { faxNumber: get(node, 'fax') }),
+    });
+  }
+
+  if (['article', 'news'].includes(node.type)) {
+    return JSON.stringify({
+      ...defaultStructuredData,
+      '@type': 'NewsArticle',
+      headline: get(node, 'metadata.title'),
+    });
+  }
+
+  return undefined;
+};

package/components/page/metadata/magazine-issue.marko

@@ -0,0 +1,39 @@
+import gql from "graphql-tag";
+import { get } from "@mindful-web/object-path";
+import { warn } from "@mindful-web/utils";
+
+<!-- @todo This data should generated and saved to the page object as flat data, so no relationships are required. -->
+
+$ const { id } = input;
+$ const queryFragment = gql`
+fragment MagazineIssueMetadataFragment on MagazineIssue {
+  id
+  canonicalPath
+  publication {
+    id
+    name
+  }
+  metadata {
+    title
+    description
+  }
+}
+`;
+
+<if(id)>
+  <marko-web-query|{ node }| name="magazine-issue" params={ id, queryFragment }>
+    $ const metadata = {
+      title: get(node, "metadata.title"),
+      description: get(node, "metadata.description"),
+      canonicalPath: node.canonicalPath,
+    };
+    <common ...metadata />
+    <meta property="og:type" content="website" />
+    <@when-empty>
+      $ warn(`Unable to create magazine issue metadata: no issue found for ${id}.`);
+    </@when-empty>
+  </marko-web-query>
+</if>
+<else>
+  $ warn('Unable to create magazine issue metadata: no issue id was provided.');
+</else>

package/components/page/metadata/magazine-issue.marko.js

@@ -0,0 +1,83 @@
+// 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/page/metadata/magazine-issue.marko",
+    marko_component = require("./magazine-issue.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_gql = require("graphql-tag"),
+    gql = module_gql.default || module_gql,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    warn = module_utils_module.warn,
+    common_template = require("./components/common.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    common_tag = marko_loadTag(common_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 { id } = input;
+
+  const queryFragment = gql`
+fragment MagazineIssueMetadataFragment on MagazineIssue {
+  id
+  canonicalPath
+  publication {
+    id
+    name
+  }
+  metadata {
+    title
+    description
+  }
+}
+`;
+
+  if (id) {
+    marko_web_query_tag({
+        collapsible: true,
+        name: "magazine-issue",
+        params: {
+            id: id,
+            queryFragment: queryFragment
+          },
+        whenEmpty: {
+            renderBody: function(out) {
+              warn(`Unable to create magazine issue metadata: no issue found for ${id}.`);
+            }
+          },
+        renderBody: function(out, { node }) {
+          const metadata = {
+      title: get(node, "metadata.title"),
+      description: get(node, "metadata.description"),
+      canonicalPath: node.canonicalPath,
+    };
+
+          common_tag(metadata, out, __component, "1");
+
+          out.w("<meta property=\"og:type\" content=\"website\">");
+        }
+      }, out, __component, "0");
+  } else {
+    warn('Unable to create magazine issue metadata: no issue id was provided.');
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/page/metadata/magazine-issue.marko",
+    component: "./magazine-issue.marko",
+    tags: [
+      "./components/common.marko",
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/page/metadata/magazine-publication.marko

@@ -0,0 +1,35 @@
+import gql from "graphql-tag";
+import { get } from "@mindful-web/object-path";
+import { warn } from "@mindful-web/utils";
+
+<!-- @todo This data should generated and saved to the page object as flat data, so no relationships are required. -->
+
+$ const { id } = input;
+$ const queryFragment = gql`
+fragment MagazinePublicationMetadataFragment on MagazinePublication {
+  id
+  canonicalPath
+  metadata {
+    title
+    description
+  }
+}
+`;
+
+<if(id)>
+  <marko-web-query|{ node }| name="magazine-publication" params={ id, queryFragment }>
+    $ const metadata = {
+      title: get(node, "metadata.title"),
+      description: get(node, "metadata.description"),
+      canonicalPath: node.canonicalPath,
+    };
+    <common ...metadata />
+    <meta property="og:type" content="website" />
+    <@when-empty>
+      $ warn(`Unable to create magazine publication metadata: no publication found for ${id}.`);
+    </@when-empty>
+  </marko-web-query>
+</if>
+<else>
+  $ warn('Unable to create magazine publication metadata: no publication id was provided.');
+</else>

package/components/page/metadata/magazine-publication.marko.js

@@ -0,0 +1,79 @@
+// 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/page/metadata/magazine-publication.marko",
+    marko_component = require("./magazine-publication.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_gql = require("graphql-tag"),
+    gql = module_gql.default || module_gql,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    warn = module_utils_module.warn,
+    common_template = require("./components/common.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    common_tag = marko_loadTag(common_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 { id } = input;
+
+  const queryFragment = gql`
+fragment MagazinePublicationMetadataFragment on MagazinePublication {
+  id
+  canonicalPath
+  metadata {
+    title
+    description
+  }
+}
+`;
+
+  if (id) {
+    marko_web_query_tag({
+        collapsible: true,
+        name: "magazine-publication",
+        params: {
+            id: id,
+            queryFragment: queryFragment
+          },
+        whenEmpty: {
+            renderBody: function(out) {
+              warn(`Unable to create magazine publication metadata: no publication found for ${id}.`);
+            }
+          },
+        renderBody: function(out, { node }) {
+          const metadata = {
+      title: get(node, "metadata.title"),
+      description: get(node, "metadata.description"),
+      canonicalPath: node.canonicalPath,
+    };
+
+          common_tag(metadata, out, __component, "1");
+
+          out.w("<meta property=\"og:type\" content=\"website\">");
+        }
+      }, out, __component, "0");
+  } else {
+    warn('Unable to create magazine publication metadata: no publication id was provided.');
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/page/metadata/magazine-publication.marko",
+    component: "./magazine-publication.marko",
+    tags: [
+      "./components/common.marko",
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/page/metadata/marko.json

@@ -0,0 +1,32 @@
+{
+  "<marko-web-default-page-metadata>": {
+    "template": "./default.marko",
+    "@title": "string",
+    "@description": "string",
+    "@canonical-path": "string",
+    "@canonical-url": "string",
+    "@image-src": "string"
+  },
+  "<marko-web-content-page-metadata>": {
+    "template": "./content.marko",
+    "@id": "number",
+    "@structured-data-query-fragment": "string",
+    "@build-structured-data": "function"
+  },
+  "<marko-web-website-section-page-metadata>": {
+    "template": "./website-section.marko",
+    "@alias": "string"
+  },
+  "<marko-web-dynamic-page-metadata>": {
+    "template": "./dynamic-page.marko",
+    "@alias": "string"
+  },
+  "<marko-web-magazine-issue-page-metadata>": {
+    "template": "./magazine-issue.marko",
+    "@id": "number"
+  },
+  "<marko-web-magazine-publication-page-metadata>": {
+    "template": "./magazine-publication.marko",
+    "@id": "number"
+  }
+}

package/components/page/metadata/website-section.marko

@@ -0,0 +1,48 @@
+import gql from "graphql-tag";
+import { get } from "@mindful-web/object-path";
+import { warn } from "@mindful-web/utils";
+
+<!-- @todo This data should generated and saved to the section object as flat data, so no relationships are required. -->
+
+$ const { alias } = input;
+$ const queryFragment = gql`
+fragment WebsiteSectionPageMetadataFragment on WebsiteSection {
+  id
+  canonicalPath
+  metadata {
+    title
+    description
+  }
+  logo {
+    id
+    src
+    cropRectangle {
+      width
+      height
+    }
+  }
+}
+`;
+
+<if(alias)>
+  <marko-web-query|{ node }| name="website-section" params={ alias, queryFragment }>
+    $ const metadata = {
+      title: get(node, "metadata.title"),
+      description: get(node, "metadata.description"),
+      canonicalPath: node.canonicalPath,
+      imageSrc: get(node, "logo.src"),
+      imageDimensions: {
+        width: get(node, "logo.cropRectangle.width"),
+        height: get(node, "logo.cropRectangle.height")
+      },
+    };
+    <common ...metadata />
+    <meta property="og:type" content="website" />
+    <@when-empty>
+      $ warn(`Unable to create website section metadata: no section found for ${alias}.`);
+    </@when-empty>
+  </marko-web-query>
+</if>
+<else>
+  $ warn('Unable to create website section metadata: no section alias was provided.');
+</else>

package/components/page/metadata/website-section.marko.js

@@ -0,0 +1,92 @@
+// 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/page/metadata/website-section.marko",
+    marko_component = require("./website-section.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_gql = require("graphql-tag"),
+    gql = module_gql.default || module_gql,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    warn = module_utils_module.warn,
+    common_template = require("./components/common.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    common_tag = marko_loadTag(common_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 { alias } = input;
+
+  const queryFragment = gql`
+fragment WebsiteSectionPageMetadataFragment on WebsiteSection {
+  id
+  canonicalPath
+  metadata {
+    title
+    description
+  }
+  logo {
+    id
+    src
+    cropRectangle {
+      width
+      height
+    }
+  }
+}
+`;
+
+  if (alias) {
+    marko_web_query_tag({
+        collapsible: true,
+        name: "website-section",
+        params: {
+            alias: alias,
+            queryFragment: queryFragment
+          },
+        whenEmpty: {
+            renderBody: function(out) {
+              warn(`Unable to create website section metadata: no section found for ${alias}.`);
+            }
+          },
+        renderBody: function(out, { node }) {
+          const metadata = {
+      title: get(node, "metadata.title"),
+      description: get(node, "metadata.description"),
+      canonicalPath: node.canonicalPath,
+      imageSrc: get(node, "logo.src"),
+      imageDimensions: {
+        width: get(node, "logo.cropRectangle.width"),
+        height: get(node, "logo.cropRectangle.height")
+      },
+    };
+
+          common_tag(metadata, out, __component, "1");
+
+          out.w("<meta property=\"og:type\" content=\"website\">");
+        }
+      }, out, __component, "0");
+  } else {
+    warn('Unable to create website section metadata: no section alias was provided.');
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/page/metadata/website-section.marko",
+    component: "./website-section.marko",
+    tags: [
+      "./components/common.marko",
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/page/rel-canonical.marko

@@ -0,0 +1,13 @@
+import { cleanPath } from "@mindful-web/utils";
+
+$ const { req, requestOrigin } = out.global;
+$ const path = input.path || req.path;
+
+$ const href = input.url || `${out.global.requestOrigin}/${cleanPath(path)}`;
+
+<if(input.renderBody)>
+  <${input.renderBody} href=href />
+</if>
+<else>
+  <link rel="canonical" href=href />
+</else>

package/components/page/rel-canonical.marko.js

@@ -0,0 +1,42 @@
+// 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/page/rel-canonical.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,
+    cleanPath = module_utils_module.cleanPath,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { req, requestOrigin } = out.global;
+
+  const path = input.path || req.path;
+
+  const href = input.url || `${out.global.requestOrigin}/${cleanPath(path)}`;
+
+  if (input.renderBody) {
+    marko_dynamicTag(out, input.renderBody, function() {
+      return {
+          href: href
+        };
+    }, null, null, null, __component, "0");
+  } else {
+    out.w("<link rel=\"canonical\"" +
+      marko_attr("href", href) +
+      ">");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/page/rel-canonical.marko"
+  };

package/components/page/title.marko

@@ -0,0 +1,18 @@
+import { cleanPath } from "@mindful-web/utils";
+
+$ const { config } = out.global;
+$ const parts = [
+  input.value,
+  config.website("name"),
+];
+$ const concatWith = input.concatWith || "|";
+$ const title = parts.filter(v => v && v !== 'Home').join(` ${concatWith} `);
+
+<title>
+  <if(input.renderBody)>
+    <${input.renderBody} />
+  </if>
+  <else>
+    ${title}
+  </else>
+</title>

package/components/page/title.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/page/title.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,
+    cleanPath = module_utils_module.cleanPath,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x;
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { config } = out.global;
+
+  const parts = [
+  input.value,
+  config.website("name"),
+];
+
+  const concatWith = input.concatWith || "|";
+
+  const title = parts.filter(v => v && v !== 'Home').join(` ${concatWith} `);
+
+  out.w("<title>");
+
+  if (input.renderBody) {
+    marko_dynamicTag(out, input.renderBody, null, null, null, null, __component, "1");
+  } else {
+    out.w(marko_escapeXml(title));
+  }
+
+  out.w("</title>");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/page/title.marko"
+  };