@mindful-web/marko-web-theme-monorail 1.0.0

package/.eslintignore

@@ -0,0 +1 @@
+*.marko.js

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Parameter1 LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,103 @@
+Monorail website theme
+===
+
+## Features
+
+### Content Metering
+
+To install and use this feature, you must:
+1. Import the content metering middleware and add to your content routes:
+```diff
+// site/routes/content.js
+
++const contentMetering = require('@mindful-web/marko-web-theme-monorail/middleware/content-metering');
++const config = require('../config/content-meter');
+
+module.exports (app) => {
+-  app.get('/*?:id(\\d{8})*', withContent({
++  app.get('/*?:id(\\d{8})*', contentMetering(config), withContent({
+    template: content,
+    queryFragment,
+  }));
+```
+
+2. Add the `contentMeter` site config object. See below table for defined options/default values.
+
+
+```diff
+# site/config/site.js
+
++const contentMeter = require('./content-meter');
+
+module.exports = {
+  // ...
++  contentMeter,
+  // ...
+}
+```
+
+```js
+// site/config/content-meter.js
+
+module.exports = {
+  enabled: process.env.ENABLE_CONTENT_METER || false,
+  viewLimit: 5,
+}
+```
+
+| Key | Default value | Description |
+| - | - | - |
+| `enabled` | `false` | If the feature should be enabled. |
+| `viewLimit` |  `3` | The number of content items a viewer can see in `timeframe` without logging in. |
+| `timeframe` | `30 * 24 * 60 * 60 * 1000` (30 days in ms) | The timeframe to consider |
+| `excludeLabels` | `[]` | Content labels that should be excluded from metering. |
+| `excludeContentTypes` | `[]` | Content types that should be excluded from metering. |
+| `excludePrimarySectionIds` | `[]` | Sections whose primary content should be excluded from metering. |
+| `excludePrimarySectionAlias` | `[]` | Sections whose primary content should be excluded from metering. |
+| `displayOverlay` | _None_ | ??? @B77Mills what is this |
+| `promoCode` | _None_ | If present, the Omeda promo code to use with content metering events. |
+
+3. Add the UI display and event tracking component to your core `document` component (ideally in above-container):
+```marko
+<!-- site/server/components/document.marko -->
+
+$ const { contentMeterState } = out.global;
+<if(contentMeterState && !contentMeterState.isLoggedIn)>
+  <theme-content-meter-block
+    views=contentMeterState.views
+    view-limit=contentMeterState.viewLimit
+    display-overlay=contentMeterState.displayOverlay
+    display-gate=contentMeterState.displayGate
+  />
+</if>
+```
+
+5. Adjust the content body template/layout to truncate the body and/or show inline gating options:
+```marko
+<!-- site/components/layouts/content.marko -->
+
+import cm from "@mindful-web/marko-web-theme-monorail/utils/content-meter-helpers";
+
+$ const { content, blockName } = input;
+$ const { contentGatingHandler, contentMeterState, req } = out.global;
+
+$ const showOverlay = cm.shouldOverlay(contentMeterState);
+$ const requiresReg = cm.restrictContentByReg(contentMeterState, contentGatingHandler, content);
+
+$ let body = content.body;
+<if(cm.shouldTruncate(contentMeterState))>
+  $ if (showOverlay) body = getContentPreview({ body: content.body, selector: "p:lt(7)" });
+  <marko-web-content-body block-name=blockName obj={ body } />
+  <div class="content-page-preview-overlay" />
+  <if(!showOverlay)>
+    <theme-content-page-gate
+      can-access=context.canAccess
+      is-logged-in=context.isLoggedIn
+      $ // ...
+    />
+  </if>
+</if>
+<else-if(!context.canAccess || context.requiresUserInput)>
+  $ // ...
+
+```

package/browser/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('../../../eslintrc.browser');

package/browser/block-loader.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="lazyload">
+    <div v-if="isLoading">
+      Loading {{ label }}...
+    </div>
+    <div v-if="error">
+      <h5>Unable to load {{ label }} block.</h5>
+      <p>{{ error.message }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    input: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data: () => ({
+    error: null,
+    hasLoaded: false,
+    isLoading: false,
+  }),
+
+  created() {
+    document.addEventListener('lazybeforeunveil', this.load.bind(this));
+  },
+
+  methods: {
+    async load() {
+      if (!this.isLoading && !this.hasLoaded) {
+        try {
+          this.error = null;
+          this.isLoading = true;
+          const input = JSON.stringify(this.input);
+          const href = `/__render-block/${this.name}?input=${encodeURIComponent(input)}`;
+          const res = await fetch(href, { credentials: 'same-origin' });
+          const html = await res.text();
+          this.hasLoaded = true;
+          const template = document.createElement('template');
+          template.innerHTML = html;
+          const toInsert = template.content.firstChild || '';
+          this.$el.replaceWith(toInsert);
+        } catch (e) {
+          this.error = e;
+        } finally {
+          this.isLoading = false;
+        }
+      }
+    },
+  },
+};
+</script>

