@mindful-web/marko-web 1.0.0

package/components/page/metadata/components/common.marko

@@ -0,0 +1,54 @@
+$ const { config } = out.global;
+$ const {
+  title,
+  canonicalPath,
+  canonicalUrl,
+  imageSrc,
+  imageDimensions,
+  description,
+  noIndex,
+} = input;
+$ const fallbackImage = config.fallbackImage();
+$ const image = imageSrc || fallbackImage;
+
+<!-- Standard Fields -->
+<marko-web-page-title value=title />
+<marko-web-page-description value=description />
+<marko-web-page-rel-canonical path=canonicalPath url=canonicalUrl />
+
+<!-- No Index Directive -->
+<if(noIndex)>
+  <meta name="robots" content="noindex">
+</if>
+
+<!-- Name/Title (OpenGrah, and Schema.org respectively) -->
+<if(title)>
+  <meta property="og:title" item-prop="name" content=title />
+</if>
+
+<if(image)>
+  <!-- Image (standard, OpenGrah, and Schema.org respectively) -->
+  <meta name="image" property="og:image" item-prop="image" content=image />
+  <if(imageDimensions && imageDimensions.width && imageDimensions.height)>
+    <meta property="og:image:width" content=`${imageDimensions.width}` />
+    <meta property="og:image:height" content=`${imageDimensions.height}` />
+  </if>
+  <!-- @todo Create a new focal point preview for FB's 1200x630 ratio -->
+</if>
+
+<!-- OpenGraph -->
+<marko-web-page-rel-canonical|{ href }| path=canonicalPath url=canonicalUrl>
+  <meta property="og:url" content=href />
+</marko-web-page-rel-canonical>
+<meta property="og:site_name" content=config.website("name") />
+<meta property="og:locale" content=config.website("language.primaryCode") />
+
+<!-- Twitter -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content=title />
+<if(description)>
+  <meta name="twitter:description" content=description />
+</if>
+<if(image)>
+  <meta name="twitter:image" content=image />
+</if>

package/components/page/metadata/components/common.marko.js

