i18n updates, just need to finish cloaking settings, and then add credits!!

index.js

@@ -6,6 +6,7 @@ import express from 'express';
 import { handler as ssrHandler } from './dist/server/entry.mjs';
 import dotenv from 'dotenv';
 import compression from "compression"
+import chalk from "chalk"
 dotenv.config();
 
 const PORT = process.env.PORT || 3000;
@@ -35,20 +36,21 @@ server.on("request", (req, res) => {
   } else {
     app(req, res);
   }
-  });
+});
   
-  server.on("upgrade", (req, socket, head) => {
+server.on("upgrade", (req, socket, head) => {
   if (bareServer.shouldRoute(req)) {
     bareServer.routeUpgrade(req, socket, head);
   } else {
     socket.end();
   }
-  });
+});
 
-  server.on("listening", () => {
+console.log(chalk.gray("Starting Alu..."))
-    console.log(`Server running at http://localhost:${PORT}/.`);
+server.on("listening", () => {
-  });
+  console.log(chalk.green(`Server running at http://localhost:${PORT}/.`));
+});
 
-  server.listen({
+server.listen({
   port: PORT
-  });
+});

package-lock.json

@@ -15,6 +15,7 @@
 				"astro": "^4.1.1",
 				"astro-i18n": "^2.2.4",
 				"astro-i18next": "^1.0.0-beta.21",
+				"chalk": "^5.3.0",
 				"compression": "^1.7.4",
 				"dotenv": "^16.3.1",
 				"express": "^4.18.2",
@@ -192,6 +193,19 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@babel/code-frame/node_modules/chalk": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+			"dependencies": {
+				"ansi-styles": "^3.2.1",
+				"escape-string-regexp": "^1.0.5",
+				"supports-color": "^5.3.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/@babel/compat-data": {
 			"version": "7.23.5",
 			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
@@ -425,6 +439,19 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@babel/highlight/node_modules/chalk": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+			"dependencies": {
+				"ansi-styles": "^3.2.1",
+				"escape-string-regexp": "^1.0.5",
+				"supports-color": "^5.3.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/@babel/parser": {
 			"version": "7.23.6",
 			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
@@ -2205,17 +2232,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/boxen/node_modules/chalk": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
-			"integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
-			"engines": {
-				"node": "^12.17.0 || ^14.13 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/chalk?sponsor=1"
-			}
-		},
 		"node_modules/boxen/node_modules/emoji-regex": {
 			"version": "9.2.2",
 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -2368,16 +2384,14 @@
 			}
 		},
 		"node_modules/chalk": {
-			"version": "2.4.2",
+			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
-			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+			"integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
-			"dependencies": {
-				"ansi-styles": "^3.2.1",
-				"escape-string-regexp": "^1.0.5",
-				"supports-color": "^5.3.0"
-			},
 			"engines": {
-				"node": ">=4"
+				"node": "^12.17.0 || ^14.13 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
 		"node_modules/character-entities": {
@@ -4439,17 +4453,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/log-symbols/node_modules/chalk": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
-			"integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
-			"engines": {
-				"node": "^12.17.0 || ^14.13 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/chalk?sponsor=1"
-			}
-		},
 		"node_modules/longest-streak": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -8265,17 +8268,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/ora/node_modules/chalk": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
-			"integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
-			"engines": {
-				"node": "^12.17.0 || ^14.13 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/chalk?sponsor=1"
-			}
-		},
 		"node_modules/ora/node_modules/string-width": {
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/string-width/-/string-width-6.1.0.tgz",

package.json

@@ -14,6 +14,7 @@
 		"astro": "^4.1.1",
 		"astro-i18n": "^2.2.4",
 		"astro-i18next": "^1.0.0-beta.21",
+		"chalk": "^5.3.0",
 		"compression": "^1.7.4",
 		"dotenv": "^16.3.1",
 		"express": "^4.18.2",

src/components/SettingsContent/CloakingTab.astro

@@ -0,0 +1,43 @@
+---
+
+    const presetCloaks = [
+        {"cloakTitle": "Alu", "favicon": "/favicon.png"},
+        {"cloakTitle": "Google", "favicon": "https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=128"},
+        {"cloakTitle": "Instructure", "favicon": "https://du11hjcvx0uqb.cloudfront.net/dist/images/favicon-e10d657a73.ico"},
+        {"cloakTitle": "Google Classroom", "favicon": "https://ssl.gstatic.com/classroom/ic_product_classroom_144.png"},
+        {"cloakTitle": "Classlink", "favicon": "https://cdn.classlink.com/production/launchpad/resources/images/favicon/favicon-32x32.png"},
+        {"cloakTitle": "Google Drive", "favicon": "https://ssl.gstatic.com/docs/doclist/images/drive_2022q3_32dp.png"},
+        {"cloakTitle": "Schoology", "favicon": "https://asset-cdn.schoology.com/sites/all/themes/schoology_theme/favicon.ico"}
+    ]
+
+---
+
+<div class="settings-container">
+    <div id="cloak-list">
+        {presetCloaks.map((cloak: any) => {
+            return <div class="cloak-item"><img class="cloak-image" src={cloak.favicon} alt={cloak.cloakTitle}/></div>
+        })}
+    </div>
+</div>
+
+<style>
+    #cloak-list {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 15px;
+    }
+    .cloak-item {
+        width: 75px;
+        height: 75px;
+        border-radius: 50%;
+        padding: 15px;
+        background-color: var(--dropdown-background-color);
+        border: 3px solid var(--accent-color);
+        cursor: pointer;
+    }
+    .cloak-image {
+        width: 100%;
+        height: 100%;
+    }
+</style>

src/components/SettingsTablist.astro

@@ -3,6 +3,7 @@ import ProxyTab from "./SettingsContent/ProxyTab.astro";
 import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
 
 import { getLangFromUrl, useTranslations } from "../i18n/utils"
+import CloakingTab from "./SettingsContent/CloakingTab.astro";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 ---
@@ -18,12 +19,13 @@ const t = useTranslations(lang);
         <CustomizationTab />
     </div>
     <div id="content-setting-tab-cloaking">
-        <h1 class="content-setting-header">Cloaking</h1>
+        <h1 class="content-setting-header">{t("settings.cloaking")}</h1>
-        <p style="color: white;">Cloaking settings</p>
+        <p class="content-setting-subtext">Change how your tab looks...</p>
+        <CloakingTab />
     </div>
     <div id="content-setting-tab-credits">
         <h1 class="content-setting-header">Credits</h1>
-        <p style="color: white;">Credits settings</p>
+        <p style="color: white;">Credits..</p>
     </div>
 </div>
 
@@ -151,7 +153,6 @@ const t = useTranslations(lang);
             "name": item.innerText,
             "value": item.dataset.setting,
           }
