feat: implement progress tracking on homepage

src/components/ProgressCard.vue

@@ -15,7 +15,7 @@ const targetIsVisible = useElementVisibility(chartRef, {
 });
 const currentlyVisiblePercentage = computed(() => targetIsVisible.value ? props.item.completion : 0);
 const animatedPercentage = useTransition(currentlyVisiblePercentage, {
-	duration: 2000,
+	duration: 1000,
 	easing: TransitionPresets.easeInOutQuad
 });
 

src/pages/index.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { ProgressItem } from '~~/shared/api-types';
+
 /* 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');
@@ -7,6 +9,19 @@ const nOfQAs = computed(() => tm<string>('faq.QAs') as string[]).value.length -
 const maxCoreStaffIndex = computed(() => tm<string>('credits.people') as string[]).value.length - 1;
 const maxContributorsIndex = computed(() => tm<string>('specialThanks.people') as string[]).value.length - 1;
 
+const summaryProgress = computed<ProgressItem>(() => {
+	return {
+		completion: progress.data.value?.completion ?? 0,
+		title: '',
+		tasks: (progress.data.value?.items ?? []).map((item) => {
+			return {
+				status: item.completion === 100 ? 'completed' : 'inprogress',
+				title: `${item.title} [${item.completion}%]`
+			};
+		})
+	};
+});
+
 function array(n: number) {
 	return Array.from({ length: n + 1 }, (_, i) => i);
 }
@@ -128,27 +143,22 @@ function titleSuffixHandler(path: string) {
             {{ $t("aboutUs.title") }}
           </h2>
           <p
-            v-for="i in computed(() => tm<string>('aboutUs.paragraphs') as string[]).value.length - 1"
+            v-for="i in computed(() => tm<string>('aboutUs.paragraphs') as string[]).value.length"
             :key="i"
             class="text"
           >
-            {{ $t(`aboutUs.paragraphs[${i}]`) }}
+            {{ $t(`aboutUs.paragraphs[${i-1}]`) }}
           </p>
         </div>
       </div>
       <div class="right sect">
         <h2 class="title">
-          <a href="/progress">{{ $t("progress.title") }} ({{ progress.data.value?.completion ?? 0 }}%)</a>
+          <a href="/progress">{{ $t("progress.title") }}</a>
         </h2>
-        <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>
+        <ProgressCard
+          purple
+          :item="summaryProgress"
+        />
       </div>
     </section>