GithubHelp home page GithubHelp logo

inliner's Introduction

Inliner

Turns your web page to a single HTML file with everything inlined - perfect for appcache manifests on mobile devices that you want to reduce those http requests.

Build Status

What it does

  • Get a list of all the assets required to drive the page: CSS, JavaScript, images, videos and images used in CSS
  • Minify JavaScript (via uglify-js)
  • Strips white from CSS
  • Base64 encode images and videos
  • Puts everything back together as a single HTML file with a simplfied doctype

Installation

Install the inliner utility via npm:

$ npm install -g inliner

Usage

If you have either installed via npm or put the inliner bin directory in your path, then you can use inliner via the command line as per:

inliner http://remysharp.com

This will output the inlined markup with default options. You can see more options on how to disable compression or how not to base64 encode images using the help:

inliner --help

To use inline inside your own script:

var Inliner = require('inliner');

new Inliner('http://remysharp.com', function (error, html) {
  // compressed and inlined HTML page
  console.log(html);
});

Or:

var inliner = new Inliner('http://remysharp.com');

inliner.on('progress', function (event) {
  console.error(event);
}).on('end', function (html) {
  // compressed and inlined HTML page
  console.log(html);
});

Once you've inlined the crap out of the page, you can optionally configure a service worker to add advanced caching and offline functionality.

Support

  • Collapses all white space in HTML (except inside <pre> elements)
  • Strips all HTML comments
  • Pulls JavaScript and CSS inline to HTML
  • Compresses JavaScript via uglify (if not compressed already)
  • Converts all images and videos to based64 data urls, inline images, video poster images and CSS images
  • Imports all @import rules from CSS (recusively)
  • Applies media query rules (for print, tv, etc media types)
  • Leaves conditional comments in place
  • If JavaScript can't be imported (or is Google Analytics), source is not put inline

Limitations / Caveats

  • Whitespace compression might get a little heavy handed - all whitespace is collapsed from n spaces to 1 space.

Filing issues & PRs

Please see the contributing for guidelines.

inliner's People

Contributors

amv avatar andyroid1978 avatar arkon avatar chrisjaure avatar dotob avatar eigenuser avatar ggirou avatar gregersrygg avatar hsablonniere avatar joeyparrish avatar john-ericson-tr avatar jorendorff avatar jpalardy avatar m000 avatar mifi avatar pescuma avatar positronium avatar remy avatar specious avatar stucox avatar tjkoury avatar tsuyukimakoto avatar twitwi avatar ueokande avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

inliner's Issues

`</script>` → `<\/script>` workaround

You have a workaround in place for an uglify.js bug, which is great. Might be interesting to keep an eye on mishoo/UglifyJS#164 (I’m still hoping this will be fixed in uglify.js itself).

I recently did some ETAGO research, and you can read the full details here: https://mathiasbynens.be/notes/etago Here’s the TL;DR:

Just keep in mind that the full </style and </script strings followed by a space character, >, or / will close their respective opening tag.

In other words, the current workaround only detects one of those three cases.

svg...

hi remy,

any plans when the work you did in the feature svg branch will be available in master? anything that can be done to help?

dotob

404 results in a fatal error

Hi, first of all thank you for writing this tool. I've been wanting to make something like this for a while.

I am trying to pull down this web page but one of the links resolves to a 404 error, which halts processing of the page. Would you be open to introducing a flag that ignores the 404 error and leaves the link as-is?

I would be glad to try to make a pull request, but would need some hints as to where to start.

Thanks!

TypeError: Cannot call method 'request' of undefined

I get this error running on windows 8 with node 0.10.4:

