update

Author: generalentropy

config/globals.js

@@ -3,3 +3,4 @@ export const GUILDID = "1039788044691181608";
 export const DISCORDINVITECODE = "uAtm6aMnHR";
 export const BASE_IMG_PATH = "/images/";
 export const DEFAULT_IMG_COVER = "default_card_cover.jpg";
+export const GITHUB_BASE_URL = "https://github.com/Bit-Scripts/";

data/cardsData.js

@@ -6,11 +6,12 @@
 
 /**
  * @typedef {Object} CardsData
- * @property {string} project - REQUIS - "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} githubRepoName - !Doit correspondre exactement au nom du repo
+ * @property {string} project - REQUIS - "project" devient la clé unique de l'objet qui contient toutes les infos et traductions relatives à la carte et qui seront poussées 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} github - lien vers le repo
  * @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.
  */
@@ -22,6 +23,7 @@
 
 export const cardsData = [
   {
+    githubRepoName: "Marv",
     project: "marv",
     imageCover: "marv.jpg",
     title: "Marv",
@@ -47,11 +49,12 @@ export const cardsData = [
     ],
   },
   {
+    githubRepoName: "Matrix",
     project: "matrix",
     imageCover: "matrix.jpg",
     title: "Matrix",
     author: "Paul",
-    github: "Matrix",
+    github: "https://github.com/Bit-Scripts/Matrix",
     demo: "",
     translations: [
       {
@@ -72,6 +75,7 @@ export const cardsData = [
     ],
   },
   {
+    githubRepoName: "BitGuardian",
     project: "bitguardian",
     imageCover: "bitguardian.jpg",
     title: "BitGuardian",
@@ -97,6 +101,7 @@ export const cardsData = [
     ],
   },
   {
+    githubRepoName: "Low-Fuel",
     project: "lowfuel",
     imageCover: "lowfuel.jpg",
     title: "Low-Fuel",

hooks/useProjectInfo.jsx

@@ -0,0 +1,24 @@
+import { useMemo } from "react";
+
+function useProjectInfo(reposData, githubRepoName) {
+  const findProjectObjectByName = (array, name) => {
+    if (!array) {
+      console.error("Vous devez fournir un tableau");
+      return null;
+    }
+
+    if (!name) {
+      console.error("Vous devez fournir un élément à rechercher");
+      return null;
+    }
+    return array.find((item) => item.name === name);
+  };
+
+  const projectInfo = useMemo(() => {
+    return findProjectObjectByName(reposData, githubRepoName);
+  }, [reposData, githubRepoName]);
+
+  return projectInfo;
+}
+
+export default useProjectInfo;

src/components/Card.jsx

@@ -2,6 +2,7 @@ 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";
+import GithubInfo from "./GithubInfo";
 
 function Card({
   imgName = DEFAULT_IMG_COVER,
@@ -10,14 +11,15 @@ function Card({
   demoUrl,
   author,
   githubProjectUrl,
+  githubRepoName,
 }) {
   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-[330px] overflow-hidden rounded-2xl bg-neutral-900 shadow-lg">
+    <div className="h-[580px] w-[330px] overflow-hidden rounded-2xl bg-neutral-900 shadow-lg">
       <div
         className={`h-[200px] border-b border-accent bg-cover`}
         style={{ backgroundImage: `url(${BASE_IMG_PATH}${imgName})` }}
@@ -27,27 +29,29 @@ function Card({
           {title}
         </div>
 
-        <div className="h-full max-h-[200px] overflow-hidden text-ellipsis py-4 text-sm text-neutral-200">
+        <div className="max-h-[250px] overflow-hidden pt-2 text-sm text-neutral-200">
           {t(`app.card:${translationKey}.description`)}
         </div>
-
-        <div className="py-4 text-center italic text-neutral-300">
-          {t("devby")} <span className="font-bold">{author}</span>
-        </div>
-
-        <div className="flex justify-center gap-x-4 py-2">
-          {githubProjectUrl && (
-            <a className={`${buttonStyle}`} href={githubProjectUrl}>
-              <FaGithub size={"20"} className="mr-2" />
-              GitHub
-            </a>
-          )}
-
-          {demoUrl && (
-            <a className={`${buttonStyle}`} href={demoUrl}>
-              <MdOutlineRemoveRedEye size={"24"} className="mr-2" /> Demo
-            </a>
-          )}
+        <GithubInfo githubRepoName={githubRepoName} />
+
+        <div className="flex grow flex-col justify-end">
+          <div className="text-center italic text-neutral-300">
+            {t("devby")} <span className="font-bold">{author}</span>
+          </div>
+          <div className="flex justify-center gap-x-4 py-2">
+            {githubProjectUrl && (
+              <a className={`${buttonStyle}`} href={githubProjectUrl}>
+                <FaGithub size={"20"} className="mr-2" />
+                GitHub
+              </a>
+            )}
+
+            {demoUrl && (
+              <a className={`${buttonStyle}`} href={demoUrl}>
+                <MdOutlineRemoveRedEye size={"24"} className="mr-2" /> Demo
+              </a>
+            )}
+          </div>
         </div>
       </div>
     </div>

src/components/CardsWrapper.jsx

@@ -15,6 +15,7 @@ function CardsWrapper() {
               demoUrl={card.demo}
               author={card.author}
               githubProjectUrl={card.github}
+              githubRepoName={card.githubRepoName}
             />
           );
         })}

src/components/GithubInfo.jsx

@@ -0,0 +1,31 @@
+import { useGlobalContext } from "../../context/useGlobalContext";
+import useProjectInfo from "../../hooks/useProjectInfo";
+import { convertDate } from "../../utils/helpers";
+
+export function GithubInfo({ githubRepoName }) {
+  const { reposData } = useGlobalContext();
+  const projectInfo = useProjectInfo(reposData, githubRepoName);
+
+  if (!projectInfo) return null;
+
+  return (
+    <div className="mb-4 flex justify-center gap-4">
+      <div className="mt-4 flex flex-col items-center rounded bg-slate-600 px-3 py-1 text-xs font-semibold text-neutral-200">
+        <span className="font-bold">Last commit</span>
+        <span>{convertDate(projectInfo?.updated_at)}</span>
+      </div>
+
+      <div className="mt-4 flex flex-col items-center rounded bg-slate-700 px-3 py-1 text-xs font-semibold text-neutral-200">
+        <span className="font-bold">Language</span>
+        <span>{projectInfo?.language}</span>
+      </div>
+
+      <div className="mt-4 flex flex-col items-center rounded bg-slate-800 px-3 py-1 text-xs font-semibold text-neutral-200">
+        <span className="font-bold">Licence</span>
+        <span>{projectInfo?.license?.key ?? "N/A"}</span>
+      </div>
+    </div>
+  );
+}
+
+export default GithubInfo;

utils/helpers.js

@@ -71,3 +71,10 @@ export const normalizeLang = (lang) => {
   }
   return lang;
 };
+
+export function convertDate(dateStr) {
+  if (!dateStr) return null;
+  const dateObj = new Date(dateStr);
+  const formattedDate = `${String(dateObj.getDate()).padStart(2, "0")}/${String(dateObj.getMonth() + 1).padStart(2, "0")}/${dateObj.getFullYear()}`;
+  return formattedDate;
+}