Japanese translations for header (probably incorrect)

package-lock.json

@@ -5,10 +5,13 @@
 	"packages": {
 		"": {
 			"dependencies": {
+				"i18next": "^23.7.8",
+				"i18next-browser-languagedetector": "^7.2.0",
 				"million": "^2.6.4",
 				"preact": "^10.13.1",
 				"preact-iso": "^2.3.2",
-				"preact-render-to-string": "^6.3.1"
+				"preact-render-to-string": "^6.3.1",
+				"react-i18next": "^13.5.0"
 			},
 			"devDependencies": {
 				"@preact/preset-vite": "^2.5.0",
@@ -411,6 +414,17 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
+		"node_modules/@babel/runtime": {
+			"version": "7.23.6",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.6.tgz",
+			"integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==",
+			"dependencies": {
+				"regenerator-runtime": "^0.14.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
 		"node_modules/@babel/template": {
 			"version": "7.22.15",
 			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@@ -2902,6 +2916,44 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/html-parse-stringify": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+			"integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+			"dependencies": {
+				"void-elements": "3.1.0"
+			}
+		},
+		"node_modules/i18next": {
+			"version": "23.7.8",
+			"resolved": "https://registry.npmjs.org/i18next/-/i18next-23.7.8.tgz",
+			"integrity": "sha512-yCe9964O+1abdIG01AOzk6P9mQi0HVJV1B57whYJQu6TjmrB9JHHDYonDI8amGt6M6b9bP3x3R0Zh7ROmvX7JQ==",
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://locize.com"
+				},
+				{
+					"type": "individual",
+					"url": "https://locize.com/i18next.html"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+				}
+			],
+			"dependencies": {
+				"@babel/runtime": "^7.23.2"
+			}
+		},
+		"node_modules/i18next-browser-languagedetector": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.0.tgz",
+			"integrity": "sha512-U00DbDtFIYD3wkWsr2aVGfXGAj2TgnELzOX9qv8bT0aJtvPV9CRO77h+vgmHFBMe7LAxdwvT/7VkCWGya6L3tA==",
+			"dependencies": {
+				"@babel/runtime": "^7.23.2"
+			}
+		},
 		"node_modules/ignore": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz",
@@ -3476,7 +3528,6 @@
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
 			"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-			"dev": true,
 			"dependencies": {
 				"js-tokens": "^3.0.0 || ^4.0.0"
 			},
@@ -4102,6 +4153,39 @@
 				}
 			]
 		},
+		"node_modules/react": {
+			"version": "18.2.0",
+			"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+			"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+			"peer": true,
+			"dependencies": {
+				"loose-envify": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/react-i18next": {
+			"version": "13.5.0",
+			"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.5.0.tgz",
+			"integrity": "sha512-CFJ5NDGJ2MUyBohEHxljOq/39NQ972rh1ajnadG9BjTk+UXbHLq4z5DKEbEQBDoIhUmmbuS/fIMJKo6VOax1HA==",
+			"dependencies": {
+				"@babel/runtime": "^7.22.5",
+				"html-parse-stringify": "^3.0.1"
+			},
+			"peerDependencies": {
+				"i18next": ">= 23.2.3",
+				"react": ">= 16.8.0"
+			},
+			"peerDependenciesMeta": {
+				"react-dom": {
+					"optional": true
+				},
+				"react-native": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -4148,6 +4232,11 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/regenerator-runtime": {
+			"version": "0.14.0",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+			"integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+		},
 		"node_modules/regexp.prototype.flags": {
 			"version": "1.5.1",
 			"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
@@ -4867,6 +4956,14 @@
 				}
 			}
 		},
+		"node_modules/void-elements": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+			"integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/webpack-sources": {
 			"version": "3.2.3",
 			"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",

package.json

@@ -7,10 +7,13 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"i18next": "^23.7.8",
+		"i18next-browser-languagedetector": "^7.2.0",
 		"million": "^2.6.4",
 		"preact": "^10.13.1",
 		"preact-iso": "^2.3.2",
-		"preact-render-to-string": "^6.3.1"
+		"preact-render-to-string": "^6.3.1",
+		"react-i18next": "^13.5.0"
 	},
 	"devDependencies": {
 		"@preact/preset-vite": "^2.5.0",

src/components/Header.tsx

@@ -4,15 +4,17 @@ import LogoSvg from "../assets/logo.svg";
 import GamesSvg from '../assets/games.svg';
 
 import { useState, useEffect } from "preact/hooks"
+import { useTranslation } from 'react-i18next';
 
 export function Header() {
   const { url } = useLocation();
+  const { t, i18n } = useTranslation();
 
   return (
     <div id="navbar" className="h-16 px-4 bg-navbar-color flex flex-row items-center justify-between">
 			<div className="flex flex-row items-center w-1/2">
 				<img src="/logo.png" className="h-16 w-16"></img>
-				<h1 className="font-roboto text-navbar-text-color text-4xl">nebula.</h1>
+				<h1 className="font-roboto text-navbar-text-color text-4xl">{t('header.title')}</h1>
 			</div>
 			<div className="w-1/2">
 				<div className="flex flex-row justify-end items-center">
@@ -33,7 +35,7 @@ export function Header() {
 								d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
 							/>
 						</svg>
-						<span className="text-text-color text-lg pl-1">Games</span>
+						<span className="text-text-color text-lg pl-1">{t('header.games')}</span>
 					</div>
 					<div class="p-4 flex flex-row items-center">
 						<svg
@@ -51,7 +53,7 @@ export function Header() {
 							d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5"
 						/>
 						</svg>
-						<span className="text-text-color text-lg pl-1">Settings</span>
+						<span className="text-text-color text-lg pl-1">{t('header.settings')}</span>
 					</div>
 					<div class="p-4 flex flex-row items-center">
 						<svg
@@ -70,7 +72,7 @@ export function Header() {
 							d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
 						/>
 						</svg>
-						<span className="text-text-color text-lg pl-1">Want more links?</span>
+						<span className="text-text-color text-lg pl-1">{t('header.discord')}</span>
 					</div>
 				</div>
 			</div>

src/i18n.ts

@@ -0,0 +1,28 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import translationEN from './locales/EN.json';
+import translationJA from './locales/ja.json';
+
+const resources = {
+  en: {
+    translation: translationEN,
+  },
+  ja: {
+    translation: translationJA,
+  },
+};
+
+i18n
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .init({
+    resources,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;

src/index.tsx

@@ -6,6 +6,7 @@ import { Home } from './pages/Home';
 import { NotFound } from './pages/_404.jsx';
 import './style.css';
 import './themes/main.css';
+import './i18n';
 
 export function App() {
 	return (

src/locales/en.json

@@ -0,0 +1,8 @@
+{
+    "header": {
+        "title": "nebula.",
+        "games": "Games",
+        "settings": "Settings",
+        "discord": "Want more links?"
+    }
+}

src/locales/ja.json

@@ -0,0 +1,8 @@
+{
+    "header": {
+        "title": "ネブラ。",
+        "games": "ゲーム",
+        "settings": "セッティング",
+        "discord": "もっとリンクが欲しいですか？"
+    }
+}