@adobe/helix-html-pipeline 5.0.1 → 5.0.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [5.0.3](https://github.com/adobe/helix-html-pipeline/compare/v5.0.2...v5.0.3) (2023-09-21)
+
+
+### Bug Fixes
+
+* properly rewrite meta image ([#406](https://github.com/adobe/helix-html-pipeline/issues/406)) ([d0c173f](https://github.com/adobe/helix-html-pipeline/commit/d0c173f21942f6fb123ff6d4288364d4b9f0ec98)), closes [#405](https://github.com/adobe/helix-html-pipeline/issues/405)
+
+## [5.0.2](https://github.com/adobe/helix-html-pipeline/compare/v5.0.1...v5.0.2) (2023-09-14)
+
+
+### Bug Fixes
+
+* supress empty non-fallback values ([#399](https://github.com/adobe/helix-html-pipeline/issues/399)) ([1e5629d](https://github.com/adobe/helix-html-pipeline/commit/1e5629d7cb08de210c713654479bd6d5301a905e))
+
 ## [5.0.1](https://github.com/adobe/helix-html-pipeline/compare/v5.0.0...v5.0.1) (2023-09-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/helix-html-pipeline",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "description": "Helix HTML Pipeline",
   "main": "src/index.js",
   "types": "src/index.d.ts",
@@ -74,13 +74,13 @@
     "@markedjs/html-differ": "4.0.2",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/npm": "10.0.5",
+    "@semantic-release/npm": "10.0.6",
     "c8": "8.0.1",
     "eslint": "8.49.0",
     "eslint-import-resolver-exports": "1.0.0-beta.5",
     "eslint-plugin-header": "3.1.1",
     "eslint-plugin-import": "2.28.1",
-    "esmock": "2.4.1",
+    "esmock": "2.5.1",
     "husky": "8.0.3",
     "js-yaml": "4.1.0",
     "jsdom": "22.1.0",
@@ -89,7 +89,7 @@
     "mocha": "10.2.0",
     "mocha-multi-reporters": "1.5.1",
     "mocha-suppress-logs": "0.3.1",
-    "semantic-release": "21.1.1"
+    "semantic-release": "21.1.2"
   },
   "lint-staged": {
     "*.js": "eslint",

package/src/steps/extract-metadata.js

@@ -142,12 +142,25 @@ function extractDescription(hast) {
 }
 
 /**
- * Extracts the metadata and stores it in the content meta
+ * Extracts the metadata from config and the metadata block and stores it in the content.meta.page:
+ * - all the non-empty values from the config metadata are applied.
+ * - config value with an empty string (explicit "") are removed from the result
+ * - all the values from the metadata block are applied. empty values remain empty for the
+ *   properties that can have a default: 'title', 'description', 'image', 'image-alt', 'url'
+ *   the others are removed.
+ * - the defaults for 'title', 'description', 'image', 'image-alt', 'url' are applied if missing
+ * - twitter: properties default to their og: counterparts if missing.
+ *
  * @type PipelineStep
  * @param {PipelineState} state
  * @param {PipelineRequest} req
  */
 export default function extractMetaData(state, req) {
+  const FIXED = new Set([
+    'title', 'description', 'image', 'image-alt', 'url',
+    'twitter:card', 'og:url', 'canonical',
+  ]);
+
   const { content } = state;
   const { meta, hast } = content;
 
@@ -168,7 +181,11 @@ export default function extractMetaData(state, req) {
   });
 
   // apply document local overrides
-  Object.assign(metaConfig, getLocalMetadata(hast));
+  Object.entries(getLocalMetadata(hast)).forEach(([name, value]) => {
+    if (value || FIXED.has(name)) {
+      metaConfig[name] = value;
+    }
+  });
 
   // first process supported metadata properties
   [
@@ -193,9 +210,6 @@ export default function extractMetaData(state, req) {
     meta['twitter:card'] = 'summary_large_image';
   }
 
-  // add rest to meta.custom
-  meta.custom = metaConfig;
-
   if (meta.keywords) {
     meta.keywords = toList(meta.keywords).join(', ');
   }
@@ -234,11 +248,57 @@ export default function extractMetaData(state, req) {
   }
 
   if (!('image' in meta)) {
-    meta.image = getAbsoluteUrl(
-      state,
-      optimizeMetaImage(state.info.path, meta.image || content.image || '/default-meta-image.png'),
-    );
+    meta.image = content.image || '/default-meta-image.png';
+  }
+  if (meta.image) {
+    meta.image = getAbsoluteUrl(state, optimizeMetaImage(state.info.path, meta.image));
   }
 
   meta.imageAlt = meta['image-alt'] ?? content.imageAlt;
+
+  // compute the final page metadata
+  const metadata = {
+    description: meta.description,
+    keywords: meta.keywords,
+    'og:title': meta.title,
+    'og:description': meta.description,
+    'og:url': meta.url,
+    'og:image': meta.image,
+    'og:image:secure_url': meta.image,
+    'og:image:alt': meta.imageAlt,
+    'og:updated_time': meta.modified_time,
+    'article:tag': meta.tags || [],
+    'article:section': meta.section,
+    'article:published_time': meta.published_time,
+    'article:modified_time': meta.modified_time,
+    'twitter:card': meta['twitter:card'],
+    'twitter:title': '',
+    'twitter:description': '',
+    'twitter:image': '',
+  };
+
+  // append custom metadata
+  Object.assign(metadata, metaConfig);
+
+  // fallback for twitter
+  const FALLBACKS = [
+    ['twitter:title', 'og:title'],
+    ['twitter:description', 'og:description'],
+    ['twitter:image', 'og:image'],
+  ];
+
+  for (const [from, to] of FALLBACKS) {
+    if (!(from in metaConfig)) {
+      metadata[from] = metadata[to];
+    }
+  }
+
+  // remove undefined metadata
+  for (const name of Object.keys(metadata)) {
+    if (metadata[name] === undefined) {
+      delete metadata[name];
+    }
+  }
+
+  meta.page = metadata;
 }

package/src/steps/render.js

@@ -55,54 +55,9 @@ export default async function render(state, req, res) {
     $head.children.push(h('title', meta.title));
   }
 
-  // add meta
-  // (this is so complicated to keep the order backward compatible to make the diff tests happy)
-  const metadata = {
-    'og:title': meta.title,
-    'og:description': meta.description,
-    'og:url': meta.url,
-    'og:image': meta.image,
-    'og:image:secure_url': meta.image,
-    'og:image:alt': meta.imageAlt,
-    'og:updated_time': meta.modified_time,
-    'article:tag': meta.tags || [],
-    'article:section': meta.section,
-    'article:published_time': meta.published_time,
-    'article:modified_time': meta.modified_time,
-    'twitter:card': meta['twitter:card'],
-    'twitter:title': '',
-    'twitter:description': '',
-    'twitter:image': '',
-  };
-
-  // append custom metadata
-  Object.assign(metadata, meta.custom);
-
-  // fallback for twitter
-  const FALLBACKS = [
-    ['twitter:title', 'og:title'],
-    ['twitter:description', 'og:description'],
-    ['twitter:image', 'og:image'],
-  ];
-
-  for (const [from, to] of FALLBACKS) {
-    if (!(from in meta.custom)) {
-      metadata[from] = metadata[to];
-    }
-  }
-
-  // remove undefined metadata
-  for (const name of Object.keys(metadata)) {
-    if (metadata[name] === undefined) {
-      delete metadata[name];
-    }
-  }
-
   appendElement($head, createElement('link', 'rel', 'canonical', 'href', meta.canonical));
-  appendElement($head, createElement('meta', 'name', 'description', 'content', meta.description));
-  appendElement($head, createElement('meta', 'name', 'keywords', 'content', meta.keywords));
 
-  for (const [name, value] of Object.entries(metadata)) {
+  for (const [name, value] of Object.entries(meta.page)) {
     const attr = name.includes(':') && !name.startsWith('twitter:') ? 'property' : 'name';
     if (Array.isArray(value)) {
       for (const v of value) {