-          console.log(localStorageItem)
           localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent))
           applySavedLocalStorage(localStorageItem, dropdownID)
           closeDropdown(item.parentElement.id);
@@ -277,6 +278,11 @@ const t = useTranslations(lang);
   color: var(--text-color);
   font-weight: 400;
 }
+.content-setting-subtext {
+  font-size: 20px;
+  color: var(--text-color-accent);
+}
+
 .setting-label {
   color: var(--text-color);
   font-size: 18px;

src/i18n/en.json

@@ -1,4 +1,9 @@
 {
+    "pages.home": "Home | Alu",
+    "pages.games": "Games | Alu",
+    "pages.settings": "Settings | Alu",
+
+
     "nav.brand": "Alu",
     "nav.games": "Games",
     "nav.settings": "Settings",
@@ -30,5 +35,7 @@
     "settings.customization.theme.Alu": "Alu",
     "settings.customization.theme.Macchiato": "Macchiato",
     "settings.customization.theme.Mocha": "Mocha",
-    "settings.customization.language": "Language"
+    "settings.customization.language": "Language",
+
+    "settings.cloaking": "Cloaking"
 }

src/i18n/jp.json

@@ -1,4 +1,8 @@
 {
+    "pages.home": "ホーム | アルー",
+    "pages.games": "ゲーム | アルー",
+    "pages.settings": "設定 | アルー",
+
     "nav.brand": "アルー",
     "nav.games": "ゲーム",
     "nav.settings": "設定",
@@ -29,5 +33,7 @@
     "settings.customization.theme.Alu": "アルー",
     "settings.customization.theme.Macchiato": "マキアート",
     "settings.customization.theme.Mocha": "モカ",
-    "settings.customization.language": "言語"
+    "settings.customization.language": "言語",
+    
+    "settings.cloaking": "クローキング"
 }

src/pages/[lang]/games.astro

@@ -14,7 +14,7 @@ export function getStaticPaths () {
 }
 ---
 
-<Layout title="Games | Alu">
+<Layout title={t("pages.games")}>
     <h1 class="title-text">{t("games.title")}</h1>
         <div class="grid">
             <GameItem name="1v1.lol" image="/games/1v1.lol/logo.png"></GameItem>

src/pages/[lang]/index.astro

@@ -14,7 +14,7 @@ export function getStaticPaths () {
 }
 ---
 
-<Layout title="Alu">
+<Layout title={t("pages.home")}>
 	<div class="main-content">
 		<h1 class="title-text">{t("menu.welcome")}</h1>
     <form class="url-input-form" id="url-input-form">

src/pages/[lang]/settings.astro

@@ -2,6 +2,10 @@
 import SettingsTablist from "../../components/SettingsTablist.astro";
 import Layout from "../../layouts/Layout.astro";
 
+import { getLangFromUrl, useTranslations } from "../../i18n/utils"
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
 export function getStaticPaths () {
  return [
     {params: {lang: 'en'}},
@@ -10,7 +14,7 @@ export function getStaticPaths () {
 }
 ---
 
-<Layout title="Settings | Alu" optionalPreloads={["/img/aluwaves.svg", "/img/macchiatowaves.svg", "/img/mochawaves.svg"]}>
+<Layout title={t("pages.settings")} optionalPreloads={["/img/aluwaves.svg", "/img/macchiatowaves.svg", "/img/mochawaves.svg"]}>
     <h1 class="title-text">Settings</h1>
     <SettingsTablist />
 </Layout>