feat: add i18n translation (initial JP and EN)

3 files changed, 23 insertions, 19 deletions

diff --git a/site/src/pages/GameSelector.tsx b/site/src/pages/GameSelector.tsx
index 41551bc..5586cbf 100644
--- a/site/src/pages/GameSelector.tsx
+++ b/site/src/pages/GameSelector.tsx
@@ -1,5 +1,6 @@
 import { Link, useSearchParams } from "react-router-dom";
 import TitleBar from "../components/TitleBar";
+import { useTranslation } from "react-i18next";
 
 interface GameCategory {
   name: string;
@@ -67,18 +68,19 @@ const gameInfo: GameCategory[] = [
 const GameSelector = () => {
   const [searchParams] = useSearchParams();
   const isMoe = searchParams.has("moe");
+  const { t } = useTranslation();
 
   const renderCategory = (category: GameCategory) => (
     <div key={category.name} className="mb-6">
       <h2
         className={`text-lg font-bold ${isMoe ? "text-pink-700" : "text-gray-200"}`}
       >
-        {category.name}
+        {t(`gameselector.categories.${category.name.toLowerCase().replace(' ', '_')}`)}
       </h2>
       <p
         className={`text-sm ${isMoe ? "text-pink-600" : "text-gray-400"} mb-2`}
       >
-        {category.description}
+        {category.name === "COMMUNITY" ? t('gameselector.community_description') : category.description}
       </p>
       <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mt-2">
         {category.games.map((game) => (
@@ -104,13 +106,12 @@ const GameSelector = () => {
           <h1
             className={`text-2xl font-bold mb-4 ${isMoe ? "text-pink-800" : "text-white"} sm:mb-6`}
           >
-            Select a Game
+            {t('gameselector.title')}
           </h1>
           <h2
             className={`text-base font-medium ${isMoe ? "text-pink-700" : "text-gray-300"} mb-4`}
           >
-            Individual game feeds keep a longer history of news relating to that
-            game than the main feed.
+            {t('gameselector.subtitle')}
           </h2>
           {gameInfo.map(renderCategory)}
         </div>
diff --git a/site/src/pages/Homepage.tsx b/site/src/pages/Homepage.tsx
index 4e04688..13ec4fd 100644
--- a/site/src/pages/Homepage.tsx
+++ b/site/src/pages/Homepage.tsx
@@ -5,6 +5,7 @@ import { getGameTitle } from "../utils.ts";
 import TitleBar from "../components/TitleBar";
 import { GameNotes } from "../components/GameNotes";
 import NotificationButton from "../components/NotificationButton";
+import { useTranslation } from "react-i18next";
 
 interface ArcadeNewsAPIData {
   fetch_time: number;
@@ -12,6 +13,8 @@ interface ArcadeNewsAPIData {
 }
 
 export default function Home() {
+  const { t } = useTranslation();
+
   const { gameId } = useParams<{ gameId?: string }>();
   const [searchParams] = useSearchParams();
   const isMoe = searchParams.has("moe");
@@ -116,7 +119,7 @@ export default function Home() {
             <h1
               className={`${isMoe ? "text-pink-900" : "text-white"} text-3xl font-bold mb-4`}
             >
-              News Not Found
+              {t('news_not_found')}
             </h1>
             <p
               className={`${isMoe ? "text-pink-700" : "text-gray-400"} text-lg mb-8`}
@@ -142,7 +145,7 @@ export default function Home() {
                     : "bg-purple-600 text-white hover:bg-purple-700"
                 }`}
               >
-                Return Home
+                {t('return_home')}
               </a>
             </div>
           </div>
@@ -218,7 +221,7 @@ export default function Home() {
               <div
                 className={`${isMoe ? "bg-pink-200 text-pink-900" : "bg-gray-800 text-white"} rounded-lg p-6 text-center shadow-lg`}
               >
-                <h1 className="text-2xl font-bold">Welcome to 573-UPDATES</h1>
+                <h1 className="text-2xl font-bold">{t('homepage.welcome')}</h1>
                 <h2
                   className={`text-2xl font-extrabold mb-4 tracking-widest text-center uppercase glow-neon ${
                     isMoe ? "text-pink-500" : "text-[#00FF00]"
@@ -233,21 +236,20 @@ export default function Home() {
                   />
                 </div>
                 <p>
-                  News and Information for various arcade games is aggregated
-                  here!
+                  {t('homepage.news_aggregation_note')}
                 </p>
                 <p className="mt-2">
-                  RSS feeds are available on each game's individual page
+                  {t('homepage.rss_feeds')}
                 </p>
                 <p className="mt-2">
-                  Please see the{" "}
+                  {t('homepage.github_info').split('GitHub')[0]}{" "}
                   <a
                     href="https://github.com/pinapelz/573-updates"
                     className="text-blue-500 hover:underline"
                   >
                     GitHub
                   </a>{" "}
-                  for API information
+                  {t('homepage.github_info').split('GitHub')[1] || ''}
                 </p>
                 <div className="mt-6">
                   <div className="mt-4">
@@ -267,8 +269,7 @@ export default function Home() {
                           } flex items-center gap-1 mx-auto transition-colors`}
                         >
                           <span>
-                            Subscribed to {subscribedGames.length} game
-                            {subscribedGames.length !== 1 ? "s" : ""}
+                            {`${t('subscribed_to_games_count')}`} {subscribedGames.length} {`${t('games')}`}
                           </span>
                           <svg
                             className={`w-4 h-4 transition-transform ${showSubscribedDropdown ? "rotate-180" : ""}`}
diff --git a/site/src/pages/NotFound.tsx b/site/src/pages/NotFound.tsx
index 37978af..05173ca 100644
--- a/site/src/pages/NotFound.tsx
+++ b/site/src/pages/NotFound.tsx
@@ -1,7 +1,9 @@
 import { useSearchParams } from "react-router-dom";
 import TitleBar from "../components/TitleBar";
+import { useTranslation } from "react-i18next";
 
 export default function NotFound() {
+  const { t } = useTranslation();
   const [searchParams] = useSearchParams();
   const isMoe = searchParams.has("moe");
 
@@ -16,7 +18,7 @@ export default function NotFound() {
             className={`${isMoe ? "bg-pink-200 text-pink-900" : "bg-gray-800 text-white"} rounded-lg p-8 shadow-lg`}
           >
             <h1 className="text-6xl font-bold mb-4">404</h1>
-            <h2 className="text-2xl font-semibold mb-4">Page Not Found</h2>
+            <h2 className="text-2xl font-semibold mb-4">{t('notFound.title')}</h2>
             <div className="mb-6">
               <img
                 src="/liris.webp"
@@ -25,7 +27,7 @@ export default function NotFound() {
               />
             </div>
             <p className="text-lg mb-6">
-              The page you're looking for doesn't exist or has been moved.
+              {t('notFound.description')}
             </p>
             <div className="space-y-3">
               <a
@@ -36,7 +38,7 @@ export default function NotFound() {
                     : "bg-purple-600 text-white hover:bg-purple-700"
                 }`}
               >
-                Go to Homepage
+                {t('return_home')}
               </a>
               <div className="mt-4">
                 <a
@@ -45,7 +47,7 @@ export default function NotFound() {
                     isMoe ? "text-pink-600 hover:text-pink-800" : "text-blue-400 hover:text-blue-300"
                   } underline`}
                 >
-                  View All Games
+                  {t('notFound.view_all_games')}
                 </a>
               </div>
             </div>