0.0.3 • Published 9 years ago

grunt-browser-mdbagde v0.0.3

Weekly downloads
2
License
MIT
Repository
github
Last release
9 years ago

grunt-browser-mdbagde

Simple grunt task that generates MarkDown formatted Browser Compatibility Tables from JSON data.

Icons designed by Freepik

Install

$> npm install grunt-browser-mdbagde --save-dev

Add it to your MD file

To add the badge code to your MD, insert the next comment into your MD source:

<!--browser-badge-->

Configure and run task

grunt.loadNpmTasks('grunt-browser-mdbadge');

grunt.initConfig({
	browser-badge":{
		basic:{
			src:'./README.md', // <-- No dest specified, src will be overwritten
			browsers:'./browsers.json'
		},
		customDestination: {
			src:'./README.md',
			dest:'./README_badge.md', // <-- Specify a destination file
			browsers:'./browsers.json'
		},
		inlineData: {
			src:'./README_inline.md',  // <-- No dest specified, src will be overwritten
			browsers:{
				"explorer" : { "12.0" : false, "8.0" : false, "9.0" : false },
				"firefox" : { "10.0" : true, "11.0" : true, "12.0" : false, "13.0" : true, "nightly" : true },
				"chrome" : { "14.0" : true, "15.0" : true, "16.0" : true, "canary" : true },
				"safari" : { "5.0.5" : false, "5.1.0" : false, "5.1.1" : true },
				"opera" : { "10.6" : false, "11.0" : false, "11.6" : false },
				"iphone": { "6.0" : true },
				"ipad": { "6.0" : true },
				"android-chrome": { "20.0" : true },
				"android-browser": { "4.2" : true }
			}
		},
		icons: {
			src:'./README_icons.md',
			browsers:{
				"explorer" : { "12.0" : false, "8.0" : false, "9.0" : false },
				"firefox" : { "10.0" : true, "11.0" : true, "12.0" : false, "13.0" : true, "nightly" : true },
				"chrome" : { "14.0" : true, "15.0" : true, "16.0" : true, "canary" : true },
				"safari" : { "5.0.5" : false, "5.1.0" : false, "5.1.1" : true },
				"opera" : { "10.6" : false, "11.0" : false, "11.6" : false },
				"iphone": { "6.0" : true },
				"ipad": { "6.0" : true },
				"android-chrome": { "20.0" : true },
				"android-browser": { "4.2" : true }
			},
			icons:[
				"ie",
				"firefox",
				"chrome",
				"safari",
				"opera",
				"ios",
				"ios",
				"android chrome", // <-- Multiple icons allowed
				"windows firefox"
			]
		}
	}
});

Icons Avaliable

  • npm.io ie
  • npm.io chrome
  • npm.io firefox
  • npm.io opera
  • npm.io safari
  • npm.io ios
  • npm.io android
  • npm.io windows

Badge Example

Basic

explorerfirefoxchromesafarioperaiphoneipadandroid-chromeandroid-browser
⛔ 152.0 ✅ 10.0 ✅ 14.0 ⛔ 5.0.5 ⛔ 10.6 ✅ 6.0 ✅ 6.0 ✅ 20.0 ✅ 4.2
⛔ 8.0 ✅ 11.0 ✅ 15.0 ⛔ 5.1.0 ⛔ 11.0
⛔ 9.0 ⛔ 12.0 ✅ 16.0 ✅ 5.1.1 ⛔ 11.6
✅ 13.0 ✅ canary
✅ nightly

Width Icons

explorerfirefoxchromesafarioperaiphoneipadandroid-chrome android-chromeandroid-browser android-browser
⛔ 12.0 ✅ 10.0 ✅ 14.0 ⛔ 5.0.5 ⛔ 10.6 ✅ 6.0 ✅ 6.0 ✅ 20.0 ✅ 4.2
⛔ 8.0 ✅ 11.0 ✅ 15.0 ⛔ 5.1.0 ⛔ 11.0
⛔ 9.0 ⛔ 12.0 ✅ 16.0 ✅ 5.1.1 ⛔ 11.6
✅ 13.0 ✅ canary
✅ nightly