Start using some form of translation

src/pages/[locale]/index.astro

@@ -4,6 +4,9 @@ import AppLayout from "components/AppLayout/AppLayout.astro";
 import Button from "components/Button.astro";
 import LinkCard from "../_components/LinkCard.astro";
 import CategoryCard from "../_components/CategoryCard.astro";
+import { getI18n } from "../../../translations/translations";
+
+const { t } = await getI18n(Astro.currentLocale!);
 ---
 
 {
@@ -24,17 +27,7 @@ import CategoryCard from "../_components/CategoryCard.astro";
     </div>
   </div>
   <div id="description" slot="header-description">
-    <p>
-      We aim at archiving and translating all of <strong>Yoko Taro</strong>’s
-      works.<br />Yoko Taro is a Japanese video game director and scenario
-      writer. He is best-known for his involvement with the <strong>NieR</strong
-      > and <strong>Drakengard</strong> series. To complement his games, Yoko Taro
-      likes to publish side materials in the form of books, anime, manga, audio books,
-      novellas, even theater plays.<br />These media can be very difficult to
-      find. His work goes all the way back to 2003. Most of it was released
-      solely in Japanese, and sometimes in short supply. So this is what we do
-      here: <strong>discover, archive, translate, and analyze</strong>.
-    </p>
+    <p set:html={t("home_description")} />
     <Button title="Read more about us" icon="material-symbols:left-click" />
   </div>
 
@@ -348,9 +341,9 @@ import CategoryCard from "../_components/CategoryCard.astro";
 
       & > .grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
-        column-gap: clamp(6px, 2vmin, 1em);
-        row-gap: clamp(6px + 6px, 2vmin + 6px, 1em);
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        column-gap: clamp(6px, 2vmin, 16px);
+        row-gap: clamp(6px + 6px, 2vmin + 6px, 16px);
       }
     }
   }

translations/en.json

@@ -0,0 +1,3 @@
+{
+  "home_description": "We aim at archiving and translating all of <strong>Yoko Taro</strong>’s works.<br />Yoko Taro is a Japanese video game director and scenario writer. He is best-known for his involvement with the <strong>NieR</strong > and <strong>Drakengard</strong> series. To complement his games, Yoko Taro likes to publish side materials in the form of books, anime, manga, audio books, novellas, even theater plays.<br />These media can be very difficult to find. His work goes all the way back to 2003. Most of it was released solely in Japanese, and sometimes in short supply. So this is what we do here: <strong>discover, archive, translate, and analyze</strong>."
+}

translations/fr.json

@@ -0,0 +1,3 @@
+{
+  "home_description": "Notre objectif est d'archiver et de traduire toutes les œuvres de <strong>Yoko Taro</strong>.<br />Yoko Taro est une réalisatrice et scénariste de jeux vidéo japonaise. Il est surtout connu pour son implication dans les séries <strong>NieR</strong> et <strong>Drakengard</strong>. Pour compléter ses jeux, Yoko Taro aime publier du matériel annexe sous forme de livres, d'animes, de mangas, de livres audio, de romans, voire de pièces de théâtre.<br />Ces médias peuvent être très difficiles à trouver. Son travail remonte à 2003. La majeure partie a été publiée uniquement en japonais, et parfois en quantité limitée. Voici donc ce que nous faisons ici : <strong>découvrir, archiver, traduire et analyser</strong>."
+}

translations/translations.ts

@@ -0,0 +1,16 @@
+export const getI18n = async (locale: string) => {
+  const file = Bun.file(`./translations/${locale}.json`, {
+    type: "application/json",
+  });
+  const content = await file.text();
+  const translations: Record<string, string> = JSON.parse(content);
+
+  return {
+    t: (key: string): string => {
+      if (key in translations) {
+        return translations[key]!;
+      }
+      return `MISSING KEY: ${key}`;
+    },
+  };
+};