mirror of
https://github.com/KevinMidboe/inline-html.git
synced 2025-12-08 20:29:06 +00:00
Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8e3a9b0390 | ||
|
|
56a6f43657 | ||
|
|
d5c6a6b540 | ||
|
|
a126b341cc | ||
|
|
734cd940a8 | ||
|
|
8854629943 | ||
|
|
070fc331e7 | ||
|
|
4d9eeaa926 | ||
|
|
840dba9901 |
3
.travis.yml
Normal file
3
.travis.yml
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
language: node_js
|
||||||
|
node_js:
|
||||||
|
- "node"
|
||||||
90
README.md
Normal file
90
README.md
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
# inline-html
|
||||||
|
|
||||||
|
Embed local assets in 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 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.
|
||||||
|
|
||||||
|
<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
|
||||||
|
|
||||||
|
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.
|
||||||
@@ -14,22 +14,21 @@ var unwrap = function (value) {
|
|||||||
var inline = function (html, filename) {
|
var inline = function (html, filename) {
|
||||||
var files = [];
|
var files = [];
|
||||||
var $ = cheerio.load(html, {decodeEntities: false});
|
var $ = cheerio.load(html, {decodeEntities: false});
|
||||||
|
|
||||||
// style elements
|
// style elements
|
||||||
var styles = $('style');
|
var styles = $('style');
|
||||||
styles.each(function (index, element) {
|
styles.each(function (index, element) {
|
||||||
var css = $(element).html();
|
var css = $(element).html();
|
||||||
result = inlineUrl(css, filename);
|
var result = inlineUrl(css, filename);
|
||||||
files.push(result.files);
|
files.push(result.files);
|
||||||
$(element).html(result.css);
|
$(element).html(result.css);
|
||||||
});
|
});
|
||||||
|
|
||||||
// style attributes
|
// style attributes
|
||||||
var attributes = $('body *').filter('[style]');
|
var attributes = $('*').filter('[style]');
|
||||||
attributes.each(function (index, element) {
|
attributes.each(function (index, element) {
|
||||||
var css = $(element).attr('style');
|
var css = $(element).attr('style');
|
||||||
css = wrap(css);
|
css = wrap(css);
|
||||||
result = inlineUrl(css, filename);
|
var result = inlineUrl(css, filename);
|
||||||
files.push(result.files);
|
files.push(result.files);
|
||||||
css = string(result.css).collapseWhitespace().toString();
|
css = string(result.css).collapseWhitespace().toString();
|
||||||
css = unwrap(css);
|
css = unwrap(css);
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
{
|
{
|
||||||
"name": "inline-html",
|
"name": "inline-html",
|
||||||
"version": "0.1.0",
|
"version": "0.1.4",
|
||||||
"description": "Inline an html file.",
|
"description": "Embed local assets in an HTML document.",
|
||||||
"repository": "panosoft/inline-html",
|
"repository": "panosoft/inline-html",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
},
|
},
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cheerio": "^0.19.0",
|
"cheerio": "^0.19.0",
|
||||||
"co": "^4.6.0",
|
"co": "^4.6.0",
|
||||||
|
|||||||
Reference in New Issue
Block a user