{"id":29429415,"url":"https://github.com/hmil/project-badge","last_synced_at":"2025-07-12T16:08:40.334Z","repository":{"id":22069059,"uuid":"25398238","full_name":"hmil/project-badge","owner":"hmil","description":"Create fancy badges for your projects in plain JS","archived":false,"fork":false,"pushed_at":"2017-03-19T21:11:40.000Z","size":62,"stargazers_count":7,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-28T02:04:52.596Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hmil.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE_MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-18T13:36:03.000Z","updated_at":"2021-05-06T13:14:20.000Z","dependencies_parsed_at":"2022-08-20T19:40:55.824Z","dependency_job_id":null,"html_url":"https://github.com/hmil/project-badge","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/hmil/project-badge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmil%2Fproject-badge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmil%2Fproject-badge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmil%2Fproject-badge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmil%2Fproject-badge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hmil","download_url":"https://codeload.github.com/hmil/project-badge/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmil%2Fproject-badge/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264381393,"owners_count":23599249,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-12T16:08:34.688Z","updated_at":"2025-07-12T16:08:35.425Z","avatar_url":"https://github.com/hmil.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"project-badge\n=============\n\nCreate fancy badges for your projects in plain JS.\n\n# Usage\n\n## In the browser\nDownload [badge.js](https://raw.githubusercontent.com/hmil/project-badge/master/dist/badge.js), and start having fun with badges !\n\n```html\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003cscript src=\"badge.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      var myBadge = new badge.Boolean({\n        text: 'cookies',\n        status: true,\n        statusText: 'baked !'\n      });\n\n      document.body.appendChild(myBadge.asDOMNode());\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\nEt voilà, a shiny custom badge in just two lines of code and 3 config parameters.  \n![Le wild badge appears in the browser](https://raw.githubusercontent.com/hmil/project-badge/master/images/badge_in_browser.png)\n\n## In node\nThis module is available as an npm package `npm install project-package`  \nYou should check out [node-canvas](https://github.com/Automattic/node-canvas) which provides a compatible canvas API in node.\nActually, it's what's being used in [node-project-badge](https://github.com/hmil/node-project-badge) to provide a CLI badge generator.\n\n# One badge for every thing\n\nProgress:\n```javascript\nvar myBadge = new badge.Progress({\n  text: 'baking',\n  progress: 32,\n});\n```\n![Progress badge 32%](https://raw.githubusercontent.com/hmil/project-badge/master/images/baking32.png) ![Progress badge 55%](https://raw.githubusercontent.com/hmil/project-badge/master/images/baking55.png) ![Progress badge 87%](https://raw.githubusercontent.com/hmil/project-badge/master/images/baking87.png)  \n*Common usage: code coverage*\n\n```javascript\nvar myBadge = new badge.Info({\n  text: 'baking time',\n  info: '12\\'30'\n});\n```\n![Info badge](https://raw.githubusercontent.com/hmil/project-badge/master/images/baking_time.png)  \n*Common usage: package verison, date of last build*\n\n```javascript\nvar myBadge = new badge.Boolean({\n  text: 'taste',\n  status: true,\n  successText: 'yummy',\n  failureText: 'yuck !',\n  unknownText: 'what ?'\n});\nmyBadge.renderTo(ctx, 0, 0);\nmyBadge.status = false;\nmyBadge.renderTo(ctx, 120, 0);\nmyBadge.status = null;\nmyBadge.renderTo(ctx, 240, 0);\n```\n![Boolean badge](https://raw.githubusercontent.com/hmil/project-badge/master/images/taste.png)  \n*Common usage: build: passing/failure*\n\n# API Reference\n\n## badge.config(conf)\n\nUse this function to set global configuration settings. Available settings are:\n```coffeescript\n'color-success': '#0a0'\n'color-failure': '#a00'\n'color-unknown': '#aaa'\n'color-warning': '#880'\n'color-info': '#3BC2EB'\n'color-background': '#444'\n'color-text': '#fff'      \n\n'font': '11px Verdana'      # the same font for all texts\n'border-radius': 5          # like css border-radius\n'padding': 5                # x padding for the text\n'text-height': 14           # text position, y-axis\n\n'width': 50                 # default width\n'height': 20                # default height\n```\n## badge.Boolean\n\nA badge that can take two states (namely 'failure' and 'success') depending\non the value of 'status'\n\n### Parameters\n- `text` (String): the text shown on the left hand side of the badge\n- `status` (true/false): defines the state the badge is in\n- `successText` (String): text shown on the right side of the badge in case of success\n- `failureText` (String): text shown on the right side of the badge in case of failure\n- `unknownText` (String): text shown on the right side of the badge in case the status is null\n- `statusText`: (String): text shown on the right side of the badge regardless of the state\nstatusText has precedence over (failure|success)Text\n\n### Typical use cases\n- Show the result of a build in a CI environment (*à la* Travis-ci)\n\n\n## badge.Info\n\nA badge that shows a single information as a key-value pair\n\n### Parameters\n- `text` (String): the text shown on the left hand side of the badge (key)\n- `info` (String): the text shown on the right hand side of the badge (value)\n\n### Typical use cases\n- Show the current version of a package\n- Show the date of last build (useful when shown together with a build status badge)\n\n\n## badge.Progress\n\nA badge that shows a real value bounded between a minimum and a maximum.\nThe badge is color coded to indicate wether the value is in the \"bad\", \"warning\"\nor \"good\" interval (defined by the `bounds` parameter).\n\n### Parameters\n- `text` (String): the text shown on the left hand side of the badge (key)\n- `progress` (Number): the real value to show ranging from 0 to 100\n- `progressText` (String): the text shown on the right hand side of the badge (value)\n- `unit` (String): a string appended to the progressText (default: '%')\n- `bounds` (Array): two values that delimit the bad, warning and good zones (default: [40, 80])\n\n### Typical use cases\n- Show code coverage (it was designed specifically for this use).\n- Show any bounded continuous value.\n\n\n## badge.Badge\n\nBase class for any badge class. You may create a badge of type badge directly but\nit won't generally be of great use.\n\nIt defines the badge public interface and handles the rendering pipeline.\n\n### Public API\nThe public API is defined by the parent class Badge and should not be overriden.\n- `constructor(params: {key: value})`  \n  Constructs a badge and applies all parameters to this instance\n- `badge.[param]`  \n  All parameters are directly accessible on the badge's instance. For instance:\n  ```javascript\n  // All badges drawn with this instance will now use the text 'build'\n  badge.text = 'build';\n  ```\n- `renderTo(ctx: RenderingContext [, x: Number] [, y: Number]) -\u003e void`  \n  Renders the badge on the provided rendering context at position (x, y).\n  Is rendered at (0,0) by default.\n- `measure(ctx: RenderingContext) -\u003e Dimentions`  \n  measures the width and height the badge will occupy. Base implementation measures\n  the width taken by `text` and two margins and returns the configured height\n- `Dimentions = {w: Number, h: Number}`  \n  Format used to represent badge dimentions\n\n### Rendering pipeline\nThe following methods are called in this order and may be overriden to implement custom graphics:\n\n- `drawBorder(ctx: RenderingContext, dimentions: Dimentions) -\u003e void`  \n  begins and constructs a path that defines the badge's borders (does not close nor draw it)\n- `drawBackground(ctx: DrawingContext, dimentions: Dimentions) -\u003e void`  \n  draws the badge's background\n- `drawBackgroundEffects(ctx: DrawingContext, dimentions: Dimentions) -\u003e void`  \n  applies effects once the background was drawn\n- `drawForeground(ctx: DrawingContext, dimentions: Dimentions) -\u003e void`  \n  draws the badge's foreground\n- `drawForegroundEffects(ctx: DrawingContext, dimentions: Dimentions) -\u003e void`  \n  applies effects once the foreground was drawn\n\nTo implement custom measurments, override `doMeasure`\n- `doMeasure(ctx: RenderingContext) -\u003e Dimentions`  \n  Actually performs the measure\n\n\n### Parameters\nThe following parameters are assumed to be necessary for any class implementing a badge\n- `text` (String): default text shown in the badge, left aligned\n\n\n# Changelog\n\n**0.2.0** -- *Mar 19, 2017*\n- Add \"unknown\" status badge (thanks @tforgione)\n- Add npm task to build the lib with grunt\n\n**0.1.0** -- *Oct 19, 2014*\n- Initial project-badge release\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmil%2Fproject-badge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhmil%2Fproject-badge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmil%2Fproject-badge/lists"}