Turn embeds into ESI (#97) - fixes #56

- 
* basic implementation of embed to ESI handler

* - added tests
- added missing handler

* find embeds in default pipeline

* added integration test
- integration test, running full pipeline
- fix failing tests
- update documentation for secret parameters
- emit HTML from VDOM, not htast
- reduce debug output (make eslint happy)
- fix default handlers for VDOM Transformer
- pass configuration options into VDOM Transformer

* make eslint even happier

src/defaults/html.pipe.js

@@ -27,6 +27,7 @@ const key = require('../html/set-surrogate-key');
 const production = require('../utils/is-production');
 const dump = require('../utils/dump-context.js');
 const validate = require('../utils/validate');
+const embeds = require('../html/find-embeds');
 
 /* eslint no-param-reassign: off */
 
@@ -40,6 +41,7 @@ const htmlpipe = (cont, payload, action) => {
     .before(fetch)
     .when(({ content }) => !(content && content.body && content.body.length > 0))
     .before(parse)
+    .before(embeds)
     .before(smartypants)
     .before(sections)
     .before(meta)

src/html/emit-html.js

@@ -9,12 +9,13 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-const tohtml = require('hast-util-to-html');
 
-function emit({ content: { htast } }, { logger }) {
-  logger.debug(`Emitting HTML from ${typeof htast}`);
-  const children = htast.children.map(tohtml);
-  return { content: { html: children.join(''), children } };
+function emit({ content: { document } }, { logger }) {
+  logger.debug(`Emitting HTML from ${typeof document}`);
+
+  const children = Array.from(document.body.childNodes).map(node => node.outerHTML);
+
+  return { content: { html: document.body.innerHTML, children } };
 }
 
 module.exports = emit;

src/html/make-html.js

@@ -12,12 +12,12 @@
 const tohtast = require('mdast-util-to-hast');
 const VDOMTransformer = require('../utils/mdast-to-vdom');
 
-function html({ content: { mdast } }, { logger }) {
+function html({ content: { mdast } }, { logger, secrets }) {
   logger.log('debug', `Turning Markdown into HTML from ${typeof mdast}`);
   const content = {};
   // do we still need this?
   content.htast = tohtast(mdast);
-  content.document = new VDOMTransformer(mdast).getDocument();
+  content.document = new VDOMTransformer(mdast, secrets).getDocument();
   return { content };
 }
 

src/schemas/secrets.schema.json

@@ -31,6 +31,26 @@
     "EMBED_WHITELIST": {
       "type": "string",
       "description": "Comma-separated list of allowed hostnames for embeds. Supports `*.example.com` as a subdomain wildcard. Use `*` to allow all embeds (potentially insecure)"
+    },
+    "EMBED_SERVICE": {
+      "type": "string",
+      "description": "URL of an Embed Service that takes the appended URL and returns an embeddable HTML representation."
+    },
+    "IMAGES_MIN_SIZE": {
+      "type": "string",
+      "description": "Minimum physical width of responsive images to generate"
+    },
+    "IMAGES_MAX_SIZE": {
+      "type": "string",
+      "description": "Maximum physical with of responsive images to generate"
+    },
+    "IMAGES_SIZE_STEPS": {
+      "type": "string",
+      "description": "Number of intermediary size steps to create per image"
+    },
+    "IMAGES_SIZES": {
+      "type": "string",
+      "description": "Value for the `sizes` attribute of generated responsive images"
     }
   }
 }

src/utils/embed-handler.js

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2018 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/**
+ * Handles `embed` MDAST nodes by converting them into `<esi:include>` tags
+ * @param {string} EMBED_SERVICE the URL of an embedding service compatible with https://github.com/adobe/helix-embed that returns HTML
+ */
+function embed({ EMBED_SERVICE = 'https://adobeioruntime.net/api/v1/web/helix/default/embed/' } = {}) {
+  return function handler(h, node) {
+    const { url } = node;
+    const props = {
+      src: EMBED_SERVICE + url,
+    };
+    const retval = h(node, 'esi:include', props);
+    return retval;
+  };
+}
+
+module.exports = embed;

src/utils/image-handler.js

@@ -35,7 +35,20 @@ function makewidths(options) {
   return widths.map((_, i) => Math.round(from + (i * range / steps)));
 }
 
-function image({ widths, sizes = ['100vw'] } = { widths: { from: 480, to: 4096, steps: 4 }, sizes: ['100vw'] }) {
+function image({
+  IMAGES_MIN_SIZE = 480,
+  IMAGES_MAX_SIZE = 4096,
+  IMAGES_SIZE_STEPS = 4,
+  IMAGES_SIZES = '100vw',
+} = {}) {
+  const widths = {
+    from: parseInt(IMAGES_MIN_SIZE, 10),
+    to: parseInt(IMAGES_MAX_SIZE, 10),
+    steps: parseInt(IMAGES_SIZE_STEPS, 10),
+  };
+
+
+  const sizes = IMAGES_SIZES.split(',');
   /* Transform an image. */
   return function handler(h, node) {
     const srcurl = url.parse(node.url);

src/utils/mdast-to-vdom.js

@@ -20,6 +20,7 @@ const tohyper = require('hast-to-hyperscript');
 const h = require('hyperscript');
 const { JSDOM } = require('jsdom');
 const image = require('./image-handler');
+const embed = require('./embed-handler');
 
 /**
  * @typedef {function(parent, tagname, attributes, children)} handlerFunction
@@ -59,7 +60,8 @@ class VDOMTransformer {
         this._handlers[type] = (cb, node, parent) => VDOMTransformer.handle(cb, node, parent, that);
         return true;
       });
-    this._matchers.image = image(options);
+    this._handlers.image = image(options);
+    this._handlers.embed = embed(options);
   }
 
   /**