365devnet/src/pages/[lang]/development.astro

---
export const prerender = true;
import Layout from '../../layouts/PageLayout.astro';
import { getTranslation } from '../../i18n/translations';
import ContributionCalendar from '../../components/ContributionCalendar.jsx';
import LatestCommits from '../../components/LatestCommits.jsx';

const metadata = {
  title: 'Development Activity & Code Contributions | 365DevNet Ecosystem',
  description: 'See the latest code contributions, development activity, and project updates for the 365DevNet ecosystem.'
};

const lang = Astro.params.lang || 'en';
const t = getTranslation(lang);

// Fetch Gitea user heatmap at build time (cached)
async function getUserHeatmap(username) {
  const url = `https://git.365devnet.eu/api/v1/users/${username}/heatmap`;
  let heatmap: Array<{ timestamp: number; contributions: number }> = [];
  try {
    const headers = { accept: 'application/json' };
    if (import.meta.env.GITEA_TOKEN) {
      headers['Authorization'] = `token ${import.meta.env.GITEA_TOKEN}`;
    }
    const response = await fetch(url, { headers });
    if (response.ok) {
      heatmap = await response.json();
    }
  } catch (error) {
    console.error('Error fetching user heatmap:', error);
  }
  // Aggregate by date
  const contributions: Record<string, number> = {};
  for (const entry of heatmap) {
    const date = new Date(entry.timestamp * 1000).toISOString().slice(0, 10);
    contributions[date] = (contributions[date] || 0) + entry.contributions;
  }
  return contributions;
}

const contributionData = await getUserHeatmap('Richard');

export async function getStaticPaths() {
  return [
    { params: { lang: 'en' } },
    { params: { lang: 'nl' } },
    { params: { lang: 'de' } },
    { params: { lang: 'fr' } },
  ];
}

// Calculate some stats from contribution data
const totalContributions = Object.values(contributionData).reduce((sum: number, count: number) => sum + count, 0);
const contributionDays = Object.keys(contributionData).length;
const averagePerDay = contributionDays > 0 ? (totalContributions / contributionDays).toFixed(1) : 0;
---

<Layout metadata={metadata}>
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Hero Section -->
    <div class="text-center mb-12 backdrop-blur-sm bg-gradient-to-br from-green-50/80 to-blue-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-2xl p-8 shadow-lg">
      <div class="text-6xl mb-4">👨‍💻</div>
      <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
        {t.development.pageTitle || 'Development Progress'}
      </h1>
      <p class="text-xl text-gray-600 dark:text-slate-300 mb-6 max-w-2xl mx-auto">
        Live development activity and code contributions from the 365DevNet ecosystem
      </p>
    </div>

    <!-- Stats Overview -->
    <div class="grid md:grid-cols-3 gap-6 mb-8">
      <div class="backdrop-blur-sm bg-gradient-to-br from-green-50/80 to-teal-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-xl shadow p-6 text-center">
        <div class="text-3xl mb-3">📈</div>
        <h3 class="font-bold mb-2">Total Contributions</h3>
        <p class="text-2xl font-bold text-green-600 dark:text-green-400">{totalContributions}</p>
        <p class="text-sm text-gray-600 dark:text-slate-300">This year</p>
      </div>
      <div class="backdrop-blur-sm bg-gradient-to-br from-blue-50/80 to-purple-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-xl shadow p-6 text-center">
        <div class="text-3xl mb-3">🗓️</div>
        <h3 class="font-bold mb-2">Active Days</h3>
        <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">{contributionDays}</p>
        <p class="text-sm text-gray-600 dark:text-slate-300">Days with commits</p>
      </div>
      <div class="backdrop-blur-sm bg-gradient-to-br from-purple-50/80 to-pink-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-xl shadow p-6 text-center">
        <div class="text-3xl mb-3">⚡</div>
        <h3 class="font-bold mb-2">Daily Average</h3>
        <p class="text-2xl font-bold text-purple-600 dark:text-purple-400">{averagePerDay}</p>
        <p class="text-sm text-gray-600 dark:text-slate-300">Commits per active day</p>
      </div>
    </div>

    <!-- Contribution Calendar -->
    <div class="backdrop-blur-sm bg-white/70 dark:bg-slate-900/70 rounded-xl shadow p-6 mb-8">
      <div class="flex items-center mb-6">
        <div class="text-3xl mr-4">📊</div>
        <div>
          <h2 class="text-2xl font-bold">Contribution Activity</h2>
          <p class="text-gray-600 dark:text-slate-300">Development activity over time</p>
        </div>
      </div>
      <ContributionCalendar data={contributionData} client:visible />
    </div>

    <!-- Latest Commits Section - Now Dynamic -->
    <LatestCommits lang={lang} totalContributions={totalContributions} client:visible />
  </div>
</Layout>