DrawOnGithubContribCalendar

DrawOnGithubContribCalendar.js

/**
 * Draw string in the github contribution calendar.
 * Usage:
 *   1. Create a "snippet" in the Chrome devtool -> Sources -> Snippets (in left sidebar).
 *   2. Visit your github profile page.
 *   3. Modify the string.
 *   4. Run
 *
 * Credit:
 *   - 3x5 font data: https://github.com/fabiopiratininga/oled-font-3x5
 */

const font = {
	monospace:true,
	width:3,
	height:5,
	fontData:[
		0x00,0x00,0x00,
		0x00,0x17,0x00,
		0x03,0x00,0x03,
		0x1F,0x0A,0x1F,
		0x12,0x1F,0x09,
		0x09,0x04,0x12,
		0x0A,0x15,0x1D,
		0x00,0x03,0x00,
		0x0e,0x11,0x00,
		0x11,0x0e,0x00,
		0x15,0x0e,0x15,
		0x04,0x0e,0x04,
		0x10,0x08,0x00,
		0x04,0x04,0x04,
		0x00,0x10,0x00,
		0x18,0x04,0x03,
		0x1F,0x11,0x1F,
		0x02,0x1F,0x00,
		0x19,0x15,0x12,
		0x11,0x15,0x0A,
		0x07,0x04,0x1F,
		0x17,0x15,0x09,
		0x0E,0x15,0x09,
		0x01,0x1D,0x03,
		0x0A,0x15,0x0A,
		0x12,0x15,0x0E,
		0x00,0x0A,0x00,
		0x10,0x0A,0x00,
		0x04,0x0A,0x11,
		0x0A,0x0A,0x0A,
		0x11,0x0A,0x04,
		0x01,0x15,0x02,
		0x0E,0x15,0x16,
		0x1E,0x05,0x1E,
		0x1F,0x15,0x0A,
		0x0E,0x11,0x0A,
		0x1f,0x11,0x0E,
		0x1f,0x15,0x15,
		0x1f,0x05,0x05,
		0x0E,0x11,0x19,
		0x1F,0x04,0x1F,
		0x00,0x1F,0x00,
		0x08,0x10,0x0F,
		0x1F,0x04,0x1B,
		0x1F,0x10,0x10,
		0x1F,0x02,0x1F,
		0x1F,0x01,0x1E,
		0x0E,0x11,0x0E,
		0x1F,0x05,0x02,
		0x0E,0x11,0x1E,
		0x1F,0x05,0x1A,
		0x12,0x15,0x09,
		0x01,0x1F,0x01,
		0x1F,0x10,0x1F,
		0x0F,0x18,0x0F,
		0x1F,0x08,0x1F,
		0x1B,0x04,0x1B,
		0x07,0x1C,0x07,
		0x19,0x15,0x13,
		0x1f,0x11,0x00,
		0x03,0x04,0x18,
		0x11,0x1f,0x00,
		0x02,0x01,0x02,
		0x10,0x10,0x10,
		0x01,0x02,0x00,
		0x1E,0x05,0x1E,
		0x1F,0x15,0x0A,
		0x0E,0x11,0x0A,
		0x1f,0x11,0x0E,
		0x1f,0x15,0x15,
		0x1f,0x05,0x05,
		0x0E,0x11,0x19,
		0x1F,0x04,0x1F,
		0x00,0x1F,0x00,
		0x08,0x10,0x0F,
		0x1F,0x04,0x1B,
		0x1F,0x10,0x10,
		0x1F,0x02,0x1F,
		0x1F,0x01,0x1E,
		0x0E,0x11,0x0E,
		0x1F,0x05,0x02,
		0x0E,0x11,0x1E,
		0x1F,0x05,0x1A,
		0x12,0x15,0x09,
		0x01,0x1F,0x01,
		0x1F,0x10,0x1F,
		0x0F,0x18,0x0F,
		0x1F,0x08,0x1F,
		0x1B,0x04,0x1B,
		0x07,0x1C,0x07,
		0x19,0x15,0x13,
		0x04,0x1F,0x11,
		0x00,0x1B,0x00,
		0x11,0x1f,0x04,
		0x01,0x02,0x01
	],
	lookup: [' ','!','"','#','$','%','&',"'",'(',')','*','+',',','-','.','/','0','1','2','3','4','5','6','7','8','9',':',';','<','=','>','?','@','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','[','\\',']','^','_','`','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','{','|','}','~']
};

function getFontData(ch) {
    const idx = font.lookup.indexOf(ch);
    if (idx > -1) {
        const fontData = font.fontData.slice(3 * idx, 3 * idx + 3);
        return fontData;
    }

    return null;

}

function getStringData(s) {
    const data = [];
    for (let i = 0; i < s.length; i++) {
        const c = s.charAt(i);
        const charData = getFontData(c);
        for (let j = 0; j < charData.length; j++) {
            data.push(charData[j]);
        }
        data.push(0);
    }
    return data;
}

function drawOnContributionGraph(data) {
    const pixels = document.querySelectorAll('.ContributionCalendar-day');
    const numPixels = pixels.length - 5;  // last 5 pixels are legends
    // first column
    for (let i = 0; i < 7; i++) {
        pixels[i].dataset.level = 0;
    }

    // draw chars
    for (let i = 0; i < data.length; i++) {
        if (7 + i * 7 >= numPixels) break;
        pixels[7 + 7 * i].dataset.level = 0;
        for (let j = 0; j < 5; j++) {
            pixels[7 + 7 * i + j + 1].dataset.level = ((data[i] >> j) & 1) ? Math.floor(Math.random() * 2 + 3) : 0;
        }
        pixels[7 + 7 * i + 6].dataset.level = 0;
    }

    // remaining columns
    for (let i = (data.length + 1) * 7; i < numPixels; i++) {
        pixels[i].dataset.level = 0;
    }
}

const data = getStringData('HELLO WORLD');
drawOnContributionGraph(data);