Next.js server component that shows your last 2 GitHub commits on your site. Uses GitHub Search Commits API with optional auth token for private repos. Revalidates every hour via ISR. Requires lucide-react for the icon. Set GITHUB_TOKEN env var to include private repo activity. Replace hheinsoee with your GitHub username.

GitActivity.tsx

import { GitCommit } from 'lucide-react'

interface CommitItem {
  commit: {
    message: string
    author: { date: string }
  }
  repository: { name: string }
}

async function getRecentCommits(): Promise<{ message: string; repo: string; date: string }[]> {
  try {
    const headers: Record<string, string> = {
      Accept: 'application/vnd.github.cloak-preview+json',
    }
    if (process.env.GITHUB_TOKEN) {
      headers.Authorization = `Bearer ${process.env.GITHUB_TOKEN}`
    }
    const res = await fetch(
      'https://api.github.com/search/commits?q=author:hheinsoee&sort=author-date&per_page=2',
      { headers, next: { revalidate: 3600 } },
    )
    if (!res.ok) return []
    const data = await res.json()

    return (data.items ?? []).slice(0, 2).map((item: CommitItem) => ({
      message: item.commit.message.split('\n')[0],
      repo: item.repository.name,
      date: item.commit.author.date,
    }))
  } catch {
    return []
  }
}

function timeAgo(dateStr: string): string {
  const diff = Date.now() - new Date(dateStr).getTime()
  const hours = Math.floor(diff / 3600000)
  if (hours < 1) return 'just now'
  if (hours < 24) return `${hours}h ago`
  const days = Math.floor(hours / 24)
  if (days < 7) return `${days}d ago`
  return `${Math.floor(days / 7)}w ago`
}

export async function GitActivity() {
  const commits = await getRecentCommits()
  if (commits.length === 0) return null

  return (
    <div className="flex flex-col gap-1.5 text-xs font-mono">
      <span className="text-muted-foreground/40">Recent Activity</span>
      {commits.map((commit, i) => (
        <div key={i} className="flex items-center gap-1.5 truncate text-muted-foreground/60">
          <GitCommit className="w-3 h-3 shrink-0" />
          <span className="truncate">{commit.message}</span>
          <span className="shrink-0 text-muted-foreground/40">· {timeAgo(commit.date)}</span>
        </div>
      ))}
    </div>
  )
}