@mindful-web/marko-web 1.0.0

package/integration/test-website-boot.js

@@ -0,0 +1,198 @@
+const { htmlEntities } = require('@mindful-web/html');
+const { sleep: wait, cleanPath } = require('@mindful-web/utils');
+const whilst = require('async/whilst');
+const eachLimit = require('async/eachLimit');
+const fetch = require('node-fetch');
+const cheerio = require('cheerio');
+const { inspect } = require('util');
+
+const { log } = console;
+
+const origin = process.env.MARKO_WEB_INTEGRATION_TEST_URL || 'http://localhost:80';
+
+const fetchResponse = async ({
+  path = '/',
+  catchErrors = false,
+  followRedirects = false,
+} = {}) => {
+  const url = `${cleanPath(origin)}/${cleanPath(path)}`;
+  log(`fetching ${url}`);
+  const opts = {
+    method: 'get',
+    redirect: followRedirects ? 'follow' : 'manual',
+  };
+  if (!catchErrors) return fetch(url, opts);
+  try {
+    const res = await fetch(url, opts);
+    return res;
+  } catch (e) {
+    return null;
+  }
+};
+
+const checkReadiness = async ({
+  path = '/_health',
+  startAfter = 5000,
+  checkInterval = 2000,
+  unhealthyAfter = 5,
+} = {}) => {
+  log('checking readiness...');
+  log(`initially waiting for ${startAfter}ms before checking...`);
+  await wait(startAfter);
+
+  let timesChecked = 0;
+  let booted = false;
+  await whilst(async () => !booted, async () => {
+    timesChecked += 1;
+    if (timesChecked > unhealthyAfter) {
+      throw new Error('The readiness probe has reached its maximum check limit.');
+    }
+    log(`pinging health check, attempt number ${timesChecked}...`);
+    const res = await fetchResponse({ path, catchErrors: true });
+    // if response is null, a connection error occrred
+    if (res == null || (res && !res.ok)) {
+      if (res == null) log('did not receive a response - assuming not ready.');
+      if (res && !res.ok) log(`received a non-ok response from health check - ${res.status} ${res.statusText}`);
+      log(`waiting another ${checkInterval}ms before retrying.`);
+      await wait(checkInterval);
+      return;
+    }
+    booted = true;
+  });
+  log('container is ready.');
+};
+
+const testPage = async ({
+  path,
+  retryAttempts = 3,
+  serverErrorsOnly = true,
+  followRedirects = false,
+  checkInterval = 500,
+} = {}) => {
+  let timesChecked = 0;
+  let finished = false;
+  let html;
+  const report = { path, error: null, checks: [] };
+
+  const waitThenRetry = async () => {
+    log(`waiting ${checkInterval}ms to retry ${path}`);
+    await wait(checkInterval);
+  };
+
+  await whilst(async () => !finished, async () => {
+    const check = {};
+    report.checks.push(check);
+    timesChecked += 1;
+    if (timesChecked > retryAttempts) {
+      // max times reach, append error to report.
+      report.error = new Error(`The test runner for page path ${path} has reached its maximum check limit.`);
+      finished = true;
+      return true;
+    }
+    const res = await fetchResponse({ path, followRedirects });
+    check.statusCode = res.status;
+    if (!res.ok) {
+      if (serverErrorsOnly && res.status < 500) {
+        check.message = `received a ${res.status} from path ${path} but treating as passing since it was not a server error (>= 500).`;
+        finished = true;
+        return true;
+      }
+      // received a 500, append the message and retry
+      check.message = `received an error response from path page ${path} with status ${res.status} ${res.statusText}`;
+      return waitThenRetry();
+    }
+    html = await res.text();
+
+    // first ensure the entire page rendered. if it didn't a fatal backened error occurred
+    // that prevented rendering, or some kind of timeout occurred. this can be retried.
+    const found = /.*<\/head>.*<\/body>.*<\/html>.*/is.test(html);
+    if (!found) {
+      // no render, append the message and retry.
+      check.message = `unable to detect a full page render for path ${path} retrying...`;
+      return waitThenRetry();
+    }
+
+    // then check for in-body errors. this means an async internal block failed
+    // but the page could fully render.
+    const matches = [...html.matchAll(/data-marko-error="(.*?)"/g)];
+    check.inPageErrors = [];
+    matches.forEach((values) => {
+      const value = values[1];
+      check.inPageErrors.push(htmlEntities.decode(value));
+    });
+    if (check.inPageErrors.length) {
+      // in-page errors occurred. exit and retry
+      return waitThenRetry();
+    }
+    // otherwise, mark as finished.
+    finished = true;
+    return true;
+  });
+  return { html, report };
+};
+
+const run = async () => {
+  await checkReadiness();
+
+  // test homepage first, and get html, allowing redirects (since this page _has_ to load).
+  const { html, report: initialReport } = await testPage({
+    path: '/',
+    serverErrorsOnly: false,
+    followRedirects: true,
+  });
+
+  const toTest = new Map([
+    ['/search', {}],
+    ['/site-map', {}], //
+  ]);
+  const contentToTest = new Map();
+
+  const $ = cheerio.load(html);
+  const $a = $('a[href^="/"]');
+
+  $a.each(function getHref() {
+    const href = $(this).attr('href');
+    if (toTest.has(href) || href === '/') return;
+    if (/\/\d{8}\//.test(href)) {
+      // content page
+      if (contentToTest.size === 5) return;
+      contentToTest.set(href, {});
+      return;
+    }
+    // non content pages
+    if (toTest.size === 10) return;
+    toTest.set(href, {});
+  });
+
+  // now test all extracted pages.
+  const errors = [];
+  const reports = [initialReport];
+  await eachLimit([...toTest, ...contentToTest], 2, async ([path, opts]) => {
+    // catch all errors so they can be reported on at once.
+    // these should be internal at this point.
+    try {
+      const { report } = await testPage({ ...opts, path });
+      reports.push(report);
+    } catch (e) {
+      errors.push(e);
+    }
+  });
+
+  if (errors.length) {
+    log('INTERNAL TESTING ERRORS ENCOUNTERED');
+    errors.forEach((error) => {
+      log(error);
+    });
+    throw new Error('Internal testing errors were encountered.');
+  }
+
+  const errorReports = reports.filter((report) => report.error);
+  if (errorReports.length) {
+    log('PAGE ERRORS ENCOUNTERED');
+    errorReports.forEach((report) => log(inspect(report, { colors: true, depth: null })));
+    throw new Error('Page errors were encountered.');
+  }
+  log('test results', inspect(reports, { colors: true, depth: null }));
+};
+
+run().catch((e) => setImmediate(() => { throw e; }));

