update

Author: generalentropy

config/globals.js

@@ -1,3 +1,5 @@
 export const ORGNAME = "Bit-Scripts";
 export const GUILDID = "1039788044691181608";
 export const DISCORDINVITECODE = "uAtm6aMnHR";
+export const BASE_IMG_PATH = "/images/";
+export const DEFAULT_IMG_COVER = "default_card_cover.jpg";

data/cardsData.js

@@ -0,0 +1,44 @@
+/**
+ * @typedef {Object} Translation
+ * @property {string} lang - Code ISO de la langue (par exemple, "en", "fr").
+ * @property {string} description - Description du projet dans la langue spécifiée.
+ */
+
+/**
+ * @typedef {Object} CardsData
+ * @property {string} project - "project" devient la clé unique de l'objet qui contient toutes les infos et traductions relatives à la carte et qui seront poussées à i18n lors de l'initialisation.
+ * @property {string} imageCover - Nom du fichier image avec extension.
+ * @property {string} title - Nom du projet affiché sur la carte.
+ * @property {string} author - Auteur du projet affiché sur la carte.
+ * @property {string} github - Nom exact du repo pour pouvoir afficher les infos du projet.
+ * @property {string} demo - URL de démo du projet.
+ * @property {Translation[]} translations - Description du projet dans toutes les langues souhaitées. Dans le cas où vous ne fournissez qu'une langue, ce doit être l'anglais.
+ */
+
+/**
+ * Liste de tous les projets pour générer les cartes et initialiser i18n.
+ * @type {CardsData[]}
+ */
+
+export const cardsData = [
+  {
+    project: "marv",
+    imageCover: "marv.jpg",
+    title: "Marv",
+    author: "Paul",
+    github: "Low-Fuel",
+    demo: "https://marv-bot.fr",
+    translations: [
+      {
+        lang: "en",
+        description:
+          "A Discord bot in NodeJS that uses ChatGPT and a speech synthesis and recognition system, allowing interaction with the bot through voice commands.",
+      },
+      {
+        lang: "fr",
+        translations:
+          "Un bot Discord en NodeJS qui utilise chatGPT et un système de synthèse et de reconnaissance vocale permettant d’intéragir avec le bot grâce à la voix.",
+      },
+    ],
+  },
+];

data/projects.js

@@ -1,16 +1,15 @@
-import { GUILDID } from "../config/globals";
-import { getDiscordGuildInfo } from "../utils/helpers";
+import { useEffect } from "react";
+import { ORGNAME } from "../config/globals";
+import { fetchReposData } from "../utils/helpers";
 import CardsWrapper from "./components/CardsWrapper";
 import Header from "./components/Header";
 import Info from "./components/Info";
 import LangageSwitcher from "./components/LangSwitcher";
 
-getDiscordGuildInfo(GUILDID);
-
 function App() {
-  // useEffect(() => {
-  //   fetchReposData(ORGNAME);
-  // }, []);
+  useEffect(() => {
+    fetchReposData(ORGNAME);
+  }, []);
 
   return (
     <div className="min-h-screen bg-neutral-800">

public/images/default_card_cover.jpg

@@ -1,24 +1,27 @@
 import { useTranslation } from "react-i18next";
 import { FaGithub } from "react-icons/fa";
 import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { BASE_IMG_PATH, DEFAULT_IMG_COVER } from "../../config/globals";
 
-function Card() {
+function Card({ imgName = DEFAULT_IMG_COVER, title = "No name" }) {
   const { t } = useTranslation();
+
   const buttonStyle =
     "bg-accentDarker flex min-w-[120px] cursor-pointer items-center justify-center rounded-full py-2 text-white transition-opacity hover:opacity-80";
 
   return (
-    <div className="h-[520px] w-[320px] overflow-hidden rounded-2xl bg-neutral-900 shadow-lg">
+    <div className="h-[520px] w-[330px] overflow-hidden rounded-2xl bg-neutral-900 shadow-lg">
       <div
-        className={`h-[200px] border-b border-accent bg-[url('/images/marv.jpg')] bg-cover`}
+        className={`h-[200px] border-b border-accent bg-cover`}
+        style={{ backgroundImage: `url(${BASE_IMG_PATH}${imgName})` }}
       ></div>
       <div className="flex h-[calc(100%-200px)] flex-col px-4 py-4">
         <div className="text-center text-2xl font-bold text-neutral-200">
-          Marv
+          {title}
         </div>
 
         <div className="h-full max-h-[180px] overflow-hidden overflow-y-auto text-ellipsis py-4 text-sm text-neutral-200">
-          {t("marv")}
+          {t(`marv.description`)}
         </div>
 
         <div className="py-4 text-center italic text-neutral-300">

src/App.jsx

@@ -4,8 +4,14 @@ function CardsWrapper() {
   return (
     <div className="flex items-center justify-center">
       <div className="flex max-w-[1280px] flex-wrap justify-center gap-8 p-8">
-        <Card /> <Card /> <Card imgUrl="/images/marv.jpg" /> <Card />
-        <Card /> <Card /> <Card /> <Card />
+        <Card imgName="matrix.jpg" />
+        <Card imgName="marv.jpg" />
+        <Card />
+        <Card />
+        <Card />
+        <Card />
+        <Card />
+        <Card />
       </div>
     </div>
   );

src/components/Card.jsx

@@ -8,10 +8,15 @@ const add = () => {
     "es",
     "translation",
     {
+      marv: {
+        title: "Marv",
+        description:
+          "Un bot de Discord en NodeJS que usa ChatGPT y un sistema de síntesis y reconocimiento de voz, lo que permite interactuar con el bot a través de comandos de voz.",
+      },
       info: "Nuestros proyectos",
       baseline: "Desarrollo de software y scripts",
       discord: "Únete a nuestro Discord",
-      marv: "Un bot de Discord en NodeJS que usa ChatGPT y un sistema de síntesis y reconocimiento de voz, lo que permite interactuar con el bot a través de comandos de voz.",
+
       devby: "Desarrollado por",
     },
     false,

src/components/CardsWrapper.jsx

@@ -9,19 +9,26 @@ i18n
     resources: {
       en: {
         translation: {
+          marv: {
+            description:
+              "A Discord bot in NodeJS that uses ChatGPT and a speech synthesis and recognition system, allowing interaction with the bot through voice commands.",
+          },
           info: "Our projects",
           baseline: "Software & Script Development",
           discord: "Join our Discord",
-          marv: "A Discord bot in NodeJS that uses ChatGPT and a speech synthesis and recognition system, allowing interaction with the bot through voice commands.",
           devby: "Developed by",
         },
       },
       fr: {
         translation: {
+          marv: {
+            description:
+              "Un bot Discord en NodeJS qui utilise chatGPT et un système de synthèse et de reconnaissance vocale permettant d’intéragir avec le bot grâce à la voix.",
+          },
+
           info: "Nos projets",
           baseline: "Développement de softs & scripts",
           discord: "Rejoignez notre Discord",
-          marv: "Un bot Discord en NodeJS qui utilise chatGPT et un système de synthèse et de reconnaissance vocale permettant d’intéragir avec le bot grâce à la voix.",
           devby: "Developpé par",
         },
       },