hugo/content/blog/2022-01-02-github.md

+++ date = "2022-01-02" tags = ["github"] title = "blogにgithubの芝を生やした" slug = "github" +++

昔、gitlabのを表示していたことがありましたが、apiの変更があったので、今回はgithubの芝を生やしてみました。

現在、githubでは以下のurlにて芝の情報を取得できます。

$ curl -sL https://github.com/users/$USER/contributions

しかし、データは加工されていない状態で使いづらいので、以下のapiを使います。

https://github-contributions-api.deno.dev/

開発者 : https://zenn.dev/kawarimidoll/articles/b573f617a51c0b

$ curl -sL https://github-contributions-api.deno.dev/$USER.json

これをcal-heatmapで表示します。

# sample date
$ curl -sL https://cal-heatmap.com/datas-years.json

$ bower install cal-heatmap

使い方は見ての通りですが、exampleを紹介します。

<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
<div id="example-b"></div>
<script type="text/javascript">
	var cal = new CalHeatMap();
	cal.init({
			itemSelector: "#example-b",
			domain: "month",
			data: "/datas-years.json",
			start: new Date(2021, 0),
			cellSize: 9,
			range: 15,
			previousSelector: "#example-b-PreviousDomain-selector",
			nextSelector: "#example-b-NextDomain-selector",
			legend: [2, 4, 6, 8]
		});

</script>
<style>
div#example-b{
	margin-right: auto;
	margin-left: auto;
}
.cal-heatmap-container {
	width: 100%;
}
</style>

ただし、表示速度などの問題からbowerなどで同web-server上にインストールしたほうがいいでしょう。

<script type="text/javascript" src="/bower_components/d3/d3.min.js"></script>
<script type="text/javascript" src="/bower_components/cal-heatmap/cal-heatmap.min.js"></script>
<link rel="stylesheet" href="/bower_components/cal-heatmap/cal-heatmap.css" />

jsonは以下のように形成すればよさそう。

$ curl -sL https://github-contributions-api.deno.dev/$USER.json|jq ".|del(.totalContributions)|.[]|.[]|.[]|{(.date+\"T00:00:00Z\"|fromdate|tostring):(.contributionCount)}"|jq -n '[inputs] | add'
{
  "1640822400": 18,
  "1640908800": 5,
  "1640995200": 8,
  "1641081600": 2
}

これはcal-heatmapの仕様だと思いますが、dateがunixtimeなのと、keyにdateを入れるフォーマットに注意。

もし更新が必要なら、定期にgh-actionsを回せば良さそう。更新頻度が高くなければ、hugo build時でもいいですが、更新頻度が高く、かつ最新にこだわらないなら、1週間とか3日とかの間隔でいいかもしれません。常時だとapiやgh-actions側の負担になりますので。

./static/json/cal.jsonと${{github.actor}}に注意してください。

name: push json github contribution
  
on:
  push:
    branches:
      - src
  schedule:
    - cron:  '00 00 * * 0'

jobs:
  comment:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - name: install jq
      env:
        WORKFLOW_FILE_PATH: ${{ github.workflow }}
        GITHUB_REPOSITORY: ${{ github.repository }}

      run: |
        sudo apt-get install -y jq curl        

    - name: get json
      run: |
        curl -sL https://github-contributions-api.deno.dev/${{ github.actor }}.json|jq ".|del(.totalContributions)|.[]|.[]|.[]|{(.date+\"T00:00:00Z\"|fromdate|tostring):(.contributionCount)}"|jq -n '[inputs] | add' >> ./static/json/cal.json.tmp
        mv ./static/json/cal.json.tmp ./static/json/cal.json
        cat ./static/json/cal.json|jq .
        git config --local user.email "action@github.com"
        git config --local user.name "GitHub Action"
        if [ -z "`git status -s`" ];then
          exit
        fi
        git add ./static/json/cal.json
        git commit -m "push json github contribution"        
    - name: Push changes
      uses: ad-m/github-push-action@master
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        branch: src