build: removed auto docker compose up in vscode tasks

.vscode/tasks.json

@@ -10,9 +10,6 @@
         "reveal": "always",
         "panel": "new"
       },
-      "runOptions": {
-        "runOn": "folderOpen"
-      },
       "problemMatcher": []
     },
     {

src/app/[lang]/articles/[article]/page.tsx

@@ -1,6 +1,11 @@
+import PeopleBar from "@/components/PeopleBar";
 import { directus } from "@/directus";
-import { getTranslation, queryTranslations } from "@/locales";
-import { GameStarArticle } from "@/types/aliases";
+import { getTranslation, useTranslationTable } from "@/locales";
+import {
+  GameStarArticle,
+  GameStarArticleMember,
+  Member,
+} from "@/types/aliases";
 import { readItems } from "@directus/sdk";
 import { notFound } from "next/navigation";
 import Markdown from "react-markdown";
@@ -11,12 +16,13 @@ export default async function Article({
   params: { article: string; lang: string };
 }) {
   const { lang } = await params;
+  const tt = await useTranslationTable(lang);
   const articles = (await directus().request(
     //@ts-ignore
     readItems("game_star_articles", {
+      fields: ["*", { translations: ["*"], authors: [{ members_id: ["*"] }] }],
       filter: { status: { _eq: "published" }, slug: { _eq: params.article } },
       limit: 1,
-      ...queryTranslations,
     }),
   )) as GameStarArticle[];
 
@@ -29,9 +35,26 @@ export default async function Article({
   const translation = getTranslation(article, lang);
 
   return (
-    <div className="article">
-      <h1>{translation.title}</h1>
-      <Markdown>{translation.content}</Markdown>
-    </div>
+    <>
+      <div className="article">
+        <h1>{translation.title}</h1>
+        <Markdown>{translation.content}</Markdown>
+      </div>
+      {article.authors?.length === 0 ? null : (
+        <PeopleBar
+          people={(article.authors as GameStarArticleMember[])?.map(
+            (author) => {
+              return {
+                name: (author.members_id as Member).name as string,
+                surname: (author.members_id as Member).surname as string,
+                role: tt["author"],
+                link: (author.members_id as Member).link as string,
+                image: (author.members_id as Member).picture as string,
+              };
+            },
+          )}
+        />
+      )}
+    </>
   );
 }

src/app/[lang]/articles/page.tsx

@@ -9,6 +9,7 @@ import { readItems, readSingleton } from "@directus/sdk";
 import { GameStarArticle } from "@/types/aliases";
 import { get } from "http";
 import Link from "next/link";
+import ArticleCard from "@/components/ArticleCard";
 
 export default async function Articles({
   params,
@@ -19,26 +20,20 @@ export default async function Articles({
   const tt = await useTranslationTable(lang);
 
   let articles = (await directus().request(
-    //@ts-ignore
     readItems("game_star_articles", {
       filter: { status: { _eq: "published" } },
-      ...queryTranslations,
+      fields: ["*", { translations: ["*"], authors: [{ members_id: ["*"] }] }],
     }),
   )) as GameStarArticle[];
 
   return (
     <div className="content">
       <h1>{capitalize(tt["article"])}s</h1>
-      {articles.map((article) => (
-        <div key={article.slug}>
-          <h2>
-            <Link href={`/${lang}/articles/${article.slug}`}>
-              {getTranslation(article, lang).title}
-            </Link>
-          </h2>
-          <p>{getTranslation(article, lang).description}</p>
-        </div>
-      ))}
+      <div className="cards-list">
+        {articles.map((article) => (
+          <ArticleCard key={article.slug} article={article} lang={lang} />
+        ))}
+      </div>
       {articles.length === 0 ? <p>{tt["gamestar.comingSoon"]} !</p> : null}
     </div>
   );

src/app/[lang]/events/page.tsx

@@ -26,7 +26,7 @@ export default async function Events({ params }: { params: { lang: string } }) {
   return (
     <div className="content">
       <h1>{capitalize(tt["event"])}s</h1>
-      <div className="events-list">
+      <div className="cards-list">
         {events.map((event) => (
           <EventCard key={event.slug} event={event} lang={lang} />
         ))}

src/app/[lang]/projects/page.tsx

@@ -1,14 +1,12 @@
 import { directus } from "@/directus";
 import {
   capitalize,
-  getTranslation,
   queryTranslations,
   useTranslationTable,
 } from "@/locales";
-import { readItems, readSingleton } from "@directus/sdk";
+import { readItems } from "@directus/sdk";
 import { GameStarProject } from "@/types/aliases";
-import { get } from "http";
-import Link from "next/link";
+import ProjectCard from "@/components/ProjectCard";
 
 export default async function Projects({
   params,
@@ -29,16 +27,11 @@ export default async function Projects({
   return (
     <div className="content">
       <h1>{capitalize(tt["project"])}s</h1>
-      {projects.map((project) => (
-        <div key={project.slug}>
-          <h2>
-            <Link href={`/${lang}/projects/${project.slug}`}>
-              {getTranslation(project, lang).title}
-            </Link>
-          </h2>
-          <p>{getTranslation(project, lang).description}</p>
-        </div>
-      ))}
+      <div className="cards-list">
+              {projects.map((project) => (
+                <ProjectCard key={project.slug} project={project} lang={lang} />
+              ))}
+            </div>
       {projects.length === 0 ? <p>{tt["gamestar.comingSoon"]} !</p> : null}
     </div>
   );

src/components/ArticleCard.tsx

@@ -0,0 +1,45 @@
+import { getTranslation, useTranslationTable } from "@/locales";
+import {
+  GameStarArticle,
+  GameStarArticleMember,
+  Member,
+} from "@/types/aliases";
+import Link from "next/link";
+
+export default async function ArticleCard({
+  article,
+  lang,
+}: {
+  article: GameStarArticle;
+  lang: string;
+}) {
+  const tt = await useTranslationTable(lang);
+
+  const translation = getTranslation(article, lang);
+
+  let names = (article.authors as GameStarArticleMember[])?.map(
+    (author) =>
+      (author.members_id as Member).name +
+      " " +
+      (author.members_id as Member).surname,
+  );
+
+  let start = names.slice(0, -1).join(", ");
+  let last = names[names.length - 1];
+
+  let res = start === "" ? ` ${last}` : ` ${start} ${tt["and"]} ${last}`;
+
+  return (
+    <div key={article.slug} className="card">
+      <Link href={`/${lang}/articles/${article.slug}`}>
+        <div className="card-head">
+          <h3>{translation.title}</h3>
+          <div className="authors">
+            {article.authors?.length === 0 ? tt["anonymous"] : tt["by"] + res}
+          </div>
+        </div>
+        <p>{translation.description}</p>
+      </Link>
+    </div>
+  );
+}

src/components/ComiteeBar.tsx

@@ -15,17 +15,21 @@ export default function ComiteeBar({
     <div className="comitee-bar">
       {comitees
         .sort((a, b) =>
-          // Sort with Coordinator > Treasurer > others
-          // Use startsWith so it works in French too (Coordinateur, Trésorier)
-          a.role.startsWith("Coord") // Coordinator
+          // Sort with Dictator > Coordinator > Treasurer > others
+          // Use startsWith so it works in French too (Dictateur, Coordinateur, Trésorier)
+          a.role.startsWith("Dic") // Dictator
             ? -1
-            : b.role.startsWith("Coord") // Coordinator
+            : b.role.startsWith("Dic") // Dictator
               ? 1
-              : a.role.startsWith("Tr") // Treasurer
+              : a.role.startsWith("Coord") // Coordinator
                 ? -1
-                : b.role.startsWith("Tr") // Treasurer
+                : b.role.startsWith("Coord") // Coordinator
                   ? 1
-                  : a.role.localeCompare(b.role),
+                  : a.role.startsWith("Tr") // Treasurer
+                    ? -1
+                    : b.role.startsWith("Tr") // Treasurer
+                      ? 1
+                      : a.role.localeCompare(b.role),
         )
         .map((member, i) => (
           <ComiteeCard

src/components/EventCard.tsx

@@ -15,9 +15,9 @@ export default function EventCard({
     minute: "2-digit",
   });
   return (
-    <div key={event.slug} className="event-card">
+    <div key={event.slug} className="card">
       <Link href={`/${lang}/events/${event.slug}`}>
-        <div className="event-head">
+        <div className="card-head">
           <h3>{translation.title}</h3>
           <div className="event-start">{start_date}</div>
         </div>

src/components/PeopleBar.tsx

@@ -0,0 +1,28 @@
+import ComiteeCard from "./ComiteeCard";
+
+export default function PeopleBar({
+  people,
+}: {
+  people: {
+    name: string;
+    surname: string;
+    role: string;
+    link: string;
+    image: string;
+  }[];
+}) {
+  return (
+    <div className="comitee-bar">
+      {people.map((person, i) => (
+        <ComiteeCard
+          key={i}
+          name={person.name}
+          surname={person.surname}
+          role={person.role}
+          link={person.link}
+          image={person.image}
+        />
+      ))}
+    </div>
+  );
+}

src/components/ProjectCard.tsx

@@ -0,0 +1,28 @@
+import { getTranslation, useTranslationTable } from "@/locales";
+import {
+  GameStarProject,
+} from "@/types/aliases";
+import Link from "next/link";
+
+export default async function ProjectCard({
+  project,
+  lang,
+}: {
+  project: GameStarProject;
+  lang: string;
+}) {
+  const tt = await useTranslationTable(lang);
+
+  const translation = getTranslation(project, lang);
+
+  return (
+    <div key={project.slug} className="card">
+      <Link href={`/${lang}/projects/${project.slug}`}>
+        <div className="card-head">
+          <h3>{translation.title}</h3>
+        </div>
+        <p>{translation.description}</p>
+      </Link>
+    </div>
+  );
+}

src/locales.ts

@@ -1,5 +1,4 @@
 import config from "@/../next.config";
-import React, { useContext } from "react";
 import { directus } from "./directus";
 import { readTranslations } from "@directus/sdk";
 
@@ -17,7 +16,9 @@ function fullLang(lang: string) {
 }
 
 export async function useTranslationTable(lang: string) {
-  const tables = (await directus().request(readTranslations({}))).reduce<{
+  const tables = (
+    await directus().request(readTranslations({ limit: -1 }))
+  ).reduce<{
     [lang: string]: { [key: string]: string };
   }>((res, val) => {
     if (val.language in res) {

src/styles/components/_event-card.scss → src/styles/components/_cards.scss

@@ -1,9 +1,9 @@
-.event-card {
+.card {
   padding: 1em;
   border: 3px solid #000000;
   border-radius: 10px;
 
-  .event-head {
+  .card-head {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -22,15 +22,19 @@
   .event-start {
     font-weight: bold;
   }
+
+  .authors {
+    font-weight: bold;
+  }
 }
 
-.events-grid {
+.cards-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
   gap: 1em;
 }
 
-.events-list {
+.cards-list {
   display: flex;
   flex-direction: column;
   gap: 1em;

src/styles/components/_dropdown.scss

@@ -44,7 +44,7 @@
 
   &.right-align .dropdown-item {
     text-align: right;
-    justify-content: end;
+    justify-content: start;
   }
 }
 

src/styles/components/_index.scss

@@ -4,5 +4,5 @@
 @forward "navigation";
 @forward "article";
 @forward "content";
-@forward "event-card";
 @forward "not-found";
+@forward "cards";