Dynamic content in Github Profile Readme
Tags: github, beginners, javascript, node
Published: 2020-07-28 17:06:06

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](https://https://www.aboutmonica.com/blog/how-to-create-a-github-profile-readme)

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](https://www.npmjs.com/package/canvas)

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

```javascript
/* 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
![my-github-profile-readme](https://dev-to-uploads.s3.amazonaws.com/i/k9eppunqdb1m5rou3ruc.png)

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](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:
{% github diwakersurya/diwakersurya %}

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/