🪪

[GitHub Profile]Commitすることで山を作るカードを作ってみた

2024/06/29に公開

GitHub

🪪 作ったもの

以下のように毎日コミットすると、GitHubプロフィールカード画像に山が描かれていくGitHub Actionsを作りました

現在から過去一ヶ月分のコミット日数で山の形が決まるため、コミットしない日が続くと積み上げた山が減っていきます。なので、毎日コミットして山を成長させていきましょう！

Themeについて

現状7種類展開しています
今後もさらに増やしていきたい.....


default	dark	sakura	maple

onedark	solarized	solarized_dark

⚙️ 設定方法

自分のREADMEがあるディレクトリに移動し、「Add file」します
Name your fileに
.github/workflows/readme-mountain.ymlを入力します

中身は以下をコピペしてください

.github/workflows/readme-mountain.yml

on:
  schedule: # run 0:00 (JST)
    - cron: "0 9 * * *"
  workflow_dispatch:

jobs:
  readme_mountain:
    runs-on: ubuntu-latest
    name: generate-mountain
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Use README.Mountain
        uses: suba327777/README.Mountain@release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          USERNAME: ${{ github.repository_owner }}
          # select theme
          THEME: "onedark"
      - name: Diff
        id: diff
        run: |
          git add -N .
          git diff --name-only --exit-code
        continue-on-error: true
      - name: commit & push
        run: |
          git config user.name  "github-actions[bot]"
          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
          git add .
          git commit -m "[μRM] generate svg."
          git push
        if: steps.diff.outcome == 'failure'

Actinosから Run workflowを行います
成功すると、以下の感じでmountain-output配下にmountain.svgとREADME.mdが生成されます

プロフィールに表示させるには、mountain-output配下にあるREADME.mdのimgを貼り付けてください

README.md

<img src="https://raw.githubusercontent.com/自分のusername/自分のusername/main/mountain-output/mountain.svg" />

README.md

//ex 私の場合
<img src="https://raw.githubusercontent.com/suba327777/suba327777/main/mountain-output/mountain.svg" />

🔧 実装について

構成

GitHub Actionsのスケジュール実行で1日1回最新の情報をGitHubAPIから取得し、その値を元にSVG生成を行っています

カード生成

APIでのやり取りや、UI部分などはGoで作成しました

Actionsのenvからtheme名を読み込み、カードを生成しています
UI実装については愚直にSVGを書いています😧

カードコンポーネント

マウンテンコンポーネント

テーマ関数

GitHub Actions

GitHub Actionsでは以下の処理を行っています

GitHub APIを叩き情報を取得
APIの情報を元にSVG画像を生成
ディレクトリに生成したSVG画像を書き込む
ディレクトリにREADME.mdを生成する

以下、それらを実施しているmain.goとfile_writer.goのコードになります

main.go

file_writer.go

また、設定方法のusesで@releaseとしているのは、開発用のブランチとユーザに使ってもらうブランチを分けたかったためです
そのため、作業ブランチからmainブランチにマージされたらリリースブランチに向けてPRを作成するようにしています

おわりに

前々からGitHubに表示させるカードはどうやって実装しているのか気になっていたので、今回実装してみて面白かったです！

よろしければ、使っていただけると嬉しいです🥹

🪪 作ったもの

Themeについて

⚙️ 設定方法

🔧 実装について

構成

カード生成

GitHub Actions

おわりに

Discussion