GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing gitmap.rudro.dev — Gitmap

a react component for visualizing github contributions as a heatmap

Installation

npx shadcn@latest add https://gitmap.rudro.dev/r/gitmap.json

Usage

Import the component and provide the required props: contributions data, date range, and colors.

example.tsx

import { Gitmap } from "@/components/gitmap"

const contributions = [
  { date: "2024-01-01", count: 5, level: 2 },
  { date: "2024-01-02", count: 12, level: 4 },
]

const colors = {
  empty: "#161b22",
  level1: "#0e4429",
  level2: "#006d32",
  level3: "#26a641",
  level4: "#39d353",
}

export function MyGitmap() {
  return (
    <Gitmap
      contributions={contributions}
      from={new Date("2024-01-01")}
      to={new Date("2024-12-31")}
      colors={colors}
    />
  )
}

Theming with CSS Variables

For seamless light/dark mode support, define your gitmap colors as CSS custom properties.

globals.css

:root {
  --gitmap-empty: #ebedf0;
  --gitmap-level-1: #9be9a8;
  --gitmap-level-2: #40c463;
  --gitmap-level-3: #30a14e;
  --gitmap-level-4: #216e39;
}

.dark {
  --gitmap-empty: #161b22;
  --gitmap-level-1: #0e4429;
  --gitmap-level-2: #006d32;
  --gitmap-level-3: #26a641;
  --gitmap-level-4: #39d353;
}

gitmap.tsx

const colors = {
  empty: "var(--gitmap-empty)",
  level1: "var(--gitmap-level-1)",
  level2: "var(--gitmap-level-2)",
  level3: "var(--gitmap-level-3)",
  level4: "var(--gitmap-level-4)",
}

<Gitmap
  contributions={contributions}
  from={startDate}
  to={endDate}
  colors={colors}
/>

Static Themes

Alternatively, define static color themes as JavaScript objects:

themes.ts

const themes = {
  github: {
    empty: "#161b22",
    level1: "#0e4429",
    level2: "#006d32",
    level3: "#26a641",
    level4: "#39d353",
  },
  ocean: {
    empty: "#1a1b26",
    level1: "#1e3a5f",
    level2: "#2563eb",
    level3: "#3b82f6",
    level4: "#60a5fa",
  },
}

API Reference

Gitmap Props

Prop	Type	Default	Description
contributions*	ContributionDay[]	-	Array of contribution data with date, count, and level
from*	Date	-	Start date for the gitmap range
to*	Date	-	End date for the gitmap range
colors*	GitmapColors	-	Color configuration object for the gitmap levels
cellSize	number	10	Size of each cell in pixels
cellGap	number	3	Gap between cells in pixels
showMonths	boolean	true	Show month labels above the grid
showDays	boolean	true	Show day labels on the left side
showCounts	boolean	false	Display contribution count inside cells
className	string	-	Additional CSS classes for the container

ContributionDay

Each contribution day object should have the following shape:

Prop	Type	Default	Description
date*	string	-	Date in YYYY-MM-DD format
count*	number	-	Number of contributions on this day
level*	0 \| 1 \| 2 \| 3 \| 4	-	Intensity level for coloring (0 = no contributions)

GitmapColors

Color configuration for the five intensity levels:

Prop	Type	Default	Description
empty*	string	-	Color for days with no contributions
level1*	string	-	Color for low activity
level2*	string	-	Color for medium-low activity
level3*	string	-	Color for medium-high activity
level4*	string	-	Color for high activity

Customization

Customize the appearance with cell size, gap, and visibility options.

customization.tsx

<Gitmap
  contributions={contributions}
  from={startDate}
  to={endDate}
  colors={colors}
  cellSize={12}
  cellGap={4}
  showMonths={true}
  showDays={true}
  showCounts={true}
  className="my-custom-class"
/>

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.