mirror of
https://github.com/KevinMidboe/inline-html.git
synced 2025-10-29 17:40:29 +00:00
Added README and .travis files.
This commit is contained in:
88
README.md
Normal file
88
README.md
Normal file
@@ -0,0 +1,88 @@
|
||||
# inline-html
|
||||
|
||||
Embed local assets into an HTML document.
|
||||
|
||||
[]()
|
||||
[]()
|
||||
[]()
|
||||
[]()
|
||||
|
||||
## 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.
|
||||
Reference in New Issue
Block a user