C:\Users\Thomas\AppData\Roaming\npm\node_modules\inliner\inliner.js:553
return http[oURL.protocol.slice(0, -1) || 'http'].request(options);
^
TypeError: Cannot call method 'request' of undefined
at Inliner.makeRequest (C:\Users\Thomas\AppData\Roaming\npm\node_modules\inliner\inliner.js:553:53)
at Inliner.get (C:\Users\Thomas\AppData\Roaming\npm\node_modules\inliner\inliner.js:360:17)
at Object. (C:\Users\Thomas\AppData\Roaming\npm\node_modules\inliner\inliner.js:153:19)
at Function.b.extend.each (http://code.jquery.com/jquery.min.js:3:5257)
at b.fn.b.each (http://code.jquery.com/jquery.min.js:3:2013)
at C:\Users\Thomas\AppData\Roaming\npm\node_modules\inliner\inliner.js:150:38
at C:\Users\Thomas\AppData\Roaming\npm\node_modules\inliner\node_modules\jsdom\lib\jsdom.js:207:39
at process._tickCallback (node.js:415:13)

error when inlining page with bootstrap

hi,

when inlining a page which references bootstrap i always get this error:

λ inliner -v inliner.html
0/1
loading inliner.html
1/1
1/2
processing external css D:\tmp\test\css\bootstrap.css
loading D:\tmp\test\css\bootstrap.css
2/2
compress css
2/8
get image D:\tmp\test\fonts\glyphicons-halflings-regular.eot
loading D:\tmp\test\fonts\glyphicons-halflings-regular.eot
get image D:\tmp\test\fonts\glyphicons-halflings-regular.eot?
loading D:\tmp\test\fonts\glyphicons-halflings-regular.eot?
get image D:\tmp\test\fonts\glyphicons-halflings-regular.woff2
loading D:\tmp\test\fonts\glyphicons-halflings-regular.woff2
get image D:\tmp\test\fonts\glyphicons-halflings-regular.woff
loading D:\tmp\test\fonts\glyphicons-halflings-regular.woff
get image D:\tmp\test\fonts\glyphicons-halflings-regular.ttf
loading D:\tmp\test\fonts\glyphicons-halflings-regular.ttf
get image D:\tmp\test\fonts\glyphicons-halflings-regular.svg
loading D:\tmp\test\fonts\glyphicons-halflings-regular.svg
ENOENT: no such file or directory, open 'D:\tmp\test\fonts\glyphicons-halflings-regular.eot?'

it seems like somehow the ? becomes part of the path.

the used html:

<!DOCTYPE html>
<html>
  <head>
    <title>inliner error</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
  </head>
  <body>
  </body>
</html>

bootstrap is v3.3.5.

if you can point me where to have a look i can propose a pr. or if it is in another lib (eg. cheerio) i can create an issue there.

thanks for your help.

Gzipped html

Support servers that always return gzipped html.

"zoom: ;" added to the body element

Inlining my HTML documents adds a property I did not specify to the body element of my page: zoom: ;

Here's my set up:

index.html

<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Test</p>
</body>
</html>

style.css

p {
  margin: 2px;
}

output.html

<!DOCTYPE html><html> <head> <style>p{ margin:2px;}</style> </head> <body style="zoom: ;"> <p>Test</p> </body> </html>

I'm using the CLI to generate my file. Specifically, the command inliner index.html > output.html. The console outputs path.existsSync is now called 'fs.existsSync'. when I run the command.

I perused the source here on Github, but nothing struck me as a potential cause for this behavior.

If it's a feature, and not a bug, it seems like strange behavior for an inliner tool. I'd expect it to to simply inline the css and not add anything itself.

Consequences of the issue is that the resultant HTML might break further processes done to the HTML. One such example is juice, which won't allow you to modify the body once it has the zoom property set by inliner.

path.existsSync is now called `fs.existsSync`

Hi there,

I'm trying to use inliner command line tool locally to combine some files. But I get the following error message in the console.

path.existsSync is now called `fs.existsSync`  

So i went into /usr/local/lib/node_modules/inliner/bin/inliner and changed line 65 from:

if (path.existsSync(url))  

to

if (fs.existsSync(url))  

but I get still the same error message. Can you give me a hint what is wrong and how I can fix this?
There is already a question here @ stackoverflow but that didn't fix my problem. Or am I editing the wrong file?
Cheers

[npm - WARN peerDependencies] The peer dependency tap@* included from tap-only will...

During the installation, I got these warnings about the TAP@ dependency not being future proof...

screen

I have a very little clue of node or npm and its dependencies. Far from an expert here, It's more of an experiment for me than anything... So I'm not sure if this is an issue exactly, but I thought I create a record of it, in case you need to track it. And if you have any advice for me and if I need to do anything that can fix this. (installing npm 3 ?)

Inline styles in html

This kind of styles don't process by inliner:

<div class="Stage" style="position: absolute; margin: 0px; left: 0px; top: 0px; width: 240px; height: 200px; right: auto; bottom: auto; background-image: url(images/image.jpg); background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%; display: none; background-position: 0px 0px;" id="Stage"></div>

In source file:

background-image: url(images/image.jpg);

and in inlined file i see same

background-image: url(images/image.jpg);

Fatal error parsing HTML

Hi,

Thanks for this tool it seems to be exactly what I need but I'm unable to get it to work.
I'm always getting "failed to parse HTML" here is the command line and the output :

ubuntu@ubuntu:/mnt/hgfs/GRWebview$ inliner -v http://www.google.fr inline.html
path.existsSync is now called fs.existsSync.
get http://www.google.fr
Fatal error parsing HTML - exiting :: http://www.google.fr

Any idea ?

HTML minification is imperfect

Currently the HTML minification in this module is far from perfect.
It treats pre and textarea specially, but not other cases, such as newlines in textarea placeholder attributes or elsewhere. It corrupts strings of ~~s~~ in the source code and further.

Perhaps instead of this manual processing step using a 3rd party tool, such as a popular html-minifier would be warranted?
As a matter of fact, that tool can also minify inlined css and js.

As a matter of fact, perhaps it would be valuable to keep the tool minimal and suggests users to use html-minifier on the output themselves, keeping the current tool focused on inlining more interesting resources?

Filesystem load has issues with URL markup.

Great software -- works very well!

When loading a file from the filesystem some URLs won't load for example:

ENOENT, open '//build/singlehtml/_static/fonts/fontawesome-webfont.eot?v=4.2.0'

I'm merging htmlsingle ouput from Sphinx into one file. If I parse the file and remove the ?v=4.2.0 it works perfectly.

Thank you!

Feature Request: Allow login prior to 'inlining' page

Awesome module! I've been wanting to use this to inline some page(s) which are behind a login form, which I can't bypass (simple user/pass + submit). It would be great if this could support logging in, then taking a snapshot of the page that I really want vs. the login form itself.

I may be missing something, but I wasn't sure if I could chain actions, like with PhantomJS modules (horseman, etc.)?

Combine multiple Javascript blocks

Thank you for sharing this project!

I would like to split my JavaScript into multiple files, to get some order into the over thousand lines of code. To keep it working in the not inlined version, I would like to add a couple of script tags like in the following example

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <script src="a.js"></script>
        <script src="b.js"></script>
    </body>
</html>

The result by invoking it with inliner test.html is

<!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <script>alert("in a");</script> <script>alert("in b");</script> </body> </html>

Is it possible to merge files of the same type (JS, CSS, etc.) to one file before minifying and including it? It would expect a result like

<!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <script>alert("in a");alert("in b");</script> </body> </html>

That would be great to have a structured project minified to one page.

If you can point me into the code where the needed changes have to be performed, I may gladly contribute.

Thanks again.

Inlining a string

Hey there,

Is there a way to use inliner without requesting a URL, but instead just passing giving it a string of HTML?

Ta.

Use cheerio instead of jsdom

jsdom doesn't allow this to be used offline due to the http jquery dependency, and is rather tedious to install on windows. Could cheerio be used instead (cheerio is basically jquery for node)? Cheerio is also a lot faster.

Resolving URLs in local files breaks them

I noticed that Inliner resolves URL's in files such as http://someplace.com/icon.png to something like /location/file/http:/someplace.com/icon.png, which obviously breaks the link. I can't imagine this is wanted behavior, so I propose the below mentioned pull request as a fix.

Great work on this handy utility by the way!

Impossible to install via npm now?

Platform: Windows NodeJS / NPM plus Cygwin.

$ npm install inliner -g
npm WARN engine [email protected]: wanted: {"node":">= 0.4.x < 0.7.0"} (current: {"node":"0.10.35","npm":"1.4.28"})

> [email protected] install C:\Users\tsmith\AppData\Roaming\npm\node_modules\inliner\node_modules\jsdom\node_modules\contextify
> node-gyp rebuild


C:\Users\tsmith\AppData\Roaming\npm\node_modules\inliner\node_modules\jsdom\node_modules\contextify>node "F:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild
gyp
npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is most likely a problem with the contextify package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild
npm ERR! You can get their info via:
npm ERR!     npm owner ls contextify
npm ERR! There is likely additional logging output above.
npm ERR! System Windows_NT 6.1.7601
npm ERR! command "F:\\Program Files\\nodejs\\node.exe" "F:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "inliner" "-g"
npm ERR! cwd D:\source\megadiction\megadiction-master
npm ERR! node -v v0.10.35
npm ERR! npm -v 1.4.28
npm ERR! code ELIFECYCLE

https support?

Not sure if that is straightforward with current https support in node or not.

Cheers,
Trent

Dependency missing?

I'm running via npm. Install went perfectly fine, but then when I run the inliner command I get this error:
TypeError: Object # has no method '$'
at /usr/local/lib/node/.npm/inliner/0.0.7/package/inliner.js:152:12
at /usr/local/lib/node/.npm/jsdom/0.2.0/package/lib/jsdom.js:207:13
at /usr/local/lib/node/.npm/jsdom/0.2.0/package/lib/jsdom.js:212:11
at Object. (/usr/local/lib/node/.npm/jsdom/0.2.0/package/lib/jsdom/level2/events.js:274:17)
at Object.dispatchEvent (/usr/local/lib/node/.npm/jsdom/0.2.0/package/lib/jsdom/level2/html.js:415:55)
at /usr/local/lib/node/.npm/jsdom/0.2.0/package/lib/jsdom/level2/html.js:56:15
at Object.check (/usr/local/lib/node/.npm/jsdom/0.2.0/package/lib/jsdom/level2/html.js:235:11)
at /usr/local/lib/node/.npm/jsdom/0.2.0/package/lib/jsdom/level2/html.js:251:12
at [object Object]. (fs.js:107:5)
at [object Object].emit (events.js:61:17)

use a ServiceWorker + tar.

Instead of Base64 encoding URLs you could use the real URL and store the data in a .tar file. Then use a service worker to fulfil the URLs from the tar file.

Maximum call stack size exceeded when using Google Closure library

Hi,

Your inliner is just what I was looking for and is absolutely great.

I am however getting the error message "Maximum call stack size exceeded" when using "inliner -vni" on a project built with the Google Closure library.

This is originating from jsUglify.

What would you think about being able to use different kind of minifier/compiler/uglifier/... to process the scripts ? Ideally I would use Google closure for this project (which is also likely to resolve the issue above).

I have looked at your code and I believe this should be a resonably easy thing to do. I guess the difficult part is to launch a java VM, launch the Closure compiler class and get the result back into node. I have never done that and do not know if it's even possible. Would you be interested by this work? or should I fork you code ?

Parameter 'url' must be a string, not object

When I tried running

$ inliner http://localhost:8158/

I get this error:

url.js:107
    throw new TypeError("Parameter 'url' must be a string, not " + typeof url)
          ^
TypeError: Parameter 'url' must be a string, not object
    at Url.parse (url.js:107:11)
    at urlParse (url.js:101:5)
    at Url.resolve (url.js:409:29)
    at Object.urlResolve [as resolve] (url.js:405:40)
    at Object.<anonymous> (/home/jussi/Code/doctor-reader/node_modules/inliner/inliner.js:269:31)
    at Function.x.extend.each (http://code.jquery.com/jquery.min.js:4:5347)
    at x.fn.x.each (http://code.jquery.com/jquery.min.js:4:1999)
    at /home/jussi/Code/doctor-reader/node_modules/inliner/inliner.js:267:40
    at /home/jussi/Code/doctor-reader/node_modules/inliner/node_modules/jsdom/lib/jsdom.js:207:39
    at process._tickCallback (node.js:415:13)

System information:

$ uname -r
3.10.6-2-ARCH
$ npm version
{ http_parser: '1.0',
  node: '0.10.15',
  v8: '3.14.5.9',
  ares: '1.9.0-DEV',
  uv: '0.10.13',
  zlib: '1.2.3',
  modules: '11',
  openssl: '1.0.1e',
  npm: '1.3.5' }

Use of a 'simpler' DOCTYPE

One of the features of inliner is that it uses a 'simpler' DOCTYPE. It is true that it uses a shorter one, but changing the DOCTYPE has no benefits that I know of, and has negative consequences for email development.

The DOCTYPE it forces you to use isn't just a simpler one, as it's also, of course, the DOCTYPE for HTML5 documents. This is the latest DOCTYPE, but in this case there is hardly any gain in using it. In fact, both emailonacid and campaign monitor suggest using the xhtml1 DOCTYPE when it comes to email. But they also leave it open to the developer to choose what they'd like to use, as your choice affects how the email renders in numerous clients.

On the side of web development, why force someone over to a new DOCTYPE if they're not building an HTML5 site? Sure, there's no harm done, but there's also no benefit.

The point I'm trying to make is that switching to a 'simpler' DOCTYPE probably isn't a good idea for this project, given that email developers might be developing around other DOCTYPES, and I can't think of any benefits of this feature.

Suggestion: Make the feature optional, at least. Personally, I wouldn't even have it turned on by default. Just leave the DOCTYPE the way it is.

All html meta tags are removed when inlined

It appears that all html meta tags are removed in the inlining process.
In the code in index.js it looks like the intention is to only remove the meta tags that specify the charset.

    if (enc !== 'utf-8') {
      // when transcoding remove any meta tags setting the charset
      $('meta').each(function charMeta() {
        var content = $(this).attr('content') || '';
        if (content.toLowerCase().indexOf('charset=')) {
          $(this).remove();
        }
      });
    }

However it looks like there is a bug in the check for the charset field, since indexOf still returns the truthy value of -1 even if the string is not found. As such in all meta tags are being removed irrespective of whether they contain a charset field or not. I am assuming the intended check should have been:

        if (content.toLowerCase().indexOf('charset=') !== -1) {
          $(this).remove();
        }

Not getting a large background image

Hi, awesome idea and work here as usual.

I tried pointing it to this URL: http://drupaldate.com and it worked well, with the exception of not displaying the page's ~105k background image. Not sure why that is, but I wanted to let you know.

Thanks for all the great work you do!

Errors while trying to get resources/install

As requested, here's what I was getting while trying to install inline (copied/pasted the parts you suggested I need). Hope you're able to fix it:

[email protected] install /usr/local/lib/node_modules/inliner/node_modules/jsdom/node_modules/contextify

node-gyp rebuild

gyp WARN EACCES user "root" does not have permission to access the dev dir "/Users/lloydi/.node-gyp/0.8.14"
gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/local/lib/node_modules/inliner/node_modules/jsdom/node_modules/contextify/.node-gyp"
gyp http GET http://nodejs.org/dist/v0.8.14/node-v0.8.14.tar.gz
gyp http 200 http://nodejs.org/dist/v0.8.14/node-v0.8.14.tar.gz
gyp ERR! build error
gyp ERR! stack Error: not found: make
gyp ERR! stack at F (/usr/local/lib/node_modules/npm/node_modules/which/which.js:43:28)
gyp ERR! stack at E (/usr/local/lib/node_modules/npm/node_modules/which/which.js:46:29)
gyp ERR! stack at /usr/local/lib/node_modules/npm/node_modules/which/which.js:57:16
gyp ERR! stack at Object.oncomplete (fs.js:297:15)
gyp ERR! System Darwin 12.2.0
gyp ERR! command "node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /usr/local/lib/node_modules/inliner/node_modules/jsdom/node_modules/contextify
gyp ERR! node -v v0.8.14
gyp ERR! node-gyp -v v0.7.1
gyp ERR! not ok
npm WARN optional dep failed, continuing [email protected]
/usr/local/bin/inliner -> /usr/local/lib/node_modules/inliner/bin/inliner
[email protected] /usr/local/lib/node_modules/inliner
├── [email protected]
├── [email protected]
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

Expand on installation/use instructions

No idea how to use inliner. Can you give more instructions? Can't find any details online.

I got so far as to install node.js server. When I run "inliner http://remysharp.com" in cmd I get one of two responses:

1-
Fatal error parsing HTML - exiting :: http://remysharp.com

or...

2 -
path.existsSync is now called 'fs.existsSync'.

When I try it with the other method -

var Inliner = require('inliner');
new Inliner('http://remysharp.com', function (html) {
// compressed and inlined HTML page
console.log(html);
});

I look in console, and I get the error:

'Uncaught ReferenceError: require is not defined'

Can you expand on what I'm supposed to do after "npm install inliner" finishes...?

Travis won't accept pull requests

Travis Continuous Integration won't accept full requests for this project, because of some infrastructure problem. The actual message reported is:

$ rake
rake aborted!
No Rakefile found (looking for: rakefile, Rakefile, rakefile.rb, Rakefile.rb)

e.g. [https://travis-ci.org/remy/inliner/builds/21471899]

Version number in JS filename not supported

Just found this issue:
In the input html file, if I use:
script type="text/javascript" src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script

then the result is:
script type="text/javascript" src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script

But if I rename the "jquery.mobile-1.4.5.min.js" to "jquery.mobile.js" and change my input html to:
script type="text/javascript" src="jquery-mobile/jquery.mobile.js"></script

the result is correctly inlined:
script type="text/javascript">!function(e,t,i){"function"==typeof define&&define.amd?define(["jquery"],function(n){return i(n,e,t),n.mobile}):i(e.jQuery,e,t)}......."

I do note that same version number for CSS or other ressources dont cause any trouble:
link rel="stylesheet" type="text/css" href="jquery-mobile/jquery.mobile-1.4.5.min.css" /

Thanks in advance for looking into this.

Inlining SVG will often lead to larger image

See these assets: https://rawgit.com/hsablonniere/10c95896aaf9f1317246/raw/exploring-multiscreen-web-techniques.html

I took one of the SVG files, and compared the XML output (i.e. the SVG source) to the base64 encoded version. A 17K SVG comes out at 23K of base64 data. Not so good.

It would be good to inline to text on SVG - this should also allow the output to compress better too (as there will be repeating globs of symbols, rather than unique combinations of characters that make up the base64 string).

TypeError during conversions

Using node v0.9.9, npm v1.2.18, inliner v0.1.14 under Debian Squeeze, I get the following TypeError exception for several urls:

url.js:118
throw new TypeError("Parameter 'url' must be a string, not " + typeof url)
^
TypeError: Parameter 'url' must be a string, not object
at Url.parse (url.js:118:11)
at urlParse (url.js:112:5)
at Url.resolve (url.js:406:29)
at Object.urlResolve as resolve
at Object. (/usr/local/lib/node_modules/inliner/inliner.js:269:31)
at Function.b.extend.each (http://code.jquery.com/jquery.min.js:3:5257)
at b.fn.b.each (http://code.jquery.com/jquery.min.js:3:2013)
at /usr/local/lib/node_modules/inliner/inliner.js:267:40
at /usr/local/lib/node_modules/inliner/node_modules/jsdom/lib/jsdom.js:207:39
at process._tickCallback (node.js:427:13)

Try
inliner -v -n http://index.hu
inliner -v -n http://sandbox.wamped.org/pdf2html/files/pdf2htmlEX/pss_cvf/pss_cvf.html

incorrect output

inliner failed to produce any output

$ curl https://gist.github.com/raw/964292/d104c9980627428eb138b5eafcaea85fd792ddcc/gistfile1.txt
<html>
     <body>
          <p>
               sdfsdf
          <p>
</body>
</html>
$ inliner https://gist.github.com/raw/964292/d104c9980627428eb138b5eafcaea85fd792ddcc/gistfile1.txt
$

So no output... while it should. Just a little proof inliner is working on other input

$ inliner http://google.com
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">   <title>Google</title><script>window.go

Add information on how to use localy

Hi!

Finaly managed to install this (had to install command line tools first via xCode). Now I tried to inline a project that is on my localhost. I tried it with these commands:

inliner /Path/to/my/project/root > index.html
inliner http://localhost > index.html
inliner http://virtual-host.local > index.html

Would normaly all of those commands work? If not, which one should it be? And do I have to be in the project's folder when running this, or should I be in the folder where I want the output to be located or do I just define origin -> target in the command? An example for this case in the readme file would be very helpful.

Besides this being unclear I'm always getting this error (started this script in the folder where I wanted to place the output):

TypeError: Cannot call method 'request' of undefined
at Inliner.makeRequest (/usr/local/lib/node_modules/inliner/inliner.js:553:53)
at Inliner.get (/usr/local/lib/node_modules/inliner/inliner.js:360:17)
at Object.inliner.get.jsdom.env.todo.styles.assets.styles.each.style (/usr/local/lib/node_modules/inliner/inliner.js:153:19)
at Function.b.extend.each (http://code.jquery.com/jquery.min.js:3:5257)
at b.fn.b.each (http://code.jquery.com/jquery.min.js:3:2013)
at /usr/local/lib/node_modules/inliner/inliner.js:150:38
at exports.env.exports.jsdom.env.scriptComplete (/usr/local/lib/node_modules/inliner/node_modules/jsdom/lib/jsdom.js:207:39)
at process.startup.processNextTick.process._tickCallback (node.js:244:9)

Thx for any help/info.

No "style" attributes added

Using this input

 <head>
    <style type="text/css">
      p {
        color : red;
      }  
    </style>
 </head>
 <body>
    <p>This is an HTML p</p>
    <br/>
    <p>Thanks for ready this.</p> 
 <body>
<html>

The output I get is this :

<!DOCTYPE html><html> <head> <style type="text/css"> p{ color :red;}</style> </head> <body> <p>This is an HTML p</p> <br /> <p>Thanks for ready this.</p> <body> <html></html></body></body></html>

I might be wrong, but I expected the "CSS inlining" to return something like

<p style="color ; red">This is an HTML p</p>

Or am I missing something ?

I'm using inliner 0.1.14 with node 0.8.22.

Favicon image not inlined

The favicon image doesnt seem to be inlined.

Here is the inlined file:
<link rel="icon" type="image/png" href="img/favicon.png">
And it should be:
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAQAAADa613fAAAE40lEQVR4Ad3bbWiWVRjA8f/zuD1zm8umkq[.....]">

Published NPM has CRLF bug

Hi,

Seems like inliner is affected by npm/npm#2097

I ran:
npm install -g web-combiner

File inliner.js gives:
/usr/lib/node_modules/web-combiner/inliner.js: Node.js script, ASCII text executable, with CRLF line terminators

This is a problem in UNIX systems as it will try to execute '/usr/bin/node\r':

$ inliner
: No such file or directory
$ strace inliner
...
execve(/usr/bin/node\r", ["node\r", "/h"...], [/* 120 vars */]) = -1 ENOENT (No such file or directory)
...

Warn about unsupported protocols

I’m currently getting the following error. More information would be useful in such cases: what is the unsupported prototcol? What is the problematic URL?

/usr/local/lib/node_modules/inliner/inliner.js:553
  return http[oURL.protocol.slice(0, -1) || 'http'].request(options);
                                                    ^
TypeError: Cannot call method 'request' of undefined

The URL that didn’t work is: http://ecma-international.org/ecma-262/5.1/

no software license specified

MIT?

Do you have an implied license somewhere? I may have just missed it. I'm wondering because I'd like to use the inliner, but am not sure of the rights.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.