GitHub로 JSON API 제공

사이트에 통계를 추가하고 싶었지만 이미 GitHub Repo에서 캡처했습니다. 거기에서 당기자.

통계 저장소

통계를 가져오는 저장소를 만들었습니다( kasuboski/stats ). Dev.to에서 게시물 통계를 가져오는 해커톤을 위해 만든 GitHub 작업을 사용합니다.

저장소는 stats/dev-to.json 파일로 주기적으로 업데이트됩니다. GitHub를 사용하면 raw.githubusercontent.com 에서 파일 내용을 찾아볼 수 있습니다. 내 경우 이 파일은 https://raw.githubusercontent.com/kasuboski/stats/main/stats/dev-to.json 에 있습니다.

데이터 가져오기

내 landing page에서 제공한 Raspberry Pi Cluster이 있습니다. mypersonal site에 대한 링크가 있는 자리 표시자였습니다. 이제 내 .



랜딩 페이지 자체는 평범한 HTML/CSS/JS입니다. 빠른 스타일을 얻기 위해 mvp.css을 사용합니다. kasuboski/joshcorp-site에서 코드를 찾을 수 있습니다. 통계를 추가하는 데 필요한 자바스크립트는 다음과 같습니다. 본문의 script 태그에 있습니다.

function getStats() {
  const stats = document.querySelector('#stats');
  const reactions = document.querySelector('#reactions-value');
  const views = document.querySelector('#views-value');
  const url = 'https://raw.githubusercontent.com/kasuboski/stats/main/stats/dev-to.json';
  fetch(url)
    .then(res => res.json())
    .then(data => {
      console.log(data);
      reactions.innerText = data.public_reactions_count;
      views.innerText = data.page_views_count;
      stats.style.display = "block";
    })
    .catch(err => {
      console.error('Error fetching stats: ', err);
    })
}

window.onload = getStats;

나는 이것이 아마도 GitHub가 정확히 권장하는 것이 아닐 것이라고 확신합니다… 하지만 트래픽이 너무 많지 않은 한 괜찮을 것입니다.