TL;DR

GitHub의 회사용 계정과 개인용 계정의 잔디를 자신의 웹사이트에 정리해 표시해 보았습니다.

GitHub의 GraphQL API 을 두드리는 것으로 풀 정보를 취해 이것이므로, 그것을 자신의 웹 사이트에서 표시시켜 드리겠습니다.

절차

GitHub 액세스 토큰 발급

여기에서 Personal access token을 발행합니다.
htps : // 기주 b. 코 m / 세팅 gs / 토켄 s

구체적인 순서는 공식 문서의 설명을 알기 쉽기 때문에 그쪽을 참조하십시오.

이번에는 여러 계정에 액세스하지만 잔디 정보 등의 공개 정보이면 어떤 계정의 액세스 토큰으로도 얻을 수 있으므로 어느 하나로 괜찮습니다.

잔디 정보 얻기

이 사이트를 참고로했습니다.
htps // // 천. 에서 v / 유이 ch 군 / archi c ぇ s / b207651f5654b0

구체적인 절차는 다음과 같습니다.

끝점을 https://api.github.com/graphql로 설정

헤더에 액세스 토큰 추가 (Authorization: Bearer [発行したアクセストークン])

메서드를 POST로 설정

쿼리 작성 및 요청

잔디 정보 만 있으면 다음 쿼리로 얻을 수 있습니다.
사용자 ID를 변경하여 계정 당 잔디 정보를 얻을 수 있습니다.

{
  user(login: [ユーザーIDを入れる]) {
    contributionsCollection {
      contributionCalendar {
        weeks {
          contributionDays {
            contributionCount
          }
        }
      }
    }
  }
}

응답은 다음과 같습니다.
풀 정보 (각 날의 contribution 수)는 contributionCount라는 이름으로 주별로 배열로 반환됩니다.

{
  "data": {
    "user": {
      "contributionsCollection": {
        "contributionCalendar": {
          "weeks": [
            {
              "contributionDays": [
                {
                  "contributionCount": 0
                },
                {
                  "contributionCount": 1
                },
                {
                  "contributionCount": 5
                },
                {
                  "contributionCount": 17
                },
                {
                  "contributionCount": 3
                },
                {
                  "contributionCount": 5
                },
                {
                  "contributionCount": 6
                }
              ]
            },
            ...(省略)...
          ]
        }
      }
    }
  }
}

이미지는 GraphiQL의 예입니다.

웹사이트에서 보기

그리고는 contributionCount 에 들어있는 값을 사용해 표시할 뿐입니다.

나는 계정마다 색상을 변경하여 표시하려고했습니다.
(덧붙여서 Vue.js입니다)

이 근처의 자세한 것은, 길어지는 & 코드가 더럽기 때문에 이번은 할애합니다만, grid로 사각형을 늘어놓고, contributionCount 에 따라 background-color 바꾸어 하고 있습니다 웃음

결론

위의 Gif에도 약간 비치고 있습니다만, GitHub API는 잔디 정보 뿐만이 아니라, 리포지토리 정보나 언어 정보등도 당겨 이것 때문에, 여러가지 할 수 있어 재미 있습니다.

GraphQL 공부도되기 때문에 꼭!