tomoyukikashiro / html2amp Goto Github PK

My images are with the wrong styles when in AMP mode. I understand that some css are imported when using AMP and all the !important are removed.

There's any way I can edit the css for my amp? Or should I implement my css in a different way (e.g avoid using width: 80% for images) to make my styles the same when using AMP?

Thanks for the amazing plugin :)

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• fix(deps): update dependency @ampproject/toolbox-optimizer to v2.9.0
• fix(deps): update dependency clean-css to v5.3.2
• fix(deps): update dependency data-uri-to-buffer to v5
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update dependency axios to v0.27.2
• fix(deps): update dependency cheerio to v1.0.0-rc.12
• fix(deps): update dependency data-uri-to-buffer to v3.0.1
• chore(deps): update dependency eslint-plugin-import to v2.28.1
• chore(deps): update dependency eslint to v8
• chore(deps): update dependency eslint-config-standard to v17
• chore(deps): update dependency eslint-plugin-promise to v6
• chore(deps): update dependency jest to v29
• chore(deps): update node.js to v17
• fix(deps): update dependency axios to v1
• fix(deps): update dependency probe-image-size to v7
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Hi,

We are wondering if there are any plans to make html2amp more lenient, and discard invalid images instead of exiting with a probe-image-size failure.

We forked html2amp to do just that, because we are not in full control of the content our users may copy paste into our pages which we need to generate amp pages on.

Our change:
master...innovation-love:master

We'd like to amend the change and submit a PR if there are indeed plans to make html2amp more lenient for use cases like ours.

Thanks

Problem

• html containing more than allowed custom styles is converted to invalid amp

Suggestions

• to my mind it would be great to reduce custom styles automatically to the allowed length

References

• https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size

Hi,

I'm encountering an issue when using this via gatsby-plugin-html2amp (wasn't sure where to report it, decided here made more sense as gatsby-plugin-html2amp just bootstraps this).

It stretches out the image and leaves the blurred background behind it. On top of that, the original base64 from gatsby-image stays too and is stored in a span tag that ends up being larger than AMP spec allows for.

Here's an example broken page - https://madelinemiller.dev/amp/blog/worldedit-mod-blocks/

Running this through AMP test produces errors relating to the span tags in the responsive gatsby image wrapper. I feel that this whole wrapper can just be removed, but that doesn't fix the stretched image issue.

I'm using gatsby-plugin-html2amp, and am encountering an issue where Gatsby adds a type="image/webp to the WebP <source> tags.

type is not a valid field for amp-img, so therefore should be removed.

Problem
html containing forms is converted to invalid amp

Suggestions

• short term, it would be great to strip all forms
• long term, it would be great to convert html form into amp-form

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Problem

• html containing meta tags with disallowed attributes is converted to invalid amp

References

• https://github.com/ampproject/amphtml/blob/master/validator/validator-main.protoascii
• https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags

Code sample
https://codesandbox.io/s/html2-amp-meta-7xem2?fontsize=14&previewwindow=tests

html containing

<meta http-equiv="cleartype" content="on" />

fails with error

The attribute 'http-equiv' may not appear in tag 'meta name= and content='.

We recently received the following issues detected by Google Search Console

1.) An AMP component 'amp-install-serviceworker' is using an invalid version. Use a valid version of this AMP component.

2.) An AMP component 'amp-form' is using an invalid version. Use a valid version of this AMP component.

Upon checking, we have the following Console errors in our AMP Pages:

Failed to load resource: the server responded with a status of 404 ()
https://cdn.ampproject.org/v0/amp-form-undefined.mjs

Failed to load resource: the server responded with a status of 404 ()
https://cdn.ampproject.org/v0/amp-install-serviceworker-undefined.mjs

The "undefined" is supposed to be a version.

Upon further digging, there are recent changes to the @ampproject/toolbox-optimizer package that might be related to the issue.

