티스토리 포스트 캘린더5 | 깃허브API를 응용해보자

일단 티스토리 내용을 가지고 오는거에 앞서서,

FRONT단에 깃허브 화면을 구현된 내용을 참고해야겠다는 생각이 들었다.

 

그래서 몇가지를 찾아서 우선은 티스토리 포스트 개수가 아니라 깃허브 커밋 내용을 가지고 온 그래프를 넣어놨다. 

 

먼저 첫번째로 참고한 방법은 깃허브 API내용이다.

간단하게 내 스킨의 HTML안에 아래의 코드만 넣으면 된다.

<img src="https://ghchart.rshah.org/내 깃허브ID" > 

그럼 깃허브에서 봤떤 잔디모양 그대로가 나타난다.

 

깃허브 차트API ghchart.rshah.org/vvspearlvvs

깃허브API사용한 사례

jamesu.dev/posts/2021/02/09/showing-github-contributions-graph/

https://jamesu.dev/posts/2021/02/09/showing-github-contributions-graph/

GitHub 커밋 그래프(GitHub Contributions Graph) 보여주기

 

두번째로 참고한 방법은 직접 HTML코드를 넣는건데

깃허브에서 봤던 잔디모양을 직접 CSS와 JS로 구현한 것 같다.

그래서 조금더 내가 직접 수정할 수 있는게 많다.

 

아래의 html코드를 내가 원하는 부분에 넣으면 된다.

<!-- 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="unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css"/>

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

 

<script>
GitHubCalendar(".calendar", "깃허브ID", { 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>

coding-groot.tistory.com/109

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

 

두가지 다 적용해봤는데 디자인은 역시 원조는 원조다..

이제 문제는 코드를 해체하는것이다.

앞에 그래프를 그리는 부분만 놔두고, 뒤에 데이터를 가지고 오는걸 바꿔야하는데..

그리고 데이터를 가지고 오는건

내블로그주소/archive/날짜 하고 나서 나온 페이지에 전체글의 개수를 긁어와야할것 같다.. 흠/..