package/marko.json

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

package/middleware/disabled-features.js

@@ -0,0 +1,15 @@
+module.exports = () => ((req, res, next) => {
+  const { disabledFeatures } = req.cookies;
+  res.locals.disabledFeatures = new Set();
+  if (disabledFeatures) {
+    try {
+      disabledFeatures.split(',').forEach((flag) => {
+        const trimmed = flag.trim();
+        if (trimmed) res.locals.disabledFeatures.add(trimmed);
+      });
+    } catch (e) {
+      next();
+    }
+  }
+  next();
+});

package/middleware/index.js

@@ -0,0 +1,15 @@
+const withContent = require('./with-content');
+const withDynamicPage = require('./with-dynamic-page');
+const withLoadMore = require('./with-load-more');
+const withWebsiteSection = require('./with-website-section');
+const withMagazineIssue = require('./with-magazine-issue');
+const withMagazinePublication = require('./with-magazine-publication');
+
+module.exports = {
+  withContent,
+  withDynamicPage,
+  withLoadMore,
+  withWebsiteSection,
+  withMagazineIssue,
+  withMagazinePublication,
+};

package/middleware/page-node/index.js

@@ -0,0 +1,45 @@
+const { isFunction: isFn } = require('@mindful-web/utils');
+const { getAsObject } = require('@mindful-web/object-path');
+const ResolvedNode = require('./resolved');
+
+const createNode = (data) => new ResolvedNode(data);
+
+class PageNode {
+  constructor(apolloClient, {
+    queryFactory,
+    queryFragment,
+    variables,
+    resultField,
+    sideloadDataFn,
+  }) {
+    this.apolloClient = apolloClient;
+    this.queryFactory = queryFactory;
+    this.queryFragment = queryFragment;
+    this.variables = variables;
+    this.resultField = resultField;
+    this.sideloadDataFn = sideloadDataFn;
+  }
+
+  async load() {
+    if (!this.promise) {
+      const { queryFragment, variables, resultField } = this;
+      const path = `data.${resultField}`;
+      const query = this.queryFactory({ queryFragment, queryName: 'PageNode' });
+      const [r, sideloadedData] = await Promise.all([
+        this.apolloClient.query({ query, variables }),
+        (async () => {
+          if (isFn(this.sideloadDataFn)) {
+            this.sideloadDataFn.bind(this);
+            return this.sideloadDataFn();
+          }
+          return undefined;
+        })(),
+      ]);
+      this.promise = createNode(getAsObject(r, path));
+      this.sideloadedData = sideloadedData;
+    }
+    return this.promise;
+  }
+}
+
+module.exports = PageNode;

