📘
GIthub Readme Statusをつかってみる(ついでにSkillアイコンも)
まずは見た目から
Githubで自分がどんな言語を取り組んでいるかとか可視化したいのでGithub Readme Statusというライブラリを利用させてもらい、プロフィールをかっちょよくすることにしました
Github Readme Statud
最終的にはこんな感じになります
準備
基本的には単純にREADME.mdを編集するだけになります
レポジトリ名は自分のユーザー名と同じにするらしい
mkdir mizu-orient && cd mizu-orient
echo TBD > README.md
取り組み言語等の割合表示
下のやつのうち{username}を自分のものに変えるだけ
簡単すぎて泣いちゃった
[![TopLangs](https://github-readme-stats.vercel.app/api/top-langs/?username={username})](https://github.com/anuraghazra/github-readme-stats)
一応HTML化もできる
<a href="https://github.com/anuraghazra/github-readme-stats">
<img align="left" src="https://github-readme-stats.vercel.app/api/top-langs/?username={username}" />
</a>
{username}の後ろに&theme={theme}をつければ色合いも変えられるっぽいです
All inbuilt themes
GitHub Readme Stats comes with several built-in themes (e.g. dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula).
&layout=compactをつければ小さく表示もできます(自分はこれにした
ステータスカード
GithubのCommit数とかそんな感じの統計を表示するやつです
これも下のやつコピペするだけ(ンンンンンも
[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username={username})](https://github.com/anuraghazra/github-readme-stats)
ステータスに☆マークとかつけたかったら{username}等のステータスの後ろに&show_icons=trueを加える
てかCかよぉ!
整えとく
位置ががたがたで不細工になるのは往々にしてあるみたいです
少し前に書いたHTMLに置き換えるやりかたで良い感じに調整します
<p align="left">
<img alt="TopLangs" height="250px" src="https://github-readme-stats.vercel.app/api/top-langs/?username=mizu-orient&theme=transparent&layout=compact"/>
<img alt="githubStats" height="250px" src="https://github-readme-stats.vercel.app/api?username=mizu-orient&theme=transparent&show_icons=ture"/>
</p>
スキルアイコン並べるのもやっとく
skill-iconsにお世話になります
簡単や・・・
[![My Skills](https://skillicons.dev/icons?i=js,html,css,wasm)](https://skillicons.dev)
Discussion