While using html2amp with Gatsby, I found an issue, that html2amp is not supporting Amp Stories (https://www.ampproject.org/stories/).

Here's a quick update: https://github.com/lvisockas/html2amp/tree/master

Hey! It would be great to support transformations for <picture> tag, especially when gatsby-plugin-html2amp project depends on this core plugin. Also it will be very useful, because gatsby-image use internally, not .

Chip-Chat

First, thanks for this great solution for amplify!
Is possible to support img with data-src attribue?
If PR is welcomed, I'd like to contribute this project 😇

Expected Behavior

Process of converting img to amp-img will set src from original src or data-src.

Actual Behavior

According to this-line-of-code, it causes unhandled error when the img without src even with data-src attribute.

Steps to Reproduce the Problem

const html2amp = require('html2amp')
const html = `
<img data-src="https://images.unsplash.com/photo-1523171067267-bb96f975c4bb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" />`
const amp = html2amp(html, {})
console.log(amp)

I'm using the gatsby-plugin-html2amp plugin that is dependent upon this package. My site started getting AMP errors in a recent update because Gatsby is adding the 'loading' attribute to images.

This package ensures the required amp-img attributes are present but also adds any other attributes to the transformed image via the spread operator.

utils.js // line 62
const _attrs = { src: url, alt, width: size.width, height: size.height, layout: 'responsive', ...attrs }

Could the following be added on the next line before mapping the keys to the new attributes object:

try {
  delete _attrs['loading'] 
} catch (err) {
  console.error('Loading property is an "own non-configurable property"')
}

The try/catch is probably unnecessary. Delete should only throw an exception in strict mode if the property was set to non-configurable, which shouldn't apply here.

Problem

• amp generation throws "RangeError [ERR_BUFFER_OUT_OF_BOUNDS]: Attempt to write outside buffer bounds"

Steps to reproduce

• generate amp for html containing image from image-size/image-size#198

Considerations

• per my understanding that is a known issue of image-size library (image-size/image-size#94). it would be great to consider switching to an alternative library like probe-image-size, and/or
• do not break amp generation if image size can not be detected. if size can not be detected, then either remove the image from amp or provide a default size for it

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I don't think it's a perfect solution but it might help someone else.

Here is the diff that solved my problem:

diff --git a/node_modules/html2amp/lib/utils.js b/node_modules/html2amp/lib/utils.js
index e17e685..a67a513 100644
--- a/node_modules/html2amp/lib/utils.js
+++ b/node_modules/html2amp/lib/utils.js
@@ -51,7 +51,7 @@ const normalizeSrc = (src, srcset) => {
 const remoteImgCaches = new Map()
 const srcNode = async (cwd, attributes) => {
   const { src, alt = '', ...attrs } = attributes
-  const url = normalizeUrl(normalizeSrc(src, attributes.srcset))
+  const url = normalizeUrl(normalizeSrc(src, attributes.srcset || attributes['data-srcset']))
   let size = { width: null, height: null }
   let result = null
   if (url.startsWith('http')) {

This issue body was partially generated by patch-package.

Problem

• amp generation fails when input html contains a link with invalid href

Steps to reproduce

case 1. href points to a resource that does not exist

const path = require('path')
const html2amp = require('html2amp')
const html = `<html>
<head>
<link rel="stylesheet" href="/not/found.css" />
</head>
<body>
<h1>html2amp input</h1>
</body>
</html>`
const options = { cwd: path.join(process.cwd())}
const amp = html2amp(html, options)
amp.then(value => console.log(value))

case 2. href contains a query param and points to a resource that exists in a local file system

const path = require('path')
const html2amp = require('html2amp')
const html = `<html>
<head>
<link rel="stylesheet" href="/assets/css/test.css?x=1" />
</head>
<body>
<h1>html2amp input</h1>
</body>
</html>`
const options = { cwd: path.join(process.cwd())}
const amp = html2amp(html, options)
amp.then(value => console.log(value))

Suggestions

• it would be great to not break amp generation and instead of it notify the operator (write a warning) once href contains invalid url
• allow link href to have query parameters once href points to a resource that exists on the file system

When you try to update module which use this module you may see this error.

npm ERR! path /Users/xxxx/xxx/gatsby-plugin-html2amp/node_modules/html2amp
npm ERR! code EISGIT
npm ERR! git /Users/xxxx/xxx/gatsby-plugin-html2amp/node_modules/html2amp: Appears to be a git repo or submodule.
npm ERR! git     /Users/xxxx/xxx/gatsby-plugin-html2amp/node_modules/html2amp
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxx/.npm/_logs/2019-08-04T01_21_33_089Z-debug.log

For more detail, add `--debug` to the command

Try uninstall/install to clean up.

$ npm uninstall html2amp
$ npm install html2amp --save