jmealo / github-timeline-widget

GitHub Timeline Widget allows you to embed your GitHub activity on an external website. It's written in Vanilla JS and requires no external libraries.

GitHub Timeline Widget

ATTENTION: Sorry folks, GitHub discontinued the API that this widget uses. Feel free to fork and update to the new API :)

The GitHub Timeline Widget allows you to embed your GitHub activity on an external website. It’s Vanilla JS and doesn’t require any libraries.

The size of the JavaScript and CSS stylesheet are:

• Minified: ~9KB
• Minified & GZipped: ~4KB

Live Demo: http://jeffreymealo.com/

The widget uses the GitHub font as described in the latest GitHub Style Guide.

Screenshot

Steps To Add To Your Website

1. Include the stylesheet: github-timeline-widget.min.css

<link rel="stylesheet" type="text/css" href="github-timeline-widget.min.css">

2. Create a <div> element on your page to hold the widget:

<div id="github-timeline-widget"></div>

3. Include the following code snippet:

<script type="text/javascript" src="github-timeline-widget.min.js"></script>
<script type="text/javascript">
//Call this after the DOM is loaded (see note following snippet)
  GitHubTimeline({
    username: '<YOUR GITHUB USERNAME!>',
    limit: 5,
    header: 'octocat',
    id: 'github-timeline-widget',
    exclude: ['gist'],
    callback: function () { //code to run once widget is inserted into DOM }
  });
</script>

I don’t include a Document Loaded/DOM Ready event to avoid duplicate code. Feel free to use your favorite JS library or try out the cross-browser example here: http://javascript.info/tutorial/onload-ondomcontentloaded.

Options:

• username: [string] GitHub username
• limit: [number] number of activities to show [default: 5]
• header: [string/bool]
  1. ‘octocat’: header with octocat and username [default]
  2. true: header (username only)
  3. false: no header
• exclude: [array of strings] activities that contain one of these strings will not appear in the widget
• callback: [function] called when the widget has been inserted into the DOM

Custom Styling:
Use the CSS classes github-timeline-header to style the header text (defaults to “lucidia grande” 14px bolder black) and github-timeline-event-text:link to style the text (defaults to “lucidia grande” 12px black).

See the github-timeline-widget.css file for all classes.