本文では、オープンソースプロジェクトの Github カードの研究を通じて、既製のカードを描画 / 取得する方法について説明します。
0x00 起因#
Bing で検索しているときに、多くのプロジェクトに画像があることに気付きました（図 1 参照）。当時、これらの画像はどのように描画されているのか疑問に思いました。
後で、オープンソースプロジェクトのフォントファイルの中に答えを見つけました - Github Socialify
0x01 Github Socialify の使用#
Github Socialify ウェブサイトの使用は非常に簡単です。自分のユーザー名/リポジトリ名を入力し、いくつかの視覚化された設定を行うことで、自分専用の Github カードを取得できます。
生成された画像は次のようになります：
さらに、Thum.io のウェブサイトスクリーンショット API と組み合わせると、リンクは次のようになります：
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}
変数の説明
- {UserName}: Github のユーザー名
- {RepoName}: Github のリポジトリ名
- {AvatarUrl}: ユーザーのアバター、API またはリンクの組み立てによって取得できます
https://github.com/{UserName}.png
使い方を知ったので、私はこれに満足していませんでしたので、Github のリポジトリ全体を検索し、他の何かを見つけることを期待しました。
0x02 公式 API#
案の定、公式の API を見つけました。試行錯誤の中で、その使い方を知りました：https://opengraph.githubassets.com/githubcard/{UserName}/{RepoName}
ここで、UserNameとRepoNameは変数であり、前述の通りです。
ここで、このプロジェクトに感謝します。Star してください
したがって、あなた専用の Github カードを取得するために、この API に向けたリンクを構築することができます！
0x03 小結#
この記事では、Github のオープンソースプロジェクトの探索と活用を通じて、プロジェクトの Github カードを取得する方法について説明しました。あなたのREADME.mdを充実させることができます。何かわからないことがあれば、コメントを残してください〜