added a git heatmap from my forgejo instance to the website

src/app/components/ContributionHeatmap.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+interface HeatmapData {
+  timestamp: number;
+  contributions: number;
+}
+
+export default function ContributionHeatmap() {
+  const [weeks, setWeeks] = useState<{ date: string; contribs: number; level: number }[][]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [totalContribs, setTotalContribs] = useState(0);
+
+  useEffect(() => {
+    async function fetchHeatmap() {
+      try {
+        const res = await fetch("/api/heatmap");
+        if (!res.ok) {
+          throw new Error("Failed to fetch");
+        }
+        const data: HeatmapData[] = await res.json();
+        const map = new Map<string, number>();
+        let total = 0;
+        data.forEach((item) => {
+          const d = new Date(item.timestamp * 1000);
+          const dateStr = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
+          map.set(dateStr, item.contributions);
+          total += item.contributions;
+        });
+
+        const endDate = new Date();
+        endDate.setHours(0, 0, 0, 0);
+        const startDate = new Date(endDate);
+        startDate.setFullYear(startDate.getFullYear() - 1);
+        startDate.setDate(startDate.getDate() - startDate.getDay());
+
+        const newWeeks = [];
+        let currentWeek = [];
+
+        for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
+          const dateStr = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
+          const contribs = map.get(dateStr) || 0;
+          
+          let level = 0;
+          if (contribs > 0) level = 1;
+          if (contribs >= 3) level = 2;
+          if (contribs >= 6) level = 3;
+          if (contribs >= 10) level = 4;
+
+          currentWeek.push({ date: dateStr, contribs, level });
+
+          if (currentWeek.length === 7) {
+            newWeeks.push(currentWeek);
+            currentWeek = [];
+          }
+        }
+        if (currentWeek.length > 0) {
+          while (currentWeek.length < 7) {
+            currentWeek.push({ date: "", contribs: -1, level: -1 });
+          }
+          newWeeks.push(currentWeek);
+        }
+
+        setWeeks(newWeeks);
+        setTotalContribs(total);
+        setLoading(false);
+      } catch (err) {
+        console.error("Failed to load heatmap:", err);
+        setError(true);
+        setLoading(false);
+      }
+    }
+
+    fetchHeatmap();
+  }, []);
+
+  if (loading) {
+    return <div style={{ color: "var(--gray)", fontSize: "0.85rem" }}>Loading contributions...</div>;
+  }
+
+  if (error) {
+    return <div style={{ color: "var(--gray)", fontSize: "0.85rem" }}>Failed to load contributions.</div>;
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "10px", width: "100%" }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <div style={{ fontSize: "0.85rem", color: "var(--fg)" }}>
+          <span style={{ color: "var(--gray)" }}>martin@git.dvorakmortonxd.dev</span>:~$ echo &#34;<span style={{ color: "var(--green)" }}>{totalContribs}</span> contributions in the last year&#34;
+        </div>
+      </div>
+      <div className="heatmap-container">
+        {weeks.map((week, wIdx) => (
+          <div key={wIdx} className="heatmap-week">
+            {week.map((day, dIdx) => (
+              <div
+                key={dIdx}
+                className="heatmap-cell"
+                data-level={day.level >= 0 ? day.level : undefined}
+                style={{ visibility: day.level === -1 ? "hidden" : "visible" }}
+                title={day.level >= 0 ? `${day.contribs} contributions on ${day.date}` : undefined}
+              >
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+      <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "4px", fontSize: "0.75rem", color: "var(--gray)" }}>
+        <span>Less</span>
+        <div className="heatmap-cell" data-level="0"></div>
+        <div className="heatmap-cell" data-level="1"></div>
+        <div className="heatmap-cell" data-level="2"></div>
+        <div className="heatmap-cell" data-level="3"></div>
+        <div className="heatmap-cell" data-level="4"></div>
+        <span>More</span>
+      </div>
+    </div>
+  );
+}