feat: added metadata, added games page

package.json

@@ -8,7 +8,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "prepare": "husky && git submodule update --init",
+    "prepare": "husky",
     "load-directus": "sh directus-config/load.sh",
     "save-directus": "sh directus-config/save.sh",
     "save-directus-data": "sh directus-config/save-data.sh",

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

@@ -2,7 +2,20 @@ import { directus } from "@/directus";
 import { capitalize, useTranslationTable } from "@/locales";
 import { readItems } from "@directus/sdk";
 import { GameStarArticle } from "@/types/aliases";
-import ArticleCard from "@/components/ArticleCard";
+import { ArticleCard } from "@/components/Cards";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ lang: string }>;
+}) {
+  const { lang } = await params;
+  const tt = await useTranslationTable(lang);
+
+  return {
+    title: `${capitalize(tt["article"])}s | Game*`,
+  };
+}
 
 export default async function Articles({
   params,

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

@@ -2,7 +2,20 @@ import { directus } from "@/directus";
 import { capitalize, queryTranslations, useTranslationTable } from "@/locales";
 import { readItems } from "@directus/sdk";
 import { GameStarEvent } from "@/types/aliases";
-import EventCard from "@/components/EventCard";
+import { EventCard } from "@/components/Cards";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ lang: string }>;
+}) {
+  const { lang } = await params;
+  const tt = await useTranslationTable(lang);
+
+  return {
+    title: `${capitalize(tt["event"])}s | Game*`,
+  };
+}
 
 export default async function Events({
   params,

src/app/[lang]/games/[game]/page.tsx

@@ -0,0 +1,59 @@
+import GameEmbed from "@/components/GameEmbed";
+import { directus } from "@/directus";
+import { capitalize, getTranslation, queryTranslations } from "@/locales";
+import { GameStarGame } from "@/types/aliases";
+import { readItems } from "@directus/sdk";
+import { notFound } from "next/navigation";
+import Markdown from "react-markdown";
+
+async function getGame(game_slug: string): Promise<GameStarGame> {
+  const games = (await directus().request(
+    readItems("game_star_games", {
+      filter: { slug: { _eq: game_slug } },
+      limit: 1,
+      ...queryTranslations,
+    }),
+  )) as GameStarGame[];
+
+  const project = games[0] ?? null;
+
+  if (!project) {
+    notFound();
+  }
+
+  return project;
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ game: string; lang: string }>;
+}) {
+  const { game: game_slug, lang } = await params;
+
+  const gameData = await getGame(game_slug);
+  const translation = getTranslation(gameData, lang);
+
+  return {
+    title: gameData.name,
+    description: translation.description,
+  };
+}
+
+export default async function Game({
+  params,
+}: {
+  params: Promise<{ game: string; lang: string }>;
+}) {
+  const { game: game_slug, lang } = await params;
+  const gameData = await getGame(game_slug);
+  const translation = getTranslation(gameData, lang);
+
+  return (
+    <div className="content">
+      <h1>{capitalize(gameData.name)}</h1>
+      <GameEmbed game={gameData} />
+      <Markdown>{translation.content}</Markdown>
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { directus } from "@/directus";
+import { capitalize, queryTranslations, useTranslationTable } from "@/locales";
+import { readItems } from "@directus/sdk";
+import { GameStarGame } from "@/types/aliases";
+import { GameCard } from "@/components/Cards";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ lang: string }>;
+}) {
+  const { lang } = await params;
+  const tt = await useTranslationTable(lang);
+
+  return {
+    title: `${capitalize(tt["games"])} | Game*`,
+  };
+}
+
+export default async function Games({
+  params,
+}: {
+  params: Promise<{ lang: string }>;
+}) {
+  const { lang } = await params;
+  const tt = await useTranslationTable(lang);
+
+  let games = (await directus().request(
+    readItems("game_star_games", {
+      ...queryTranslations,
+    }),
+  )) as GameStarGame[];
+
+  return (
+    <div className="content">
+      <h1>{capitalize(tt["games"])}</h1>
+      <div className="cards-list">
+        {games.map((game) => (
+          <GameCard key={game.slug} game={game} lang={lang} />
+        ))}
+      </div>
+      {games.length === 0 ? <p>{tt["gamestar.comingSoon"]} !</p> : null}
+    </div>
+  );
+}

