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 (as shown in Figure 1). I was wondering how these images were drawn.
Later, I found the answer in the font files of some open source projects - Github Socialify.
0x01 Using Github Socialify#
Github Socialify is very easy to use. Enter your 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 by concatenating the 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 here, 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 obtain the Github Card of a project and enrich your README.md. If you still have any questions, feel free to leave a comment~