@mindful-web/marko-web-native-x 1.0.0

package/components/story/advertiser-related-stories.marko

@@ -0,0 +1,51 @@
+import defaultFragment from "../../apollo/graphql/fragments/related-stories";
+import buildQuery from "../../apollo/graphql/queries/related-stories";
+
+$ const { req, nativeX } = out.global;
+
+$ const { advertiserId, externalId, publisherId, excludeStoryIds } = input;
+$ const args = {
+  config: nativeX,
+  advertiserId,
+  externalId,
+  ...(publisherId && { publisherId }),
+  ...(excludeStoryIds && { excludeStoryIds }),
+};
+
+/**
+ * @param NativeXConfiguration The NativeX config
+ * @param object The Marko template to render
+ * @param Document A query fragment to be used with the story query
+ */
+$ const getStories = async ({
+  config,
+  advertiserId,
+  externalId,
+  publisherId,
+  excludeStoryIds,
+  pagination,
+  queryFragment = defaultFragment,
+} = {}) => {
+  const { data } = await config.client.query({
+    query: buildQuery(queryFragment),
+    variables: {
+      input: { advertiserId, externalId, publisherId, excludeStoryIds },
+      ...(pagination && { pagination }),
+    },
+  });
+
+  if (!data || !data.advertiserStories) return { nodes: [], pageInfo: {} };
+  const { pageInfo } = data.advertiserStories;
+  const nodes = data.advertiserStories.edges
+    .map(edge => (edge && edge.node ? edge.node : null))
+    .filter(c => c);
+  return { nodes, pageInfo };
+};
+<if(nativeX && (externalId|| advertiserId))>
+  <marko-web-resolve|{ resolved }| promise=getStories(args)>
+    <${input.renderBody} nodes=resolved.nodes pageInfo=resolved.pageInfo />
+  </marko-web-resolve>
+</if>
+<else>
+  $ warn('Unable to fetch elements from NativeX: a uri and advertiser ID are required.');
+</else>

