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.json

@@ -1,22 +1,27 @@
 {
-  "name": "alus-unblocker",
+	"name": "alus-unblocker",
-  "type": "module",
+	"type": "module",
-  "version": "0.0.1",
+	"version": "0.0.1",
-  "scripts": {
+	"scripts": {
-    "start": "node .",
+		"start": "node .",
-    "build": "astro build"
+		"build": "astro build",
-  },
+		"i18n:extract": "astro-i18n extract",
-  "dependencies": {
+		"i18n:generate:pages": "astro-i18n generate:pages --purge",
-    "@astrojs/check": "^0.4.0",
+		"i18n:generate:types": "astro-i18n generate:types",
-    "@astrojs/node": "^7.0.4",
+		"i18n:sync": "npm run i18n:generate:pages && npm run i18n:generate:types"
-    "@nebula-services/ultraviolet": "^1.0.1-1.patch.5",
+	},
-    "@tomphttp/bare-server-node": "^2.0.1",
+	"dependencies": {
-    "astro": "^4.1.1",
+		"@astrojs/check": "^0.4.0",
-    "compression": "^1.7.4",
+		"@astrojs/node": "^7.0.4",
-    "dotenv": "^16.3.1",
+		"@nebula-services/ultraviolet": "^1.0.1-1.patch.5",
-    "express": "^4.18.2",
+		"@tomphttp/bare-server-node": "^2.0.1",
-    "i": "^0.3.7",
+		"astro": "^4.1.1",
-    "npm": "^10.2.5",
+		"astro-i18n": "^2.2.4",
-    "typescript": "^5.3.3"
+		"compression": "^1.7.4",
-  }
+		"dotenv": "^16.3.1",
+		"express": "^4.18.2",
+		"i": "^0.3.7",
+		"npm": "^10.2.5",
+		"typescript": "^5.3.3"
+	}
 }

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;
 }
@@ -299,11 +301,11 @@ label:hover, input[type="radio"]:checked+label {
   flex-direction: column;
   top: calc(-100% );
   left: 0;
-  transition: transform .2s ease-in-out; 
+  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/env.d.ts

@@ -1 +1 @@
-/// <reference types="astro/client" />
+/// <reference types="astro/client" />

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>