Updated README.

This commit is contained in:
Alexandre Gigliotti
2015-08-17 09:17:50 -07:00
parent dff5f1160b
commit 5b88484888
2 changed files with 63 additions and 56 deletions

2
.gitignore vendored
View File

@@ -1,2 +1,4 @@
node_modules node_modules
.idea
*.log
test/test.html test/test.html

103
README.md
View File

@@ -2,28 +2,31 @@
Inline local assets referenced in an HTML document. Inline local assets referenced in an HTML document.
[![npm](https://img.shields.io/npm/v/inline-html.svg)]() [![npm version](https://img.shields.io/npm/v/inline-html.svg)](https://www.npmjs.com/package/inline-html)
[![npm](https://img.shields.io/npm/l/inline-html.svg)]() [![npm license](https://img.shields.io/npm/l/inline-html.svg)](https://www.npmjs.com/package/inline-html)
[![Travis](https://img.shields.io/travis/panosoft/inline-html.svg)]() [![Travis](https://img.shields.io/travis/panosoft/inline-html.svg)](https://travis-ci.org/panosoft/inline-html)
[![David](https://img.shields.io/david/panosoft/inline-html.svg)]() [![David](https://img.shields.io/david/panosoft/inline-html.svg)](https://david-dm.org/panosoft/inline-html)
[![npm](https://img.shields.io/npm/dm/inline-html.svg)]() [![npm downloads](https://img.shields.io/npm/dm/inline-html.svg)](https://www.npmjs.com/package/inline-html)
## Installation ## Installation
```sh
npm install inline-html npm install inline-html
```
## Usage ## Usage
This: Reads an HTML file, embeds the contents of local assets that are referenced within that file, and returns the inlined `html` string.
```js The following elements and data types are inlined:
var inlineHtml = require('inline-html');
inlineHtml('path/to/file.html').then(function (html) {
...
});
```
Turns this: - LESS stylesheets - The LESS is compiled and the result is inlined within a `<style>` element.
- CSS url data types - The reference path is replaced with a datauri. These can be used in linked stylesheets, style elements, and element style attributes.
- Images - The source path is replaced with a datauri.
Assuming we have the following files:
- `index.html`
```html ```html
<link rel="stylesheet/less" href="main.less"/> <link rel="stylesheet/less" href="main.less"/>
@@ -34,22 +37,6 @@ Turns this:
<img src="path/to/file"/> <img src="path/to/file"/>
``` ```
Into this:
```html
<style>
@font-face { src: url('data:...'); }
div { background-image: url('data:...'); }
</style>
<style>
div { background-image: url('data:...'); }
</style>
<div style="background-image: url('data:...');"></div>
<img src="data:..."/>
```
Where:
- `main.less` - `main.less`
```css ```css
@@ -63,38 +50,56 @@ div { background-image: url('path/to/file'); }
@font-face { src: url('path/to/file'); } @font-face { src: url('path/to/file'); }
``` ```
We can use `inline-html`:
```js
var inlineHtml = require('inline-html');
inlineHtml('index.html').then(function (html) {
// ...
});
```
To create the following `html` string:
```html
<style>
@font-face { src: url('data:...'); }
div { background-image: url('data:...'); }
</style>
<style>
div { background-image: url('data:...'); }
</style>
<div style="background-image: url('data:...');"></div>
<img src="data:..."/>
```
## API ## API
- [`inlineHtml`](#inlineHtml)
---
<a name="inlineHtml"/>
### inlineHtml ( filename [, options] ) ### inlineHtml ( filename [, options] )
Reads an HTML file and embeds the contents of local assets referenced by the following elements and data types: Reads an HTML file and embeds referenced local assets into the HTML.
- LESS stylesheets - The LESS is compiled and the result is inlined within a `<style>` element. Returns a `Promise` that is fulfilled with an `html` string or an instance of [`Results`](#Results) depending on the value of `options.verbose`.
<link rel="stylesheet/less" href="main.less"/> -> <style>...</style> __Arguments__
- CSS url data types - The reference path is replaced with a datauri. These can be used in linked stylesheets, style elements, and element style attributes.
url('file.ext') -> url('data:...')
- Images - The source path is replaced with a datauri.
<img src="file.ext"/> -> <img src="data:..."/>
Returns a `Promise` that is fulfilled with an `html` string or a `results` object depending on the value of `options.verbose`.
#### Arguments
- `filename` - The filename of the HTML file to be inlined. Relative file paths are resolved relative to the filename directory. - `filename` - The filename of the HTML file to be inlined. Relative file paths are resolved relative to the filename directory.
- `options` - `options`
- `less` - An object containing LESS options to pass to the less compiler. Defaults to `{}`. - `less` - An object containing LESS options to pass to the less compiler. Defaults to `{}`.
- `verbose` - A boolean that determines the promises fulfillment value. Defaults to `false`. - `verbose` - A boolean that determines the promises fulfillment value. Supported values are:
- `true`: promise is resolved with an instance of `Results` - `true`: An instance of [`Results`](#Results).
- `false`: promise is resolved with `html` - `false`: An `html` string. (_default_)
#### Results object <a name="Results"/>
__Results__
The `Promise` returned by this function is optionally fulfilled with a `results` object that has the following properties: The `Promise` returned by this function is optionally fulfilled with a `results` object that has the following properties:
- `html` - The inlined html - `html` - The inlined html
- `files` - An array of filenames of the inlined local assets. - `files` - An array of filenames for the local assets that were inlined.