티스토리 사이드바에 GitHub Contribution Graph 넣는 방법

GitHub Contribution 그래프를 아래와 같이 임베딩하는 방법

결과

1. 사이드바에 HTML을 넣을 수 있도록 해주는 배너 출력 플러그인을 적용한다

"블로그 관리 페이지 > 플러그인"에서 적용할 수 있다.

"블로그 관리 페이지 > 플러그인"에서 "배너 출력" 적용!

2. 사이드바에 모듈이 추가됐는지 확인한다

사이드바 페이지의 기본 모듈 카테고리에 [플러그인] HTML 배너출력이 있어야 한다.

다음의 플러그인 들이 생겨야한다.

3. HTML 배너출력 모듈을 우측 사이드바에 배치한다

노출되길 원하는 위치에 HTML 배너출력 모듈을 배치해주자.

0

4. GitHub Contribution 그래프를 가져오는 HTML 코드를 나에게 맞게 수정한다.

아래 코드의 22번째 줄 있는 "사용자명"을 자신의 GitHub 사용자명으로 바꾸고 전체를 복사한다.

나는 GitHub 사용자명이 IamGroooooot이기 때문에 "사용자명"을 "IamGroooooot"로 수정했다.

5. 복사한 코드를 사이드바에 추가한 HTML 배너출력 모듈에 붙여 넣는다. 

편집을 누르면 모듈의 이름과 HTML 소스를 넣는 입력창이 나온다. 이름은 나중에 구분하기 쉽도록 원하는 대로 설정하고 2번째 입력 창인 HTML 소스 입력창에 방금 복사한 코드를 붙여 넣는다. 잘 복사되었다면 하단의 변경 사항 저장을 눌러서 적용해주자.

0

6. 사이드바에 잘 적용됐는지 확인하자!

굳!

---

참고한 문서

오르카님의 글을 보고 구현할 수 있었다. (😁감사합니당)
https://orcacode.tistory.com/entry/Tistory%EC%97%90-Github-Contribute-%EC%9C%84%EC%A0%AF-%EB%A7%8C%EB%93%A4%EA%B8%B0

티스토리에 Github 그래프 위젯 만들기

저 글을 작성하신 오르카님은 github-calendar를 이용해서 받아온 GitHub Contribution 데이터를 직접 CSS로 Styling하신 것 같다. 나는 API에서 제공하는 옵션들을 사용해서 필요 없는 정보들은 받아오지 않았고 부분적으로 깨지는 CSS만 수정했다. (아마 시간이 지나면서 기능이 추가된 것 같다)

오르카님 글의 CCL을 준수해서 이 글에 한정해서 CCL(CC BY-NC-SA 4.0)을 따릅니다.

---

코드 설명

사용한 API

https://github.com/Bloggify/github-calendar

Bloggify/github-calendar

GitHub Contribution 그래프를 임베딩하기 위해서 여기서 제공하는 API를 사용했다. 사용자명을 주면 그 사용자의 Contribution 그래프를 벡터 이미지의 형태로 반환해준다.

먼저 사용할 Library와 CSS를 불러온다

<!-- Include the library. -->
<script
  src="https://unpkg.com/github-calendar@latest/dist/github-calendar.min.js"
></script>

<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) -->
<link
   rel="stylesheet"
   href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css"
/>

먼저 코드의 윗부분에서는 필요한 Library와 CSS를 불러온다. GitHubCalendar함수를 적절한 파라미터와 함께 호출하면 다음과 같이 반환해준다.

CSS 없이 GitHubCalendar함수를 호출한 결과

전혀 Styling이 되어있지 않아서 기본으로 제공해주는 CSS를 불러왔다. 

기본으로 제공해주는 CSS와 GitHubCalendar함수를 호출한 결과

그러면 깨지지 않는다. 귀찮게 내가 짤 필요가 없어서 좋았다 ㅎㅎ..

다음으로 Container를 만든다

<div>
    <!-- Prepare a container for your calendar. -->
    <div style="text-align: center;"><strong>나의 GitHub Contribution 그래프</strong></div> 
    <div class="calendar">
        <!-- Loading stuff -->
        Loading data ...
    </div>
</div>

GitHub Contribution 그래프를 불러오기 위한 장소(Container)를 만든다. 상단에는 "나의 GitHub Contribution 그래프"라고 볼드체로 출력한 다음 GitHub Contribution 그래프 이미지를 위한 Container를 만들었다.

로딩 중이면 Container에 안에 Loading data...라는 텍스트가 뜨고 데이터를 다 불러오면 그래프 이미지가 나온다.

Loading 중

Loading 완료

마지막으로 이미지를 불러오고 깨지는 부분을 수정한다

<script>
    GitHubCalendar(".calendar", "IamGroooooot", { responsive: true, tooltips: false, global_stats : false}).then(function() {
        // delete the space underneath the module bar which is caused by minheight 
        document.getElementsByClassName('calendar')[0].style.minHeight = "100px";
        // hide more and less legen below the contribution graph
        document.getElementsByClassName('contrib-legend')[0].style.display = "none";
    });
</script>

내가 실제로 짠 부분은 이 3줄이다 ㅋㅋ. 

GitHub Contribution 그래프 이미지를 불러오기 위해 GitHubCalendar 함수를 호출했다

GitHubCalendar 함수는 3가지 인자를 받는다. 첫 번째로는 이미지를 삽입할 Container의 Selector를 받는다. 위에서 Container의 class명이 calendar여서 ".calendar"로 준다. 두 번째로는 GitHub 사용자명을 준다. 이 API는 사용자명으로 데이터를 불러온다. 세 번째로는 추가적인 옵션들을 명시해준다. 나는 반응형이길 원해서 responsive를 true로 줬고 가까이 대면 tooltip이 뜨는 걸 원하지 않아서 tooltip을 false로 줬고 그래프 말고 추가적인 정보(아래의 이미지 참고)도 출력되길 원하지 않아서 global_stats를 false로 줬다. 

이것이 global_stats이다

말고도 안내 텍스트(아래 이미지의 주황 박스 부분의 텍스트)나 다른 것들도 수정할 수 있다.

안내 텍스트

더 알고 싶다면 https://github.com/Bloggify/github-calendar#params의 Params 부분을 참고하면 된다.

GitHub의 이미지가 로딩되고 난 후에는 마음에 안 드는 부분을 없애거나 수정했다

이것저것 다 없애니깐 175px이었던 minHeight이 상대적으로 커졌다. 그래서 아래처럼 여백이 많이 생겼다. 

주황색 부분이 minHeight이 너무 높게 설정돼서 생기는 여백이다

그래서 아래의 코드로 minHeight을 100px로 낮췄다.

// delete the space underneath the module bar which is caused by minheight 
document.getElementsByClassName('calendar')[0].style.minHeight = "100px";

그리고 범례도 이미지가 작을 때 이상하게 나와서 불편했다.

LESS...MORE 범례가 불편했다

그래서 아래의 코드로 범례를 화면상에서 없앴다.

// hide more...less legend below the contribution graph
document.getElementsByClassName('contrib-legend')[0].style.display = "none";

다음은 최종 결과이다.

깔끔하당