src/app/[lang]/layout.tsx

@@ -1,9 +1,35 @@
 import Footer from "@/components/Footer";
 import Navigation from "@/components/Navigation";
 import { directus } from "@/directus";
-import { capitalize, useTranslationTable } from "@/locales";
+import {
+  capitalize,
+  getTranslation,
+  queryTranslations,
+  useTranslationTable,
+} from "@/locales";
 import "@/styles/style.scss";
-import { readItems } from "@directus/sdk";
+import { GameStar } from "@/types/aliases";
+import { readItems, readSingleton } from "@directus/sdk";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ lang: string }>;
+}) {
+  const { lang } = await params;
+
+  const game_star = (await directus().request(
+    readSingleton("game_star", {
+      ...queryTranslations,
+    }),
+  )) as GameStar;
+  const game_star_translation = getTranslation(game_star, lang);
+
+  return {
+    title: "Game*",
+    description: game_star_translation.about_text,
+  };
+}
 
 export default async function RootLayout({
   children,
@@ -28,10 +54,17 @@ export default async function RootLayout({
       <body>
         <Navigation
           navLinks={[
-            { name: capitalize(tt["home"]), href: "/" },
-            { name: capitalize(tt["event"]) + "s", href: "/events" },
-            { name: capitalize(tt["project"]) + "s", href: "/projects" },
-            { name: capitalize(tt["article"]) + "s", href: "/articles" },
+            { name: capitalize(tt["home"]), href: `/${lang}` },
+            { name: capitalize(tt["event"]) + "s", href: `/${lang}/events` },
+            {
+              name: capitalize(tt["project"]) + "s",
+              href: `/${lang}/projects`,
+            },
+            {
+              name: capitalize(tt["article"]) + "s",
+              href: `/${lang}/articles`,
+            },
+            { name: capitalize(tt["games"]), href: `/${lang}/games` },
           ]}
         />
         <main>{children}</main>

src/app/[lang]/page.tsx

@@ -10,29 +10,9 @@ import { AssociationMembership, Member } from "@/types/aliases";
 import ComiteeBar from "@/components/ComiteeBar";
 import { GameStar, GameStarEvent } from "@/types/aliases";
 import Image from "next/image";
-import EventCard from "@/components/EventCard";
 import Link from "next/link";
 import ForwardArrowIcon from "@/components/icons/ForwardArrowIcon";
-
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ lang: string }>;
-}) {
-  const { lang } = await params;
-
-  const game_star = (await directus().request(
-    readSingleton("game_star", {
-      ...queryTranslations,
-    }),
-  )) as GameStar;
-  const game_star_translation = getTranslation(game_star, lang);
-
-  return {
-    title: "Game*",
-    description: game_star_translation.about_text,
-  };
-}
+import { EventCard } from "@/components/Cards";
 
 export default async function Home({
   params,

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

@@ -29,7 +29,6 @@ export async function generateMetadata({
   params: Promise<{ project: string; lang: string }>;
 }) {
   const { project: project_slug, lang } = await params;
-
   const translation = getTranslation(await getProject(project_slug), lang);
 
   return {

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

@@ -2,7 +2,20 @@ import { directus } from "@/directus";
 import { capitalize, queryTranslations, useTranslationTable } from "@/locales";
 import { readItems } from "@directus/sdk";
 import { GameStarProject } from "@/types/aliases";
-import ProjectCard from "@/components/ProjectCard";
+import { ProjectCard } from "@/components/Cards";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ lang: string }>;
+}) {
+  const { lang } = await params;
+  const tt = await useTranslationTable(lang);
+
+  return {
+    title: `${capitalize(tt["project"])}s | Game*`,
+  };
+}
 
 export default async function Projects({
   params,