package/middleware/page-node/resolved.js

@@ -0,0 +1,26 @@
+const { get, getAsObject, getAsArray } = require('@mindful-web/object-path');
+const { asObject } = require('@mindful-web/utils');
+
+class ResolvedNode {
+  constructor(data) {
+    this.data = data;
+  }
+
+  get(path, def) {
+    return get(this.data, path, def);
+  }
+
+  getAsObject(path) {
+    return getAsObject(this.data, path);
+  }
+
+  getAsArray(path) {
+    return getAsArray(this.data, path);
+  }
+
+  getEdgeNodesFor(path) {
+    return this.getAsArray(`${path}.edges`).map((edge) => asObject(edge).node);
+  }
+}
+
+module.exports = ResolvedNode;

package/middleware/with-content.js

@@ -0,0 +1,54 @@
+const createError = require('http-errors');
+const { get } = require('@mindful-web/object-path');
+const { asyncRoute, isFunction: isFn } = require('@mindful-web/utils');
+const { content: loader } = require('@mindful-web/web-common/page-loaders');
+const { blockContent: queryFactory } = require('@mindful-web/web-common/query-factories');
+const setRouteKind = require('@mindful-web/marko-express/utils/set-route-kind');
+const PageNode = require('./page-node');
+const buildContentInput = require('../utils/build-content-input');
+const applyQueryParams = require('../utils/apply-query-params');
+
+module.exports = ({
+  template,
+  queryFragment,
+  idResolver,
+  redirectOnPathMismatch = true,
+  loaderQueryFragment,
+  redirectToFn,
+  pathFn,
+  formatResponse,
+  sideloadDataFn,
+} = {}) => asyncRoute(async (req, res) => {
+  const id = isFn(idResolver) ? await idResolver(req, res) : req.params.id;
+  const { apollo, query } = req;
+
+  const additionalInput = buildContentInput({ req });
+  const content = await loader(apollo, { id, additionalInput, queryFragment: loaderQueryFragment });
+  const requestingSiteId = req.app.locals.config.website('id');
+
+  // set the route kind
+  setRouteKind(res, { kind: 'content', type: content.type });
+  const redirectTo = isFn(redirectToFn) ? redirectToFn({
+    content,
+    requestingSiteId,
+  }) : content.redirectTo;
+  const path = isFn(pathFn) ? pathFn({ content }) : get(content, 'siteContext.path');
+
+  if (redirectTo) {
+    return res.redirect(301, applyQueryParams({ path: redirectTo, query }));
+  }
+  if (redirectOnPathMismatch && path !== req.path) {
+    const pathTo = req.query['preview-mode'] ? `${path}?preview-mode=true` : path;
+    return res.redirect(301, applyQueryParams({ path: pathTo, query }));
+  }
+  if (content.deletedContent) throw createError(404, `No published content was found for id '${id}'`);
+  const pageNode = new PageNode(apollo, {
+    queryFactory,
+    queryFragment,
+    variables: { input: { id: Number(id), ...additionalInput } },
+    resultField: 'content',
+    sideloadDataFn,
+  });
+  if (isFn(formatResponse)) await formatResponse({ res, content, pageNode });
+  return res.marko(template, { ...content, pageNode });
+});

