GitHub Contributions

지난 1년의 GitHub 기여 활동을 일별 그래프와 툴팁으로 보여줘요.

2 contributions in 2025 on GitHub.

LessMore

특징

캘린더 그리드·범례·연간 합계는 Kibo UI Contribution Graph를 기반으로 만들었어요.
기여 데이터는 Jonathan Gruber의 GitHub Contributions API에서 불러와요.
Next.js unstable_cache로 하루 동안 캐시하고, Promise를 클라이언트에 넘겨 React use()로 풀어요.

설치

처음이라면 components.json에 @smlee 레지스트리를 한 번만 등록하세요.

{
  "registries": {
    "@smlee": "https://smlee.info/r/{name}.json"
  }
}

그다음 컴포넌트를 추가해요.

pnpm dlx shadcn@latest add @smlee/github-contributions

사용법

import { Suspense } from "react"
 
import {
  GitHubContributions,
  GitHubContributionsFallback,
} from "@/components/github-contributions"
import { getCachedContributions } from "@/components/github-contributions/lib/get-cached-contributions"
 
const GITHUB_USERNAME = "smlee98"
const GITHUB_PROFILE_URL = "https://github.com/smlee98"
 
export default function GitHubContributionsDemo() {
  const contributions = getCachedContributions(GITHUB_USERNAME)
 
  return (
    <Suspense fallback={<GitHubContributionsFallback />}>
      <GitHubContributions
        contributions={contributions}
        githubProfileUrl={GITHUB_PROFILE_URL}
      />
    </Suspense>
  )
}