i18n fail, will try and fix this later but for now things are borked.

astro-i18n.config.ts

@@ -0,0 +1,16 @@
+import { defineAstroI18nConfig } from "astro-i18n"
+
+export default defineAstroI18nConfig({
+	primaryLocale: "en", // default app locale
+	secondaryLocales: [], // other supported locales
+	fallbackLocale: "en", // fallback locale (on missing translation)
+	trailingSlash: "never", // "never" or "always"
+	run: "server", // "client+server" or "server"
+	showPrimaryLocale: false, // "/en/about" vs "/about"
+	translationLoadingRules: [], // per page group loading
+	translationDirectory: {}, // translation directory names
+	translations: {
+
+	}, // { [translation_group1]: { [locale1]: {}, ... } }
+	routes: {}, // { [secondary_locale1]: { about: "about-translated", ... } }
+})

package-lock.json

@@ -13,6 +13,7 @@
 				"@nebula-services/ultraviolet": "^1.0.1-1.patch.5",
 				"@tomphttp/bare-server-node": "^2.0.1",
 				"astro": "^4.1.1",
+				"astro-i18n": "^2.2.4",
 				"compression": "^1.7.4",
 				"dotenv": "^16.3.1",
 				"express": "^4.18.2",
@@ -1991,6 +1992,17 @@
 				"sharp": "^0.33.1"
 			}
 		},
+		"node_modules/astro-i18n": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/astro-i18n/-/astro-i18n-2.2.4.tgz",
+			"integrity": "sha512-vhvxBtStNLLghtl63aGhBEtU1DqlYz0D3ggz5Nh2QZok36s9Ss3v9b4txN3mH/OZ90JUwkII13CYQL9wozjXBQ==",
+			"bin": {
+				"astro-i18n": "dist/src/bin.cjs"
+			},
+			"peerDependencies": {
+				"esbuild": "0.x"
+			}
+		},
 		"node_modules/async-exit-hook": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/async-exit-hook/-/async-exit-hook-2.0.1.tgz",

package.json