package/browser/comment-toggle-button.vue

@@ -0,0 +1,89 @@
+<template>
+  <button
+    :class="classes"
+    type="button"
+    @click="toggle"
+  >
+    <span>{{ translate("viewAllComments") }}</span>
+  </button>
+</template>
+
+<script>
+import EventBus from '@mindful-web/marko-web/browser/event-bus';
+import get from '@mindful-web/marko-web-identity-x/browser/utils/get';
+import i18n from './i18n-vue';
+
+export default {
+
+  props: {
+    identifier: {
+      type: String,
+      required: true,
+    },
+    classes: {
+      type: String,
+      default: null,
+    },
+    isExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    targets: {
+      type: Array,
+      default: () => [],
+    },
+    toggleClass: {
+      type: String,
+      required: true,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+
+  data: () => ({
+    error: null,
+    expanded: false,
+    isLoading: false,
+    totalCount: 0,
+  }),
+
+  created() {
+    // @todo to move this component/functionality to the marko-web-identity-x package
+    this.expanded = this.isExpanded;
+    this.loadCount();
+  },
+
+  methods: {
+    /**
+     *
+     */
+    async loadCount() {
+      try {
+        this.error = null;
+        this.isLoading = true;
+        const res = await get(`/comment-count/${this.identifier}`);
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.message);
+        this.totalCount = data.totalCount;
+      } catch (e) {
+        this.error = e;
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    toggle() {
+      this.expanded = !this.expanded;
+      // @todo to move this component/functionality to the marko-web-identity-x package
+      EventBus.$emit('identity-x-comments-expanded', this.expanded);
+      const elements = document.querySelectorAll(this.targets.join(','));
+      Array.prototype.forEach.call(elements, (el) => el.classList.toggle(this.toggleClass));
+    },
+    translate(key) {
+      return i18n(this.lang, key);
+    },
+  },
+};
+</script>

package/browser/company-search.vue

@@ -0,0 +1,78 @@
+<template>
+  <div ref="companySearch" class="company-search">
+    <autocomplete
+      ref="autocomplete"
+      :search="searchCompanies"
+      :class="errorClass"
+      placeholder="Search Companies..."
+      aria-label="Search Companies..."
+      :get-result-value="getResultValue"
+      :debounce-time="500"
+      @submit="handleSubmit"
+    />
+  </div>
+</template>
+
+<script>
+import Autocomplete from '@trevoreyre/autocomplete-vue';
+
+const path = '/__company-search?searchQuery=';
+
+export default {
+  components: { Autocomplete },
+  inject: ['EventBus'],
+
+  data: () => ({
+    errorClass: '',
+  }),
+
+  methods: {
+    // We want to display the title
+    getResultValue(result) {
+      return result.shortName;
+    },
+    // Open the selected company in a new window
+    handleSubmit(result) {
+      // Handle when the result is an error or missing context link
+      if (!result.siteContext || !result.siteContext.path) {
+        this.$refs.autocomplete.value = '';
+        return;
+      }
+
+      this.emitAction();
+      window.location.href = result.siteContext.path;
+    },
+    searchCompanies(input) {
+      this.errorClass = '';
+      if (input.length < 3) {
+        return [];
+      }
+      return this.getCompanyResults(input);
+    },
+    async getCompanyResults(input) {
+      try {
+        const url = `${path}${encodeURI(input)}`;
+        const res = await fetch(url);
+        const json = await res.json();
+        if (!res.ok) throw new Error(json.message || res.statusText);
+        return json.nodes;
+      } catch (error) {
+        const errorNodes = [{
+          id: 'error',
+          shortName: error.message,
+        }];
+        this.errorClass = 'errors';
+        return errorNodes;
+      }
+    },
+    emitAction() {
+      const payload = {
+        category: 'Content Header Search',
+        action: 'Click',
+        label: 'Website Section Page',
+      };
+      this.EventBus.$emit('content-header-search', payload);
+    },
+  },
+};
+</script>

package/browser/content-meter-track.vue

@@ -0,0 +1,90 @@
+<template>
+  <div id="content-meter-gtm-event" :class="classes.join(', ')"/>
+</template>
+
+<script>
+
+const { log } = console;
+
+export default {
+  inject: ['EventBus'],
+
+  props: {
+    views: {
+      type: Number,
+      default: 0,
+    },
+    viewLimit: {
+      type: Number,
+      default: 3,
+    },
+    displayGate: {
+      type: Boolean,
+      default: false,
+    },
+    displayOverlay: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  data: () => ({
+    classes: [],
+  }),
+  computed: {
+    remaining() {
+      const { viewLimit, views } = this;
+      return viewLimit - views;
+    },
+    overlayDisplayed() {
+      const { displayGate, displayOverlay } = this;
+      return displayGate && displayOverlay;
+    },
+  },
+  created() {
+    const { views, remaining, overlayDisplayed } = this;
+    this.observer = new IntersectionObserver((event) => {
+      if (event[0].isIntersecting) {
+        const { dataLayer } = window;
+        if (dataLayer) {
+          const payload = {
+            event: 'identity-x-content-meter-view',
+            'identity-x': {
+              label: 'content-meter',
+              views,
+              remaining,
+              overlayDisplayed,
+            },
+          };
+          this.emitP1Event({ action: 'View' });
+          dataLayer.push(payload);
+          const { searchParams } = new URL(window.location.href);
+          if (searchParams.has('idxDebugger')) {
+            log('identity-x event: identity-x-content-meter-view', payload);
+          }
+        }
+      }
+    });
+  },
+  mounted() {
+    this.observer.observe(this.$el);
+    this.EventBus.$on('identity-x-login-link-sent', ({ actionSource }) => {
+      if (actionSource === 'content_meter_login') {
+        this.classes.push('login-link-sent');
+        this.emitP1Event({ action: 'Submit' });
+      }
+    });
+  },
+  methods: {
+    emitP1Event({ action }) {
+      if (!window.p1events) return;
+      const { views, overlayDisplayed } = this;
+      window.p1events('track', {
+        category: 'Content Meter',
+        action,
+        ...(overlayDisplayed && { label: 'Gated' }),
+        props: { n: views },
+      });
+    },
+  },
+};
+</script>

package/browser/i18n-vue.js

@@ -0,0 +1,11 @@
+import translations from './translations-vue';
+
+export default (lang, fieldLabelKey) => {
+  if (!translations[lang]) {
+    throw new Error(`No translations available for requested language ${lang}!`);
+  }
+  if (!translations[lang][fieldLabelKey]) {
+    throw new Error(`No translations available in ${lang} for requested key ${fieldLabelKey}!`);
+  }
+  return translations[lang][fieldLabelKey];
+};

package/browser/idx-newsletter-form/index.js

@@ -0,0 +1,61 @@
+const Pushdown = () => import(/* webpackChunkName: "theme-idx-newsletter-form-pushdown" */ './pushdown.vue');
+const Inline = () => import(/* webpackChunkName: "theme-idx-newsletter-form-inline" */ './inline.vue');
+const NewsletterToggleButton = () => import(/* webpackChunkName: "theme-idx-newsletter-toggle-button" */ './toggle-button.vue');
+
+export default (Browser) => {
+  const { EventBus } = Browser;
+
+  const emitNewsletterEvent = ({ type, action, data }) => {
+    let label = type;
+    if (data && data.type) label = `${label} ${data.type}`;
+    if (action === 'Error') label = `${label} Error: ${data.error}`;
+    EventBus.$emit('identity-x-newsletter-form-action', {
+      ...data,
+      category: 'Newsletter Signup Form',
+      action,
+      label,
+    });
+  };
+
+  Browser.register('IdentityXNewsletterFormPushdown', Pushdown, {
+    provide: { EventBus },
+    on: {
+      load: (data) => {
+        emitNewsletterEvent({ type: 'Pushdown', action: 'Load', data });
+        emitNewsletterEvent({ type: 'Pushdown', action: 'View', data });
+      },
+      focus: (data) => emitNewsletterEvent({ type: 'Pushdown', action: 'Focus', data }),
+      submit: (data) => emitNewsletterEvent({ type: 'Pushdown', action: 'Submit', data }),
+      error: (data) => emitNewsletterEvent({ type: 'Pushdown', action: 'Error', data: { ...data, error: data.error.message } }),
+    },
+  });
+
+  Browser.register('IdentityXNewsletterFormInline', Inline, {
+    provide: { EventBus },
+    on: {
+      load: (data) => emitNewsletterEvent({ type: 'Inline', action: 'Load', data }),
+      view: (data) => emitNewsletterEvent({ type: 'Inline', action: 'View', data }),
+      focus: (data) => emitNewsletterEvent({ type: 'Inline', action: 'Focus', data }),
+      submit: (data) => emitNewsletterEvent({ type: 'Inline', action: 'Submit', data }),
+      error: (data) => emitNewsletterEvent({ type: 'Inline', action: 'Error', data: { ...data, error: data.error.message } }),
+    },
+  });
+
+  Browser.register('IdentityXNewsletterFormFooter', Inline, {
+    provide: { EventBus },
+    on: {
+      load: (data) => emitNewsletterEvent({ type: 'Inline', action: 'Load', data }),
+      view: (data) => emitNewsletterEvent({ type: 'Inline', action: 'View', data }),
+      focus: (data) => emitNewsletterEvent({ type: 'Inline', action: 'Focus', data }),
+      submit: (data) => emitNewsletterEvent({ type: 'Inline', action: 'Submit', data }),
+      error: (data) => emitNewsletterEvent({ type: 'Inline', action: 'Error', data: { ...data, error: data.error.message } }),
+    },
+  });
+
+  Browser.register('IdentityXNewsletterToggleButton', NewsletterToggleButton, {
+    provide: { EventBus },
+    on: {
+      'idx-newsletter-menu-expanded': (data) => emitNewsletterEvent({ type: 'Menu', action: 'Expand', data }),
+    },
+  });
+};