Simple converter from HTML into AMP(Accelerated Mobile Pages)
npm install html2amp-vulcan- 
- !node
html2amp is simple converter from HTML into AMP(Accelerated Mobile Pages).
This library allow you to convert simple html into AMP. What does the simple mean ?
As you know AMP has many restrictions to make it such as ...
- Some html tags are needed to be replaced by special one (
- CSS should be less than 50,000 bytes and it should be as inline
You can see full Specification here.
AMP HTML Specification
It could be hard to convert any html into AMP perfectly but if it's simple one it's possible to convert automatically.
For example...
- Tech blog
- Corporate news blog
So this library's target is To convert simple html into AMP.
``bash`
$ npm install html2amp --save
`nodejs
const html2amp = require('html2amp')
const html =
const options = {}
const amp = html2amp(html, options)
console.log(amp) // amp string
`
| name | default value | note |
| ------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| cwd | . | image / styles base path |amp-analytics
| gaConfigPath | | config json path for google analytics |src
| serviceWorker | | attributes of amp-install-serviceworker
e.g. , data-iframe-src |
| optimize | false | if true, this module will optimize the html by using @ampproject/toolbox-optimizer |
| cssPlugins | [] | you can add custom converter for css. |
| htmlPlugins | [] | you can add custom converter for css. |
CSS Plugin allow you to add custom converter for CSS.
`javascript
/**
* elementString :
* e.g. ''
* e.g. ''
* cssText :
* e.g. '.test{ color: red; }'
* options : module options
**/
const plugin = (elementString, cssText, options) => {
// you need to return cssText which you modified.
return cssText.replace('red', '#ccc')
}
// options
const options = {
cssPlugins: [plugin],
}
`
HTML Plugin allow you to add custom converter for HTML.
`javascript
/**
* htmlString :
* e.g. 'Normal HTML
'
* options : module options
**/
const plugin = (htmlString, options) => {
// you need to return htmlString which you modified.
return htmlString.replace('Normal', 'AMP')
}
// options
const options = {
htmlPlugins: [plugin],
}
`
This library ...
- add if it does not existamp
- add attribute to the
- add meta if it does not exist
- viewport should be
- replace all external css files with one