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";
 
-export const useProjectsStore = defineStore("projects", {
+type ProjectItem = Omit<
-  state: () => ({
-    projects: [] as (Omit<
   ProjectsCollectionItem,
   keyof DataCollectionItemBase
-    > & { id: string })[],
+> & {
+  id: string;
+};
+export type Project = Omit<ProjectItem, "en" | "fr"> & {
+  description: string;
+  summary: string;
+  tasks: string[];
+};
+
+export const useProjectsStore = defineStore("projects", {
+  state: () => ({
+    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";
+      if (!items) throw "Cannot load projects";
-      this.projects = projects.map((project) => ({
+
-        ...project,
+      this.projects = items.map((item) => {
-        id: project.id
+        const slug = item.id.split("/")[2]!;
-          .split("/")[2]!
+        const localeData = item[locale.value as "en"] ?? item.en;
-          .replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()),
+        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;
     },

content.config.ts

@@ -1,6 +1,12 @@
 import { defineContentConfig, defineCollection } from "@nuxt/content";
 import { z } from "zod";
 
+const localeSchema = z.object({
+  description: z.string(),
+  summary: z.string(),
+  tasks: z.array(z.string()),
+});
+
 export default defineContentConfig({
   collections: {
     projects: defineCollection({
@@ -11,10 +17,9 @@ export default defineContentConfig({
         scope: z.enum(["hobby", "work"]),
         title: z.string(),
         link: z.url(),
-        description: z.string(),
-        summary: z.string(),
         technologies: z.array(z.string()),
-        tasks: z.array(z.string()),
+        en: localeSchema,
+        fr: localeSchema,
       }),
     }),
   },

content/projects/biobleud/index.yml

@@ -3,12 +3,21 @@ scope: work
 title: Biobleud
 link: https://biobleud.fr/
 
-description: Agri-food company
-summary: Temporary assignments
 technologies:
   - VBA
 
-tasks:
+en:
-  - Developing Excel macros\nin VBA for ERP system\nimplementation
+  description: Agri-food company
-  - Understanding client\nneeds
+  summary: Temporary assignments
-  - Documentation
+  tasks:
+    - "Developing Excel macros\\nin VBA for ERP system\\nimplementation"
+    - "Understanding client\\nneeds"
+    - "Documentation"
+
+fr:
+  description: Entreprise agroalimentaire
+  summary: Missions temporaires
+  tasks:
+    - "Développement de macros\\nExcel en VBA pour\\nun ERP"
+    - "Compréhension des\\nbesoins du client"
+    - "Documentation"

content/projects/lbf-bot/index.yml

@@ -3,13 +3,22 @@ scope: hobby
 title: LBF Bot
 link: https://git.pihkaal.me/lbf-bot
 
-description: For a gaming group
-summary: Custom Discord bot
 technologies:
   - Node
   - TypeScript
 
-tasks:
+en:
-  - Made for a gaming group
+  description: For a gaming group
-  - Deployed on VPS
+  summary: Custom Discord bot
-  - Understanding client\nneeds
+  tasks:
+    - "Made for a gaming group"
+    - "Deployed on VPS"
+    - "Understanding client\\nneeds"
+
+fr:
+  description: Pour un groupe de gaming
+  summary: Bot Discord personnalisé
+  tasks:
+    - "Créé pour un groupe\\nautour d'un jeu"
+    - "Déployé sur VPS"
+    - "Compréhension des\\nbesoins du client"

content/projects/lilou-cat/index.yml

@@ -3,13 +3,20 @@ scope: hobby
 title: lilou.cat
 link: https://lilou.cat
 
-description: Lilou <3
-summary: Lilou's website
-
 technologies:
   - HTML
   - Go
 
-tasks:
+en:
-  - Originally made for fun\nto celebrate my cat Lilou
+  description: Lilou <3
-  - Now preserved in her\nmemory
+  summary: Lilou's website
+  tasks:
+    - "Originally made for fun\\nto celebrate my cat Lilou"
+    - "Now preserved in her\\nmemory"
+
+fr:
+  description: Lilou <3
+  summary: Le site de Lilou
+  tasks:
+    - "Créé pour célébrer\\nmon chat Lilou"
+    - "Désormais préservé\\nen sa mémoire"

content/projects/pihkaal-me/index.yml

@@ -3,13 +3,20 @@ scope: hobby
 title: pihkaal.me
 link: https://pihkaal.me
 
-description: Portfolio and contact
-summary: My personnal website
-
 technologies:
   - Nuxt
   - TypeScript
 
-tasks:
+en:
-  - The website you are\ncurrently on!
+  description: Portfolio and contact
-  - Recreation of the Nintendo\nDS because it was my first\never console
+  summary: My personal website
+  tasks:
+    - "The website you are\\ncurrently on!"
+    - "Recreation of the Nintendo\\nDS because it was my first\\never console"
+
+fr:
+  description: Portfolio et contact
+  summary: Mon site personnel
+  tasks:
+    - "Le site sur lequel\\nvous êtes !"
+    - "Recréation de la Nintendo\\nDS car c'était ma première\\nconsole"

content/projects/raylib-speedruns/index.yml

@@ -3,8 +3,6 @@ scope: hobby
 title: Raylib Spdrns
 link: https://git.pihkaal.me/raylib-speedruns
 
-description: Awesome video game library
-summary: Raylib Speedruns
 technologies:
   - C
   - C#
@@ -13,6 +11,16 @@ technologies:
   - Rust
   - Asm x86_64
 
-tasks:
+en:
-  - Simple Raylib setups in\nmultiple languages
+  description: Awesome video game library
-  - Inspired by Tsoding
+  summary: Raylib Speedruns
+  tasks:
+    - "Simple Raylib setups in\\nmultiple languages"
+    - "Inspired by Tsoding"
+
+fr:
+  description: Super bibliothèque
+  summary: Raylib Speedruns
+  tasks:
+    - "Exemples d'utilisation de\\nRaylib en plusieurs\\nlangages"
+    - "Inspiré par Tsoding"

content/projects/s3pweb/index.yml

@@ -3,15 +3,25 @@ scope: work
 title: S3PWeb
 link: https://s3pweb.com
 
-description: The Transport Data Aggregator
-summary: Apprenticeship
 technologies:
   - Node
   - StencilJS
   - TypeScript
 
-tasks:
+en:
-  - Automatized incidents\naggregation to Jira
+  description: The Transport Data Aggregator
-  - Web based map editor
+  summary: Apprenticeship
-  - Chrome extension to\nvisualize Eramba assets
+  tasks:
-  - Documentation
+    - "Automatized incidents\\naggregation to Jira"
+    - "Web based map editor"
+    - "Chrome extension to\\nvisualize Eramba assets"
+    - "Documentation"
+
+fr:
+  description: L'agrégateur des dataa transport
+  summary: Alternance
+  tasks:
+    - "Agrégation automatisée\\nd'incidents vers Jira"
+    - "Éditeur de carte web"
+    - "Extension Chrome pour\\nles assets Eramba"
+    - "Documentation"

content/projects/simple-qr/index.yml

@@ -3,13 +3,22 @@ scope: hobby
 title: Simple QR
 link: https://simple-qr.com
 
-description: Concise website and API
-summary: QR code generator
 technologies:
   - Nuxt
   - TypeScript
 
-tasks:
+en:
-  - Easy to use
+  description: Concise website and API
-  - Large choice of logos
+  summary: QR code generator
-  - Straightforward API
+  tasks:
+    - "Easy to use"
+    - "Large choice of logos"
+    - "Straightforward API"
+
+fr:
+  description: Site web et API concis
+  summary: Générateur de QR code
+  tasks:
+    - "Facile à utiliser"
+    - "Grand choix de logos"
+    - "API simple d'utilisation"

content/projects/tlock/index.yml

@@ -3,14 +3,23 @@ scope: hobby
 title: tlock
 link: https://git.pihkaal.me/tlock
 
-description: For Hyprland ricing
-summary: Terminal based clock
 technologies:
   - Rust
 
-tasks:
+en:
-  - Fully customizable
+  description: For Hyprland ricing
-  - Animated
+  summary: Terminal based clock
-  - Cross-platform
+  tasks:
-  - |
+    - "Fully customizable"
-    Multiple modes: clock,\nchronometer and timer
+    - "Animated"
+    - "Cross-platform"
+    - "Multiple modes: clock,\\nchronometer and timer"
+
+fr:
+  description: Pour le ricing Hyprland
+  summary: Horloge pour le terminal
+  tasks:
+    - "Entièrement\\npersonnalisable"
+    - "Animée"
+    - "Multi-plateforme"
+    - "Plusieurs modes : horloge,\\nchronomètre et minuteur"