ブログにGitHubの草を表示するアレが死んだので別のやつを探した

　こういうのホント困る。

結論

<a href="https://github.com/ytyaru"><img src="https://ghchart.rshah.org/ytyaru" width="100%"></a>

　こいつをはてなブログ管理画面→デザイン→カスタマイズ→ヘッダで追加する。

経緯

　2021-08-03、ブログに出していたGitHubの草が死んでいるのに気づいた。新しいのを探してみる。

死んだヤツ

　草の画像が表示されなくなったｗｗｗ　草はえ……ねーよ

• https://blog.a-know.me/entry/2016/01/09/222210
  • https://grass-graph.appspot.com/

<img src="https://grass-graph.moshimo.works/images/ytyaru.png">

新しいヤツ

　ググって見つけた。

• https://qiita.com/ikuwow/items/4343a252d1ff8b4e26a7
  • https://queryok.ikuwow.com/entry/github-widget-released/
    • https://ikuwow.github.io/yourcontributions/

<a href="https://github.com/ytyaru" class="gh-contributions" data-gh-username="ytyaru" target="_blank">ytyaru's contributions</a><script src="https://ikuwow.github.io/yourcontributions/widget.min.js"></script>

ytyaru's contributions

　なんかいらないゴミがたくさんついている。取っ払いたい。

コードを解析してみる

　上記コードのjsをみる。

• https://ikuwow.github.io/yourcontributions/widget.min.js
• https://ikuwow.github.io/yourcontributions/widget.js

　草を作っているのは以下コードだった。

widget += '<img src="https://ghchart.rshah.org/'+username+'" alt="'+username+'\'s Github chart" />';

• Github Chart API

　以下URLの{GitHub username}に自分のGitHubユーザ名をいれる。

• https://ghchart.rshah.org/{GitHub username}

　私、ytyaruなら以下。

• https://ghchart.rshah.org/ytyaru

　これを<img>タグのsrcに渡す。横幅が少し小さかったので100%にした。

<img src="https://ghchart.rshah.org/ytyaru" width="100%">

　OK！　でたよ草。くさいよ草。

草を生やすコード

<img src="https://ghchart.rshah.org/ytyaru" width="100%">

　ついでにGitHubへのリンクも追加。

<a href="https://github.com/ytyaru"><img src="https://ghchart.rshah.org/ytyaru" width="100%"></a>

アバター画像を取得するコード

<img src="https://avatars.githubusercontent.com/ytyaru?s=16">

　クエリsはサイズ。上記は縦横16pxになる。

草の上にアバターを表示するコード

<div id="github-contributions-widget" style="position: relative;">
<a href="https://github.com/ytyaru"><img src="https://ghchart.rshah.org/ytyaru" width="100%"></a>
<a href="https://github.com/ytyaru" style="position: absolute;left:0px;top:0px;"><img src="https://avatars.githubusercontent.com/ytyaru?s=16"></a>
</div>

　ちょっとウザいかも？

はてなブログに設定する

1. 記事の管理
2. デザイン
3. カスタマイズ
4. ヘッダ
5. タイトル下

before

<a href="https://github.com/ytyaru"><img src="https://grass-graph.moshimo.works/images/ytyaru.png"></a>

after

<a href="https://github.com/ytyaru"><img src="https://ghchart.rshah.org/ytyaru" width="100%"></a>

所感

　やれやれ。これで草が復活したぜ。

対象環境

• 2021-08-04
• Raspbierry pi 4 Model B
• Raspberry Pi OS buster 10.0 2020-08-20 ※
• bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux