GitHub Graph

1"use client";
2 
3import * as React from "react";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7 
8export type GithubGraphVariant = "github" | "graphite" | "ocean" | "violet";
9export type GithubGraphAnimation = "wave" | "scan" | "cascade";
10export type GithubGraphAmbientEffect = "none" | "tide" | "drift" | "twinkle";
11 
12export type GithubContribution = {
13  date: string;
14  count: number;
15  level?: number;
16};
17 
18export type GithubContributionCell = GithubContribution & {
19  level: number;
20};
21 
22export type GithubContributionWeek = GithubContributionCell[];
23 
24export interface GithubGraphProps {
25  /** GitHub username, with or without a leading @. @default "shadcn" */
26  account?: string;
27  /** Number of recent calendar months to display. @default 6 */
28  months?: number;
29  /** Color treatment for contribution levels. @default "github" */
30  variant?: GithubGraphVariant;
31  /** Entrance choreography for graph cells. @default "wave" */
32  animation?: GithubGraphAnimation;
33  /** Animation multiplier; higher values reveal the graph faster. @default 1 */
34  animationSpeed?: number;
35  /** Size of each contribution cell in pixels. @default 18 */
36  cellSize?: number;
37  /** Space between contribution cells in pixels. @default 4 */
38  cellGap?: number;
39  /** Corner radius of contribution cells in pixels. @default 3 */
40  cellRadius?: number;
41  /** Shows the contribution-level legend. @default false */
42  showLegend?: boolean;
43  /** Shows the account name above the graph. @default true */
44  showAccount?: boolean;
45  /** Persistent, subtle motion pattern applied to graph cells. @default "twinkle" */
46  ambientEffect?: GithubGraphAmbientEffect;
47  /** Strength of the persistent cell motion. @default 0.65 */
48  ambientIntensity?: number;
49  /** Optional preloaded contributions, which bypass the public fetch. */
50  data?: GithubContribution[];
51  className?: string;
52}
53 
54type ResourceState =
55  | { status: "loading" }
56  | { status: "ready"; contributions: GithubContribution[] }
57  | { status: "error"; message: string };
58 
59const CONTRIBUTIONS_ENDPOINT =
60  "https://github-contributions-api.jogruber.de/v4";
61 
62const VARIANTS: Record<
63  GithubGraphVariant,
64  [string, string, string, string, string]
65> = {
66  github: ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"],
67  graphite: ["#eeeeee", "#cccccc", "#969696", "#5f5f5f", "#171717"],
68  ocean: ["#e6f5ff", "#b4e2ff", "#62bdf5", "#2585d8", "#124e93"],
69// … truncated