mirror of
https://github.com/KevinMidboe/inline-html.git
synced 2025-10-29 17:40:29 +00:00
Updated README.
This commit is contained in:
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,2 +1,4 @@
|
|||||||
node_modules
|
node_modules
|
||||||
|
.idea
|
||||||
|
*.log
|
||||||
test/test.html
|
test/test.html
|
||||||
115
README.md
115
README.md
@@ -2,39 +2,65 @@
|
|||||||
|
|
||||||
Inline local assets referenced in an HTML document.
|
Inline local assets referenced in an HTML document.
|
||||||
|
|
||||||
[]()
|
[](https://www.npmjs.com/package/inline-html)
|
||||||
[]()
|
[](https://www.npmjs.com/package/inline-html)
|
||||||
[]()
|
[](https://travis-ci.org/panosoft/inline-html)
|
||||||
[]()
|
[](https://david-dm.org/panosoft/inline-html)
|
||||||
[]()
|
[](https://www.npmjs.com/package/inline-html)
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
npm install inline-html
|
```sh
|
||||||
|
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.
|
||||||
|
|
||||||
|
The following elements and data types are inlined:
|
||||||
|
|
||||||
|
- 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
|
||||||
|
<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"/>
|
||||||
|
```
|
||||||
|
|
||||||
|
- `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
|
```js
|
||||||
var inlineHtml = require('inline-html');
|
var inlineHtml = require('inline-html');
|
||||||
inlineHtml('path/to/file.html').then(function (html) {
|
|
||||||
...
|
inlineHtml('index.html').then(function (html) {
|
||||||
|
// ...
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
Turns this:
|
To create the following `html` string:
|
||||||
|
|
||||||
```html
|
|
||||||
<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:
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<style>
|
<style>
|
||||||
@@ -48,53 +74,32 @@ Into this:
|
|||||||
<img src="data:..."/>
|
<img src="data:..."/>
|
||||||
```
|
```
|
||||||
|
|
||||||
Where:
|
|
||||||
|
|
||||||
- `main.less`
|
|
||||||
|
|
||||||
```css
|
|
||||||
@import (inline) 'main.css';
|
|
||||||
div { background-image: url('path/to/file'); }
|
|
||||||
```
|
|
||||||
|
|
||||||
- `main.css`
|
|
||||||
|
|
||||||
```css
|
|
||||||
@font-face { src: url('path/to/file'); }
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
### inlineHtml( filename [, options] )
|
- [`inlineHtml`](#inlineHtml)
|
||||||
|
|
||||||
Reads an HTML file and embeds the contents of local assets referenced by the following elements and data types:
|
---
|
||||||
|
|
||||||
- LESS stylesheets - The LESS is compiled and the result is inlined within a `<style>` element.
|
<a name="inlineHtml"/>
|
||||||
|
### inlineHtml ( filename [, options] )
|
||||||
|
|
||||||
<link rel="stylesheet/less" href="main.less"/> -> <style>...</style>
|
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:...')
|
__Arguments__
|
||||||
|
|
||||||
- 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.
|
||||||
|
|||||||
Reference in New Issue
Block a user