This article will study the Github Card of open source projects to learn how to draw/get ready-made Cards.
0x00 Background#
One day while searching on Bing, I suddenly noticed that many projects have images to accompany them (see Figure 1). I was wondering how these images were drawn.
Later, I found the answer in some open source projects' font files - Github Socialify.
0x01 Using Github Socialify#
The Github Socialify website is very easy to use. Enter your own username/repository name and through some visual configurations, you can get your own Github Card.
The generated image looks like this:
When combined with Thum.io's website screenshot interface, the link can be written as:
https://image.thum.io/get/width/1280/crop/640/viewportWidth/1280/png/noanimate/https://socialify.git.ci/{UserName}/{RepoName}/image?description=1&font=Rokkitt&forks=1&issues=1&language=1&name=1&owner=1&pattern=Circuit%20Board&pulls=1&stargazers=1&theme=Light&logo={AvatarUrl}
Variable Introduction
- {UserName}: Github username
- {RepoName}: Github repository name
- {AvatarUrl}: User avatar, can be obtained through API or concatenated link
https://github.com/{UserName}.png
Now that I know how to use it, I am not satisfied with just this, so I searched the entire Github repository hoping to find something else.
0x02 Official API#
Sure enough, I found the official API, and through continuous attempts, I learned how to use it: https://opengraph.githubassets.com/githubcard/{UserName}/{RepoName}
Where UserName and RepoName are variables, as mentioned above.
Thanks to this project for this, go star it
So we can construct a link to this API to get your own Github Card!
0x03 Conclusion#
This article explores and utilizes open source projects on Github to help you get the Github Card of your project and enrich your README.md. If you still have any questions, feel free to leave a comment~