package/middleware/with-dynamic-page.js

@@ -0,0 +1,37 @@
+const { get } = require('@mindful-web/object-path');
+const { asyncRoute, isFunction: isFn } = require('@mindful-web/utils');
+const { dynamicPage: loader } = require('@mindful-web/web-common/page-loaders');
+const { blockDynamicPage: queryFactory } = require('@mindful-web/web-common/query-factories');
+const setRouteKind = require('@mindful-web/marko-express/utils/set-route-kind');
+const PageNode = require('./page-node');
+const applyQueryParams = require('../utils/apply-query-params');
+
+module.exports = ({
+  template,
+  queryFragment,
+  aliasResolver,
+  redirectOnPathMismatch = true,
+} = {}) => asyncRoute(async (req, res) => {
+  const alias = isFn(aliasResolver) ? await aliasResolver(req, res) : req.params.alias;
+  const { apollo, query } = req;
+
+  const page = await loader(apollo, { alias });
+
+  setRouteKind(res, { kind: 'dynamic-page', type: alias });
+
+  const { redirectTo } = page;
+  const path = get(page, 'siteContext.path');
+  if (redirectTo) {
+    return res.redirect(301, applyQueryParams({ path: redirectTo, query }));
+  }
+  if (redirectOnPathMismatch && path !== req.path) {
+    return res.redirect(301, applyQueryParams({ path, query }));
+  }
+  const pageNode = new PageNode(apollo, {
+    queryFactory,
+    queryFragment,
+    variables: { input: { alias } },
+    resultField: 'contentPage',
+  });
+  return res.marko(template, { ...page, pageNode });
+});

package/middleware/with-load-more.js

@@ -0,0 +1,9 @@
+const { asyncRoute } = require('@mindful-web/utils');
+const LoadMore = require('../components/load-more');
+
+module.exports = () => asyncRoute(async (req, res) => {
+  const { method, query, body } = req;
+  const data = method === 'POST' ? JSON.parse(body) : query;
+  const input = JSON.parse(data.input || null) || {};
+  res.marko(LoadMore, input);
+});

package/middleware/with-magazine-issue.js

@@ -0,0 +1,24 @@
+const { asyncRoute } = require('@mindful-web/utils');
+const { magazineIssue: loader } = require('@mindful-web/web-common/page-loaders');
+const { blockMagazineIssue: queryFactory } = require('@mindful-web/web-common/query-factories');
+const setRouteKind = require('@mindful-web/marko-express/utils/set-route-kind');
+const PageNode = require('./page-node');
+
+module.exports = ({
+  template,
+  queryFragment,
+} = {}) => asyncRoute(async (req, res) => {
+  const { apollo } = req;
+  const id = Number(req.params.id);
+  const issue = await loader(apollo, { id });
+
+  // set the route kind
+  setRouteKind(res, { kind: 'magazine-issue', type: '' });
+  const pageNode = new PageNode(apollo, {
+    queryFactory,
+    queryFragment,
+    variables: { input: { id } },
+    resultField: 'magazineIssue',
+  });
+  return res.marko(template, { ...issue, pageNode });
+});

