npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@pathable/inliner

v1.0.6

Published

Utility to inline images, CSS and JavaScript for a web page - useful for mobile sites

Downloads

11

Readme

@pathable/inliner

Fork of inliner with modifications aimed to use it a in script for the creation of static pages. The main modification is the use of puppeteer to get the root webpage, so it wait for the page to fully load before getting its contents. Bellow is the original readme.

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.