From 1372d1d96be9dff2f237fdec8b85f83d3fe263d0 Mon Sep 17 00:00:00 2001
From: marshmallow <marshycity@gmail.com>
Date: Mon, 6 May 2024 21:34:52 +1000
Subject: [PATCH] feat: lang switcher

---
 package-lock.json           | 22 +++++++++++++++++++
 package.json                |  1 +
 src/components/Header.astro | 42 ++++++++++++++++++++++++++++++-------
 src/i18n/utils.ts           |  6 ++++++
 src/layouts/Layout.astro    |  1 +
 tailwind.config.mjs         | 13 +++++++-----
 6 files changed, 73 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5631d81..abbf371 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "typescript": "^5.4.5"
       },
       "devDependencies": {
+        "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.13"
       }
     },
@@ -1685,6 +1686,18 @@
       "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.3.0.tgz",
       "integrity": "sha512-7fedsBfuILDTBmrYZNFI8B6ATTxhQAasUHllHmjvSZPnoq4bULWoTpHwmuQvZ8Aq03/tAa2IGo6RXqWtHdWaCA=="
     },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
+      "integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
+      "dev": true,
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+      }
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz",
@@ -4656,6 +4669,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
diff --git a/package.json b/package.json
index a044f25..b15d77f 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   },
   "license": "GPL-3.0-or-later",
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13"
   }
 }
diff --git a/src/components/Header.astro b/src/components/Header.astro
index e5702c6..d1ac4e6 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,31 +1,59 @@
 ---
 interface Props {}
 
-import { getLangFromUrl, useTranslations } from '../i18n/utils';
-import { Image } from 'astro:assets';
-import aux from '../../public/aux.svg';
+import { getLangFromUrl, useTranslations } from "../i18n/utils";
+import { Image } from "astro:assets";
+import aux from "../../public/aux.svg";
+import { languages } from "../i18n/ui";
 
 const lang = getLangFromUrl(Astro.url);
 const translation = useTranslations(lang);
 ---
 
-<header class="sticky flex justify-between top-0 bg-[rgb(var(--background))] z-10 max-w-4xl mx-auto p-4 text-lg">
+<header
+	class="sticky flex justify-between top-0 bg-[rgb(var(--background))] z-10 max-w-4xl mx-auto p-4 text-lg"
+>
 	<div class="flex items-center">
 		<a href="https://auxolotl.org" class="flex items-center text-lg gap-4">
 			<Image class="w-12 h-12" src={aux} alt="auxolotl.org logo" />
-			<span>Auxolotl<span>
+			<span>Auxolotl</span>
 		</a>
 	</div>
 
 	<nav>
 		<ul class="flex gap-4 items-center h-full">
-		<!--
+			<!--
 			<li><a href="https://auxolotl.org/contribute">Contribute</a></li>
 		-->
 
 			<li><a href="https://wiki.auxolotl.org">Wiki</a></li>
-			<li><a href="https://forum.aux.computer">{translation("header.community")}</a></li>
+			<li>
+				<a href="https://forum.aux.computer"
+					>{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>
 </header>
+
+<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>
diff --git a/src/i18n/utils.ts b/src/i18n/utils.ts
index b358317..e739594 100644
--- 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
index bfeeabc..9c42d12 100644
--- 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 />
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 2e9b1f7..933024d 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -1,8 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [require("@tailwindcss/typography")],
+	content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+	theme: {
+		extend: {},
+	},
+	plugins: [
+		require("@tailwindcss/typography"),
+		require("@tailwindcss/forms"),
+	],
 };