KevinMidboe/inline-html
1
0
Fork 0
mirror of https://github.com/KevinMidboe/inline-html.git synced 2025-10-29 17:40:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit.

Browse Source
This commit is contained in:
Alexandre Gigliotti
2015-07-22 15:51:14 -07:00
commit f8369f3bc0
8 changed files with 146 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
node_modules
test/test.html

68
lib/index.js Normal file
View File

@@ -0,0 +1,68 @@
var co = require('co');
var inlineLess = require('inline-less');
var inlineCssUrl = require('inline-css-url');
var cheerio = require('cheerio');
var string = require('string');
var fs = require('mz/fs');
// TODO refactor into separate module
// inline html images
var localPath = require('local-path');
var datauri = require('datauri');
var path = require('path');
var inlineImg = function (html, filePath) {
var basedir = path.dirname(filePath);
var $ = cheerio.load(html);
var images = $('img').filter(function (index, element) {
return localPath($(element).attr('src'));
});
images.each(function (index, element) {
var src = $(element).attr('src');
var filePath = path.resolve(basedir, src);
src = datauri(filePath);
$(element).attr('src', src);
});
return $.html();
};
// TODO refactor into separate module
// inline html url css data types
var inlineUrl = function (html, filePath) {
var $ = cheerio.load(html);
// style elements
var styles = $('style');
styles.each(function (index, element) {
var css = $(element).html();
css = inlineCssUrl(css, filePath);
$(element).html(css);
});
// style attributes
var attributes = $('body *').filter('[style]');
attributes.each(function (index, element) {
var css = $(element).attr('style');
var prefix = 'element {';
var suffix = '}';
css = prefix + css + suffix;
css = inlineCssUrl(css, filePath);
css = string(css).collapseWhitespace().toString();
css = css.replace(new RegExp('^' + prefix + '\\s*(.*)\\s+' + suffix + '$'), '$1');
$(element).attr('style', css);
});
return $.html();
};
var inline = co.wrap(function * (filePath, options) {
var html = yield fs.readFile(filePath, 'utf8');
// inline links: less
html = yield inlineLess(html, filePath, options);
// TODO inline links: css
// TODO inline scripts (js + browserify? = scriptify)
// Inline local assets (path -> datauri)
html = inlineUrl(html, filePath);
html = inlineImg(html, filePath);
// svg?
return html;
});
module.exports = inline;

21
package.json Normal file
View File

@@ -0,0 +1,21 @@
{
"name": "inline-html",
"version": "0.0.0",
"description": "",
"main": "lib/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"cheerio": "^0.19.0",
"co": "^4.6.0",
"datauri": "^0.7.1",
"inline-css-url": "file:../inline-css-url",
"inline-less": "file:../inline-less",
"local-path": "file:../local-path",
"mz": "^2.0.0",
"string": "^3.3.0"
}
}

8
test/assets/imported.css Normal file
View File

@@ -0,0 +1,8 @@
body {
border: solid 4px green;
}
#import {
background-image: url('./person.png');
background-size: contain;
background-repeat: no-repeat;
}

BIN
test/assets/person.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

25
test/index.html Normal file
View File

@@ -0,0 +1,25 @@
<!doctype html>
<html>
<head>
<style>
div {
padding-left: 2em;
}
</style>
<link rel="stylesheet/less" href="main.less"/>
<style>
#style {
background-image: url('./assets/person.png');
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="link">Link</div>
<div id="import">Import</div>
<div id="style">Style</div>
<div id="attribute" style="background-image: url('./assets/person.png'); background-size: contain; background-repeat: no-repeat;">Attribute</div>
<img height="32px" width="32px" src="./assets/person.png"/>Image
</body>
</html>

15
test/index.js Normal file
View File

@@ -0,0 +1,15 @@
var inline = require('../lib');
var path = require('path');
var fs = require('fs');
var filepath = path.resolve(__dirname, './index.html');
var options = {};
/**
* html -> async -> inlined html
*/
inline(filepath, options)
.then(function (html) {
console.log(html);
fs.writeFileSync('./test.html', html);
})
.catch(console.error);

7
test/main.less Normal file
View File

@@ -0,0 +1,7 @@
@import (less) './assets/imported.css';
#link {
background-image: url('assets/person.png');
background-size: contain;
background-repeat: no-repeat;
}