Added README and .travis files.

This commit is contained in:
Alexandre Gigliotti
2015-08-05 15:36:27 -07:00
parent 4d9eeaa926
commit 070fc331e7
2 changed files with 91 additions and 0 deletions

88
README.md Normal file
View File

@@ -0,0 +1,88 @@
# inline-html
Embed local assets into an HTML document.
[![npm](https://img.shields.io/npm/v/inline-html.svg)]()
[![Travis](https://img.shields.io/travis/panosoft/inline-html.svg)]()
[![David](https://img.shields.io/david/panosoft/inline-html.svg)]()
[![npm](https://img.shields.io/npm/dm/inline-html.svg)]()
## Installation
npm install inline-html
## Usage
This:
var inlineHtml = require('inline-html');
inlineHtml('path/to/file.html').then(function (html) {
...
});
Turns this:
<link rel="stylesheet/less" href="main.less" />
<style>
div { background-image: url('path/to/file'); }
</style>
<div style="background-image: url('path/to/file');"></div>
<img src="path/to/file" />
Into this:
<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`
@import (inline) 'main.css';
div { background-image: url('path/to/file'); }
`main.css`
@font-face { src: url('path/to/file'); }
## API
### inlineHtml( filename [, options] )
Reads an HTML file and inlines all of the following that reference local assets:
- LESS stylesheets - The LESS is compiled and the result is inlined within a `<style>` element.
<link rel="stylesheet/less" href="main.less"/> -> <style>...</style>
- 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.
- `options`
- `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`.
- `true`: promise is resolved with an instance of `Results`
- `false`: promise is resolved with `html`
#### Results object
- `html` - The inlined html
- `files` - An array of filenames of the inlined local assets.