-
Notifications
You must be signed in to change notification settings - Fork 0
/
README.md
121 lines (86 loc) · 4.16 KB
/
README.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
# to-amp
[![codebeat][codebeat-src]][codebeat-href]
[![David-DM][david-dm-src]][david-dm-href]
[![Standard JS][standard-js-src]][standard-js-href]
[![Circle CI][circle-ci-src]][circle-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![size][bundlephobia-src]][bundlephobia-href]
> Google AMP (Accelerated Mobile Pages) utility module. ALPHA-not stable
## Setup
<!-- - Add `to-amp` dependency using yarn or npm to your project
```js
yarn add to-amp
```
## Example
```js
const ToAMP = require('to-amp')
ToAMP.loadHtml(someHtmlString) // loads html into cherio
ToAMP.loadImages() // seperate images for tansformation
// easy access to image data, each array containing the image data in the order they appear in the html. Set by ToAMP.loadImages()
ToAMP.imageElms // the dom element extracted
ToAMP.imgAttribs // the attributes of each image in object
ToAMP.imgSrcs // the srcs
// do some processing such as get the width and hieghts of the images
let addAttrbs = await getImageAttrs(ToAMP.imgAttribs) // your custom function to get height and widths if they do not exist
ToAMP.convertImages(addAttrbs) // convert imgs to amp-img with height and widths
return ToAMP.toHTML() // dump the html in the body
```
## API
### Options
```js
const options = {
version, // the amp version default: 'v0'
componentVersion, // the default amp component version default: 'v0'
components, // list of used components, scripts loaded default:[]
imgLayout, // deafult amp-image layout applied to converted <img> tags default:'responsive'
svgLayout // deafult amp-image layout applied to converted <img> tags with svg srcs default:'intrinsic'
}
ToAMP.setDefaultOpts(options)
```
### Properties
```js
ToAMP.imageElms // the dom element extracted => after ToAMP.loadImages()
ToAMP.imgAttribs // the attributes of each image in object => after ToAMP.loadImages()
ToAMP.imgSrcs // the srcs => after ToAMP.loadImages()
ToAMP.$ // cherio instance loaded with html => after ToAMP.loadHtml(someHtmlString)
```
### Functions
```js
static setDefaultOpts (options = {})
static toHTML (html = false, addlAtts = false, scope = SCOPE)
static loadHtml (html, setDefault = true, scope = SCOPE)
static loadImages (setDefault = true, scope = SCOPE)
static convertImages (addlAtts = false, scope = SCOPE)
static imgToAmpImg ({ el, attribs }, addlAttribs)
static htmlPageToAmpHtmlPage (html, components = AMP.components)
``` -->
## Development
- Clone this repository
- Install dependencies using `yarn install` or `npm install`
- Do a PR
## TODO
- refactor to smaller parts
- remove cherio in favor of html-sanitize
- pass html-sanitize options
## License
[MIT License](./LICENSE)
Copyright (c) Randy J. Houlahan
<!-- Badges -->
[david-dm-src]: https://david-dm.org/randyhoulahan/to-amp/status.svg?style=flat-square
[david-dm-href]: https://david-dm.org/randyhoulahan/to-amp
[standard-js-src]: https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square
[standard-js-href]: https://standardjs.com
[circle-ci-src]: https://img.shields.io/circleci/project/github/randyhoulahan/to-amp.svg?style=flat-square
[circle-ci-href]: https://circleci.com/gh/randyhoulahan/to-amp
[codecov-src]: https://img.shields.io/codecov/c/github/randyhoulahan/to-amp.svg?style=flat-square
[codecov-href]: https://codecov.io/gh/randyhoulahan/to-amp
[npm-version-src]: https://img.shields.io/npm/dt/to-amp.svg?style=flat-square
[npm-version-href]: https://npmjs.com/package/to-amp
[npm-downloads-src]: https://img.shields.io/npm/v/to-amp/latest.svg?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/to-amp
[codebeat-src]: https://codebeat.co/badges/52e4e261-5b9d-4ab1-9871-701a4fcd161d
[codebeat-href]: https://codebeat.co/projects/github-com-randyhoulahan-to-amp-master
[bundlephobia-src]: https://badgen.net/bundlephobia/minzip/to-amp
[bundlephobia-href]: https://bundlephobia.com/result?p=to-amp@1.0.0-beta.5