README.md 1.85 KB
Newer Older
Fred Chasen's avatar
Fred Chasen committed
1
Paged.js - Paged Media Tools
Fred Chasen's avatar
Fred Chasen committed
2
3
===========

Fred Chasen's avatar
Fred Chasen committed
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
## NPM Module
```sh
$ npm install pagedjs
```

```js
import { Chunker, Styler} from 'pagedjs';

let styles = new Styler();
let styleText = await styles.add("path/to/css/file.css");

let chunker = new Chunker(DOMContent, document.body, styles).then((flow) => {
	console.log("Rendered", flow.total, "pages.");
})
```

Fred Chasen's avatar
Fred Chasen committed
20
## Polyfill
Fred Chasen's avatar
Fred Chasen committed
21

Fred Chasen's avatar
Fred Chasen committed
22
Add the the `paged.polyfill.js` script to replace all `@page` css and render the html page with the Paged Media styles applied:
Fred Chasen's avatar
Fred Chasen committed
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

```html
<script src="https://s3.amazonaws.com/pagedmedia/pagedjs/dist/paged.polyfill.js"></script>
```

Test with Aurorae: [https://s3.amazonaws.com/pagedmedia/pagedjs/examples/aurorae/index.html](https://s3.amazonaws.com/pagedmedia/pagedjs/examples/aurorae/index.html).

## Chunker
Chunks up a document into paged media flows and applies print classes.

Process the first 50 pages of Moby Dick: [https://s3.amazonaws.com/pagedmedia/pagedjs/examples/index.html](https://s3.amazonaws.com/pagedmedia/pagedjs/examples/index.html).

Upload and chunk an Epub (using Epub.js): [https://s3.amazonaws.com/pagedmedia/pagedjs/examples/epub.html](https://s3.amazonaws.com/pagedmedia/examples/epub.html).

## Styler
Converts `@page` css to classes, and applies counters and content.

Fred Chasen's avatar
Fred Chasen committed
40
Test styles for Aurorae: [https://s3.amazonaws.com/pagedmedia/pagedjs/examples/styler.html](https://s3.amazonaws.com/pagedmedia/pagedjs/examples/styler.html).
Fred Chasen's avatar
Fred Chasen committed
41
42
43
44

### CLI

Command line interface to render out PDFs of HTML files using Puppeteer: [https://gitlab.pagedmedia.org/polyfills/pagedjs-cli](https://gitlab.pagedmedia.org/polyfills/pagedjs-cli).
Fred Chasen's avatar
Fred Chasen committed
45
46
47
48
49
50
51
52

## Setup
Install dependencies
```sh
$ npm install
```

## Development
Fred Chasen's avatar
Fred Chasen committed
53
Run the local dev-server with livereload and autocompile on [http://localhost:8080/](http://localhost:8080/)
Fred Chasen's avatar
Fred Chasen committed
54
55
56
```sh
$ npm start
```
Fred Chasen's avatar
Fred Chasen committed
57

Fred Chasen's avatar
Fred Chasen committed
58
## Deployment
Fred Chasen's avatar
Fred Chasen committed
59
Build the `dist` output
Fred Chasen's avatar
Fred Chasen committed
60
```sh
Fred Chasen's avatar
Fred Chasen committed
61
$ npm run prepare
Fred Chasen's avatar
Fred Chasen committed
62
```