UNPKG

3.68 kBMarkdownView Raw
1# Amperize
2
3[![Version npm](http://img.shields.io/npm/v/amperize.svg?style=flat)](http://browsenpm.org/package/amperize)
4[![Build Status](http://img.shields.io/travis/jbhannah/amperize/master.svg?style=flat)](https://travis-ci.org/jbhannah/amperize)
5[![Dependencies](https://img.shields.io/david/jbhannah/amperize.svg?style=flat)](https://david-dm.org/jbhannah/amperize)
6[![Coverage Status](http://img.shields.io/coveralls/jbhannah/amperize/master.svg?style=flat)](https://coveralls.io/r/jbhannah/amperize?branch=master)
7
8[AMP](https://github.com/ampproject/amphtml) up your plain HTML. Replaces regular HTML tags with their equivalent
9[AMP components](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-components.md).
10
11## Installation
12
13`npm install amperize`
14
15## Node.js
16
17```
18var Amperize = require('amperize');
19
20var html = '<img src="https://example.com/image.jpg" />';
21
22var amperize = new Amperize();
23
24amperize.parse(html, function (error, result) {
25 if (error) {
26 // do something with error
27 return new Error(err);
28 }
29 // do something with result
30 return result;
31});
32
33```
34
35## Restrictions
36
37Amperize is build to convert the `<body>` part of your HTML. It will **not** create the AMP boilerplate and will **not** add the required `<script>` for each component.
38
39
40## Currently supported AMP HTML components
41
42### `<amp-img>`
43
44**[`<amp-img>` reference](https://amp.dev/documentation/examples/components/amp-img/)**
45
46Amperize will convert common `<img>` tags into AMP HTML conform `<amp-img>` tags. With the sub-dependencies [`probe-image-size](https://github.com/nodeca/probe-image-size) and [`image-size`](https://github.com/image-size/image-size), Amperize will fetch the necessary `width` and `height` properties for the given image.
47
48It will fall back to the default values `width: 600` and `height: 400`, if the dimensions couldn't be fetched.
49
50If any other error occurs (eg. missing `src` property), Amperize will not transform the tag and return the original.
51
52### `<amp-anim>`
53
54**[`<amp-anim>` reference](https://amp.dev/documentation/examples/components/amp-anim/)**
55
56When the `<img>` tag that needs to be transformed, is a `.gif` animation, Amperize will convert it into `<amp-anim>`, following the same rules as for `<amp-img>`.
57
58### `<amp-iframe>`
59
60**[`<amp-iframe>` reference](https://amp.dev/documentation/examples/components/amp-iframe/)**
61
62Amperize converts iFrames like embedded videos from Vimeo, etc. into `<amp-iframe>` tags. If the `src` attribute is an `http` URL it will be switched to `https` in order to pass AMP validation.
63
64### `<amp-youtube>`
65
66**[`<amp-youtube>` reference](https://amp.dev/documentation/components/amp-youtube)**
67
68Amperize converts iFrames with a "YouTube" URL into `<amp-youtube>` tags. If the `src` attribute is an `http` URL it will be switched to `https` in order to pass AMP validation.
69
70### `<amp-audio>`
71
72**[`<amp-audio>` reference](https://amp.dev/documentation/examples/components/amp-audio/)**
73
74Converts HTML `<audio>` into `<amp-audio>`. If the `src` attribute is an `http` URL it will be switched to `https` in order to pass AMP validation.
75
76## Development
77
78```
79git clone git@github.com:jbhannah/amperize.git
80
81cd amperize
82
83npm install
84
85npm run watch
86```
87
88`npm run watch` will restart the tests on changes.
89
90### Tests
91
92Running the test:
93
94`npm run test`
95
96Code coverage:
97
98`npm run coverage`
99
100## Credits
101
102Borrows heavily from [Minimize](https://github.com/Swaagie/minimize), especially the constructor, `parse`,
103`amperizer`, and `traverse` functions in the `Amperize` object, and the unit
104tests. Copyright (c) 2013 Moveo - Martijn Swaagman. Used under the MIT License
105(see `LICENSE`).