@adobe/helix-html-pipeline 1.6.0 → 2.0.2

package/CHANGELOG.md

@@ -1,9 +1,48 @@
-# [1.6.0](https://github.com/adobe/helix-html-pipeline/compare/v1.5.8...v1.6.0) (2022-05-25)
+## [2.0.2](https://github.com/adobe/helix-html-pipeline/compare/v2.0.1...v2.0.2) (2022-05-28)
+
+
+### Bug Fixes
+
+* **deps:** update external fixes ([#65](https://github.com/adobe/helix-html-pipeline/issues/65)) ([0994581](https://github.com/adobe/helix-html-pipeline/commit/09945810ee3969350b6053d49d1614c1e9051eba))
+
+## [2.0.1](https://github.com/adobe/helix-html-pipeline/compare/v2.0.0...v2.0.1) (2022-05-25)
+
+
+### Bug Fixes
+
+* querystring is deprecated ([d693319](https://github.com/adobe/helix-html-pipeline/commit/d6933197e928da452712bcfb2c8a42cdefe2bf2c))
+* respect fragments and querystring during link-rewrite ([44e00d4](https://github.com/adobe/helix-html-pipeline/commit/44e00d49293df392f4dec7eafee1abc60743ff79))
+
+# [2.0.0](https://github.com/adobe/helix-html-pipeline/compare/v1.5.8...v2.0.0) (2022-05-25)
+
+
+### Bug Fixes
+
+* add link rewriting ([bde5fb6](https://github.com/adobe/helix-html-pipeline/commit/bde5fb6a15fcac24887897c0134d524677730741))
+* clean up empty paragraphs ([30547b7](https://github.com/adobe/helix-html-pipeline/commit/30547b7cca7869bd791bfa0b5fee7b23d8548798))
+* create <picture> tags ([88c1ab9](https://github.com/adobe/helix-html-pipeline/commit/88c1ab96c335a60092b8fcbe60de2d2e061809bf))
+* detect and fix wrong dimensions fragment ([e0df3dc](https://github.com/adobe/helix-html-pipeline/commit/e0df3dc6bfa0c2f3acf771f8cea95f5237eddb00))
+* improve block css class names ([ff05d3c](https://github.com/adobe/helix-html-pipeline/commit/ff05d3c38d92126ea65573d33639453ea5aaa5e6))
+* preserve table-cell align attributes as data-attribures ([c5a5c1a](https://github.com/adobe/helix-html-pipeline/commit/c5a5c1aea3148c7ad44e44f40e7dd7b8eca19566))
+* pretty-print html ([529facf](https://github.com/adobe/helix-html-pipeline/commit/529facf416a07e8a5050ec1a614eec23f9249efc))
+* replace icon svgs with spans ([55aeeeb](https://github.com/adobe/helix-html-pipeline/commit/55aeeeb03578eef0ece877669969729e1ce68855))
+* unwrap img inside em/strong ([dbc6a82](https://github.com/adobe/helix-html-pipeline/commit/dbc6a8204193aa7c79fda05024fe3d8f40093443))
 
 
 ### Features
 
-* adding maintenance branch ([ce43691](https://github.com/adobe/helix-html-pipeline/commit/ce43691b0ed7ef39ae137027c5eb3046812d46f6))
+* Breaking changes for 2022-05 ([f2d1523](https://github.com/adobe/helix-html-pipeline/commit/f2d1523d21eb2b9a57bdd658526c7a9ee8bd8056))
+
+
+### BREAKING CHANGES
+
+* icons: are now replaced with <span> elements
+* the format of the css class names changed
+* dom changes
+* picture dom changed
+* all links to media and same hlx sites are relativized
+* empty <p></p> tags now properly sourround the following element, eg pictures
+* inter-element whitespace changes
 
 ## [1.5.8](https://github.com/adobe/helix-html-pipeline/compare/v1.5.7...v1.5.8) (2022-05-19)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/helix-html-pipeline",
-  "version": "1.6.0",
+  "version": "2.0.2",
   "description": "Helix HTML Pipeline",
   "main": "src/index.js",
   "types": "src/index.d.ts",
@@ -34,7 +34,7 @@
     "@adobe/helix-shared-utils": "2.0.10",
     "github-slugger": "1.4.0",
     "hast-util-raw": "7.2.1",
-    "hast-util-select": "5.0.1",
+    "hast-util-select": "5.0.2",
     "hast-util-to-html": "8.0.3",
     "hast-util-to-string": "2.0.0",
     "hastscript": "7.0.2",
@@ -52,7 +52,6 @@
     "micromark-util-combine-extensions": "1.0.0",
     "mime": "3.0.0",
     "rehype-format": "4.0.1",
-    "rehype-minify-whitespace": "5.0.1",
     "rehype-parse": "8.0.4",
     "remark-parse": "10.0.1",
     "strip-markdown": "5.0.0",
@@ -61,7 +60,8 @@
     "unist-util-remove": "3.1.0",
     "unist-util-remove-position": "4.0.1",
     "unist-util-select": "4.0.1",
-    "unist-util-visit": "4.1.0"
+    "unist-util-visit": "4.1.0",
+    "unist-util-visit-parents": "5.1.0"
   },
   "devDependencies": {
     "@adobe/eslint-config-helix": "1.3.2",
@@ -69,8 +69,8 @@
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/git": "10.0.1",
     "@semantic-release/npm": "9.0.1",
-    "c8": "7.11.2",
-    "eslint": "8.15.0",
+    "c8": "7.11.3",
+    "eslint": "8.16.0",
     "eslint-plugin-header": "3.1.1",
     "eslint-plugin-import": "2.26.0",
     "esmock": "1.7.5",
@@ -79,7 +79,7 @@
     "jsdoc-to-markdown": "7.1.1",
     "jsdom": "19.0.0",
     "junit-report-builder": "3.0.0",
-    "lint-staged": "12.4.1",
+    "lint-staged": "12.4.2",
     "mocha": "10.0.0",
     "mocha-multi-reporters": "1.5.1",
     "remark-gfm": "3.0.1",

package/src/html-pipe.js

@@ -25,7 +25,7 @@ import parseMarkdown from './steps/parse-markdown.js';
 import removeHlxProps from './steps/removeHlxProps.js';
 import render from './steps/render.js';
 import renderCode from './steps/render-code.js';
-import rewriteBlobImages from './steps/rewrite-blob-images.js';
+import rewriteUrls from './steps/rewrite-urls.js';
 import rewriteIcons from './steps/rewrite-icons.js';
 import setXSurrogateKeyHeader from './steps/set-x-surrogate-key-header.js';
 import setCustomResponseHeaders from './steps/set-custom-response-headers.js';
@@ -94,7 +94,7 @@ export async function htmlPipe(state, req) {
       await getMetadata(state); // this one extracts the metadata from the mdast
       await unwrapSoleImages(state);
       await html(state);
-      await rewriteBlobImages(state);
+      await rewriteUrls(state);
       await rewriteIcons(state);
       await fixSections(state);
       await createPageBlocks(state);

package/src/steps/create-page-blocks.js

@@ -12,7 +12,7 @@
 import { h } from 'hastscript';
 import { selectAll, select } from 'hast-util-select';
 import { toString } from 'hast-util-to-string';
-import { toClassName } from './utils.js';
+import { toBlockCSSClassNames } from './utils.js';
 import { replace, childNodes } from '../utils/hast-utils.js';
 
 /**
@@ -44,20 +44,17 @@ function tableToDivs($table) {
   }
 
   // get columns names
-  const clazz = $headerCols
-    .map((e) => toClassName(toString(e)))
-    .filter((c) => !!c)
-    .join('-');
-  if (clazz) {
-    $cards.properties.className = [clazz];
-  }
+  $cards.properties.className = toBlockCSSClassNames(toString($headerCols[0]));
 
   // construct page block
   for (const $row of $rows) {
     const $card = h('div');
     for (const $cell of childNodes($row)) {
       // convert to div
-      $card.children.push(h('div', $cell.children));
+      $card.children.push(h('div', {
+        'data-align': $cell.properties.align,
+        'data-valign': $cell.properties.vAlign,
+      }, $cell.children));
     }
     $cards.children.push($card);
   }

package/src/steps/create-pictures.js

@@ -9,10 +9,65 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
+import mime from 'mime';
 import { h } from 'hastscript';
-import { selectAll } from 'hast-util-select';
-import { replace } from '../utils/hast-utils.js';
-import { optimizeImageURL } from './utils.js';
+import { visitParents } from 'unist-util-visit-parents';
+
+const BREAK_POINTS = [
+  { media: '(min-width: 400px)', width: '2000' },
+  { width: '750' },
+];
+
+export function createOptimizedPicture(src, alt = '', eager = false) {
+  const url = new URL(src, 'https://localhost/');
+  const { pathname, hash = '' } = url;
+  const props = new URLSearchParams(hash.substring(1));
+  // detect bug in media handler that created fragments like `width=800&width=600`
+  // eslint-disable-next-line prefer-const
+  let [width, height] = props.getAll('width');
+  if (props.has('height')) {
+    height = props.get('height');
+  }
+  const ext = pathname.substring(pathname.lastIndexOf('.') + 1);
+  const type = mime.getType(pathname);
+
+  const variants = [
+    ...BREAK_POINTS.map((br) => ({
+      ...br,
+      ext: 'webply',
+      type: 'image/webp',
+    })),
+    ...BREAK_POINTS.map((br) => ({
+      ...br,
+      ext,
+      type,
+    }))];
+
+  const sources = variants.map((v, i) => {
+    const srcset = `.${pathname}?width=${v.width}&format=${v.ext}&optimize=medium`;
+    if (i < variants.length - 1) {
+      return h('source', {
+        type: v.type,
+        srcset,
+        media: v.media,
+      });
+    }
+    return h('img', {
+      loading: eager ? 'eager' : 'lazy',
+      alt,
+      type: v.type,
+      src: srcset,
+      width,
+      height,
+    });
+  });
+
+  return h('picture', sources);
+}
+
+function isMediaImage(node) {
+  return node.tagName === 'img' && node.properties?.src.startsWith('./media_');
+}
 
 /**
  * Converts imgs to pictures
@@ -22,18 +77,22 @@ import { optimizeImageURL } from './utils.js';
 export default async function createPictures({ content }) {
   const { hast } = content;
 
-  // transform <img> to <picture>
-  selectAll('img[src^="./media_"]', hast).forEach((img, i) => {
-    const { src } = img.properties;
-    const source = h('source');
-    source.properties.media = '(max-width: 400px)';
-    source.properties.srcset = optimizeImageURL(src, 750);
-
-    const picture = h('picture', source);
-    img.properties.loading = i > 0 ? 'lazy' : 'eager';
-    img.properties.src = optimizeImageURL(src, 2000);
+  let first = true;
+  visitParents(hast, isMediaImage, (img, parents) => {
+    const { src, alt } = img.properties;
+    const picture = createOptimizedPicture(src, alt, first);
+    first = false;
 
-    replace(hast, img, picture);
-    picture.children.push(img);
+    // check if parent has style and unwrap if needed
+    const parent = parents[parents.length - 1];
+    const parentTag = parent.tagName;
+    if (parentTag === 'em' || parentTag === 'strong') {
+      const grand = parents[parents.length - 2];
+      const idx = grand.children.indexOf(parent);
+      grand.children[idx] = picture;
+    } else {
+      const idx = parent.children.indexOf(img);
+      parent.children[idx] = picture;
+    }
   });
 }

package/src/steps/get-metadata.js

@@ -11,7 +11,7 @@
  */
 import { select, selectAll } from 'unist-util-select';
 import { toString as plain } from 'mdast-util-to-string';
-import { rewriteBlobLink } from './utils.js';
+import { rewriteUrl } from './utils.js';
 
 function yaml(section) {
   section.meta = selectAll('yaml', section)
@@ -35,12 +35,12 @@ function intro(section) {
   section.intro = para ? plain(para) : '';
 }
 
-function image(section) {
+function image(section, state) {
   // 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 = rewriteBlobLink(img.url);
+    section.image = rewriteUrl(state, img.url);
   }
 }
 
@@ -157,7 +157,7 @@ export default function getMetadata(state) {
   }
 
   [yaml, title, intro, image, sectiontype, fallback].forEach((fn) => {
-    sections.forEach(fn);
+    sections.forEach((section) => fn(section, state));
   });
 
   const img = sections.filter((section) => section.image)[0];

package/src/steps/rewrite-icons.js

@@ -10,15 +10,16 @@
  * governing permissions and limitations under the License.
  */
 /* eslint-disable no-param-reassign */
-import { h, s } from 'hastscript';
+import { h } from 'hastscript';
 import { CONTINUE, visit } from 'unist-util-visit';
 
-const REGEXP_ICON = /:(#?[a-zA-Z_-]+[a-zA-Z0-9]*):/g;
+const REGEXP_ICON = /:(#?[a-z_-]+[a-z\d]*):/gi;
 
 /**
- * Create a <img> or <svg> icon dom element eg:
- * `<img class="icon icon-smile" src="/icons/smile.svg"/>` or
- * `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons.svg#smile"></use></svg>`
+ * Create a <span> icon element:
+ *
+ * `<span class="icon icon-smile"></span>`
+ *
  * @param {string} value the identifier of the icon
  */
 function createIcon(value) {
@@ -26,14 +27,12 @@ function createIcon(value) {
 
   // icon starts with #
   if (name.startsWith('%23')) {
+    // todo: still support sprite sheets?
     name = name.substring(3);
-    return s('svg', { class: `icon icon-${name}` }, [
-      s('use', { href: `/icons.svg#${name}` }),
-    ]);
   }
 
-  // create normal image
-  return h('img', { class: `icon icon-${name}`, src: `/icons/${name}.svg`, alt: `${name} icon` });
+  // create normal span
+  return h('span', { className: ['icon', `icon-${name}`] });
 }
 
 /**

package/src/steps/{rewrite-blob-images.js → rewrite-urls.js}

@@ -9,18 +9,30 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { selectAll } from 'hast-util-select';
-import { rewriteBlobLink } from './utils.js';
+
+import { CONTINUE, visit } from 'unist-util-visit';
+import { rewriteUrl } from './utils.js';
 
 /**
- * Rewrite blob store image URLs to /hlx_* URLs
- *
- * @type PipelineStep
- * @param content
+ * Rewrites all A and IMG urls
+ * @param {PipelineState} state
  */
-export default function rewrite({ content }) {
-  const { hast } = content;
-  selectAll('img', hast).forEach((img) => {
-    img.properties.src = rewriteBlobLink(img.properties.src);
+export default async function rewriteUrls(state) {
+  const { content: { hast } } = state;
+
+  const els = {
+    a: 'href',
+    img: 'src',
+  };
+
+  visit(hast, (node) => {
+    if (node.type !== 'element') {
+      return CONTINUE;
+    }
+    const attr = els[node.tagName];
+    if (attr) {
+      node.properties[attr] = rewriteUrl(state, node.properties[attr]);
+    }
+    return CONTINUE;
   });
 }

package/src/steps/stringify-response.js

@@ -10,9 +10,7 @@
  * governing permissions and limitations under the License.
  */
 import { toHtml } from 'hast-util-to-html';
-// import rehypeFormat from 'rehype-format';
-import rehypeMinifyWhitespace from 'rehype-minify-whitespace';
-import { visit } from 'unist-util-visit';
+import rehypeFormat from 'rehype-format';
 
 /**
  * Serializes the response document to HTML
@@ -30,28 +28,7 @@ export default function stringify(state, req, res) {
   if (!doc) {
     throw Error('no response document');
   }
-
-  // TODO: for the next breaking release, pretty print the HTML with rehypeFormat.
-  // TODO: but for backward compatibility, output all on 1 line.
-  // rehypeFormat()(doc);
-
-  // due to a bug in rehype-minify-whitespace, script content is also minified to 1 line, which
-  // can result in errors https://github.com/rehypejs/rehype-minify/issues/44
-  // so we 'save' all text first and revert it afterwards
-  visit(doc, (node) => {
-    if (node.tagName === 'script' && node.children[0]?.type === 'text') {
-      node.children[0].savedValue = node.children[0].value;
-    }
-  });
-
-  rehypeMinifyWhitespace()(doc);
-
-  visit(doc, (node) => {
-    if (node.tagName === 'script' && node.children[0]?.type === 'text') {
-      node.children[0].value = node.children[0].savedValue;
-      delete node.children[0].savedValue;
-    }
-  });
+  rehypeFormat()(doc);
 
   res.body = toHtml(doc, {
     upperDoctype: true,

package/src/steps/utils.js

@@ -14,6 +14,8 @@ const AZURE_BLOB_REGEXP = /^https:\/\/hlx\.blob\.core\.windows\.net\/external\//
 
 const MEDIA_BLOB_REGEXP = /^https:\/\/.*\.hlx3?\.(live|page)\/media_.*/;
 
+const HELIX_URL_REGEXP = /^https:\/\/.*\.hlx3?\.(live|page)\/.*/;
+
 /**
  * Returns the original host name from the request to the outer CDN.
  * @param {object} headers The request headers
@@ -64,15 +66,39 @@ export function wrapContent($parent, $node) {
 }
 
 /**
- * Converts all non-valid-css-classname characters to `-`.
+ * Converts the given text to an array of CSS class names:
+ * - extracts the list of options (given as CSV in braces at the end)
+ * - collapses all consecutive invalid-css name characters to a single `-`
+ * - removes leading and trailing `-`
+ * - converts all names to lowercase
+ *
+ * @examples
+ *   Columns (fullsize center) --> columns fullsize-center
+ *   Columns (fullsize, center) --> columns fullsize center
+ *   Joe's Pizza! (small) -> joe-s-pizza small
+ *
  * @param {string} text input text
- * @returns {string} the css class name
+ * @returns {string[]} the array of CSS class names
  */
-export function toClassName(text) {
-  return text
-    .trim()
+export function toBlockCSSClassNames(text) {
+  if (!text) {
+    return [];
+  }
+  const names = [];
+  const idx = text.lastIndexOf('(');
+  if (idx >= 0) {
+    names.push(text.substring(0, idx));
+    names.push(...text.substring(idx + 1).split(','));
+  } else {
+    names.push(text);
+  }
+
+  return names.map((name) => name
     .toLowerCase()
-    .replace(/[^0-9a-z]/gi, '-');
+    .replace(/[^0-9a-z]+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, ''))
+    .filter((name) => !!name);
 }
 
 /**
@@ -150,19 +176,50 @@ export function getAbsoluteUrl(headers, url) {
 }
 
 /**
- * Rewrite a blog image link. if the link is not a blog image link, it is returned as-is.
- * @param {string} src the image source
- * @returns {string} the new source
+ * Rewrites the media, helix or external url. Returns the original if not rewritten.
+ * @param {PipelineState} state
+ * @param {string} url
+ * @returns {string|null}
  */
-export function rewriteBlobLink(src) {
-  if (AZURE_BLOB_REGEXP.test(src)) {
-    const { pathname, hash } = new URL(src);
+export function rewriteUrl(state, url) {
+  if (!url) {
+    return url;
+  }
+
+  if (AZURE_BLOB_REGEXP.test(url)) {
+    const { pathname, hash } = new URL(url);
     const filename = pathname.split('/').pop();
-    const extension = hash.split('?').shift().split('.').pop() || 'jpg';
-    return `./media_${filename}.${extension}`;
-  } else if (MEDIA_BLOB_REGEXP.test(src)) {
-    const { pathname } = new URL(src);
-    return `.${pathname}`; // don't append fragment until picture tag supports width/height
+    const [name, props] = hash.split('?');
+    const extension = name.split('.').pop() || 'jpg';
+    const newHash = props ? `#${props}` : '';
+    return `./media_${filename}.${extension}${newHash}`;
   }
-  return src;
+
+  if (MEDIA_BLOB_REGEXP.test(url)) {
+    const { pathname, hash } = new URL(url);
+    return `.${pathname}${hash}`;
+  }
+
+  if (HELIX_URL_REGEXP.test(url)) {
+    const { pathname, hash, search } = new URL(url);
+    if (hash && pathname === state.info?.path) {
+      return hash;
+    }
+    return `${pathname}${search}${hash}`;
+  }
+
+  // todo: read host from contentbus config
+  if (state.config?.host) {
+    const {
+      host, pathname, search, hash,
+    } = new URL(url);
+    if (host === state.config.host) {
+      if (hash && pathname === state.info?.path) {
+        return hash;
+      }
+      return `${pathname}${search}${hash}`;
+    }
+  }
+
+  return url;
 }

package/src/utils/heading-handler.js

@@ -14,7 +14,7 @@ import { toString } from 'mdast-util-to-string';
 import strip from 'strip-markdown';
 
 /**
- *Injects heading identifiers during the MDAST to VDOM transformation.
+ * Injects heading identifiers during the MDAST to VDOM transformation.
  */
 export default function heading(slugger) {
   return function handler(h, node) {

package/src/utils/mdast-to-hast.js

@@ -11,7 +11,6 @@
  */
 import { toHast as mdast2hast, defaultHandlers } from 'mdast-util-to-hast';
 import { raw } from 'hast-util-raw';
-import { visit, CONTINUE } from 'unist-util-visit';
 
 import section from './section-handler.js';
 import heading from './heading-handler.js';
@@ -32,29 +31,5 @@ export default function getHast(mdast, slugger) {
     allowDangerousHtml: true,
   });
 
-  // TODO: remove for cleanup
-  // the following recreates a bug with the old vdom transformer that would create a
-  // <p></p> for all raw `<p>` before a block with void elements.
-  visit(hast, (node, idx, parent) => {
-    if (node.type !== 'raw' || node.value !== '<p>') {
-      return CONTINUE;
-    }
-    // check if any other raw empty nodes follow until the </p>
-    for (let i = idx + 1; i < parent.children.length; i += 1) {
-      const next = parent.children[i];
-      if (next.type === 'raw') {
-        if (next.value === '</p>') {
-          return i + 1;
-        }
-        if (next.value === '<br>' || next.value.startsWith('<img ')) {
-          node.value = '<p></p>';
-          return i + 1;
-        }
-      }
-    }
-    /* c8 ignore next */
-    return CONTINUE;
-  });
-
   return raw(hast);
 }