@@ -4,7 +4,11 @@
 	"version": "0.0.1",
 	"scripts": {
 		"start": "node .",
-    "build": "astro build"
+		"build": "astro build",
+		"i18n:extract": "astro-i18n extract",
+		"i18n:generate:pages": "astro-i18n generate:pages --purge",
+		"i18n:generate:types": "astro-i18n generate:types",
+		"i18n:sync": "npm run i18n:generate:pages && npm run i18n:generate:types"
 	},
 	"dependencies": {
 		"@astrojs/check": "^0.4.0",
@@ -12,6 +16,7 @@
 		"@nebula-services/ultraviolet": "^1.0.1-1.patch.5",
 		"@tomphttp/bare-server-node": "^2.0.1",
 		"astro": "^4.1.1",
+		"astro-i18n": "^2.2.4",
 		"compression": "^1.7.4",
 		"dotenv": "^16.3.1",
 		"express": "^4.18.2",

src/components/Dropdown.astro

@@ -19,13 +19,13 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
 </div>
 <style>
     .dropdown {
-        box-shadow: 4px 6px 15px 0px #0e0e0e;
+        box-shadow: 4px 6px 15px 0px var(--background-color);
         border-bottom-left-radius: 10px;
         border-bottom-right-radius: 10px;
         position: relative;
     }
     .dropdown-toggle {
-        background-color: #2e2e2e;
+        background-color: var(--accent-color);
         border: none;
         color: var(--text-color);
         padding: 12px 16px;
@@ -46,12 +46,12 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
         transition: max-height 350ms ease-in-out; /* Use max-height in the transition property */
         border-bottom-left-radius: 10px;
         border-bottom-right-radius: 10px;
-        background-color: #212121;
+        background-color: var(--dropdown-background-color);
         position: absolute;
         width: 100%;
     }
     .dropdown-item {
-        border-bottom: 1px solid #4d4d4d;
+        border-bottom: 1px solid var(--text-color-accent);
         padding: 10px;
         color: var(--text-color);
         cursor: pointer;

src/components/Header.astro

@@ -1,19 +1,21 @@
+---
+    import { t } from "astro-i18n"
+---
+
 <div class="top-header">
     <div id="title-background" class="title-background">
         <div class="left">
-            <a href="/" class="header-item">Alu</a>
+            <a href="/" class="header-item">{t("nav.brand")}</a>
         </div>
         <div class="right">
-            <a href="/games/" class="header-item"><i class="fa-solid fa-gamepad-modern"></i> Games</a>
+            <a href="/games/" class="header-item">Games</a>
-            <a href="/settings/" class="header-item"><i class="fa-solid fa-gear"></i> Settings</a>
+            <a href="/settings/" class="header-item">Settings</a>
         </div>
     </div>
 </div>
 
 <style>
 .top-header {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
     box-sizing: border-box;
     transition: 250ms ease-in;

src/components/SettingsContent/CustomizationTab.astro

@@ -8,4 +8,8 @@
         <label class="setting-label">Theme</label>
         <Dropdown buttonNameDefault="Alu" dropdownList={["Alu", "Macchiato", "Mocha"]}, id="dropdown__selected-theme" />
     </div>
+    <div class="setting__language">
+        <label class="setting-label">Language</label>
+        <Dropdown buttonNameDefault="English" dropdownList={["English", "日本語"]}, id="dropdown__selected-language" />
+    </div>
 </div>

src/components/SettingsTablist.astro

@@ -151,8 +151,11 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
 
     function setupCustomizationSettings() {
       applySavedLocalStorage('alu__selectedTheme', 'dropdown__selected-theme');
-      let dropdown = document.getElementById('dropdown__selected-theme-menu')
+      applySavedLocalStorage('alu__selectedLanguage', 'dropdown__selected-language');
-      applyDropdownEventListeners(dropdown, 'dropdown__selected-theme', 'alu__selectedTheme', changeTheme);
+      let dropdownTheme = document.getElementById('dropdown__selected-theme-menu')
+      let dropdownLanguage = document.getElementById('dropdown__selected-language-menu')
+      applyDropdownEventListeners(dropdownTheme, 'dropdown__selected-theme', 'alu__selectedTheme', changeTheme);
+      applyDropdownEventListeners(dropdownLanguage, 'dropdown__selected-language', 'alu__selectedLanguage');
     }
 
     function changeTheme() {
@@ -268,16 +271,15 @@ label:hover, input[type="radio"]:checked+label {
   opacity: 1; 
 }
 .popup{
-  width: 1000px;
+  width: 98%;
   height: 80%;
+  margin: 0 auto;
   min-height: 400px; 
   max-height: 400px; 
   border-radius: 48px;
   box-sizing: border-box; 
-  border: 16px solid #2b2b2b;
+  background-color: var(--background-color);
-  background-color: #1b1b1b;
   overflow: hidden;
-  box-shadow: 16px 16px 48px #2e364330;
   display: flex;
   align-self: center;
 }
@@ -300,10 +302,10 @@ label:hover, input[type="radio"]:checked+label {
   top: calc(-100% );
   left: 0;
   transition: transform .2s ease-in-out;
+  background-color: var(--accent-color);
 }
 .marker #bottom, .marker #top{
-  background-color: #383838;
+  background-color: var(--background-highlight);
-  box-shadow: 32px 32px 48px #2e364315; 
 }
 .marker #top{
   height: calc(50%);
@@ -317,5 +319,5 @@ label:hover, input[type="radio"]:checked+label {
 #setting-tab-proxy:checked ~ .marker{transform: translateY(0%)}
 #setting-tab-customization:checked ~ .marker{transform: translateY(13.5%)}
 #setting-tab-cloaking:checked ~ .marker{transform: translateY(27%)}
-#setting-tab-credits:checked ~ .marker{transform: translateY(40.5%)}
+#setting-tab-credits:checked ~ .marker{transform: translateY(41%)}
 </style>

src/i18n/common/en.json

@@ -0,0 +1,7 @@
+{
+    "nav": {
+        "brand": "Alu",
+        "games": "Games",
+        "settings": "Settings"
+    }
+}

src/layouts/Layout.astro

@@ -56,6 +56,7 @@ body {
   --accent-color: #7900e1;
   --text-color: #fff;
   --text-color-accent: #c7c7c7;
+  --dropdown-background-color: #1e1e1e;
 }
 
 [data-theme="mocha"] {
@@ -65,6 +66,7 @@ body {
   --accent-color: #181825;
   --text-color: #cdd6f4;
   --text-color-accent: #bac2de;
+  --dropdown-background-color: #32324e; 
 }
 
 [data-theme="macchiato"] {
@@ -74,6 +76,7 @@ body {
   --accent-color: #1e2030;
   --text-color: #cad3f5;
   --text-color-accent: #b8c0e0;
+  --dropdown-background-color: #323550;
 }
 
 body, html {

src/middleware/index.ts

@@ -0,0 +1,10 @@
+import { sequence } from "astro/middleware"
+import config from "../../astro-i18n.config.ts"
+import { useAstroI18n } from "astro-i18n"
+
+const astroI18n = useAstroI18n(
+	config,
+	undefined /* custom formatters */,
+)
+
+export const onRequest = sequence(astroI18n)

src/pages/404/index.astro

@@ -1,6 +1,5 @@
 ---
-import Footer from "../components/Footer.astro";
+import Layout from "../../layouts/Layout.astro";
-import Layout from "../layouts/Layout.astro";
 
 ---
 

src/pages/index.astro

@@ -1,6 +1,10 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import UVRegistrar from '../components/UVRegistrar.astro';
+
+import { astroI18n, t } from "astro-i18n"
+
+astroI18n.locale
 ---
 
 <Layout title="Alu">

src/pages/settings.astro

@@ -15,18 +15,4 @@ import ThemeLoader from "../components/ThemeLoader.astro";
     h1 {
         font-size: 40px;
     }
-    .switch-group {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    .switch-group-item {
-        display: flex;
-        justify-items: center;
-        align-items: center;
-        gap: 10px;
-    }
-    .switch-title {
-        color: white;
-    }
 </style>