Releases: adobe/helix-html-pipeline
v2.1.1
v2.1.0
2.1.0 (2022-06-02)
Features
Details
Features:
- loads the
/.helix/config-all.jsonby default, if not found, falls back to loading/metadata.json - uses the
hostorcdn.prod.hostas production host (fallback to xfh header) - respects the
cdn.prod.routeconfig entries when rewriting links
Bug fixes:
- only set custom response
Linkheader for html pipe
Breaking Changes:
- uses ECMA 2022 / node16 features (static class fields, String.replaceAll())
- removes export of
fetchMetadata - removes export of
fetchConfig - removes export of
setCustomResponseHeaders - removes export of
getOriginalHost
v1.6.2
v2.0.4
v2.0.3
v1.6.1
v2.0.2
v2.0.1
v2.0.0
2.0.0 (2022-05-25)
Bug Fixes
- add link rewriting (bde5fb6)
- clean up empty paragraphs (30547b7)
- create
<picture>tags (88c1ab9) - detect and fix wrong dimensions fragment (e0df3dc)
- improve block css class names (ff05d3c)
- preserve table-cell align attributes as data-attribures (c5a5c1a)
- pretty-print html (529facf)
- replace icon svgs with spans (55aeeeb)
- unwrap img inside em/strong (dbc6a82)
Features
- Breaking changes for 2022-05 (f2d1523)
BREAKING CHANGES
- icons: are now replaced with 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 tags now properly sourround the following element, eg pictures
- inter-element whitespace changes
Details
Picture Decoration
Sources
All <img> elements pointing to a media-bus image are converted to a <picture> element with various <source>s and a residual <img> source. The sources provide 2 types (webp and the orignal) via the fastly image optimization urls).
Example:
<picture>
<source type="image/webp" srcset="./media_11150c400cabf67c6baeb1d92d2adf99ab8941fb7.png?width=2000&format=webply&optimize=medium" media="(min-width: 400px)">
<source type="image/webp" srcset="./media_11150c400cabf67c6baeb1d92d2adf99ab8941fb7.png?width=750&format=webply&optimize=medium">
<source type="image/png" srcset="./media_11150c400cabf67c6baeb1d92d2adf99ab8941fb7.png?width=2000&format=png&optimize=medium" media="(min-width: 400px)">
<img loading="eager" alt="" type="image/png" src="./media_11150c400cabf67c6baeb1d92d2adf99ab8941fb7.png?width=750&format=png&optimize=medium" width="1600" height="1130">
</picture>
<picture>Remove Styling
All <img> (and <picture>) elements that are directly wrapped by an <em> or <strong> element and unwrapped. Most likely, there was a formatting mistake happen in authoring and the image contained such a style. Although this should be removed during the docx2md transformation, it could have some left-over content from older content.
Example:
<em>
<picture>....</picture>
</em>is now:
<picture>....</picture>Intrinsic image dimensions
If contained in the media link, the intrinsic image dimensions, are added as width and height attribute to the image source. This helps the browser to compute the aspect ratio.
Example
<picture>
...
<img loading="eager" alt="" type="image/png" src="./media_11150c400cabf67c6baeb1d92d2adf99ab8941fb7.png?width=750&format=png&optimize=medium" width="1600" height="1130">
</picture>Relative Links
All links (<a href="">) and image sources (<img src="">) are subject to link rewriting:
- If the URLs address the same site, there are made relative
- If they are media links they are made local to the current page.
the same site is either the same *.hlx.page or *.hlx.live domain, or the cdn.prod.domain configured in .helix/config.json.
Example
| original | rewritten |
|---|---|
https://main--helix-website--adobe.hlx.page/blog/article |
/blog/article |
https://main--helix-website--adobe.hlx3.page/blog/article |
/blog/article |
https://main--helix-website--adobe.hlx.live/blog/article |
/blog/article |
https://www.hlx.live/blog/article |
/blog/article |
https://main--helix-website--adobe.hlx.live/media_1234.png |
./media_1234.png |
Pretty print HTML output
Instead of output the entire HTML in 1 line, it's not nicely formatted.
Note: this changes the amount of inter-element whitespace, which might cause problems with textContent().
Example
<body>
<header></header>
<main>
<div>
<div class="columns bleed">
<div>
<div>
<h1 id="these-arent-the-droids-youre-looking-for-">These aren’t the droids you’re looking for ⸺</h1>
</div>
....Clean up empty paragraphs
The previous pipeline version had some stray empty <p></p> injected in the html, most often before images. those are now cleaned up and became proper paragraps.
Example:
<p></p>
<picture>...</picture>
<p></p>is now:
<p>
<picture>...</picture>
</p>Icon Handling
Icons specified with the :name: or :#name syntax are not longer converted to <img> or <svg> elements, but always to <span> elements. They should be decorated accordingly on the client side.
<img class="icon icon-search">is now:
<span class="icon icon-search"></span>Block CSS Class Names
The CSS class names for blocks is now computed differently:
- only the 1st table cell is used to compute the class names
- the value is split into a primary and optionals. the optionals are specified by a coma separated list in braces
( ... ) - each of the names are lowercased, all consecutive non letters or digits are replaced by a
-. - trailing and leading
-are removed.
Example
| value | classes |
|---|---|
foo |
foo |
foo bar |
foo-bar |
!Joe\'s Pizza!' |
joe-s-pizza |
'!Joe\'s Pizza! (small) |
joe-s-pizza small |
Sparkling (5dl glass) |
sparkling 5dl-glass |
Country Fries (small, sweat&sour ) |
country-fries small sweat-sour |
Table-Cell layout hints
Table cells that are formatted by the author, now contain those formats as data attributes where applicable. currently the align and vAlign attributes are conveyed.
example:
<div>
<div class="pricing">
<div>
<div data-align="center">Sheet</div>
<div data-valign="bottom">pricing-sheet</div>
</div>
</div>
</div>