Draw drawings on your github contribution timeline and export them to a template. Works alongside https://github.com/gelstudios/gitfiti

gitfiti-helper-bookmarklet.js

/**
 * To install:
 *  1. Right click on bookmark bar
 *  2. Click 'Add Page'
 *  3. Give it a title
 *  4. Paste the below into the 'URL' field
 *  5. Save
 *
 * To use:
 *  1. Navigate to your user page on GitHub, like https://github.com/dannyid
 *  2. Click the bookmarklet
 *  3. Click on a square to cycle through all the colors
 *  4. Click and drag to select a color and keep painting with it
 *  5. Click the export button to export your art to be used with https://github.com/gelstudios/gitfiti
 *  6. The template will be printed to your browser console
**/

javascript:(function($) {
  var colors = [
    '#eeeeee', /* grey */
    '#d6e685', /* light green */
    '#8cc665', /* medium light green */
    '#44a340', /* medium dark green */
    '#1e6823'  /* dark green */
  ];

  var exportButtonShadow = '0 0 0 #e5e5e5, 0 0 1px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24)';

  var exportButtonCss = {
    'padding': '6px 9px',
    'margin': '0px 0px 0px 20px',
    'background-color': 'rgb(190, 79, 236)',
    'color': 'white',
    'border': 'none',
    'border-left': '4px solid rgb(250, 64, 255)',
    'outline': 'none',
    'font-weight': 100,
    'font-size': 14,
    'letter-spacing': 0.7,
    'box-shadow': exportButtonShadow
  };

  (function init() {
    $('.day')
    .attr('fill', '#eeeeee')
    .css({opacity: 1, cursor: 'default'})
    .parent().parent()
    .on('mousedown', startDrawing)
    .on('mouseup', stopDrawing);

    injectExportButton();
  })();

  function injectExportButton() {
    var $exportButton = $('<button>Export Gitfiti Template</button>');
    var $contributionsHeader = $('#contributions-calendar').siblings('h3');

    $contributionsHeader.css('padding', '2px 10px 3px 10px');

    $exportButton
    .css(exportButtonCss)
    .on('mousedown', depressButton)
    .on('mouseup', releaseButton)
    .click(exportFlow)
    .appendTo($contributionsHeader);
  }

  function depressButton(e) {
    $(e.target).css('box-shadow', 'none');
  }

  function releaseButton(e) {
    $(e.target).css('box-shadow', exportButtonShadow);
  }

  function exportFlow() {
    var templateName = prompt(
      '\n\nPlease give your template a name\n\n' +
      '-Use dashes instead of spaces\n' +
      '-No funny characters\n\n' +
      'Result will print to console\n'
    );

    if (templateName) {console.log(exportGrid(templateName))}
  }

  function startDrawing(e) {
    var $this = $(e.target);

    var newColor = advanceColor($this);

    $this.parent().parent().on('mouseenter', function(e) {
      var $this = $(e.target);
      fillColor($this, newColor);
    })
  }

  function stopDrawing(e) {
    $(e.target).parent().parent().off('mouseenter');
  }

  function advanceColor($this) {
    return $this.attr('fill', function(i, val) {
      return colors[(colors.indexOf(val) + 1) % 5];
    }).attr('fill');
  }

  function fillColor($this, newColor) {
    $this.attr('fill', newColor);
  }

  function returnColorFromDay(day) {
    var dayColor = $(day).attr('fill');
    return colors.indexOf(dayColor);
  }

  function returnDayRow(dayOfWeek, weeks) {
    return $.makeArray(weeks.children('rect:nth-child(' + dayOfWeek + ')')).map(returnColorFromDay).toString();
  }

  function exportGrid(templateName) {
    var weeks = $('.js-calendar-graph-svg > g > g');
    var yearOfColors = '';

    for (var i = 1; i <= 7; i++) {
      yearOfColors = yearOfColors.concat('[' + returnDayRow(i, weeks) + '],\n');
    }

    yearOfColors = yearOfColors.substr(0, yearOfColors.length - 2);

    return (
      '\n:' + templateName +
      '\n[' + yearOfColors + ']'
    );
  }
})($);