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

badge-render

v0.0.15

Published

A Node.js + PhantomJS based solution to generate browser testing results badge.

Downloads

6

Readme

badge-render

A Node.js + PhantomJS based solution to generate browser testing results badge

LOGO images from https://github.com/substack/browser-badge

npm version Dependency Status Build Status

Install

npm install badge-render

Commandline Usage

Generate your badge by badge json

badge-render examples/all_browsers_pass.json lib/index.html
  • The input JSON: examples/all_browsers_pass.json
  • The output HTML: lib/index.html
  • The output PNG:

Options: Output png with another name

badge-render examples/all_browsers_pass.json lib/index.html --png test.png

Options: Scale the html and png

This feature is supported by updating PhantomJS zoomFactor.

badge-render examples/all_browsers_pass.json lib/index.html --png examples/scale.png --scale 0.5
  • The output PNG:

Options: Change the rendered image size

This feature is supported by changing PhantomJS viewport size. Default viewport size is 500x320. When the real HTML size larger, the rendered image size will auto expanded.

badge-render examples/all_browsers_pass.json lib/index.html --png examples/small.png --scale 0.6 --width 180 --height 200
  • The output PNG:

Options: customize the style

Append your css file into the HTML.

badge-render examples/all_browsers_pass.json lib/index.html --png examples/style.png --css examples/extra.css
  • The CSS file: examples/extra.css
  • The output PNG:

Saucelabs+Travis Migration

Use this command badge-saucelabs-results > badge.json to save your saucelabs test results. The command will use SAUCE_USERNAME to look for your recent tests result, and then use TRAVIS_JOB_ID to match your build name.

If you want to use different build name to match sauce labs results, you can try badge-saucelabs-results YOUR_BUILD_NAME > badge.json . After the results save to badge.json, you can then render the badge by badge-render command.

CommonJS Usage

var badge = require('badge-render');

// generate HTML by default handlebars template
badge({
 browsers: {
   safari: {'10.0': true},
   explorer: {'10.0': false},
   firefox: {'10.0': true}
 }
});

// provide more options
badge({
  browsers: {...},
  title: 'change title of the html (default template)',
  assets: 'change the assets base url (default template)',
  template: 'template string',
  css: 'css string for template (default template)'
}, {
  file: 'full path of output file',
  hbfile: 'full path of handlebars template',
  cssfile: 'full path of css file to customize default template'
});