Refactor ContributionCalendar to use UTC for date calculations

- Updated date handling in ContributionCalendar to work entirely in UTC, ensuring consistency with Gitea's date representation.
- Adjusted logic for calculating the start date of the 52-week period and generating calendar days accordingly.
- Improved comments for clarity regarding the use of UTC in date manipulations.
- Cleaned up redundant code and ensured proper date formatting in the rendering of calendar days.
- Minor adjustments in the development.astro file to comment out a collapsible intro section for better organization.

src/components/ContributionCalendar.jsx

@@ -1,22 +1,29 @@
 import React, { useEffect, useState } from 'react';
 
-// Helper to get all days in the last 52 weeks, starting on Monday
+// Helper to get all days in the last 52 weeks, starting on Monday - UTC version
 function getCalendarDays() {
   const days = [];
+  
+  // Work entirely in UTC to match Gitea
   const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  // Find the most recent Monday
-  const start = new Date(today);
-  const dayOfWeek = start.getDay();
-  // getDay(): 0=Sunday, 1=Monday, ..., 6=Saturday
-  // If today is not Monday, go back to the previous Monday
-  const offset = (dayOfWeek === 0 ? -6 : 1 - dayOfWeek); // If Sunday, go back 6 days; else, go back to Monday
-  start.setDate(start.getDate() - (7 * 51) + offset);
+  const todayUTC = new Date(Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate()));
+  
+  // Find the Monday that starts our 52-week period
+  const startDate = new Date(todayUTC);
+  startDate.setUTCDate(todayUTC.getUTCDate() - (52 * 7 - 1));
+  
+  // Adjust startDate to the Monday of that week (using UTC day)
+  const startDayOfWeek = startDate.getUTCDay(); // 0 = Sunday, 1 = Monday, etc.
+  const daysToMonday = startDayOfWeek === 0 ? -6 : 1 - startDayOfWeek;
+  startDate.setUTCDate(startDate.getUTCDate() + daysToMonday);
+  
+  // Generate exactly 52 weeks (364 days) starting from that Monday
   for (let i = 0; i < 7 * 52; i++) {
-    const d = new Date(start);
-    d.setDate(start.getDate() + i);
+    const d = new Date(startDate);
+    d.setUTCDate(startDate.getUTCDate() + i);
     days.push(d);
   }
+  
   return days;
 }
 
@@ -95,6 +102,8 @@ export default function ContributionCalendar({ data }) {
   const visibleDays = days.slice(startWeek * 7, 52 * 7);
   const visibleMonthLabels = monthLabels.filter(l => l.week >= startWeek);
 
+  const calendarRef = React.useRef(null);
+
   // When expanding to full year on mobile, scroll to the right (most recent weeks)
   useEffect(() => {
     if (!isMobile) return;
@@ -111,8 +120,6 @@ export default function ContributionCalendar({ data }) {
   // Get max count for scaling (optional, for more dynamic color)
   // const max = Math.max(...Object.values(data));
 
-  const calendarRef = React.useRef(null);
-
   return (
     <div
       style={{
@@ -183,14 +190,14 @@ export default function ContributionCalendar({ data }) {
         <div style={{ display: 'flex' }}>
           {Array.from({ length: weeksToShow }).map((_, weekIdx) => (
             <div key={weekIdx} style={{ display: 'flex', flexDirection: 'column', flex: '0 0 14px' }}>
-              {/* Days (rows) */}
+              {/* Days (rows) - Using UTC for consistency with Gitea */}
               {Array.from({ length: 7 }).map((_, dayIdx) => {
-                // Shift the dayIdx so that Monday is the first row and Sunday is the last
-                const shiftedDayIdx = (dayIdx + 1) % 7;
-                const day = visibleDays[weekIdx * 7 + shiftedDayIdx];
+                const day = visibleDays[weekIdx * 7 + dayIdx];
                 if (!day) return <div key={dayIdx} style={{ width: 12, height: 12, margin: 1 }} />;
+                
                 const dateStr = day.toISOString().slice(0, 10);
                 const count = data[dateStr] || 0;
+                
                 return (
                   <div
                     key={dateStr}
@@ -240,4 +247,4 @@ export default function ContributionCalendar({ data }) {
       )}
     </div>
   );
-} 
+}