Enhance commit fetching in development.astro with improved API integration

- Update GITEA_COMMITS_URL to include additional query parameters for better data retrieval.
- Implement authorization header for secure API access if a token is present.
- Refactor commit display logic to handle potential missing data gracefully.

src/components/ContributionCalendar.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+// Helper to get all days in the last 52 weeks
+function getCalendarDays() {
+  const days = [];
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  // Go back 51 weeks (to get 52 weeks total)
+  const start = new Date(today);
+  start.setDate(start.getDate() - (7 * 51 + today.getDay()));
+  for (let i = 0; i < 7 * 52; i++) {
+    const d = new Date(start);
+    d.setDate(start.getDate() + i);
+    days.push(d);
+  }
+  return days;
+}
+
+// Color scale (GitHub-like)
+const COLORS = [
+  '#ebedf0', // 0
+  '#c6e48b', // 1
+  '#7bc96f', // 2
+  '#239a3b', // 3
+  '#196127', // 4+
+];
+function getColor(count) {
+  if (!count) return COLORS[0];
+  if (count >= 4) return COLORS[4];
+  return COLORS[count];
+}
+
+export default function ContributionCalendar({ data }) {
+  const days = getCalendarDays();
+  // Get max count for scaling (optional, for more dynamic color)
+  // const max = Math.max(...Object.values(data));
+
+  return (
+    <div style={{ overflowX: 'auto' }}>
+      <div style={{ display: 'flex' }}>
+        {/* Weeks (columns) */}
+        {Array.from({ length: 52 }).map((_, weekIdx) => (
+          <div key={weekIdx} style={{ display: 'flex', flexDirection: 'column' }}>
+            {/* Days (rows) */}
+            {Array.from({ length: 7 }).map((_, dayIdx) => {
+              const day = days[weekIdx * 7 + dayIdx];
+              const dateStr = day.toISOString().slice(0, 10);
+              const count = data[dateStr] || 0;
+              return (
+                <div
+                  key={dateStr}
+                  title={`${dateStr}: ${count} contribution${count === 1 ? '' : 's'}`}
+                  style={{
+                    width: 12,
+                    height: 12,
+                    margin: 1,
+                    background: getColor(count),
+                    borderRadius: 2,
+                  }}
+                />
+              );
+            })}
+          </div>
+        ))}
+      </div>
+      <div style={{ fontSize: 12, color: '#888', marginTop: 4 }}>
+        <span>Less</span>
+        {COLORS.map((color, i) => (
+          <span key={i} style={{ display: 'inline-block', width: 12, height: 12, background: color, margin: '0 2px', borderRadius: 2 }} />
+        ))}
+        <span>More</span>
+      </div>
+    </div>
+  );
+}