Github card - GitHubリポジトリ情報を表示するカスタムエレメント

HTML5ではカスタムエレメントという機能で、独自のHTMLタグを追加できます。あまり使われている例は見ませんが、特定のUIや機能をサンドボックス化できるので便利です。

今回紹介するGithub cardはGitHubリポジトリの紹介をカスタムエレメント化したソフトウェアになります。

Github cardの使い方

こんな感じで表示できます。

リポジトリを変えれば、表示に反映されます。

HTMLは次のようになります。これを埋め込めばいいだけです。

<github -card repo="sveltejs/svelte" wide="yes">
<a href="https://github.com/sveltejs/svelte">https://github.com/sveltejs/svelte</a>
<script defer src="https://cdn.jsdelivr.net/gh/reddec/github-card@1/dist/github-card.min.js"></script>
</github>

Github cardを使えばリポジトリに対するスター数、フォロー数そして利用している言語などを表示するカードを簡単に使うことができます。埋め込みタグのような感じだと思えばいいでしょう。リンクとスクリプトタグだけなので導入も容易です。

Github cardはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Github card demo test

reddec/github-card: Github Card custom element tag