package/middleware/with-magazine-publication.js

@@ -0,0 +1,24 @@
+const { asyncRoute } = require('@mindful-web/utils');
+const { magazinePublication: loader } = require('@mindful-web/web-common/page-loaders');
+const { blockMagazinePublication: queryFactory } = require('@mindful-web/web-common/query-factories');
+const setRouteKind = require('@mindful-web/marko-express/utils/set-route-kind');
+const PageNode = require('./page-node');
+
+module.exports = ({
+  template,
+  queryFragment,
+} = {}) => asyncRoute(async (req, res) => {
+  const { apollo } = req;
+  const { id } = req.params;
+  const publication = await loader(apollo, { id });
+
+  // set the route kind
+  setRouteKind(res, { kind: 'magazine-publication', type: '' });
+  const pageNode = new PageNode(apollo, {
+    queryFactory,
+    queryFragment,
+    variables: { input: { id } },
+    resultField: 'magazinePublication',
+  });
+  return res.marko(template, { ...publication, pageNode });
+});

package/middleware/with-website-section.js

@@ -0,0 +1,47 @@
+const { asyncRoute, isFunction: isFn } = require('@mindful-web/utils');
+const { websiteSection: loader } = require('@mindful-web/web-common/page-loaders');
+const { blockWebsiteSection: queryFactory } = require('@mindful-web/web-common/query-factories');
+const setRouteKind = require('@mindful-web/marko-express/utils/set-route-kind');
+const PageNode = require('./page-node');
+const applyQueryParams = require('../utils/apply-query-params');
+
+module.exports = ({
+  template,
+  queryFragment,
+  aliasResolver,
+  redirectOnPathMismatch = true,
+  context: contextFn,
+} = {}) => asyncRoute(async (req, res) => {
+  const alias = isFn(aliasResolver) ? await aliasResolver(req, res) : req.params.alias;
+  const { apollo, query } = req;
+  const cleanedAlias = alias.replace(/\/+$/, '').replace(/^\/+/, '');
+
+  const section = await loader(apollo, { alias: cleanedAlias });
+
+  // set the route kind
+  setRouteKind(res, { kind: 'website-section', type: section.alias });
+  const { redirectTo, canonicalPath } = section;
+  if (redirectTo) {
+    return res.redirect(301, applyQueryParams({ path: redirectTo, query }));
+  }
+  if (redirectOnPathMismatch && canonicalPath !== req.path) {
+    return res.redirect(301, applyQueryParams({ path: canonicalPath, query }));
+  }
+  const pageNode = new PageNode(apollo, {
+    queryFactory,
+    queryFragment,
+    variables: { input: { alias: cleanedAlias } },
+    resultField: 'websiteSectionAlias',
+  });
+
+  let context = {};
+  if (typeof contextFn === 'function') {
+    context = await contextFn({
+      req,
+      res,
+      section,
+      pageNode,
+    });
+  }
+  return res.marko(template, { ...section, pageNode, context });
+});

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@mindful-web/marko-web",
+  "version": "1.0.0",
+  "description": "Core Marko+Express components for Mindful Web websites",
+  "author": "Jacob Bare <jacob@parameter1.com>",
+  "main": "index.js",
+  "license": "MIT",
+  "repository": "https://github.com/parameter1/mindful-web/tree/main/packages/marko-web",
+  "engines": {
+    "node": ">=14.15"
+  },
+  "os": [
+    "darwin",
+    "linux",
+    "win32"
+  ],
+  "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": {
+    "@godaddy/terminus": "^4.11.2",
+    "@mindful-web/apollo-ssr": "^1.0.0",
+    "@mindful-web/dayjs": "^1.0.0",
+    "@mindful-web/embedded-media": "^1.0.0",
+    "@mindful-web/express-apollo": "^1.0.0",
+    "@mindful-web/graphql-fragment-types": "^1.0.0",
+    "@mindful-web/html": "^1.0.0",
+    "@mindful-web/image": "^1.0.0",
+    "@mindful-web/inflector": "^1.0.0",
+    "@mindful-web/marko-express": "^1.0.0",
+    "@mindful-web/marko-node-require": "^1.0.0",
+    "@mindful-web/marko-web-deferred-script-loader": "^1.0.0",
+    "@mindful-web/object-path": "^1.0.0",
+    "@mindful-web/tenant-context": "^1.0.0",
+    "@mindful-web/utils": "^1.0.0",
+    "@mindful-web/web-common": "^1.0.0",
+    "async": "^3.2.4",
+    "cheerio": "^1.0.0-rc.12",
+    "cookie-parser": "^1.4.6",
+    "express": "^4.18.2",
+    "express-http-proxy": "^1.6.3",
+    "graphql": "^14.7.0",
+    "graphql-tag": "^2.12.6",
+    "helmet": "^3.23.3",
+    "http-errors": "^1.8.1",
+    "jquery": "^3.6.3",
+    "marko": "~4.20.0",
+    "nanoid": "^3.3.4",
+    "node-fetch": "^2.6.9",
+    "vue": "^2.7.14",
+    "vue-server-renderer": "^2.7.14"
+  },
+  "peerDependencies": {
+    "@mindful-web/marko-core": "^0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0b77cab713eb5841202bb86c7119949866bc68b5"
+}

