feat(projects): add translations

app/components/Projects/TopScreen/Project.vue

@@ -119,7 +119,7 @@ onRender((ctx) => {
     ctx,
     "black",
     project.summary,
-    Math.floor(185 - textWidth / 2),
+    Math.floor(181 - textWidth / 2),
     17,
   );
 

app/stores/projects.ts

@@ -4,12 +4,21 @@ import type {
 } from "@nuxt/content";
 import gsap from "gsap";
 
+type ProjectItem = Omit<
+  ProjectsCollectionItem,
+  keyof DataCollectionItemBase
+> & {
+  id: string;
+};
+export type Project = Omit<ProjectItem, "en" | "fr"> & {
+  description: string;
+  summary: string;
+  tasks: string[];
+};
+
 export const useProjectsStore = defineStore("projects", {
   state: () => ({
-    projects: [] as (Omit<
-      ProjectsCollectionItem,
-      keyof DataCollectionItemBase
-    > & { id: string })[],
+    projects: [] as Project[],
     currentProject: 0,
     loading: true,
     offsetX: 0,
@@ -29,30 +38,34 @@ export const useProjectsStore = defineStore("projects", {
 
   actions: {
     async loadProjects() {
+      const { locale } = useI18n();
       this.loading = true;
 
-      const projects = await queryCollection("projects")
+      const items = await queryCollection("projects")
         .order("order", "ASC")
-        .select(
-          "id",
-          "order",
-          "scope",
-          "title",
-          "link",
-          "description",
-          "summary",
-          "technologies",
-          "tasks",
-        )
         .all();
 
-      if (!projects) throw "Cannot load projects";
-      this.projects = projects.map((project) => ({
-        ...project,
-        id: project.id
-          .split("/")[2]!
-          .replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()),
-      }));
+      if (!items) throw "Cannot load projects";
+
+      this.projects = items.map((item) => {
+        const slug = item.id.split("/")[2]!;
+        const localeData = item[locale.value as "en"] ?? item.en;
+        if (!localeData) {
+          console.warn(`Missing '${locale.value}' for ${slug}`);
+        }
+
+        const { en: _en, fr: _fr, ...meta } = item;
+
+        return {
+          ...meta,
+          id: slug.replace(/-([a-z])/g, (_: string, letter: string) =>
+            letter.toUpperCase(),
+          ),
+          description: localeData.description ?? "",
+          summary: localeData.summary ?? "",
+          tasks: localeData.tasks ?? [],
+        };
+      });
 
       this.loading = false;
     },