Dynamic content in Github Profile Readme

There is a new thing in the market called Github readme profile. If you are not aware of what it is, please read from here

I came to know about how people are doing really amazing things with github profiles and wanted to do something cool myself.

The idea was to create an image dynamically and show it in github profile. I started with creating and express server on glitch.me and creating a route /image which will serve the image.

Dynamically creating images on node was easy using npm module canvas. More info about it here

I ended up with following code for handling /image route on the express server.

/* width and height of canvas*/
const width = 1200 
const height = 630

const canvas = createCanvas(width, height)
const context = canvas.getContext('2d') 
/* random background color*/
const bgColor=getRandomColor();

context.fillStyle = bgColor;  
context.fillRect(0, 0, width, height)

/* setting the font and text alignment*/
context.font = 'bold 70pt Menlo'
context.textAlign = 'center'
context.textBaseline = 'top'
/* getting randome message if random language*/
const randomIndex=getRandomInt(0,50);
const language=Object.keys(messages)[randomIndex];
const text = messages[language]
const textWidth = context.measureText(text).width
/*drawing text on canvas*/
context.fillStyle = '#fff'
context.fillText(text, 600, 170)
context.font = 'bold 15pt Menlo'
context.fillText(`(${language})`, 600, 280)

context.fillStyle = '#fff'
context.font = 'bold 30pt Menlo'
context.fillText('diwakersurya', 600, 540)

context.beginPath();

/* loading image from github url*/
const myimg = await loadImage('https://avatars3.githubusercontent.com/u/7386665?s=400&u=aaff658cd860d5f886775a293c58e73fa57e7bf9&v=4')
context.arc(600,500,50,0,2*Math.PI);
context.clip();
context.drawImage(myimg, 530, 450,myimg.width * 0.3, myimg.height * 0.3)

/*sending as response to client*/
const buffer = canvas.toBuffer('image/png')
response.contentType('image/jpeg');
response.send(buffer);

What we are doing in this code basically is creating a canvas on express server and attaching a bunch of text/images in the
canvas and finally sending it to client as an image.

Once the server is up and running, We need to make following changes to the readme.md file.

![](https://image-serv.glitch.me/image)  

If you are familier with markdown, you know that this line loads an image from url https://image-serv.glitch.me/image.

Thats it. The result will be something like this

Once I saved my github profile readme and reloaded the page, The image started showing up as expected. But on reloading the page, I was unable to get new image with changed color and message.As it turned out, github was caching the image once loaded and using the cached image url in the readme. I tried different ways to overcome this issue but couldn't.

Today I tried out again and turns out that github has removed caching of images. Refreshing the page gives me an image with new message and color.

Checkout my profile https://github.com/diwakersurya and try refreshing the page.

Since the image implementation is on server, there are definately infinite possibilities to think of.

Github Profile Project:

diwakersurya / diwakersurya

My readme profile

                     ⚡ Fun fact: * Refresh page to change the message language and background color. *

View on GitHub

References:
https://flaviocopes.com/canvas-node-generate-image/
https://github.com/Automattic/node-canvas
https://stackoverflow.com/questions/52940095/how-to-style-images-in-a-canvas
https://www.solosophie.com/how-to-say-hello-in-50/