package/scss/carousel.scss

@@ -0,0 +1,42 @@
+.carousel {
+  margin-bottom: .75rem;
+
+  .carousel-item {
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .carousel-caption {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: initial;
+    padding-bottom: 1rem;
+    text-shadow: rgba(0, 0, 0, .6) 0 1px 2px;
+    background: rgba(0, 0, 0, .75);
+    p {
+      display: none;
+      @include media-breakpoint-up(md) {
+        display: block;
+      }
+    }
+  }
+
+  .carousel-indicators {
+    z-index: 2;
+    margin-bottom: 0;
+  }
+}
+
+// Carousel Overrides
+
+.carousel-control-next,
+.carousel-control-prev {
+  top: initial;
+  bottom: 8px;
+  z-index: 2;
+  justify-content: space-around;
+  opacity: initial;
+}

package/scss/document.scss

@@ -0,0 +1,55 @@
+$marko-web-document-container-gutter:     .75rem !default;
+$marko-web-document-container-max-width:  1200px !default;
+
+$marko-web-page-padding:                  $marko-web-document-container-gutter !default;
+
+$marko-web-page-wrapper-bg-color:         #fff !default;
+$marko-web-page-wrapper-padding:          $marko-web-page-padding !default;
+$marko-web-page-wrapper-section-margin:   $marko-web-document-container-gutter !default;
+
+html {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.document-container {
+  position: relative;
+  flex-grow: 1;
+  width: 100%;
+  padding-right: $marko-web-document-container-gutter;
+  padding-left: $marko-web-document-container-gutter;
+  margin-right: auto;
+  margin-left: auto;
+
+  @if $marko-web-document-container-max-width {
+    @media (min-width: $marko-web-document-container-max-width) {
+      max-width: $marko-web-document-container-max-width;
+    }
+  }
+}
+
+.page {
+  padding: $marko-web-page-padding;
+  &:first-child {
+    padding-top: $marko-web-page-padding * 2;
+  }
+  &:last-child {
+    padding-bottom: $marko-web-page-padding * 2;
+  }
+}
+
+.page-wrapper {
+  padding: $marko-web-page-wrapper-padding;
+  background-color: $marko-web-page-wrapper-bg-color;
+  &__section {
+    margin-bottom: $marko-web-page-wrapper-section-margin;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/scss/fonts/alata-fallback.scss

@@ -0,0 +1,7 @@
+@font-face {
+  /*! critical */
+  font-family: alata-fallback;
+  size-adjust: 102.30000000000004%;
+  ascent-override: 110%;
+  src: local("Arial");
+}