feat: implement progress into pages

server/utils/getStripeDonations.ts

@@ -26,7 +26,8 @@ async function getStripeDonationData(stripe: Stripe): Promise<StripeDonationResp
 
 
 		for (const subscription of activeSubscriptions) {
-			const plan = (subscription as Stripe.Subscription & { plan?: Stripe.Plan }).plan;
+			const plan = subscription.items.data[0]?.plan;
+			if (!plan) continue;
 			donationData.donatorCount += 1;
 			donationData.totalDonationsCents += plan?.amount ?? 0;
 			lastId = subscription.id;

src/pages/index.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 /* eslint-disable vue/no-v-html -- we might wanna avoid this by rewriting the locales to use variables */
 const { te, t, tm } = useI18n();
+const progress = await useFetch('/api/progress');
 
 const nOfQAs = computed(() => tm<string>('faq.QAs') as string[]).value.length - 1;
 const maxCoreStaffIndex = computed(() => tm<string>('credits.people') as string[]).value.length - 1;
@@ -137,9 +138,12 @@ function titleSuffixHandler(path: string) {
       </div>
       <div class="right sect">
         <h2 class="title">
-          <a href="/progress">{{ $t("progress.title") }}</a>
+          <a href="/progress">{{ $t("progress.title") }} ({{ progress.data.value?.completion ?? 0 }}%)</a>
         </h2>
-        <!--{{> progress-list data=featuredFeatureList purple=true") }}-->
+				<div v-for="project of progress.data.value?.items ?? []" :key="project.title">
+					<p>{{ project.title }} [{{ project.completion }}%]</p>
+				</div>
+				<p v-if="(progress.data.value?.items ?? []).length === 0">No projects</p>
       </div>
     </section>
 

src/pages/progress.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const progress = await useFetch('/api/progress');
+const projects = computed(() => progress.data.value?.items ?? []);
+const donations = computed(() => progress.data.value?.donations)
+</script>
+
+<template>
+  <div>
+    <p>TODO: progress stub page</p>
+		<h1 v-if="donations">{{ donations.currentCents }}¢ / {{ donations.goalCents }}¢</h1>
+		<div v-for="project of projects" :key="project.title">
+			<h1>{{ project.title }} ({{ project.completion }}%)</h1>
+			<a v-if="project.githubUrl" :href="project.githubUrl">Github</a>
+			<p v-for="task of project.tasks" :key="task.title">[{{ task.status }}] {{ task.title }}</p>
+			<hr />
+		</div>
+		<p v-if="projects.length === 0">No projects</p>
+  </div>
+</template>