feat: handle more the meta tag with the property attribute (social networks markup)

Author: evilebottnawi

README.md

@@ -86,7 +86,7 @@ Supported tags and attributes:
 - the `xlink:href` attribute of the `use` tag
 - the `href` attribute of the `use` tag
 - the `href` attribute of the `link` tag when the `rel` attribute contains `stylesheet`, `icon`, `shortcut icon`, `mask-icon`, `apple-touch-icon`, `apple-touch-icon-precomposed`, `apple-touch-startup-image`
-- the `content` attribute of the `meta` tag when the `name` attribute is `msapplication-tileimage`, `msapplication-square70x70logo`, `msapplication-square150x150logo`, `msapplication-wide310x150logo`, `msapplication-square310x310logo`, `msapplication-config`
+- the `content` attribute of the `meta` tag when the `name` attribute is `msapplication-tileimage`, `msapplication-square70x70logo`, `msapplication-square150x150logo`, `msapplication-wide310x150logo`, `msapplication-square310x310logo`, `msapplication-config` or when the `property` attribute is `og:image`, `og:image:url`, `og:image:secure_url`, `og:audio`, `og:audio:secure_url`, `og:video`, `og:video:secure_url`, `vk:image`
 
 #### `Boolean`
 

src/utils.js

@@ -428,7 +428,6 @@ function getAttributeValue(attributes, name) {
   return attributes[lowercasedAttributes[name.toLowerCase()]];
 }
 
-// TODO refactor
 function scriptSrcFilter(tag, attribute, attributes) {
   let type = getAttributeValue(attributes, 'type');
 
@@ -484,29 +483,54 @@ function linkHrefFilter(tag, attribute, attributes) {
 function metaContentFilter(tag, attribute, attributes) {
   let name = getAttributeValue(attributes, 'name');
 
-  if (!name) {
-    return false;
-  }
+  if (name) {
+    name = name.trim();
+
+    if (!name) {
+      return false;
+    }
 
-  name = name.trim();
+    name = name.toLowerCase();
 
-  if (!name) {
-    return false;
+    const allowedNames = [
+      // msapplication-TileImage
+      'msapplication-tileimage',
+      'msapplication-square70x70logo',
+      'msapplication-square150x150logo',
+      'msapplication-wide310x150logo',
+      'msapplication-square310x310logo',
+      'msapplication-config',
+    ];
+
+    return allowedNames.includes(name);
   }
 
-  name = name.toLowerCase();
+  let property = getAttributeValue(attributes, 'property');
 
-  const allowedNames = [
-    // msapplication-TileImage
-    'msapplication-tileimage',
-    'msapplication-square70x70logo',
-    'msapplication-square150x150logo',
-    'msapplication-wide310x150logo',
-    'msapplication-square310x310logo',
-    'msapplication-config',
-  ];
+  if (property) {
+    property = property.trim();
+
+    if (!property) {
+      return false;
+    }
+
+    property = property.toLowerCase();
+
+    const allowedProperties = [
+      'og:image',
+      'og:image:url',
+      'og:image:secure_url',
+      'og:audio',
+      'og:audio:secure_url',
+      'og:video',
+      'og:video:secure_url',
+      'vk:image',
+    ];
+
+    return allowedProperties.includes(property);
+  }
 
-  return allowedNames.includes(name);
+  return false;
 }
 
 const defaultAttributes = [

test/__snapshots__/attributes-option.test.js.snap

@@ -280,7 +280,7 @@ describe("'attributes' option", () => {
               ],
             },
             {
-              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt|css|xml)$/i,
+              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt|webp|xml|webmanifest|mp3|mp4|css)$/i,
               loader: 'file-loader',
               options: { esModule: false, name: '[name].[ext]' },
             },
@@ -315,7 +315,7 @@ describe("'attributes' option", () => {
               ],
             },
             {
-              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt|css|xml)$/i,
+              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt|webp|xml|webmanifest|mp3|mp4|css)$/i,
               loader: 'file-loader',
               options: { esModule: true, name: '[name].[ext]' },
             },
@@ -350,7 +350,7 @@ describe("'attributes' option", () => {
               ],
             },
             {
-              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt|css|xml)$/i,
+              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt|webp|xml|webmanifest|mp3|mp4|css)$/i,
               loader: 'file-loader',
               options: { esModule: false, name: '[name].[ext]' },
             },
@@ -385,7 +385,7 @@ describe("'attributes' option", () => {
               ],
             },
             {
-              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt|css|xml)$/i,
+              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|ogg|pdf|vtt|webp|xml|webmanifest|mp3|mp4|css)$/i,
               loader: 'file-loader',
               options: { esModule: true, name: '[name].[ext]' },
             },

test/__snapshots__/esModule-option.test.js.snap

@@ -386,4 +386,24 @@ <h2>An Ordered HTML List</h2>
 <meta name="msapplication-TileImage" content="./image.png">
 <meta name="msapplication-config" content="./browserconfig.xml">
 <meta name="theme-color" content="#ffffff">
-<meta content="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico" name="msapplication-task">
+<meta content="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico" name="msapplication-task">
+
+<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
+<meta property="og:type" content="article" />
+<meta property="og:title" content="When Great Minds Don’t Think Alike" />
+<meta property="og:description" content="How much does culture influence creative thinking?" />
+<meta property="og:image" content="./image.png" />
+<meta property="og:image:url" content="./image.png" />
+<meta property="og:image:secure_url" content="./image.png" />
+
+<meta property="og:audio" content="./sound.mp3" />
+<meta property="og:audio:secure_url" content="./sound.mp3" />
+<meta property="og:audio:type" content="audio/mpeg" />
+
+<meta property="og:video" content="./video.mp4" />
+<meta property="og:video:secure_url" content="./video.mp4" />
+<meta property="og:video:type" content="video/mp4" />
+<meta property="og:video:width" content="400" />
+<meta property="og:video:height" content="300" />
+
+<meta property="vk:image" content="./image.png" />