Initial commit.

2026-07-05 06:05:03 +00:00 · 2025-12-10 21:09:25 +00:00
commit 9d4de0e6b6
73 changed files with 15219 additions and 0 deletions
@@ -0,0 +1,157 @@
+<script setup>
+import { inject, computed, ref } from 'vue'
+import { RouterLink } from 'vue-router'
+import StatCard from '../components/StatCard.vue'
+import ContributorCard from '../components/ContributorCard.vue'
+import RepoCard from '../components/RepoCard.vue'
+import TeamCard from '../components/TeamCard.vue'
+import SectionHeader from '../components/SectionHeader.vue'
+import VelocityChart from '../components/VelocityChart.vue'
+import { formatNumber, formatDate } from '../composables/formatters'
+
+const globalData = inject('globalData')
+
+const metrics = computed(() => globalData.value || {})
+const leaderboard = computed(() => metrics.value.leaderboard?.slice(0, 3) || [])
+const repositories = computed(() => metrics.value.repositories || [])
+const teams = computed(() => metrics.value.teams || [])
+const velocityTimeline = computed(() => metrics.value.velocity_timeline)
+
+const showScoreInChart = ref(false)
+</script>
+
+<template>
+  <div>
+    <!-- Hero Section -->
+    <header class="py-16 px-4">
+      <div class="container mx-auto text-center animate-fade-in-up">
+        <h1 class="text-4xl md:text-6xl font-bold mb-4">
+          <span class="gradient-text">Git Velocity</span>
+        </h1>
+        <p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+          Celebrate your team's achievements and contributions with beautiful insights.
+        </p>
+        <!-- Period and Generation Info -->
+        <div class="flex flex-col items-center space-y-2 mt-4 text-sm text-gray-500 dark:text-gray-400">
+          <p v-if="metrics.period?.start || metrics.period?.end">
+            <i class="fas fa-calendar-alt mr-1 text-primary-500"></i>
+            <span class="font-medium">Period:</span>
+            <span v-if="metrics.period.start">{{ formatDate(metrics.period.start) }}</span>
+            <span v-if="metrics.period.start && metrics.period.end"> &mdash; </span>
+            <span v-if="metrics.period.end">{{ formatDate(metrics.period.end) }}</span>
+          </p>
+          <p v-if="metrics.generated_at">
+            <i class="fas fa-clock mr-1"></i>
+            Generated on {{ formatDate(metrics.generated_at) }}
+          </p>
+        </div>
+      </div>
+    </header>
+
+    <!-- Velocity Timeline Chart -->
+    <section v-if="velocityTimeline" class="py-8 px-4">
+      <div class="container mx-auto">
+        <div class="card">
+          <div class="flex items-center justify-between mb-6">
+            <SectionHeader title="Velocity Timeline" icon="fas fa-chart-line" icon-color="text-primary-500" />
+            <label class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
+              <input
+                type="checkbox"
+                v-model="showScoreInChart"
+                class="rounded border-gray-300 text-primary-500 focus:ring-primary-500"
+              />
+              <span>Show Score</span>
+            </label>
+          </div>
+          <VelocityChart :timeline="velocityTimeline" :show-score="showScoreInChart" height="320px" />
+        </div>
+      </div>
+    </section>
+
+    <!-- Stats Overview -->
+    <section class="py-8 px-4">
+      <div class="container mx-auto">
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+          <StatCard
+            :value="metrics.total_contributors || 0"
+            label="Contributors"
+            delay="0s"
+          />
+          <StatCard
+            :value="metrics.total_commits || 0"
+            label="Commits"
+            delay="0.1s"
+          />
+          <StatCard
+            :value="metrics.total_prs || 0"
+            label="Pull Requests"
+            delay="0.2s"
+          />
+          <StatCard
+            :value="metrics.total_reviews || 0"
+            label="Reviews"
+            delay="0.3s"
+          />
+          <StatCard
+            :value="'+' + formatNumber(metrics.total_lines_added || 0)"
+            label="Lines Added"
+            value-class="text-green-500"
+            delay="0.4s"
+          />
+          <StatCard
+            :value="'-' + formatNumber(metrics.total_lines_deleted || 0)"
+            label="Lines Deleted"
+            value-class="text-red-500"
+            delay="0.5s"
+          />
+        </div>
+      </div>
+    </section>
+
+    <!-- Top Contributors -->
+    <section class="py-8 px-4">
+      <div class="container mx-auto">
+        <SectionHeader title="Top Contributors" icon="fas fa-trophy" icon-color="text-yellow-500" />
+
+        <div class="grid md:grid-cols-3 gap-6">
+          <ContributorCard
+            v-for="(entry, index) in leaderboard"
+            :key="entry.login"
+            :contributor="entry"
+            :rank="index + 1"
+            featured
+          />
+        </div>
+
+        <div class="mt-6 text-center">
+          <RouterLink to="/leaderboard" class="btn-primary">
+            View Full Leaderboard
+            <i class="fas fa-arrow-right ml-2"></i>
+          </RouterLink>
+        </div>
+      </div>
+    </section>
+
+    <!-- Repositories -->
+    <section class="py-8 px-4">
+      <div class="container mx-auto">
+        <SectionHeader title="Repositories" icon="fas fa-code-branch" icon-color="text-accent-500" />
+
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <RepoCard v-for="repo in repositories" :key="`${repo.owner}/${repo.name}`" :repo="repo" />
+        </div>
+      </div>
+    </section>
+
+    <!-- Teams -->
+    <section v-if="teams.length" class="py-8 px-4">
+      <div class="container mx-auto">
+        <SectionHeader title="Teams" icon="fas fa-users" icon-color="text-blue-500" />
+
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <TeamCard v-for="team in teams" :key="team.name" :team="team" />
+        </div>
+      </div>
+    </section>
+  </div>
+</template>