feat: lang switcher

mrshmllow · mrshmllow · commit ca434393be94 · 2024-05-07T21:26:52.000+10:00
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -2,6 +2,7 @@
 interface Props {}
 
 import { getLangFromUrl, useTranslations } from '../i18n/utils';
+import { languages } from '../i18n/ui';
 import { Image } from 'astro:assets';
 import aux from '../../public/aux.svg';
 
@@ -26,64 +27,29 @@ const translation = useTranslations(lang);
 				<li><a href="https://wiki.auxolotl.org">Wiki</a></li>
 				<li><a href="https://forum.auxolotl.org">{translation("header.community")}</a></li>
 				<li><a href="https://github.com/auxolotl">GitHub</a></li>
+
+				<select data-lang-selector class="bg-transparent">
+					{
+						Object.keys(languages).map((lang) => (
+							<option value={lang} class="text-black">
+								{languages[lang as keyof typeof languages]}
+							</option>
+						))
+					}
+				</select>
 			</ul>
 		</nav>
 	</div>
 </header>
 
-<style>
-	header {
-		position: sticky;
-		display: flex;
-		justify-content: space-between;
-		top: 0;
-		background: rgb(var(--background));
-		padding: 0.5rem 0;
-		z-index: 100;
-	}
-
-	.left {
-		display: flex;
-		align-items: center;
-		padding-left: 0.5rem;
-	}
-
-	.left .brand {
-		display: flex;
-		align-items: center;
-		font-size: 1.5rem;
-	}
-
-	.left .brand .title {
-		padding-left: 0.5rem;
-	}
-
-	.icon {
-		width: 48px;
-		height: 48px;
-	}
-
-	.right {
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		padding-right: 1rem;
-	}
-
-	.right nav {
-		display: flex;
-		align-items: center;
-	}
-
-	.right nav ul {
-		display: flex;
-		list-style: none;
-	}
-
-	.right nav ul li {
-	}
+<script>
+	import { switchLang } from "../i18n/utils";
+	import type { languages } from "../i18n/ui";
+	const select: HTMLSelectElement | null = document.querySelector(
+		"[data-lang-selector]",
+	);
+	select?.addEventListener("change", () => {
+		switchLang(select.value as keyof typeof languages);
+	});
+</script>
 
-	.right nav ul li:not(:last-child) {
-		margin-right: 1rem;
-	}
-</style>
diff --git a/src/i18n/utils.ts b/src/i18n/utils.ts
@@ -6,6 +6,12 @@ export function getLangFromUrl(url: URL) {
 	return defaultLang;
 }
 
+export function switchLang(lang: keyof typeof ui) {
+	const parts = location.pathname.split("/");
+	parts[1] = lang;
+	location.href = parts.join("/");
+}
+
 export function useTranslations(lang: keyof typeof ui) {
 	return function t(key: keyof typeof ui[typeof defaultLang]) {
 		return ui[lang][key] || ui[defaultLang][key];
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -21,6 +21,7 @@ const lang = getLangFromUrl(Astro.url);
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 		<meta name="verify" content="https://github.com/jakehamilton" />
+		<meta name="color-scheme" content="dark" />
 	</head>
 	<body>
 		<Header />
