Merge pull request #3 from kevincolten/amp

Scrum · web-flow · commit a0cf52a42956 · 2019-09-20T12:00:59.000+03:00
[FEATURE] Google AMP amp-img support
diff --git a/README.md b/README.md
@@ -22,6 +22,20 @@ After:
 </picture>
 ```
 
+Also supports [`<amp-img>`](https://amp.dev/documentation/components/amp-img/)
+
+Before:
+```html
+<amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png"></amp-img>
+```
+
+After:
+```html
+<amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png.webp">
+    <amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png" fallback=""></amp-img>
+</amp-img>
+```
+
 ## Install
 
 > npm i posthtml posthtml-webp
diff --git a/lib/index.js b/lib/index.js
@@ -15,6 +15,11 @@ module.exports = function (options) {
       return getPicture(imgNode, options)
     })
 
+    tree.match({ tag: 'amp-img' }, function (imgNode) {
+      if (imgNode.skip) return imgNode
+      return getAmpPicture(imgNode, options)
+    })
+
     return tree
   }
 }
@@ -29,6 +34,32 @@ function removeExtension (filename) {
   }
 }
 
+function getAmpPicture (imgNode, options) {
+  imgNode.skip = true
+
+  var src = imgNode.attrs.src
+  if (options.replaceExtension) {
+    src = removeExtension(src)
+  }
+  src += '.webp'
+  return {
+    tag: 'amp-img',
+    attrs: {
+      ...imgNode.attrs,
+      src
+    },
+    content: [
+      {
+        ...imgNode,
+        attrs: {
+          ...imgNode.attrs,
+          fallback: ''
+        }
+      }
+    ]
+  }
+}
+
 function getPicture (imgNode, options) {
   imgNode.skip = true
 
diff --git a/test/fixtures/extension.expected.html b/test/fixtures/extension.expected.html
@@ -2,5 +2,6 @@
 <html>
     <body>
         <picture><source type="image/webp" srcset="photo.webp"><img src="photo.png"></picture>
+        <amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.webp"><amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png" fallback=""></amp-img></amp-img>
     </body>
 </html>
diff --git a/test/fixtures/extension.html b/test/fixtures/extension.html
@@ -2,5 +2,6 @@
 <html>
     <body>
         <img src="photo.png">
+        <amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png"></amp-img>
     </body>
 </html>
diff --git a/test/fixtures/no-extension.expected.html b/test/fixtures/no-extension.expected.html
@@ -2,5 +2,6 @@
 <html>
     <body>
         <picture><source type="image/webp" srcset="photo.png.webp"><img src="photo.png"></picture>
+        <amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png.webp"><amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png" fallback=""></amp-img></amp-img>
     </body>
 </html>
diff --git a/test/fixtures/no-extension.html b/test/fixtures/no-extension.html
@@ -2,5 +2,6 @@
 <html>
     <body>
         <img src="photo.png">
+        <amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png"></amp-img>
     </body>
 </html>
