{"id":18553699,"url":"https://github.com/websemantics/bragit","last_synced_at":"2026-04-09T13:02:36.472Z","repository":{"id":57207509,"uuid":"57935544","full_name":"websemantics/bragit","owner":"websemantics","description":"Show off your Github repository buttons with elegance using Semantic-ui labeled buttons. ","archived":false,"fork":false,"pushed_at":"2016-11-26T20:56:36.000Z","size":24882,"stargazers_count":13,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-10T18:28:26.809Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://websemantics.github.io/bragit/","language":"JavaScript","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/websemantics.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-03T02:27:25.000Z","updated_at":"2021-04-29T05:32:02.000Z","dependencies_parsed_at":"2022-09-11T02:00:38.567Z","dependency_job_id":null,"html_url":"https://github.com/websemantics/bragit","commit_stats":null,"previous_names":["websemantics/semanti"],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/websemantics/bragit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/websemantics%2Fbragit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/websemantics%2Fbragit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/websemantics%2Fbragit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/websemantics%2Fbragit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/websemantics","download_url":"https://codeload.github.com/websemantics/bragit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/websemantics%2Fbragit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260072717,"owners_count":22954919,"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":"2024-11-06T21:18:01.386Z","updated_at":"2025-12-12T03:03:51.781Z","avatar_url":"https://github.com/websemantics.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Bragit](https://raw.githubusercontent.com/websemantics/bragit/master/demo/img/header.png)\n\n\u003e Display your Github repositories stats in style using Semantic-UI labeled buttons. Working with [Semantic-UI labeled buttons](http://semantic-ui.com/elements/button.html#labeled) to represent Github buttons (Stars, Forks, Watchers, Issues, Download and Contributors), this jQuery library requests a Github repository information and updates the associated buttons accordingly.\n\n[![Build Status](https://travis-ci.org/websemantics/bragit.svg?branch=master)](https://travis-ci.org/websemantics/bragit) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/websemantics/bragit/master/LICENSE) [![GitHub forks](https://img.shields.io/github/forks/websemantics/bragit.svg)](https://github.com/websemantics/bragit/network) [![GitHub stars](https://img.shields.io/github/stars/websemantics/bragit.svg)](https://github.com/websemantics/bragit/stargazers)\n[![Percentage of issues still open](http://isitmaintained.com/badge/open/websemantics/bragit.svg)](http://isitmaintained.com/project/websemantics/bragit \"Percentage of issues still open\") [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)\n\n#### [Try it](http://websemantics.github.io/bragit/)\n\u003e Or follow the How To guide\n\n\n## Getting Started\n\n1- Include the following script in a web page. Notice the release number `1.0.6` in the url; change as needed.\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://cdn.rawgit.com/websemantics/bragit/1.0.6/bragit.js\"\u003e\u003c/script\u003e\n```\n\n2- Add a labeled button as specified in [Semantic-UI documentation](http://semantic-ui.com/elements/button.html#labeled).\n\n3- Add a custom class name for the Github button you desire following a basic convention **`github-{username}-{repo}-{action}`** where action can be, **stars**, **forks**, **watchers**, **issues**, **download** or **contributors**.\n\n```html\n\u003ca class=\"ui labeled tiny button github-websemantics-bragit-stars\"\u003e\n  \u003cdiv class=\"ui brand tiny button\"\u003e\n    \u003ci class=\"star icon\"\u003e\u003c/i\u003e Stars\n  \u003c/div\u003e\n  \u003cdiv class=\"ui basic brand left pointing label\"\u003e\n    \u003ci class=\"spinner loading icon\"\u003e\u003c/i\u003e\n  \u003c/div\u003e\n\u003c/a\u003e\n```\n\nThe above example shows how to add a `stars` button of this repository, **Bragit**. The class name constructed as `github-websemantics-bragit-stars`. Following the above formula, other possible classes / buttons for this repository would be,\n\n```\ngithub-websemantics-bragit-stars\ngithub-websemantics-bragit-forks\ngithub-websemantics-bragit-watchers\ngithub-websemantics-bragit-issues\ngithub-websemantics-bragit-download\n```\n\n\n## Preview\n\n![Preview](https://raw.githubusercontent.com/websemantics/bragit/master/demo/img/bragit.gif)\n\n\n## Behind the Scenes\n\nThe library takes care of many things behind closed doors. For one thing, it makes sure that the buttons styles are loaded if the [Semantic-UI](http://semantic-ui.com/elements/button.html#labeled) framework was not detected in the loaded document.\n\nThe code will automatically inject the css files that contain the styles of three `Semantic-UI` components `button`, `icon` and `label` using a public cdn `https://cdnjs.cloudflare.com/ajax/libs/semantic-ui`\n\nThis can be overridden if required as follows\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\n\n  Bragit.defaults({ css: {\n    version: '2.1.8',\n    inject: false,\n    uri: 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/{{version}}/components/{{module}}.min.css',\n    modules: ['button', 'icon', 'label'],\n    custom: null\n    }});\n\n\u003c/script\u003e\n```\n\nNotice the `inject` flag which is responsible to force the injection of the specified components styles if set to `true`. Other modules can be added to the list of auto-loaded components and or a custom css styles by setting the `custom` attribute `custom: \"css/styles.css\"`\n\n\n#### Custom Class Names\n\nAs explained above, **Bragit** detects the existence of a unique css class name pattern, **`github-{username}-{repo}-{action}`** to retrieve the required Github repository information and update the associated labeled buttons accordingly.\n\nHowever, should the need arise, this can be changed as follows,\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\n\n  Bragit.defaults({\n    delimiter: '-',\n    cls: 'github'\n  });\n\n\u003c/script\u003e\n```\n\nBy changing the delimiter to say `_` and the class name **cls** to `brag`, the class name for the `stars` button of this repository will be `brag_websemantics_bragit_stars`.\n\n\n#### Actions\n\n**Bragit** supports a number of `actions` or `action buttons`, **stars**, **forks**, **watchers**, **issues**, **download** and **contributors**. These can be re-configured or more actions added through the `defaults` function,\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\n\n  Bragit.defaults({\n    actions: {\n      forks: {\n        uri: '/network',\n        property: 'forks_count'\n      },stars: {\n        uri: '/stargazers',\n        property: 'stargazers_count'\n      },watchers: {\n        uri: '/watchers',\n        property: 'subscribers_count'\n      },issues: {\n        uri: '/issues',\n        property: 'open_issues_count'\n      },github: {\n        uri: '',\n        property: null\n      },download: {\n        uri: '/archive/master.zip',\n        property: null\n      },contributors: {\n        uri: '/contributors',\n        property: null\n      }\n    }\n  });\n\n\u003c/script\u003e\n```\nNotice how each action has two attributes, a `uri` and a `property` name. **Bragit** appends the `uri` value to the repository `html_url` retrieved from Github API. This is then used to set the `href` value of the labeled button link element `a`. The `property` name is used to access a named attribute in the repository information returned from Github API.\n\nFor example, using `stargazers_count` as an index to the repository data will return an number value. This number/text is then used to update the label element of the associated button (and that's how the magic happens, ladies and gents).\n\n\n#### Custom Buttons Styles\n\nSemantic-UI [labeled buttons](http://semantic-ui.com/elements/button.html#labeled) come in all [colors](http://semantic-ui.com/usage/theming.html#using-themes) and [sizes](http://semantic-ui.com/elements/button.html#size). However we all need to customize styles to our needs sometimes. Here's a quick example of a new color named `brand` which is used in this project, **Bragit** to re-theme Github buttons as shown [here](http://websemantics.github.io/bragit/).\n\n```css\n/* styles for github action buttons */\n.ui.brand.button, .ui.brand.buttons .button {\n    background-color: #756c74;\n    color: #fff!important;\n}\n\n.ui.brand.label {\n    color: #756c74!important;\n    border-color: #756c74!important;\n    background-color: #ffffff;\n}\n\n.ui.brand.button:focus, .ui.brand.buttons .button:focus,\n  .ui.brand.button:hover, .ui.brand.buttons .button:hover {\n    background-color: #9d959c;\n}\n\n.ui.brand.labels .label:focus, .ui.brand.label:focus,\n  .ui.brand.labels .label:hover, .ui.brand.label:hover {\n    color: #9d959c!important;\n    border-color: #9d959c!important;\n}\n\n.ui.labeled .ui.button .star.icon {\n  color: #F5CC7A!important;\n}\n```\n\nAll you need to do is to replace the main color `#756c74` and its lighter shade `#9d959c` to your own. Also notice how the `stars` icon has been colored golden. You can easily change that or even the colors of the other icons (`fork` for forks, `eye` for watchers, `info circle` for issues, `download` for download and `users` for contributors). The following is the code to display all the supports Github actions by **Bragit**.\n\n```html\n\u003c!-- ************************( Stars )********************************--\u003e\n\n\u003ca class=\"ui labeled tiny button github-websemantics-bragit-stars\"\u003e\n  \u003cdiv class=\"ui brand tiny button\"\u003e\n    \u003ci class=\"star icon\"\u003e\u003c/i\u003e Stars\n  \u003c/div\u003e\n  \u003cdiv class=\"ui basic brand left pointing label\"\u003e\n    \u003ci class=\"spinner loading icon\"\u003e\u003c/i\u003e\n  \u003c/div\u003e\n\u003c/a\u003e\n\n\u003c!-- **********************( Forks )******************************--\u003e\n\n\u003ca class=\"ui left labeled tiny button github-websemantics-bragit-forks\"\u003e\n  \u003cdiv class=\"ui basic brand right pointing label\"\u003e\n    \u003ci class=\"spinner loading icon\"\u003e\u003c/i\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"ui brand tiny button\"\u003e\n    \u003ci class=\"fork icon\"\u003e\u003c/i\u003e Forks\n  \u003c/div\u003e\n\u003c/a\u003e\n\n\u003c!-- ***********************( Watchers )*******************************--\u003e\n\n\u003ca class=\"ui labeled tiny button github-websemantics-bragit-watchers\"\u003e\n  \u003cdiv class=\"ui brand tiny button\"\u003e\n    \u003ci class=\"eye icon\"\u003e\u003c/i\u003e Watchers\n  \u003c/div\u003e\n  \u003cdiv class=\"ui basic brand left pointing label\"\u003e\n    \u003ci class=\"spinner loading icon\"\u003e\u003c/i\u003e\n  \u003c/div\u003e\n\u003c/a\u003e\n\n\u003c!-- ************************( Issues )********************************--\u003e\n\n\u003ca class=\"ui left labeled tiny button github-websemantics-bragit-issues\"\u003e\n  \u003cdiv class=\"ui basic brand right pointing label\"\u003e\n    \u003ci class=\"spinner loading icon\"\u003e\u003c/i\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"ui brand tiny button\"\u003e\n    \u003ci class=\"info circle icon\"\u003e\u003c/i\u003e Issues\n  \u003c/div\u003e\n\u003c/a\u003e\n\n\u003c!-- ************************( Download )********************************--\u003e\n\n\u003ca class=\"ui brand tiny button github-wecs-bragit-download\"\u003e\n    \u003ci class=\"download icon\"\u003e\u003c/i\u003e Download\n\u003c/a\u003e\n\n\u003c!-- **********************( Contributors )******************************--\u003e\n\n\u003ca class=\"ui brand tiny button github-websemantics-bragit-contributors\"\u003e\n    \u003ci class=\"users icon\"\u003e\u003c/i\u003e Contributors\n\u003c/a\u003e\n```\n\n\n## Using Bower\n\nIf the use of [Bower](http://bower.io/) is prefered, one can either include **Bragit** in the `bower.json` file or install from the command line,\n\n```\nBower install bragit\n```\n\n\n## Contributions\n\nWe are more than happy to accept external contributions to the project in the form of feedback, bug reports and even better - pull requests :)\n\nTo start development of **Bragit** locally on your machine run through the following steps,\n\n- Install NPM dependencies,\n\n```bash\nnpm i\n```\n\n- Optionally, install Bower dependencies to view the demo app located at `./demo` folder,\n\n```bash\nbower i\n```\n\n- Make changes to `./bragit.js`,\n\n- Increase the current release number,\n\n```bash\nnpm run change-version 1.0.6 1.0.7\n```\n\nNotice that, the the first parameter is the current release followed by the new version number,\n\nThe [change-version](https://github.com/twbs/bootstrap/blob/master/grunt/change-version.js) script will change all the files that contain the current version number including `package.js`, `bower.js`, `bragit.js`, `README.md`, `demo/js/index.js` and `CHANGELOG` (undo any changes to `CHANGELOG`).\n\nThis saves time and an unnecessary pain trying to find all release number instances, so huge thanks to [Bootstrap](https://github.com/twbs/bootstrap) contributors for this script.\n\n- Build a distribution bundle, which will be stored at `./dist/bragit.js`,\n\n```bash\nnpm run build\n```\n\n- Publish the new NPM package (owner)\n\n```bash\nnpm publish\n```\n\n- Register for Bower (owner),\n\n```bash\nbower register\n```\n\n- Release a CDN instance,\n\nBrowse to [Rawgit](http://rawgit.com),\n\nPublish a tagged version of `dist/bragit.js` bundle, for example\n\n```html\nhttps://github.com/websemantics/bragit/blob/1.0.6/dist/bragit.js\n```\n\n\n## Bragit in the Wild\n\nHere a list of awesome projects (ahem) that use **Bragit**, .. let's all applaud, right,\n\n* [Themeblr](https://websemantics.github.io/themeblr/), A powerful CSS framework boilerplate and Bootstrap 4](http://v4-alpha.getbootstrap.com/) themes builder.\n\n* [Brimer](https://websemantics.github.io/brimer/), Github [Primer](http://primercss.io) CSS toolkit with a 'B' (as in Bootstrap).\n\n* [Semantic Ant](https://websemantics.github.io/semantic-ant), A custom theme for building beautiful modern Web apps with the combined awesomeness of [Semantic-UI](http://semantic-ui.com/) framework and the elegant minimal styles of [Ant Design](http://ant.design/) for beautiful and responsive layouts.\n\n* [Strapant](https://github.com/websemantics/strapant), [Ant Design](http://ant.design/) inspired theme for Twitter [Bootstrap 4](http://v4-alpha.getbootstrap.com/).\n\n* [Semantic Strap](https://github.com/websemantics/semantic-strap), [Semantic-UI](http://semantic-ui.com/) inspired theme for Twitter [Bootstrap 4](http://v4-alpha.getbootstrap.com/).\n\n* [Github SPA](https://websemantics.github.io/gh-pages-spa/), Easy way to enable Single Page Applications for GitHub Pages.\n\n* [Image Select](https://github.com/websemantics/Image-Select), jQuery library that provides image support for Single and Multi select HTML tags to be used with [Chosen](https://harvesthq.github.io/chosen/).\n\n* [Semantic Dojo](https://github.com/websemantics/semantic-dojo), A responsive [Dojo Toolkit](https://dojotoolkit.org/) theme that harnesses the style awesomeness of [Semantic-UI documentation](http://semantic-ui.com/elements/button.html#labeled) framework.\n\n* [Palette Genie](https://github.com/websemantics/palette-genie), Turns color values from an Image or PhotoShop ACO file into a list of named colors, lighter and darker shades, CSS classes and a beautiful style guide.\n\n* [Vimeo Upload](https://github.com/websemantics/vimeo-upload), Upload Vimeo videos and update their metadata directly from the browser.\n\n* [Boxed](https://github.com/websemantics/boxed), Lightweight Boilerplate Generator that does not require the Command-line Interface (CLI) to customize software addons and packages, for the Visually-oriented Developers.\n\n* [Oea.svg](https://github.com/websemantics/oeasvg.com), A library for building SVG interactive web applications. It provides three packages: Java.js, Draw2D.svg and Swing.svg, that makes building SVG apps a breeze.\n\n* [Browser.js](https://github.com/websemantics/Browser.js), An implementation of MathML, HTML and SVG Layout Manager and CSS Processor (i.e. Browser) in JavaScript.\n\n* [Hotdraw.js](https://github.com/websemantics/Hotdraw.js), a port of JHotDraw version 5.1. It is based on Erich Gamma's JHotDraw, which is copyright 1996, 1997 by IFA Informatik and Erich Gamma.\n\n\n## License\n\n[MIT](LICENSE)\nCopyright (c) Web Semantics, Inc.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebsemantics%2Fbragit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebsemantics%2Fbragit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebsemantics%2Fbragit/lists"}