@dmalagueta/git-blame

Web Components for displaying GitHub activity data. Works with any framework — React, Angular, Vue, or plain HTML.

Install

npm i @dmalagueta/git-blame

Or via CDN:

<script type="module" src="https://unpkg.com/@dmalagueta/git-blame"></script>

Components

| Component | Description | |-----------|-------------| | <git-blame-commits> | Recent commits with stats and optional language bar | | <git-blame-streak> | Current streak, longest streak, and total contributions | | <git-blame-languages> | Language breakdown with colored bar chart | | <git-blame-heatmap> | GitHub-style contribution heatmap |

Usage

All components work in two modes:

Direct data (recommended)

Set the .data property with JavaScript — works with any data source.

<script type="module" src="https://unpkg.com/@dmalagueta/git-blame"></script>

<git-blame-streak username="Dmalagueta"></git-blame-streak>

<script>
  const el = document.querySelector('git-blame-streak');
  el.data = {
    currentStreak: 12,
    longestStreak: 47,
    isActive: true,
    totalContributions: 842
  };
</script>

React

import { useRef, useEffect } from 'react';
import '@dmalagueta/git-blame';

function GitActivity() {
  const streakRef = useRef(null);

  useEffect(() => {
    fetch('/api/my-streak')
      .then(res => res.json())
      .then(data => {
        streakRef.current.data = data;
      });
  }, []);

  return <git-blame-streak ref={streakRef} username="Dmalagueta" />;
}

API fetch mode

Set api-url, username, and token as HTML attributes — the component fetches automatically.

<git-blame-commits
  api-url="https://your-api.com"
  username="Dmalagueta"
  token="ghp_..."
  limit="5"
  show-graph
></git-blame-commits>

Data Shapes

git-blame-commits

interface GitBlameCommit {
  sha: string;
  message: string;
  repo: string;
  additions: number;
  deletions: number;
  date: string;
  url?: string;
  author?: { name: string; email: string };
}

Attributes: limit (number, default 5), show-stats (boolean), show-details (boolean), show-graph (boolean), max-languages (number)

git-blame-streak

interface GitBlameStreakData {
  currentStreak: number;
  longestStreak: number;
  isActive: boolean;
  totalContributions: number;
}

git-blame-languages

interface GitBlameLanguage {
  name: string;
  percentage: number;
  color: string;
  bytes?: number;
}

Attributes: max-languages (number, default 5)

git-blame-heatmap

interface GitBlameActivityData {
  totalContributions: number;
  days: { contributionCount: number; date: string }[];
}

Theming

Override CSS custom properties on any component or parent container:

git-blame-commits {
  --git-blame-bg: #1e1e2e;
  --git-blame-surface: #181825;
  --git-blame-border: #334155;
  --git-blame-text: #cdd6f4;
  --git-blame-text-muted: #a6adc8;
  --git-blame-accent: #cba6f7;
  --git-blame-primary: #89b4fa;
  --git-blame-green: #a6e3a1;
  --git-blame-red: #f38ba8;
}

TypeScript

All data types are exported from the package:

import type {
  GitBlameCommit,
  GitBlameStreakData,
  GitBlameLanguage,
  GitBlameActivityData,
  GitBlameContributionDay
} from '@dmalagueta/git-blame';

License

MIT