@@ -0,0 +1,117 @@
+// 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/components/common.marko",
+    marko_component = require("./common.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_web_page_title_template = require("../../title.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_page_title_tag = marko_loadTag(marko_web_page_title_template),
+    marko_web_page_description_template = require("../../description.marko"),
+    marko_web_page_description_tag = marko_loadTag(marko_web_page_description_template),
+    marko_web_page_rel_canonical_template = require("../../rel-canonical.marko"),
+    marko_web_page_rel_canonical_tag = marko_loadTag(marko_web_page_rel_canonical_template),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { config } = out.global;
+
+  const {
+  title,
+  canonicalPath,
+  canonicalUrl,
+  imageSrc,
+  imageDimensions,
+  description,
+  noIndex,
+} = input;
+
+  const fallbackImage = config.fallbackImage();
+
+  const image = imageSrc || fallbackImage;
+
+  marko_web_page_title_tag({
+      concatWith: "|",
+      value: title
+    }, out, __component, "0");
+
+  marko_web_page_description_tag({
+      value: description
+    }, out, __component, "1");
+
+  marko_web_page_rel_canonical_tag({
+      path: canonicalPath,
+      url: canonicalUrl
+    }, out, __component, "2");
+
+  if (noIndex) {
+    out.w("<meta name=\"robots\" content=\"noindex\">");
+  }
+
+  if (title) {
+    out.w("<meta property=\"og:title\" item-prop=\"name\"" +
+      marko_attr("content", title) +
+      ">");
+  }
+
+  if (image) {
+    out.w("<meta name=\"image\" property=\"og:image\" item-prop=\"image\"" +
+      marko_attr("content", image) +
+      ">");
+
+    if ((imageDimensions && imageDimensions.width) && imageDimensions.height) {
+      out.w("<meta property=\"og:image:width\"" +
+        marko_attr("content", "" + imageDimensions.width) +
+        "><meta property=\"og:image:height\"" +
+        marko_attr("content", "" + imageDimensions.height) +
+        ">");
+    }
+  }
+
+  marko_web_page_rel_canonical_tag({
+      path: canonicalPath,
+      url: canonicalUrl,
+      renderBody: function(out, { href }) {
+        out.w("<meta property=\"og:url\"" +
+          marko_attr("content", href) +
+          ">");
+      }
+    }, out, __component, "8");
+
+  out.w("<meta property=\"og:site_name\"" +
+    marko_attr("content", config.website("name")) +
+    "><meta property=\"og:locale\"" +
+    marko_attr("content", config.website("language.primaryCode")) +
+    "><meta name=\"twitter:card\" content=\"summary_large_image\"><meta name=\"twitter:title\"" +
+    marko_attr("content", title) +
+    ">");
+
+  if (description) {
+    out.w("<meta name=\"twitter:description\"" +
+      marko_attr("content", description) +
+      ">");
+  }
+
+  if (image) {
+    out.w("<meta name=\"twitter:image\"" +
+      marko_attr("content", image) +
+      ">");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/page/metadata/components/common.marko",
+    component: "./common.marko",
+    tags: [
+      "../../title.marko",
+      "../../description.marko",
+      "../../rel-canonical.marko"
+    ]
+  };

package/components/page/metadata/content.marko

@@ -0,0 +1,147 @@
+import gql from "graphql-tag";
+import { get } from "@mindful-web/object-path";
+import { warn, isFunction } from "@mindful-web/utils";
+import { extractFragmentData } from "@mindful-web/web-common/src/utils";
+import defaultBuildStructuredData from "./google-structured-data/content";
+
+<!-- @todo This data should generated and saved to the content object as flat data, so no relationships are required. -->
+
+$ const { config } = out.global;
+$ const { id, structuredDataQueryFragment } = input;
+$ const { spreadFragmentName, processedFragment } = extractFragmentData(structuredDataQueryFragment);
+$ const queryFragment = gql`
+fragment ContentPageMetadataFragment on Content {
+  id
+  type
+  siteContext {
+    url
+    path
+    canonicalUrl
+    noIndex
+  }
+  published
+  updated
+  metadata {
+    title
+    description
+    publishedDate
+    updatedDate
+    expiresDate
+    image {
+      id
+      src(input: { options: { auto: "format,compress", w: "1200", fit: "max", q: 70 } })
+    }
+  }
+  userRegistration {
+    isCurrentlyRequired
+  }
+  ... on ContentVideo {
+    embedSrc
+    transcript
+  }
+  primarySite {
+    id
+  }
+  ... on ContentPodcast {
+    fileSrc
+    fileName
+    transcript
+  }
+  ... on ContentWebinar {
+    transcript
+  }
+  ... on Authorable {
+    authors {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+  ... on Addressable {
+    address1
+    address2
+    city
+    state
+    zip
+    country
+  }
+  ... on Contactable {
+    phone
+    tollfree
+    fax
+    website
+    title
+    mobile
+    email: publicEmail
+  }
+  images(input:{ pagination: { limit: 0 }, sort: { order: values } }) {
+    edges {
+      node {
+        id
+        src(input: { options: { auto: "format,compress", w: "1200", fit: "max", q: 70 } })
+      }
+    }
+  }
+  ${spreadFragmentName}
+}
+${processedFragment}
+`;
+
+$ const buildStructuredData = isFunction(input.buildStructuredData) ? input.buildStructuredData : defaultBuildStructuredData;
+$ const defaultFn = ({ content }) => get(content, 'userRegistration.isCurrentlyRequired', false);
+$ const { contentGatingHandler: globalContentGatingHandler } = out.global;
+$ const contentGatingHandler = isFunction(globalContentGatingHandler) ? globalContentGatingHandler : defaultFn;
+
+<if(id)>
+  <marko-web-query|{ node }| name="content" params={ id, queryFragment }>
+    $ const metadata = {
+      type: node.type,
+      title: get(node, "metadata.title"),
+      description: get(node, "metadata.description"),
+      canonicalPath: get(node, "siteContext.path"),
+      canonicalUrl: get(node, "siteContext.canonicalUrl"),
+      noIndex: get(node, "siteContext.noIndex") || config.website("id") !== get(node, "primarySite.id"),
+      imageSrc: get(node, "metadata.image.src"),
+    };
+    $ const publishedDate = get(node, "metadata.publishedDate");
+    $ const updatedDate = get(node, "metadata.updatedDate");
+    $ const expiresDate = get(node, "metadata.expiresDate");
+
+    <common ...metadata />
+    <if(node.type === "video")>
+      <meta property="og:type" content="video.other" />
+      <if(publishedDate)>
+        <meta property="video:release_date" content=publishedDate />
+      </if>
+    </if>
+    <else>
+      <meta property="og:type" content="article" />
+      <if(publishedDate)>
+        <meta property="article:published_time" content=publishedDate />
+      </if>
+      <if(updatedDate)>
+        <meta property="article:modified_time" content=updatedDate />
+      </if>
+      <if(expiresDate)>
+        <meta property="article:expiration_time" content=expiresDate />
+      </if>
+    </else>
+
+    $ const structuredData = buildStructuredData(node, contentGatingHandler);
+    <if(structuredData)>
+      <script type="application/ld+json">
+        ${structuredData}
+      </script>
+    </if>
+
+    <@when-empty>
+      $ warn(`Unable to create content metadata: no content found for ${id}.`);
+    </@when-empty>
+  </marko-web-query>
+</if>
+<else>
+  $ warn('Unable to create content metadata: no content id was provided.');
+</else>

package/components/page/metadata/content.marko.js

@@ -0,0 +1,216 @@
+// 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/content.marko",
+    marko_component = require("./content.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,
+    isFunction = module_utils_module.isFunction,
+    module_utils_module2 = require("@mindful-web/web-common/src/utils"),
+    extractFragmentData = module_utils_module2.extractFragmentData,
+    module_defaultBuildStructuredData = require("./google-structured-data/content"),
+    defaultBuildStructuredData = module_defaultBuildStructuredData.default || module_defaultBuildStructuredData,
+    common_template = require("./components/common.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    common_tag = marko_loadTag(common_template),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr"),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_escapeScript = require("marko/dist/runtime/html/helpers/escape-script-placeholder"),
+    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 { config } = out.global;
+
+  const { id, structuredDataQueryFragment } = input;
+
+  const { spreadFragmentName, processedFragment } = extractFragmentData(structuredDataQueryFragment);
+
+  const queryFragment = gql`
+fragment ContentPageMetadataFragment on Content {
+  id
+  type
+  siteContext {
+    url
+    path
+    canonicalUrl
+    noIndex
+  }
+  published
+  updated
+  metadata {
+    title
+    description
+    publishedDate
+    updatedDate
+    expiresDate
+    image {
+      id
+      src(input: { options: { auto: "format,compress", w: "1200", fit: "max", q: 70 } })
+    }
+  }
+  userRegistration {
+    isCurrentlyRequired
+  }
+  ... on ContentVideo {
+    embedSrc
+    transcript
+  }
+  primarySite {
+    id
+  }
+  ... on ContentPodcast {
+    fileSrc
+    fileName
+    transcript
+  }
+  ... on ContentWebinar {
+    transcript
+  }
+  ... on Authorable {
+    authors {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+  ... on Addressable {
+    address1
+    address2
+    city
+    state
+    zip
+    country
+  }
+  ... on Contactable {
+    phone
+    tollfree
+    fax
+    website
+    title
+    mobile
+    email: publicEmail
+  }
+  images(input:{ pagination: { limit: 0 }, sort: { order: values } }) {
+    edges {
+      node {
+        id
+        src(input: { options: { auto: "format,compress", w: "1200", fit: "max", q: 70 } })
+      }
+    }
+  }
+  ${spreadFragmentName}
+}
+${processedFragment}
+`;
+
+  const buildStructuredData = isFunction(input.buildStructuredData) ? input.buildStructuredData : defaultBuildStructuredData;
+
+  const defaultFn = ({ content }) => get(content, 'userRegistration.isCurrentlyRequired', false);
+
+  const { contentGatingHandler: globalContentGatingHandler } = out.global;
+
+  const contentGatingHandler = isFunction(globalContentGatingHandler) ? globalContentGatingHandler : defaultFn;
+
+  if (id) {
+    marko_web_query_tag({
+        collapsible: true,
+        name: "content",
+        params: {
+            id: id,
+            queryFragment: queryFragment
+          },
+        whenEmpty: {
+            renderBody: function(out) {
+              warn(`Unable to create content metadata: no content found for ${id}.`);
+            }
+          },
+        renderBody: function(out, { node }) {
+          const metadata = {
+      type: node.type,
+      title: get(node, "metadata.title"),
+      description: get(node, "metadata.description"),
+      canonicalPath: get(node, "siteContext.path"),
+      canonicalUrl: get(node, "siteContext.canonicalUrl"),
+      noIndex: get(node, "siteContext.noIndex") || config.website("id") !== get(node, "primarySite.id"),
+      imageSrc: get(node, "metadata.image.src"),
+    };
+
+          const publishedDate = get(node, "metadata.publishedDate");
+
+          const updatedDate = get(node, "metadata.updatedDate");
+
+          const expiresDate = get(node, "metadata.expiresDate");
+
+          common_tag(metadata, out, __component, "1");
+
+          if (node.type === "video") {
+            out.w("<meta property=\"og:type\" content=\"video.other\">");
+
+            if (publishedDate) {
+              out.w("<meta property=\"video:release_date\"" +
+                marko_attr("content", publishedDate) +
+                ">");
+            }
+          } else {
+            out.w("<meta property=\"og:type\" content=\"article\">");
+
+            if (publishedDate) {
+              out.w("<meta property=\"article:published_time\"" +
+                marko_attr("content", publishedDate) +
+                ">");
+            }
+
+            if (updatedDate) {
+              out.w("<meta property=\"article:modified_time\"" +
+                marko_attr("content", updatedDate) +
+                ">");
+            }
+
+            if (expiresDate) {
+              out.w("<meta property=\"article:expiration_time\"" +
+                marko_attr("content", expiresDate) +
+                ">");
+            }
+          }
+
+          const structuredData = buildStructuredData(node, contentGatingHandler);
+
+          if (structuredData) {
+            out.w("<script type=\"application/ld+json\">" +
+              marko_escapeScript(("\n        " + structuredData) + "\n      ") +
+              "</script>");
+          }
+        }
+      }, out, __component, "0");
+  } else {
+    warn('Unable to create content metadata: no content 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/content.marko",
+    component: "./content.marko",
+    tags: [
+      "./components/common.marko",
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };

package/components/page/metadata/default.marko

@@ -0,0 +1,2 @@
+<common ...input />
+<meta property="og:type" content="website" />

package/components/page/metadata/default.marko.js

@@ -0,0 +1,29 @@
+// 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/default.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    common_template = require("./components/common.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    common_tag = marko_loadTag(common_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  common_tag(input, out, __component, "0");
+
+  out.w("<meta property=\"og:type\" content=\"website\">");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/page/metadata/default.marko",
+    tags: [
+      "./components/common.marko"
+    ]
+  };

package/components/page/metadata/dynamic-page.marko

@@ -0,0 +1,40 @@
+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 { alias } = input;
+$ const queryFragment = gql`
+fragment DynamicPageMetadataFragment on ContentPage {
+  id
+  siteContext {
+    path
+    canonicalUrl
+    noIndex
+  }
+  metadata {
+    title
+    description
+  }
+}
+`;
+
+<if(alias)>
+  <marko-web-query|{ node }| name="dynamic-page" params={ alias, queryFragment }>
+    $ const metadata = {
+      title: get(node, "metadata.title"),
+      description: get(node, "metadata.description"),
+      canonicalPath: get(node, "siteContext.path"),
+      noIndex: get(node, "siteContext.noIndex"),
+    };
+    <common ...metadata />
+    <meta property="og:type" content="website" />
+    <@when-empty>
+      $ warn(`Unable to create dynamic page metadata: no page found for ${alias}.`);
+    </@when-empty>
+  </marko-web-query>
+</if>
+<else>
+  $ warn('Unable to create dynamic page metadata: no page alias was provided.');
+</else>

package/components/page/metadata/dynamic-page.marko.js

@@ -0,0 +1,84 @@
+// 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/dynamic-page.marko",
+    marko_component = require("./dynamic-page.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 DynamicPageMetadataFragment on ContentPage {
+  id
+  siteContext {
+    path
+    canonicalUrl
+    noIndex
+  }
+  metadata {
+    title
+    description
+  }
+}
+`;
+
+  if (alias) {
+    marko_web_query_tag({
+        collapsible: true,
+        name: "dynamic-page",
+        params: {
+            alias: alias,
+            queryFragment: queryFragment
+          },
+        whenEmpty: {
+            renderBody: function(out) {
+              warn(`Unable to create dynamic page metadata: no page found for ${alias}.`);
+            }
+          },
+        renderBody: function(out, { node }) {
+          const metadata = {
+      title: get(node, "metadata.title"),
+      description: get(node, "metadata.description"),
+      canonicalPath: get(node, "siteContext.path"),
+      noIndex: get(node, "siteContext.noIndex"),
+    };
+
+          common_tag(metadata, out, __component, "1");
+
+          out.w("<meta property=\"og:type\" content=\"website\">");
+        }
+      }, out, __component, "0");
+  } else {
+    warn('Unable to create dynamic page metadata: no page 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/dynamic-page.marko",
+    component: "./dynamic-page.marko",
+    tags: [
+      "./components/common.marko",
+      "@mindful-web/marko-core/components/queries/index.marko"
+    ]
+  };