Zenn
📘

GIthub Readme Statusをつかってみる(ついでにSkillアイコンも)

2023/09/23に公開
GitHub
#
readme
#
skill
tech

まずは見た目から
Githubで自分がどんな言語を取り組んでいるかとか可視化したいのでGithub Readme Statusというライブラリを利用させてもらい、プロフィールをかっちょよくすることにしました

Github Readme Statud
https://github.com/anuraghazra/github-readme-stats

最終的にはこんな感じになります

準備

基本的には単純に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にお世話になります
https://github.com/tandpfun/skill-icons#readme

簡単や・・・

[![My Skills](https://skillicons.dev/icons?i=js,html,css,wasm)](https://skillicons.dev)

おわり

Discussion