やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

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

 こういうのホント困る。

結論

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

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

経緯

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

死んだヤツ

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

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

新しいヤツ

 ググって見つけた。

<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をみる。

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

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

 以下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>

所感

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

対象環境

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