refactor(html pipe): some linting

fix #279

src/html/get-metadata.js

@@ -19,13 +19,14 @@ const {
 
 function yaml(section) {
   const yamls = selectAll('yaml', section);
-  section.meta = obj(flat(map(yamls, ({ payload }) => payload)));
+  section.data = section.data || {};
+  section.data.meta = obj(flat(map(yamls, ({ payload }) => payload)));
   return section;
 }
 
 function title(section) {
   const header = select('heading', section);
-  section.title = header ? plain(header) : '';
+  section.data.title = header ? plain(header) : '';
 }
 
 function intro(section) {
@@ -36,15 +37,15 @@ function intro(section) {
     }
     return true;
   })[0];
-  section.intro = para ? plain(para) : '';
+  section.data.intro = para ? plain(para) : '';
 }
 
 function image(section) {
   // selects the most prominent image of the section
   // TODO: get a better measure of prominence than "first"
   const img = select('image', section);
   if (img) {
-    section.image = img.url;
+    section.data.image = img.url;
   }
 }
 
@@ -132,35 +133,35 @@ function sectiontype(section) {
   }
 
   const typecounter = children.reduce(reducer, {});
-  section.types = constructTypes(typecounter);
+  section.data.types = constructTypes(typecounter);
 }
 
 function fallback(section) {
   if (section.intro && !section.title) {
-    section.title = section.intro;
+    section.data.title = section.intro;
   } else if (section.title && !section.intro) {
-    section.intro = section.title;
+    section.data.intro = section.title;
   }
 }
 
 function getmetadata({ content }, { logger }) {
-  const { sections } = content;
-  if (!sections) {
+  const { mdast: { children } } = content;
+  if (!children) {
     content.meta = {};
     return;
   }
 
-  logger.debug(`Parsing Markdown Metadata from ${sections.length} sections`);
+  logger.debug(`Parsing Markdown Metadata from ${children.length} sections`);
 
   each([yaml, title, intro, image, sectiontype, fallback], (fn) => {
-    each(sections, fn);
+    each(children, fn);
   });
 
-  const img = sections.filter(section => section.image)[0];
+  const img = children.filter(section => section.image)[0];
 
-  content.meta = empty(sections) ? {} : sections[0].meta;
-  content.title = empty(sections) ? '' : sections[0].title;
-  content.intro = empty(sections) ? '' : sections[0].intro;
+  content.meta = empty(children) ? {} : children[0].meta;
+  content.title = empty(children) ? '' : children[0].title;
+  content.intro = empty(children) ? '' : children[0].intro;
   content.image = img ? img.image : undefined;
 }
 

src/html/split-sections.js

@@ -11,8 +11,15 @@
  */
 
 const between = require('unist-util-find-all-between');
+const { selectAll } = require('unist-util-select');
+const { flat, obj, map } = require('@adobe/helix-shared').sequence;
 const _ = require('lodash/fp');
 
+// Compute the meta information for the section
+function computeMeta(section) {
+  return obj(flat(map(selectAll('yaml', section), ({ payload }) => payload)));
+}
+
 function split({ content }) {
   const { mdast } = content;
 
@@ -25,18 +32,26 @@ function split({ content }) {
   // include the very start and end of the document
   const starts = [0, ...dividers];
   const ends = [...dividers, mdast.children.length];
-  content.sections = _.zip(starts, ends)
+
+  content.mdast.children = _.zip(starts, ends)
   // but filter out empty section
     .filter(([start, end]) => start !== end)
   // then return all nodes that are in between
     .map(([start, end]) => {
     // skip 'thematicBreak' nodes
       const index = mdast.children[start].type === 'thematicBreak' ? start + 1 : start;
-      return {
+      const section = {
         type: 'root',
+        data: {},
         children: between(mdast, index, end),
       };
+      section.data.meta = computeMeta(section);
+      return section;
     });
+
+  if (content.mdast.children.length === 1) { // unwrap sole section
+    content.mdast.children = content.mdast.children[0].children;
+  }
 }
 
 module.exports = split;

src/utils/mdast-to-vdom.js

@@ -20,6 +20,7 @@ const HeadingHandler = require('./heading-handler');
 const image = require('./image-handler');
 const embed = require('./embed-handler');
 const link = require('./link-handler');
+const section = require('./section-handler');
 const types = require('../schemas/mdast.schema.json').properties.type.enum;
 
 /**
@@ -62,6 +63,7 @@ class VDOMTransformer {
     this.match('image', image(options));
     this.match('embed', embed(options));
     this.match('link', link(options));
+    this.match('root', section(options));
     this.match('html', (h, node) => {
       if (node.value.startsWith('<!--')) {
         return h.augment(node, {

src/utils/section-handler.js

@@ -0,0 +1,65 @@
+/*
+ * Copyright 2019 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.
+ */
+
+const fallback = require('mdast-util-to-hast/lib/handlers/root');
+const all = require('mdast-util-to-hast/lib/all');
+const wrap = require('mdast-util-to-hast/lib/wrap');
+
+/**
+ * Get the tag name for the specified section.
+ *
+ * @param {Node} section The MDAST section to get the tag name for
+ * @returns {string} The tag name for the section. Defaults to {@code div}.
+ */
+function getTageName(section) {
+  return (section.data && section.data.meta && section.data.meta.tagName) || 'div';
+}
+
+/**
+ * Get the class name for the specified section.
+ *
+ * @param {Node} section The MDAST section to get the class name for
+ * @returns {string} The class name for the section. Defaults to {@code hlx-section}.
+ */
+function getClass(section) {
+  return (section.data && section.data.meta && section.data.meta.className) || 'hlx-section';
+}
+
+/**
+ * Get the types for the specified section.
+ *
+ * @param {Node} section The MDAST section to get the types for
+ * @returns {string} A space-separated list of section types, or {@code null} if none desired.
+ */
+function getTypes(node) {
+  const outputTags = node.data && node.data.meta && node.data.meta.types === true;
+  const types = (outputTags && node.data.types) || null;
+  return types ? types.join(' ') : null;
+}
+
+function sectionHandler() {
+  return function handler(h, node, parent) {
+    const n = Object.assign({}, node);
+
+    // we have a section that is not the document root, so wrap it in the desired tag
+    if (parent && parent.type === 'root') {
+      const tagName = getTageName(n);
+      const props = { class: getClass(n), 'data-hlx-types': getTypes(n) };
+      const children = wrap(all(h, n), true);
+      return h(node, tagName, props, children);
+    }
+
+    return fallback(h, n);
+  };
+}
+
+module.exports = sectionHandler;