Post updated: 22.03.2021
I wanted to have automated social sharing cards for my Gatsby blog and I developed this as a side-project during the December 2020 holidays. While working on this, I wondered why not make the cards GIFfy. I was quite excited and was able to achieve what I wanted, only to get disappointed when I shared on Twitter that the GIF did not render as expected; it rendered as a non-GIF version. Given that I could not recall seeing a single GIF as a social card on Twitter, I should have known what to expect 😅.
Since then, this post has been long overdue. Recently, when I shared my blog post link with someone over Discord, the GIF worked. It worked on LinkedIn, it worked on Slack too. This motivated me to get back to this post to finish it off.
This was the first time I tried to build a Gatsby plugin.
I followed the above mentioned tutorial to setup a Gatsby plugin which would generate automated images; the tutorial was pretty straight forward. I used Vectr to setup the below shown template which is the base GIF the plugin uses to print text.
It was the Christmas holiday season when I was working on this, and I picked the lights from this Codepen.
I used getwaves.io to generate the wave for the base GIF template.
Once the base GIF template was ready, I needed a Node.js library which would generate a GIF programmatically. The tutorial post referred
Jimp but the GIF encoder was unavailable. I found
Jimp compatible library to work with GIFs.
The source code for generating a GIF file via Node.js explained 👇.