package/components/story/advertiser-related-stories.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-native-x$1.0.0/components/story/advertiser-related-stories.marko",
+    marko_component = require("./advertiser-related-stories.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_defaultFragment = require("../../apollo/graphql/fragments/related-stories"),
+    defaultFragment = module_defaultFragment.default || module_defaultFragment,
+    module_buildQuery = require("../../apollo/graphql/queries/related-stories"),
+    buildQuery = module_buildQuery.default || module_buildQuery,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_web_resolve_template = require("@mindful-web/marko-core/components/resolve.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_resolve_tag = marko_loadTag(marko_web_resolve_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { req, nativeX } = out.global;
+
+  const { advertiserId, externalId, publisherId, excludeStoryIds } = input;
+
+  const args = {
+  config: nativeX,
+  advertiserId,
+  externalId,
+  ...(publisherId && { publisherId }),
+  ...(excludeStoryIds && { excludeStoryIds }),
+};
+
+  const getStories = async ({
+  config,
+  advertiserId,
+  externalId,
+  publisherId,
+  excludeStoryIds,
+  pagination,
+  queryFragment = defaultFragment,
+} = {}) => {
+  const { data } = await config.client.query({
+    query: buildQuery(queryFragment),
+    variables: {
+      input: { advertiserId, externalId, publisherId, excludeStoryIds },
+      ...(pagination && { pagination }),
+    },
+  });
+
+  if (!data || !data.advertiserStories) return { nodes: [], pageInfo: {} };
+  const { pageInfo } = data.advertiserStories;
+  const nodes = data.advertiserStories.edges
+    .map(edge => (edge && edge.node ? edge.node : null))
+    .filter(c => c);
+  return { nodes, pageInfo };
+};
+
+  if (nativeX && (externalId || advertiserId)) {
+    marko_web_resolve_tag({
+        promise: getStories(args),
+        renderBody: function(out, { resolved }) {
+          marko_dynamicTag(out, input.renderBody, function() {
+            return {
+                nodes: resolved.nodes,
+                pageInfo: resolved.pageInfo
+              };
+          }, null, null, null, __component, "1");
+        }
+      }, out, __component, "0");
+  } else {
+    warn('Unable to fetch elements from NativeX: a uri and advertiser ID are required.');
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-native-x$1.0.0/components/story/advertiser-related-stories.marko",
+    component: "./advertiser-related-stories.marko",
+    tags: [
+      "@mindful-web/marko-core/components/resolve.marko"
+    ]
+  };

package/components/story/track-end-of-content.marko

@@ -0,0 +1 @@
+<marko-web-browser-component name="NativeXTrackEndOfContent" props={} />

package/components/story/track-end-of-content.marko.js

@@ -0,0 +1,30 @@
+// 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-native-x$1.0.0/components/story/track-end-of-content.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    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;
+
+  marko_web_browser_component_tag({
+      name: "NativeXTrackEndOfContent",
+      props: {}
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-native-x$1.0.0/components/story/track-end-of-content.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko"
+    ]
+  };

package/components/story/track-init.marko

@@ -0,0 +1,13 @@
+import { get, getAsObject } from "@mindful-web/object-path";
+
+$ const { req } = out.global;
+$ const story = getAsObject(input, "story");
+
+<marko-web-gtm-push name="dataLayerNativeX" data={
+  story_id: story.id,
+  page_path: req.path,
+  page_title: story.title,
+  publisher_id: get(story, "publisher.id"),
+  advertiser_id: get(story, "advertiser.id"),
+  preview_mode: Boolean(req.query.preview),
+} />

package/components/story/track-init.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-native-x$1.0.0/components/story/track-init.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,
+    getAsObject = module_objectPath_module.getAsObject,
+    marko_web_gtm_push_template = require("@mindful-web/marko-web-gtm/components/push.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_gtm_push_tag = marko_loadTag(marko_web_gtm_push_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { req } = out.global;
+
+  const story = getAsObject(input, "story");
+
+  marko_web_gtm_push_tag({
+      name: "dataLayerNativeX",
+      data: {
+          story_id: story.id,
+          page_path: req.path,
+          page_title: story.title,
+          publisher_id: get(story, "publisher.id"),
+          advertiser_id: get(story, "advertiser.id"),
+          preview_mode: Boolean(req.query.preview)
+        }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-native-x$1.0.0/components/story/track-init.marko",
+    tags: [
+      "@mindful-web/marko-web-gtm/components/push.marko"
+    ]
+  };

package/components/story/track-outbound-links.marko

@@ -0,0 +1,3 @@
+<marko-web-browser-component name="NativeXTrackOutboundLinks" props={
+  container: input.container,
+} />

package/components/story/track-outbound-links.marko.js

@@ -0,0 +1,32 @@
+// 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-native-x$1.0.0/components/story/track-outbound-links.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    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;
+
+  marko_web_browser_component_tag({
+      name: "NativeXTrackOutboundLinks",
+      props: {
+          container: input.container
+        }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-native-x$1.0.0/components/story/track-outbound-links.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko"
+    ]
+  };

package/components/story/track-page-view.marko

@@ -0,0 +1 @@
+<marko-web-gtm-push name="dataLayerNativeX" data={ event: "page_load" } />

package/components/story/track-page-view.marko.js

@@ -0,0 +1,32 @@
+// 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-native-x$1.0.0/components/story/track-page-view.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_web_gtm_push_template = require("@mindful-web/marko-web-gtm/components/push.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_gtm_push_tag = marko_loadTag(marko_web_gtm_push_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  marko_web_gtm_push_tag({
+      name: "dataLayerNativeX",
+      data: {
+          event: "page_load"
+        }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-native-x$1.0.0/components/story/track-page-view.marko",
+    tags: [
+      "@mindful-web/marko-web-gtm/components/push.marko"
+    ]
+  };

package/components/story/track-social-share.marko

@@ -0,0 +1 @@
+<marko-web-browser-component name="NativeXTrackSocialShare" props={} />

package/components/story/track-social-share.marko.js

@@ -0,0 +1,30 @@
+// 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-native-x$1.0.0/components/story/track-social-share.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    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;
+
+  marko_web_browser_component_tag({
+      name: "NativeXTrackSocialShare",
+      props: {}
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-native-x$1.0.0/components/story/track-social-share.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko"
+    ]
+  };

package/config.js

@@ -0,0 +1,94 @@
+const { asArray } = require('@mindful-web/utils');
+const { set, get, getAsObject } = require('@mindful-web/object-path');
+const createClient = require('./apollo/create-client');
+
+class NativeXConfiguration {
+  /**
+   *
+   * @param {string} uri
+   * @param {object} params
+   * @param {boolean} [params.enabled=true]
+   * @param {string} [params.defaultAlias=default]
+   */
+  constructor(uri, { enabled = true, defaultAlias = 'default', tenantKey } = {}) {
+    if (!uri) throw new Error('Unable to configure NativeX: no URI was provided.');
+    this.uri = uri;
+    this.enabled = enabled;
+    this.defaultAlias = defaultAlias;
+    this.tenantKey = tenantKey;
+
+    this.client = createClient(this.getGraphQLUri());
+    this.placements = {};
+  }
+
+  /**
+   *
+   * @param {object} params
+   * @param {string} params.alias The placement alias, e.g. `default` or `some-section-name`.
+   * @param {string} params.name The placement name, e.g. `primary` or `list1`, etc.
+   * @param {string} params.id The placement id, e.g. `5d4b04769f69b200013ab109`.
+   */
+  setPlacement({ alias, name, id } = {}) {
+    if (!name || !alias || !id) throw new Error('Unable to create NativeX placement: the name, alias, and ID are required');
+    const placement = { id };
+    set(this.placements, `${alias}.${name}`, placement);
+    return this;
+  }
+
+  /**
+   *
+   * @param {object} params
+   * @param {string} params.name  The placement name, e.g. `primary` or `list1`, etc.
+   * @param {string[]} params.aliases The placement aliases to traverse when loading the placement.
+   */
+  getPlacement({ name, aliases } = {}) {
+    // Retrieve the default and "alias-traversed" placements.
+    const defaultPlacement = getAsObject(this.placements, `${this.defaultAlias}.${name}`);
+    const foundPlacement = asArray(aliases).map((alias) => get(this.placements, `${alias}.${name}`)).filter((v) => v)[0];
+
+    // Ensure placement is duplicated so property re-assignment doesn't "stick."
+    return {
+      ...getAsObject(foundPlacement || defaultPlacement),
+      enabled: this.enabled,
+      uri: this.uri,
+    };
+  }
+
+  /**
+   *
+   * @param {string} alias
+   * @param {object[]} definitions
+   */
+  setAliasPlacements(alias, definitions) {
+    asArray(definitions).forEach((definition) => {
+      this.setPlacement({ ...definition, alias });
+    });
+    return this;
+  }
+
+  getUri() {
+    return this.uri;
+  }
+
+  getGraphQLUri() {
+    return `${this.uri}/graph`;
+  }
+
+  isEnabled() {
+    return this.enabled;
+  }
+
+  getTenantKey() {
+    const { tenantKey } = this;
+    if (tenantKey) return tenantKey;
+    const [, key] = this.uri.match(/\/\/(\w+)\.native-x/i);
+    return key;
+  }
+
+  getEntityFor(type) {
+    const tenantKey = this.getTenantKey();
+    return `native-x.${tenantKey}.${type}`;
+  }
+}
+
+module.exports = NativeXConfiguration;

package/marko.json

@@ -0,0 +1,6 @@
+{
+  "taglib-id": "@mindful-web/marko-web-native-x",
+  "taglib-imports": [
+    "./components/marko.json"
+  ]
+}

package/middleware/with-story.js

@@ -0,0 +1,35 @@
+const { asyncRoute } = require('@mindful-web/utils');
+const { getAsObject } = require('@mindful-web/object-path');
+const defaultFragment = require('../apollo/graphql/fragments/story');
+const buildQuery = require('../apollo/graphql/queries/story');
+
+/**
+ * @param NativeXConfiguration The NativeX config
+ * @param object The Marko template to render
+ * @param Document A query fragment to be used with the story query
+ * @param object Headers to send with the API request
+ */
+module.exports = ({
+  config,
+  template,
+  queryFragment = defaultFragment,
+  headers = {},
+} = {}) => asyncRoute(async (req, res) => {
+  const { path, url } = req;
+  if (path.substr(-1) === '/' && path.length > 1) {
+    const query = url.slice(path.length);
+    const safe = path.slice(0, -1).replace(/\/+/g, '/');
+    res.redirect(301, `${safe}${query}`);
+    return;
+  }
+
+  const { id } = req.params;
+  const preview = Boolean(req.query.preview);
+  const result = await config.client.query({
+    query: buildQuery(queryFragment),
+    variables: { input: { id, preview } },
+    headers,
+  });
+  const story = getAsObject(result, 'data.publishedStory');
+  res.marko(template, { story });
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@mindful-web/marko-web-native-x",
+  "version": "1.0.0",
+  "description": "NativeX Marko components for Mindful Web websites",
+  "author": "Jacob Bare <jacob@parameter1.com>",
+  "license": "MIT",
+  "repository": "https://github.com/parameter1/mindful-web/tree/main/packages/marko-web-native-x",
+  "scripts": {
+    "lint:fix": "yarn lint --fix",
+    "lint": "eslint --ext .js --ext .vue --max-warnings 5 ./",
+    "compile": "mindful-web-marko-compile compile",
+    "prepublish": "yarn compile --silent",
+    "test": "yarn compile --no-clean && yarn lint"
+  },
+  "dependencies": {
+    "@mindful-web/marko-web-deferred-script-loader": "^1.0.0",
+    "@mindful-web/marko-web-gtm": "^1.0.0",
+    "@mindful-web/object-path": "^1.0.0",
+    "@mindful-web/utils": "^1.0.0",
+    "@mindful-web/web-common": "^1.0.0",
+    "graphql-tag": "^2.12.6",
+    "node-fetch": "^2.6.9"
+  },
+  "peerDependencies": {
+    "@mindful-web/marko-core": "^0.0.0",
+    "@mindful-web/marko-web": "^0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0b77cab713eb5841202bb86c7119949866bc68b5"
+}

package/services/fetch-elements.js

@@ -0,0 +1,22 @@
+const { isObject } = require('@mindful-web/utils');
+const fetch = require('node-fetch');
+const createHeaders = require('../utils/create-headers');
+
+module.exports = async ({
+  uri,
+  placementId,
+  opts,
+  req,
+}) => {
+  const query = isObject(opts) ? `?opts=${encodeURIComponent(JSON.stringify(opts))}` : '';
+  const url = `${uri}/placement/elements/${placementId}.json${query}`;
+  const response = await fetch(url, { headers: createHeaders({ req }) });
+  const json = await response.json();
+  if (!response.ok) {
+    const err = new Error(response.statusMessage);
+    err.statusCode = response.statusText;
+    err.body = json;
+    throw err;
+  }
+  return json;
+};

package/utils/convert-ad-to-content.js

@@ -0,0 +1,39 @@
+const { get } = require('@mindful-web/object-path');
+
+module.exports = (ad = {}, { sectionName = 'Sponsored' } = {}) => {
+  const { campaign, creative, image } = ad;
+  const startDate = get(campaign, 'criteria.start');
+  const { updatedAt } = campaign;
+  return {
+    id: campaign.id,
+    name: creative.title,
+    shortName: creative.title,
+    typeTitled: 'Text Ad',
+    type: 'text-ad',
+    teaser: creative.teaser,
+    linkText: creative.linkText,
+    published: updatedAt > startDate ? updatedAt : startDate,
+    canonicalPath: ad.href, // @deprecated. Use siteContext.path instead
+    siteContext: {
+      path: ad.href,
+      canonicalUrl: ad.href,
+      __typename: 'ContentSiteContext',
+    },
+    primaryImage: {
+      id: image.id,
+      alt: creative.title,
+      src: image.src,
+      __typename: 'AssetImage',
+    },
+    primarySection: {
+      name: sectionName,
+      fullName: sectionName,
+      __typename: 'WebsiteSection',
+    },
+    company: {
+      name: campaign.advertiserName,
+      __typename: 'ContentCompany',
+    },
+    __typename: 'ContentTextAd',
+  };
+};

package/utils/convert-ad-to-node.js

@@ -0,0 +1,6 @@
+const convertAdToContent = require('./convert-ad-to-content');
+
+module.exports = (ad, { sectionName = 'Sponsored' } = {}) => {
+  const node = convertAdToContent(ad, { sectionName });
+  return { node, attrs: ad.attributes.container, linkAttrs: ad.attributes.link };
+};

package/utils/convert-story-to-content.js

@@ -0,0 +1,44 @@
+const { get, getAsObject } = require('@mindful-web/object-path');
+
+module.exports = (story = {}, { sectionName = 'Sponsored' } = {}) => {
+  const advertiser = getAsObject(story, 'advertiser');
+  const contentImage = getAsObject(story, 'primaryImage');
+  const advertiserImage = getAsObject(story, 'advertiser.logo');
+  return {
+    id: story.id,
+    name: story.title,
+    shortName: story.title,
+    body: story.body,
+    typeTitled: 'Article',
+    type: 'article',
+    teaser: story.teaser,
+    published: get(story, 'publishedAt'),
+    siteContext: {
+      path: story.url,
+      canonicalUrl: story.url,
+      __typename: 'ContentSiteContext',
+    },
+    primaryImage: {
+      id: contentImage.id,
+      alt: story.title,
+      src: contentImage.src,
+      __typename: 'AssetImage',
+    },
+    primarySection: {
+      name: sectionName,
+      fullName: sectionName,
+      __typename: 'WebsiteSection',
+    },
+    company: {
+      name: advertiser.name,
+      primaryImage: {
+        id: advertiserImage.id,
+        alt: advertiser.name,
+        src: advertiserImage.src,
+        __typename: 'AssetImage',
+      },
+      __typename: 'ContentCompany',
+    },
+    __typename: 'ContentArticle',
+  };
+};

package/utils/create-headers.js

@@ -0,0 +1,7 @@
+module.exports = ({ req }) => {
+  if (!req) return {};
+  return {
+    'x-forwarded-for': req.ip,
+    'user-agent': req.get('user-agent'),
+  };
+};

package/utils/gtm-events.js

@@ -0,0 +1,20 @@
+/* eslint-disable no-undef */
+export const pageLoad = () => {
+  const dataLayer = window.dataLayerNativeX;
+  if (dataLayer) dataLayer.push({ event: 'page_load' });
+};
+
+export const outboundLink = (url) => {
+  const dataLayer = window.dataLayerNativeX;
+  if (dataLayer) dataLayer.push({ event: 'outbound_click', outbound_url: url, eventTimeout: 3000 });
+};
+
+export const share = (provider) => {
+  const dataLayer = window.dataLayerNativeX;
+  if (dataLayer) dataLayer.push({ event: 'share', social_provider: provider });
+};
+
+export const endOfContent = () => {
+  const dataLayer = window.dataLayerNativeX;
+  if (dataLayer) dataLayer.push({ event: 'scroll_to_bottom' });
+};