fix: allow more meta (#565)

* fix: allow more meta * chore: cleanup test * fix: allow twitter:card * chore: fix post-deploy test * chore: fix post-deploy test
adobe · Oct 21, 2024 · bee785a · bee785a
1 parent fd768e5
commit bee785a
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 41 deletions.
diff --git a/src/html2md.js b/src/html2md.js
@@ -33,6 +33,10 @@ import {
 } from './mdast-table-handler.js';
 import formatPlugin from './markdownFormatPlugin.js';
 
+const HELIX_META = {
+  viewport: true,
+};
+
 function m(type, children, props = {}) {
   return {
     type,
@@ -54,10 +58,6 @@ function image(url) {
   };
 }
 
-const HELIX_META = new Set(Array.from([
-  'viewport',
-]));
-
 function toGridTable(title, data) {
   return m(TYPE_GRID_TABLE, [
     m(
@@ -77,6 +77,11 @@ function toGridTable(title, data) {
   ]);
 }
 
+/**
+ * @param {string} str
+ * @returns {string}
+ * @throws {Error}
+ */
 function assertValidJSON(str) {
   try {
     return JSON.stringify(JSON.parse(str.trim()));
@@ -85,13 +90,54 @@ function assertValidJSON(str) {
   }
 }
 
+/**
+ * @param {string} str
+ * @param {number} [limit]
+ * @returns {string}
+ * @throws {Error}
+ */
 function assertMetaSizeLimit(str, limit = 128_000) {
   if (str && str.length > limit) {
     throw Error('metadata size limit exceeded');
   }
   return str;
 }
 
+/**
+ * Check if meta name is allowed:
+ *  - non-reserved
+ *  - not starting with 'twitter:'
+ *    - except 'twitter:label' and 'twitter:data'
+ * @param {string} name
+ * @returns {boolean}
+ */
+function isAllowedMetaName(name) {
+  if (typeof name !== 'string') {
+    return false;
+  }
+  return !HELIX_META[name] && (
+    !name.startsWith('twitter:')
+    || name === 'twitter:card'
+    || name.startsWith('twitter:label')
+    || name.startsWith('twitter:data')
+  );
+}
+
+/**
+ * Check if meta property is allowed:
+ *  - non-reserved
+ *  - og:type
+ *  - product:*
+ * @param {string|undefined} property
+ * @returns {boolean}
+ */
+function isAllowedMetaProperty(property) {
+  if (typeof property !== 'string') {
+    return false;
+  }
+  return !HELIX_META[property] && (property.startsWith('product:') || property === 'og:type');
+}
+
 function addMetadata(hast, mdast) {
   const meta = new Map();
 
@@ -100,13 +146,15 @@ function addMetadata(hast, mdast) {
     if (child.tagName === 'title') {
       meta.set(text('title'), text(assertMetaSizeLimit(toString(child))));
     } else if (child.tagName === 'meta') {
-      const { name, content } = child.properties;
-      if (name && !HELIX_META.has(name) && !name.startsWith('twitter:')) {
+      const { name, property, content } = child.properties;
+      if (isAllowedMetaName(name)) {
         if (name === 'image') {
           meta.set(text(name), image(assertMetaSizeLimit(content)));
         } else {
           meta.set(text(name), text(assertMetaSizeLimit(content)));
         }
+      } else if (isAllowedMetaProperty(property)) {
+        meta.set(text(property), text(assertMetaSizeLimit(content)));
       }
     } else if (child.tagName === 'script' && child.properties.type === 'application/ld+json') {
       const str = assertMetaSizeLimit(assertValidJSON(toString(child)));

diff --git a/test/fixtures/blocks.md b/test/fixtures/blocks.md
@@ -155,17 +155,19 @@ Helix lets frontend devs develop and deploy the design and functionality of thei
 | Style   | highlight |
 +---------+-----------+
 
-+----------------------------------------------------------------------+
-| Metadata                                                             |
-+-------------+--------------------------------------------------------+
-| title       | Project Helix by Adobe                                 |
-+-------------+--------------------------------------------------------+
-| description | Frictionless experience management: Build blazing fast |
-|             | websites using tools content creators and developers   |
-|             | already know.                                          |
-+-------------+--------------------------------------------------------+
-| robots      | noindex, nofollow                                      |
-+-------------+--------------------------------------------------------+
++-----------------------------------------------------------------------+
+| Metadata                                                              |
++--------------+--------------------------------------------------------+
+| title        | Project Helix by Adobe                                 |
++--------------+--------------------------------------------------------+
+| description  | Frictionless experience management: Build blazing fast |
+|              | websites using tools content creators and developers   |
+|              | already know.                                          |
++--------------+--------------------------------------------------------+
+| twitter:card | summary\_large\_image                                  |
++--------------+--------------------------------------------------------+
+| robots       | noindex, nofollow                                      |
++--------------+--------------------------------------------------------+
 
 [image0]: ./media_11150c400cabf67c6baeb1d92d2adf99ab8941fb7.png?width=750&format=png&optimize=medium
 
@@ -181,4 +183,4 @@ Helix lets frontend devs develop and deploy the design and functionality of thei
 
 [image6]: ./media_1b8ff9e1931834386254be2c49c4424210fb0988c.png?width=750&format=png&optimize=medium
 
-[image7]: ./media_1b5d4ed769249aadccd584894ceff3b1b0439747e.png?width=750&format=png&optimize=medium
+[image7]: ./media_1b5d4ed769249aadccd584894ceff3b1b0439747e.png?width=750&format=png&optimize=medium
diff --git a/test/fixtures/default-content.md b/test/fixtures/default-content.md
@@ -147,19 +147,21 @@ Once you are are ready to push your changes, simply git add, commit and push and
 
 **That’s it, you made it! Congrats, your first Helix site is up and running.**
 
-+----------------------------------------------------------------------+
-| Metadata                                                             |
-+-------------+--------------------------------------------------------+
-| title       | Getting started with Helix - Developer Tutorial        |
-+-------------+--------------------------------------------------------+
-| description | This tutorial should have you up and running with your |
-|             | AEM Helix projects in 10 - 20 minutes to a place where |
-|             | you can create, ...                                    |
-+-------------+--------------------------------------------------------+
-| template    | docs                                                   |
-+-------------+--------------------------------------------------------+
-| robots      | noindex, nofollow                                      |
-+-------------+--------------------------------------------------------+
++-----------------------------------------------------------------------+
+| Metadata                                                              |
++--------------+--------------------------------------------------------+
+| title        | Getting started with Helix - Developer Tutorial        |
++--------------+--------------------------------------------------------+
+| description  | This tutorial should have you up and running with your |
+|              | AEM Helix projects in 10 - 20 minutes to a place where |
+|              | you can create, ...                                    |
++--------------+--------------------------------------------------------+
+| twitter:card | summary\_large\_image                                  |
++--------------+--------------------------------------------------------+
+| template     | docs                                                   |
++--------------+--------------------------------------------------------+
+| robots       | noindex, nofollow                                      |
++--------------+--------------------------------------------------------+
 
 [image0]: ./media_165bab297e15a33f4742a4f20d8e0a3c3ba42511a.png?width=750&format=png&optimize=medium
 
@@ -191,4 +193,4 @@ Once you are are ready to push your changes, simply git add, commit and push and
 
 [image14]: ./media_1eba5dc6a44e0bb0b869153ad2b79b1904d5bdc07.png?width=750&format=png&optimize=medium
 
-[image15]: ./media_172de918ec54e4a5f2267f64f63218b1ef0bf066b.png?width=750&format=png&optimize=medium
+[image15]: ./media_172de918ec54e4a5f2267f64f63218b1ef0bf066b.png?width=750&format=png&optimize=medium
diff --git a/test/fixtures/meta-tags.html b/test/fixtures/meta-tags.html
@@ -0,0 +1,26 @@
+<html>
+
+<head>
+  <meta property="og:type" content="product">
+  <meta property="product:availability" content="In stock">
+  <meta property="product:price.amount" content="3">
+  <meta property="product:price.currency" content="USD">
+  <meta property="invalid" content="foo">
+  <meta property="og:ignored" content="bar">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:label1" content="Price">
+  <meta name="twitter:data1" content="$3">
+  <meta name="twitter:label2" content="Availability">
+  <meta name="twitter:data2" content="In stock">
+  <meta name="twitter:image" content="this-is-removed">
+</head>
+
+<body>
+  <main>
+    <div>
+      <h1>Hello, World.</h1>
+    </div>
+  </main>
+</body>
+
+</html>
diff --git a/test/fixtures/meta-tags.md b/test/fixtures/meta-tags.md
@@ -0,0 +1,23 @@
+# Hello, World.
+
++------------------------------------------------+
+| Metadata                                       |
++------------------------+-----------------------+
+| og:type                | product               |
++------------------------+-----------------------+
+| product:availability   | In stock              |
++------------------------+-----------------------+
+| product:price.amount   | 3                     |
++------------------------+-----------------------+
+| product:price.currency | USD                   |
++------------------------+-----------------------+
+| twitter:card           | summary\_large\_image |
++------------------------+-----------------------+
+| twitter:label1         | Price                 |
++------------------------+-----------------------+
+| twitter:data1          | $3                    |
++------------------------+-----------------------+
+| twitter:label2         | Availability          |
++------------------------+-----------------------+
+| twitter:data2          | In stock              |
++------------------------+-----------------------+
diff --git a/test/fixtures/multiple-sections.md b/test/fixtures/multiple-sections.md
@@ -82,14 +82,16 @@ Find some of our favorite staff picks below:
 | Style   | highlight |
 +---------+-----------+
 
-+----------------------------------------------------------------------+
-| Metadata                                                             |
-+-------------+--------------------------------------------------------+
-| title       | Home \| Helix Project Boilerplate                      |
-+-------------+--------------------------------------------------------+
-| description | Use this template repository as the starting point for |
-|             | new Helix projects.                                    |
-+-------------+--------------------------------------------------------+
++-----------------------------------------------------------------------+
+| Metadata                                                              |
++--------------+--------------------------------------------------------+
+| title        | Home \| Helix Project Boilerplate                      |
++--------------+--------------------------------------------------------+
+| description  | Use this template repository as the starting point for |
+|              | new Helix projects.                                    |
++--------------+--------------------------------------------------------+
+| twitter:card | summary\_large\_image                                  |
++--------------+--------------------------------------------------------+
 
 [image0]: ./media_12637fbb67cddc5d293b20975e89028d919270ac0.jpeg?width=750&format=jpeg&optimize=medium
 
@@ -109,4 +111,4 @@ Find some of our favorite staff picks below:
 
 [image8]: ./media_1362767d232221ff20c67bc0694a8924d483687b1.jpeg?width=750&format=jpeg&optimize=medium
 
-[image9]: ./media_1a620138deb385f05412f4f96f9b18e454a769c76.jpeg?width=750&format=jpeg&optimize=medium
+[image9]: ./media_1a620138deb385f05412f4f96f9b18e454a769c76.jpeg?width=750&format=jpeg&optimize=medium
diff --git a/test/html2md.test.js b/test/html2md.test.js
@@ -107,6 +107,10 @@ describe('html2md Tests', () => {
   it('throws meaningful error when json-ld is too large', async () => {
     await assert.rejects(() => test('json-ld-too-large'), Error('metadata size limit exceeded'));
   });
+
+  it('convert a document with meta names and properties correctly', async () => {
+    await test('meta-tags');
+  });
 });
 
 describe('className to block type tests', () => {

diff --git a/test/post-deploy.test.js b/test/post-deploy.test.js
@@ -29,6 +29,8 @@ And more...newcontent
 +-------------------+-----------------------------------------+
 | description       | Content is: sharepoint-/main/index.docx |
 +-------------------+-----------------------------------------+
+| twitter:card      | summary\\_large\\_image                   |
++-------------------+-----------------------------------------+
 | serp-content-type | overlay                                 |
 +-------------------+-----------------------------------------+
 `;
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,6 +29,8 @@ And more...newcontent @@
     +-------------------+-----------------------------------------+
     | description       | Content is: sharepoint-/main/index.docx |
     +-------------------+-----------------------------------------+
+    | twitter:card      | summary\\_large\\_image                   |
+    +-------------------+-----------------------------------------+
     | serp-content-type | overlay                                 |
     +-------------------+-----------------------------------------+
     `;
@@ Expand Down @@