diff --git a/.gitignore b/.gitignore index 78ed38d..2ba3574 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ node_modules -test/test.html \ No newline at end of file +.idea +*.log +test/test.html diff --git a/README.md b/README.md index 8599c90..23fb6ce 100644 --- a/README.md +++ b/README.md @@ -2,39 +2,65 @@ Inline local assets referenced in an HTML document. -[![npm](https://img.shields.io/npm/v/inline-html.svg)]() -[![npm](https://img.shields.io/npm/l/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)]() +[![npm version](https://img.shields.io/npm/v/inline-html.svg)](https://www.npmjs.com/package/inline-html) +[![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)](https://travis-ci.org/panosoft/inline-html) +[![David](https://img.shields.io/david/panosoft/inline-html.svg)](https://david-dm.org/panosoft/inline-html) +[![npm downloads](https://img.shields.io/npm/dm/inline-html.svg)](https://www.npmjs.com/package/inline-html) ## Installation - npm install inline-html +```sh +npm install inline-html +``` ## Usage -This: +Reads an HTML file, embeds the contents of local assets that are referenced within that file, and returns the inlined `html` string. + +The following elements and data types are inlined: + +- LESS stylesheets - The LESS is compiled and the result is inlined within a ` +
+ + ``` + +- `main.less` + + ```css + @import (inline) 'main.css'; + div { background-image: url('path/to/file'); } + ``` + +- `main.css` + + ```css + @font-face { src: url('path/to/file'); } + ``` + +We can use `inline-html`: ```js var inlineHtml = require('inline-html'); -inlineHtml('path/to/file.html').then(function (html) { - ... + +inlineHtml('index.html').then(function (html) { + // ... }); ``` -Turns this: - -```html - - -
- -``` - -Into this: +To create the following `html` string: ```html +Reads an HTML file and embeds referenced local assets into the HTML. -- 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. +Returns a `Promise` that is fulfilled with an `html` string or an instance of [`Results`](#Results) depending on the value of `options.verbose`. - url('file.ext') -> url('data:...') - -- Images - The source path is replaced with a datauri. - - -> - -Returns a `Promise` that is fulfilled with an `html` string or a `results` object depending on the value of `options.verbose`. - -#### Arguments +__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` + - `verbose` - A boolean that determines the promises fulfillment value. Supported values are: + - `true`: An instance of [`Results`](#Results). + - `false`: An `html` string. (_default_) -#### Results object + +__Results__ The `Promise` returned by this function is optionally fulfilled with a `results` object that has the following properties: - `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.