Display your Github repositories stats in style using Semantic-UI labeled buttons. Working with Semantic-UI labeled buttons 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.
Try it
Or follow the How To guide
Getting Started
1- Include the following script in a web page. Notice the release number 1.0.6
in the url; change as needed.
<script type="text/javascript" src="https://cdn.rawgit.com/websemantics/bragit/1.0.6/bragit.js"></script>
2- Add a labeled button as specified in Semantic-UI documentation.
3- 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.
<a class="ui labeled tiny button github-websemantics-bragit-stars">
<div class="ui brand tiny button">
<i class="star icon"></i> Stars
</div>
<div class="ui basic brand left pointing label">
<i class="spinner loading icon"></i>
</div>
</a>
The 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,
github-websemantics-bragit-stars
github-websemantics-bragit-forks
github-websemantics-bragit-watchers
github-websemantics-bragit-issues
github-websemantics-bragit-download
Preview
Behind the Scenes
The 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 framework was not detected in the loaded document.
The 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
This can be overridden if required as follows
<script type="text/javascript">
Bragit.defaults({ css: {
version: '2.1.8',
inject: false,
uri: 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/{{version}}/components/{{module}}.min.css',
modules: ['button', 'icon', 'label'],
custom: null
}});
</script>
Notice 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"
Custom Class Names
As 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.
However, should the need arise, this can be changed as follows,
<script type="text/javascript">
Bragit.defaults({
delimiter: '-',
cls: 'github'
});
</script>
By 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
.
Actions
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,
<script type="text/javascript">
Bragit.defaults({
actions: {
forks: {
uri: '/network',
property: 'forks_count'
},stars: {
uri: '/stargazers',
property: 'stargazers_count'
},watchers: {
uri: '/watchers',
property: 'subscribers_count'
},issues: {
uri: '/issues',
property: 'open_issues_count'
},github: {
uri: '',
property: null
},download: {
uri: '/archive/master.zip',
property: null
},contributors: {
uri: '/contributors',
property: null
}
}
});
</script>
Notice 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.
For 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).
Custom Buttons Styles
Semantic-UI labeled buttons come in all colors and sizes. 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.
/* styles for github action buttons */
.ui.brand.button, .ui.brand.buttons .button {
background-color: #756c74;
color: #fff!important;
}
.ui.brand.label {
color: #756c74!important;
border-color: #756c74!important;
background-color: #ffffff;
}
.ui.brand.button:focus, .ui.brand.buttons .button:focus,
.ui.brand.button:hover, .ui.brand.buttons .button:hover {
background-color: #9d959c;
}
.ui.brand.labels .label:focus, .ui.brand.label:focus,
.ui.brand.labels .label:hover, .ui.brand.label:hover {
color: #9d959c!important;
border-color: #9d959c!important;
}
.ui.labeled .ui.button .star.icon {
color: #F5CC7A!important;
}
All 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.
<!-- ************************( Stars )********************************-->
<a class="ui labeled tiny button github-websemantics-bragit-stars">
<div class="ui brand tiny button">
<i class="star icon"></i> Stars
</div>
<div class="ui basic brand left pointing label">
<i class="spinner loading icon"></i>
</div>
</a>
<!-- **********************( Forks )******************************-->
<a class="ui left labeled tiny button github-websemantics-bragit-forks">
<div class="ui basic brand right pointing label">
<i class="spinner loading icon"></i>
</div>
<div class="ui brand tiny button">
<i class="fork icon"></i> Forks
</div>
</a>
<!-- ***********************( Watchers )*******************************-->
<a class="ui labeled tiny button github-websemantics-bragit-watchers">
<div class="ui brand tiny button">
<i class="eye icon"></i> Watchers
</div>
<div class="ui basic brand left pointing label">
<i class="spinner loading icon"></i>
</div>
</a>
<!-- ************************( Issues )********************************-->
<a class="ui left labeled tiny button github-websemantics-bragit-issues">
<div class="ui basic brand right pointing label">
<i class="spinner loading icon"></i>
</div>
<div class="ui brand tiny button">
<i class="info circle icon"></i> Issues
</div>
</a>
<!-- ************************( Download )********************************-->
<a class="ui brand tiny button github-wecs-bragit-download">
<i class="download icon"></i> Download
</a>
<!-- **********************( Contributors )******************************-->
<a class="ui brand tiny button github-websemantics-bragit-contributors">
<i class="users icon"></i> Contributors
</a>
Using Bower
If the use of Bower is prefered, one can either include Bragit in the bower.json
file or install from the command line,
Bower install bragit
Contributions
We are more than happy to accept external contributions to the project in the form of feedback, bug reports and even better - pull requests :)
To start development of Bragit locally on your machine run through the following steps,
- Install NPM dependencies,
npm i
- Optionally, install Bower dependencies to view the demo app located at
./demo
folder,
bower i
-
Make changes to
./bragit.js
, -
Increase the current release number,
npm run change-version 1.0.6 1.0.7
Notice that, the the first parameter is the current release followed by the new version number,
The change-version 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
).
This saves time and an unnecessary pain trying to find all release number instances, so huge thanks to Bootstrap contributors for this script.
- Build a distribution bundle, which will be stored at
./dist/bragit.js
,
npm run build
- Publish the new NPM package (owner)
npm publish
- Register for Bower (owner),
bower register
- Release a CDN instance,
Browse to Rawgit,
Publish a tagged version of dist/bragit.js
bundle, for example
https://github.com/websemantics/bragit/blob/1.0.6/dist/bragit.js
Bragit in the Wild
Here a list of awesome projects (ahem) that use Bragit, .. let's all applaud, right,
-
Themeblr, A powerful CSS framework boilerplate and Bootstrap 4](http://v4-alpha.getbootstrap.com/) themes builder.
-
Brimer, Github Primer CSS toolkit with a 'B' (as in Bootstrap).
-
Semantic Ant, A custom theme for building beautiful modern Web apps with the combined awesomeness of Semantic-UI framework and the elegant minimal styles of Ant Design for beautiful and responsive layouts.
-
Strapant, Ant Design inspired theme for Twitter Bootstrap 4.
-
Semantic Strap, Semantic-UI inspired theme for Twitter Bootstrap 4.
-
Github SPA, Easy way to enable Single Page Applications for GitHub Pages.
-
Image Select, jQuery library that provides image support for Single and Multi select HTML tags to be used with Chosen.
-
Semantic Dojo, A responsive Dojo Toolkit theme that harnesses the style awesomeness of Semantic-UI documentation framework.
-
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.
-
Vimeo Upload, Upload Vimeo videos and update their metadata directly from the browser.
-
Boxed, Lightweight Boilerplate Generator that does not require the Command-line Interface (CLI) to customize software addons and packages, for the Visually-oriented Developers.
-
Oea.svg, 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.
-
Browser.js, An implementation of MathML, HTML and SVG Layout Manager and CSS Processor (i.e. Browser) in JavaScript.
-
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.
License
MIT Copyright (c) Web Semantics, Inc.