@mindful-web/marko-web 1.0.0

package/scss/node.scss

@@ -0,0 +1,371 @@
+
+@use "sass:math";
+
+$marko-web-node-image-aspect-ratios: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$marko-web-node-image-aspect-ratios: join(
+  (
+    (21 9),
+    (16 9),
+    (6 5),
+    (4 3),
+    (3 2),
+    (2 1),
+    (1 1),
+  ),
+  $marko-web-node-image-aspect-ratios
+);
+
+$marko-web-node-bg-color:                   #fff !default;
+$marko-web-node-padding:                    .75rem !default;
+$marko-web-node-spacer:                     .375rem !default;
+$marko-web-node-overlay-image-padding:      1.25rem !default;
+$marko-web-node-overlay-image-gradient:     linear-gradient(to top, rgba(0, 0, 0, .65), transparent) !default;
+$marko-web-node-overlay-image-link-color:   #fff !default;
+$marko-web-node-overlay-image-text-shadow:  1px 1px 4px rgba(0, 0, 0, .65) !default;
+
+$marko-web-node-placeholder-image:              url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z' fill-rule='evenodd'/%3E%3C/svg%3E") !default;
+$marko-web-node-placeholder-image-bg-color:     #007bff !default;
+$marko-web-node-placeholder-image-bg-position:  .5rem .5rem !default;
+$marko-web-node-placeholder-image-opacity:      .2 !default;
+
+@mixin marko-web-node-fluid-image($ratio-x, $ratio-y) {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+
+  &::before {
+    display: block;
+    content: "";
+    @if $ratio-y and $ratio-x {
+      padding-top: percentage(math.div($ratio-y, $ratio-x));
+    }
+  }
+}
+
+@mixin marko-web-node-fluid-image-item() {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.node {
+  *,
+  ::after,
+  ::before {
+    box-sizing: border-box;
+  }
+
+  $self: &;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  width: 100%;
+  padding: $marko-web-node-padding;
+  background-color: $marko-web-node-bg-color;
+
+  &__header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: $marko-web-node-spacer;
+    &:empty {
+      display: none;
+    }
+    &--overlay {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      padding: $marko-web-node-padding;
+      margin-bottom: initial;
+    }
+  }
+
+  &__header-left,
+  &__header-right {
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: auto;
+    &:empty {
+      display: none;
+    }
+    &--body {
+      margin-top: auto;
+      #{ $self } {
+        &__footer-left,
+        &__footer-right {
+          margin-top: auto;
+        }
+      }
+    }
+  }
+
+  &__footer-left,
+  &__footer-right {
+    margin-top: $marko-web-node-spacer;
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__header-right,
+  &__footer-right {
+    text-align: right;
+  }
+
+  &__contents {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    width: 100%;
+
+    &--body {
+      margin-bottom: $marko-web-node-spacer;
+      > :last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    width: 100%;
+    &--overlay {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      padding: $marko-web-node-padding;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__title {
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__text {
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__image-wrapper {
+    position: relative;
+    color: #fff;
+    text-shadow: $marko-web-node-overlay-image-text-shadow;
+    a {
+      color: #fff;
+    }
+
+    &--align-middle {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+
+    &--align-center {
+      margin-right: auto;
+      margin-left: auto;
+    }
+  }
+
+  &__image-inner-wrapper {
+    display: inline-block;
+
+    &--placeholder {
+      background-color: $marko-web-node-placeholder-image-bg-color;
+      #{ $self } {
+        &__image {
+          background-image: $marko-web-node-placeholder-image;
+          background-position: $marko-web-node-placeholder-image-bg-position;
+          opacity: $marko-web-node-placeholder-image-opacity;
+        }
+      }
+    }
+
+    &--gradient {
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        content: "";
+        background: $marko-web-node-overlay-image-gradient;
+      }
+    }
+
+    &--fluid {
+      #{ $self } {
+        &__image {
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+
+    @each $ar in $marko-web-node-image-aspect-ratios {
+      $x: nth($ar, 1);
+      $y: nth($ar, 2);
+
+      &--fluid-#{$x}by#{$y} {
+        @include marko-web-node-fluid-image($x, $y);
+        #{ $self } {
+          &__image {
+            @include marko-web-node-fluid-image-item();
+          }
+        }
+      }
+      // Add the inverse ratios (16by9 becomes 9by16, 4by3 becomes 3by4, etc)
+      @if $x != $y {
+        &--fluid-#{$y}by#{$x} {
+          @include marko-web-node-fluid-image($y, $x);
+          #{ $self } {
+            &__image {
+              @include marko-web-node-fluid-image-item();
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &--full-height {
+    height: 100%;
+  }
+
+  &--flush {
+    padding: 0;
+  }
+
+  &--flush-x {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  &--flush-y {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  &--image-flush {
+    padding: 0;
+    > #{ $self } {
+      &__header {
+        padding-top: $marko-web-node-padding;
+        padding-right: $marko-web-node-padding;
+        padding-left: $marko-web-node-padding;
+      }
+      &__footer {
+        padding-right: $marko-web-node-padding;
+        padding-bottom: $marko-web-node-padding;
+        padding-left: $marko-web-node-padding;
+      }
+    }
+
+    #{ $self } {
+      &__body {
+        padding-right: $marko-web-node-padding;
+        padding-left: $marko-web-node-padding;
+      }
+    }
+  }
+
+  &--image-top {
+    #{ $self } {
+      &__image-wrapper + #{ $self }__body {
+        margin-top: $marko-web-node-spacer * 2;
+      }
+      &__body {
+        &--overlay {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+  &--image-left {
+    #{ $self } {
+      &__contents {
+        flex-direction: row;
+        &--body {
+          flex-direction: column;
+        }
+      }
+      &__image-wrapper + #{ $self }__body {
+        margin-left: $marko-web-node-padding;
+      }
+      &__body {
+        &--overlay {
+          margin-left: 0;
+        }
+      }
+    }
+    &#{ $self }--image-flush #{ $self }__image-wrapper + #{ $self }__body {
+      padding-left: 0;
+    }
+  }
+
+  &--image-bottom {
+    #{ $self } {
+      &__contents {
+        flex-direction: column-reverse;
+        &--body {
+          flex-direction: column;
+        }
+      }
+      &__image-wrapper + #{ $self }__body {
+        margin-bottom: $marko-web-node-spacer;
+      }
+      &__body {
+        &--overlay {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  &--image-right {
+    #{ $self } {
+      &__contents {
+        flex-direction: row-reverse;
+        &--body {
+          flex-direction: column;
+        }
+      }
+      &__image-wrapper + #{ $self }__body {
+        margin-right: $marko-web-node-padding;
+      }
+      &__body {
+        &--overlay {
+          margin-right: 0;
+        }
+      }
+    }
+    &#{ $self }--image-flush #{ $self }__image-wrapper + #{ $self }__body {
+      padding-right: 0;
+    }
+  }
+}

package/scss/page-image.scss

@@ -0,0 +1,15 @@
+$marko-web-page-image-margin: 1.5rem !default;
+
+.page-image {
+  $self: &;
+  margin-bottom: $marko-web-page-image-margin;
+
+  &--fluid {
+    #{ $self } {
+      &__image {
+        width: 100%;
+        height: auto;
+      }
+    }
+  }
+}

package/start-server.js

@@ -0,0 +1,169 @@
+/* eslint-disable import/no-dynamic-require, global-require */
+require('@mindful-web/marko-node-require');
+const http = require('http');
+const path = require('path');
+const { createTerminus } = require('@godaddy/terminus');
+const { isFunction: isFn, parseBooleanHeader } = require('@mindful-web/utils');
+const { getAsObject } = require('@mindful-web/object-path');
+
+const { env } = process;
+if (!process.env.LIVERELOAD_PORT) process.env.LIVERELOAD_PORT = 4010;
+if (!process.env.EXPOSED_HOST) process.env.EXPOSED_HOST = env.HOST || 'localhost';
+
+process.on('unhandledRejection', (e) => setImmediate(() => { throw e; }));
+
+const wait = (ms) => new Promise((resolve) => {
+  setTimeout(resolve, ms);
+});
+
+module.exports = async ({
+  rootDir,
+  siteConfig,
+  coreConfig,
+  helmetConfig,
+  host = env.HOST,
+  port = env.PORT || 4008,
+  exposedPort = env.EXPOSED_PORT || env.PORT || 4008,
+  exposedHost = env.EXPOSED_HOST,
+  routes,
+  errorTemplate,
+  document, // custom marko-web-document component
+  components, // components to register globally (e.g. for load more, etc)
+  fragments, // fragments to register globally
+  embeddedMediaHandlers,
+  onAsyncBlockError,
+  onFatalError,
+  redirectHandler,
+  sitemapsHeaders,
+
+  // Cache settings.
+  gqlCacheResponses = parseBooleanHeader(env.CACHE_GQL_RESPONSES),
+  gqlCacheSiteContext = parseBooleanHeader(env.CACHE_GQL_SITE_CONTEXT),
+
+  // Terminus settings.
+  timeout = 1000,
+  signals = ['SIGTERM', 'SIGINT', 'SIGHUP', 'SIGQUIT'],
+  healthCheckPath = '/_health',
+  onSignal,
+  onShutdown,
+  onStart,
+  beforeShutdown,
+  onHealthCheck,
+} = {}) => {
+  if (!rootDir) throw new Error('The root project directory is required.');
+  // load the site package file.
+  const sitePackage = require(path.resolve(rootDir, 'package.json'));
+  // load config from package `website` option but allow env values to override.
+  const site = getAsObject(sitePackage, 'website');
+  if (!process.env.TENANT_KEY && site.tenant) process.env.TENANT_KEY = site.tenant;
+  if (!process.env.SITE_ID && site.id) process.env.SITE_ID = site.id;
+  if (!process.env.GRAPHQL_URI && site.stack) process.env.GRAPHQL_URI = `https://graphql.${site.stack}.mindful-web.parameter1.com`;
+  if (!process.env.OEMBED_URI && site.stack) process.env.OEMBED_URI = `https://oembed.${site.stack}.mindful-web.parameter1.com`;
+  if (!process.env.RSS_URI && site.stack) process.env.RSS_URI = `https://rss.${site.stack}.mindful-web.parameter1.com`;
+  if (!process.env.SITEMAPS_URI && site.stack) process.env.SITEMAPS_URI = `https://sitemaps.${site.stack}.mindful-web.parameter1.com`;
+
+  // ensure core envs are set.
+  ['TENANT_KEY', 'SITE_ID', 'GRAPHQL_URI', 'OEMBED_URI', 'RSS_URI', 'SITEMAPS_URI'].forEach((key) => {
+    if (!process.env[key]) throw new Error(`The ${key} value must be set either from env or via the website package config.`);
+  });
+
+  // base browse (optional)
+  if (!process.env.BASE_BROWSE_GRAPHQL_URI && site.stack) process.env.BASE_BROWSE_GRAPHQL_URI = `https://base-browse.${site.stack}.mindful-web.parameter1.com/graphql`;
+
+  const graphqlUri = process.env.GRAPHQL_URI;
+  const siteId = process.env.SITE_ID;
+  const tenantKey = process.env.TENANT_KEY;
+  const baseBrowseGraphqlUri = process.env.BASE_BROWSE_GRAPHQL_URI;
+
+  // require core packages after env values have been processed so they are set when imported
+  const errorHandlers = require('./express/error-handlers');
+  const express = require('./express');
+  const loadMore = require('./express/load-more');
+  const disabledFeatures = require('./middleware/disabled-features');
+
+  const app = express({
+    rootDir,
+    siteConfig,
+    coreConfig,
+    helmetConfig,
+    graphqlUri,
+    tenantKey,
+    siteId,
+    onAsyncBlockError,
+    onFatalError,
+    document,
+    components,
+    fragments,
+    sitePackage,
+    embeddedMediaHandlers,
+    sitemapsHeaders,
+    gqlCacheResponses,
+    gqlCacheSiteContext,
+    baseBrowseGraphqlUri,
+  });
+
+  app.use(disabledFeatures());
+
+  // Await required services here...
+  if (isFn(onStart)) await onStart(app);
+
+  // Register load more after onStart to ensure userland middleware is available.
+  loadMore(app);
+
+  // Load website routes.
+  if (!isFn(routes)) throw new Error('A routes function is required.');
+  routes(app);
+
+  // Apply error handlers.
+  errorHandlers(app, {
+    template: errorTemplate,
+    redirectHandler,
+    onFatalError: onFatalError || onAsyncBlockError,
+  });
+
+  const server = http.createServer(app);
+
+  createTerminus(server, {
+    timeout: env.TERMINUS_TIMEOUT || timeout,
+    signals,
+    // Add health checks of services here...
+    healthChecks: {
+      [healthCheckPath]: async () => {
+        if (isFn(onHealthCheck)) return onHealthCheck();
+        return { ping: 'pong' };
+      },
+    },
+    onSignal: async () => {
+      // Stop required services here...
+      if (isFn(onSignal)) await onSignal();
+    },
+    onShutdown: async () => {
+      if (isFn(onShutdown)) await onShutdown();
+    },
+    beforeShutdown: async () => {
+      if (isFn(beforeShutdown)) await beforeShutdown();
+      const { TERMINUS_SHUTDOWN_DELAY } = env;
+      if (TERMINUS_SHUTDOWN_DELAY) await wait(TERMINUS_SHUTDOWN_DELAY);
+    },
+  });
+
+  return new Promise((res, rej) => {
+    server.listen(port, host, function listen(err) {
+      if (err) {
+        rej(err);
+      } else {
+        res(this);
+        if (process.send) {
+          process.send({
+            event: 'ready',
+            name: sitePackage.name,
+            siteId,
+            graphqlUri,
+            baseBrowseGraphqlUri,
+            location: `http://${exposedHost}:${exposedPort}`,
+          });
+        }
+      }
+    });
+  }).catch((e) => setImmediate(() => { throw e; }));
+};

package/utils/apply-query-params.js

@@ -0,0 +1,16 @@
+const { URLSearchParams } = require('url');
+const { asObject } = require('@mindful-web/utils');
+
+module.exports = ({ path, query } = {}) => {
+  const params = new URLSearchParams(asObject(query));
+  if (!`${params}`) return path;
+  const cleaned = path.replace(/^\/+/, '');
+  const isExternal = /^http/.test(cleaned);
+
+  // Must put a "fake" host in front of the path to properly parse.
+  const to = isExternal ? cleaned : `http://localhost/${cleaned}`;
+  const toUrl = new URL(to);
+  toUrl.searchParams.forEach((value, key) => params.set(key, value));
+  const origin = isExternal ? toUrl.origin : '';
+  return `${origin}${toUrl.pathname}?${params}`;
+};

package/utils/build-content-input.js

@@ -0,0 +1,9 @@
+module.exports = ({ req }) => {
+  const input = {};
+  if (req.cookies['preview-mode'] || req.query['preview-mode']) {
+    input.status = 'any';
+  } else {
+    input.since = Date.now();
+  }
+  return input;
+};

package/utils/build-marko-global.js

@@ -0,0 +1 @@
+module.exports = require('@mindful-web/marko-core/utils/build-marko-global');

package/utils/default-value.js

@@ -0,0 +1 @@
+module.exports = require('@mindful-web/marko-core/utils/default-value');

package/utils/embedded-media/facebook-oembed.js

@@ -0,0 +1,50 @@
+const { URL } = require('url');
+
+const buildFacebookElement = ({
+  href,
+  lazy = true,
+  width,
+  showText,
+}) => {
+  const params = {
+    href: decodeURIComponent(href),
+    ...(lazy && { lazy: true }),
+    ...(width && { width }),
+    ...(showText && { 'show-text': true }),
+  };
+  const data = Object.keys(params).map((key) => `data-${key}="${params[key]}"`);
+  return `<div class="fb-post" ${data.join(' ')}></div><script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>`;
+};
+
+const facebook = (url) => {
+  const pattern = /facebook\.com/i;
+  if (!pattern.test(url)) return null; // not a facebook URL.
+
+  const { href, host, searchParams } = new URL(url);
+
+  if (/facebook\.com\/plugins\//i.test(url)) {
+    // matches a plugin url, e.g. plugins/video.php plugins/post.php, etc
+    if (!searchParams.has('href')) return '<div></div>'; // no `href` query param found. remove.
+    // return facebook div element
+    return buildFacebookElement({
+      href: searchParams.get('href'),
+      showText: searchParams.get('show_text') === 'true',
+      // @todo determine if the requested width should be preserved
+      // width: searchParams.get('width'),
+    });
+  }
+  // after checking for facebook plugin URLs, treat all other facebook URLs as posts.
+  if (!pattern.test(host)) return null; // facebook.com appears somewhere else in the URL.
+  // return facebook div element
+  return buildFacebookElement({ href, showText: true });
+};
+
+/**
+ *
+ */
+module.exports = (url) => {
+  // convert embeds, as they no longer support oembed without auth
+  const fbPost = facebook(url);
+  if (fbPost) return fbPost;
+  return null;
+};

package/utils/embedded-media/image.js

@@ -0,0 +1,71 @@
+const { buildImgixUrl } = require('@mindful-web/image');
+
+const stringifyAttrs = (attrs) => Object.keys(attrs).reduce((arr, key) => {
+  const value = attrs[key];
+  if (value) arr.push(`${key}="${value}"`);
+  return arr;
+}, []).join(' ');
+
+const buildWrapperClass = ({ caption, credit }) => {
+  const classes = [];
+  if (caption) classes.push('image-with-caption');
+  if (credit) classes.push('image-with-credit');
+  return classes.join(' ');
+};
+
+module.exports = (tag, { config } = {}, { lazyloadImages } = {}) => {
+  const lazyload = lazyloadImages == null ? config.lazyloadImages() : lazyloadImages;
+  const src = tag.get('src');
+  const alt = tag.get('alt');
+  const caption = tag.get('caption');
+  const credit = tag.get('credit');
+  const align = tag.get('align');
+
+  const width = tag.get('width');
+  const height = tag.get('height');
+
+  const wrapperClass = buildWrapperClass({ caption, credit });
+
+  const attrs = {
+    'data-embed-type': tag.type,
+    'data-embed-id': tag.id,
+    'data-embed-align': align,
+    ...(wrapperClass && { class: wrapperClass }),
+  };
+
+  const minWidth = 400;
+  const maxWidth = (align) ? minWidth : 700;
+
+  const maxSrcset = `${buildImgixUrl(src, { w: maxWidth })}, ${buildImgixUrl(src, { w: maxWidth, dpr: 2 })} 2x`;
+
+  const sources = [
+    {
+      srcset: lazyload ? null : maxSrcset,
+      'data-srcset': lazyload ? maxSrcset : null,
+      media: '(min-width: 576px)',
+    },
+  ].map((source) => `<source ${stringifyAttrs(source)}>`).join('');
+
+  const minSrc = buildImgixUrl(src, { w: minWidth });
+  const minSrcset = `${buildImgixUrl(src, { w: minWidth, dpr: 2 })} 2x`;
+
+  const transparentImg = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+  const imgAttrs = {
+    class: lazyload ? 'lazyload' : null,
+    src: lazyload ? transparentImg : minSrc,
+    srcset: lazyload ? null : minSrcset,
+    'data-src': lazyload ? minSrc : null,
+    'data-srcset': lazyload ? minSrcset : null,
+    'data-image-id': tag.id,
+    alt,
+    width: (width && height) ? minWidth : null,
+    height: (height && height) ? Math.round((height / width) * minWidth) : null,
+  };
+
+  const captionElement = caption ? `<span class="caption">${caption}</span>` : '';
+  const creditElement = credit ? `<span class="credit">${credit}</span>` : '';
+
+  const img = `<img ${stringifyAttrs(imgAttrs)}>`;
+  const picture = `<picture>${sources}${img}${captionElement}${creditElement}</picture>`;
+  return `<span ${stringifyAttrs(attrs)}>${picture}</span>`;
+};