refactor: Avoid duplicating pages for each language

hedyhli · mrshmllow · commit dd3a81b5bf23 · 2024-05-07T07:26:56.000+10:00
This makes use of Astro dynamic routing to avoid having to redefine all
pages for each language.

Note that they still have to be defined in `i18n/ui.ts` which is not
refactored in this PR.

The Index will also now use the `defaultLang` from `i18n/ui.ts` rather
than hardcoding `/en/`.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,11 +1,11 @@
 ---
 interface Props {}
 
-import { getLangFromUrl, useTranslations } from '../i18n/utils';
+import { useTranslations } from '../i18n/utils';
 import { Image } from 'astro:assets';
 import aux from '../../public/aux.svg';
 
-const lang = getLangFromUrl(Astro.url);
+const { lang } = Astro.params;
 const translation = useTranslations(lang);
 ---
 
diff --git a/src/components/home/Goals.astro b/src/components/home/Goals.astro
@@ -1,7 +1,7 @@
 ---
-import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+import { useTranslations } from '../../i18n/utils';
 
-const lang = getLangFromUrl(Astro.url);
+const { lang } = Astro.params;
 const translation = useTranslations(lang);
 ---
 
diff --git a/src/components/home/Hero.astro b/src/components/home/Hero.astro
@@ -1,9 +1,9 @@
 ---
-import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+import { useTranslations } from '../../i18n/utils';
 import { Image } from 'astro:assets';
 import aux from '../../../public/aux.svg';
 
-const lang = getLangFromUrl(Astro.url);
+const { lang } = Astro.params;
 const translation = useTranslations(lang);
 ---
 
diff --git a/src/components/home/Roadmap.astro b/src/components/home/Roadmap.astro
@@ -1,7 +1,7 @@
 ---
-import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+import { useTranslations } from '../../i18n/utils';
 
-const lang = getLangFromUrl(Astro.url);
+const { lang } = Astro.params;
 const translation = useTranslations(lang);
 ---
 
diff --git a/src/components/home/Values.astro b/src/components/home/Values.astro
@@ -1,7 +1,7 @@
 ---
-import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+import { useTranslations } from '../../i18n/utils';
 
-const lang = getLangFromUrl(Astro.url);
+const { lang } = Astro.params;
 const translation = useTranslations(lang);
 ---
 
diff --git a/src/i18n/utils.ts b/src/i18n/utils.ts
@@ -1,11 +1,5 @@
 import { ui, defaultLang } from './ui';
 
-export function getLangFromUrl(url: URL) {
-	const [, lang] = url.pathname.split('/');
-	if (lang in ui) return lang as keyof typeof ui;
-	return defaultLang;
-}
-
 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
@@ -1,14 +1,12 @@
 ---
-import { getLangFromUrl } from '../i18n/utils';
 import Header from "../components/Header.astro";
 
 interface Props {
 	title: string;
 }
 
 const { title } = Astro.props;
-
-const lang = getLangFromUrl(Astro.url);
+const { lang } = Astro.params;
 ---
 
 <!doctype html>
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
@@ -0,0 +1,15 @@
+---
+import { languages } from "../../i18n/ui";
+import Layout from "../../layouts/Layout.astro";
+import Home from "../../components/home/Home.astro";
+
+export async function getStaticPaths() {
+	return Object.keys(languages).map((name) => (
+		{ params: { lang: name } }
+	))
+}
+---
+
+<Layout title="auxolotl.org">
+	<Home />
+</Layout>
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1 +1,5 @@
-<meta http-equiv="refresh" content="0;url=/en/" />
+---
+import { defaultLang } from '../i18n/ui';
+---
+
+<meta http-equiv="refresh" content=`0;url=/${defaultLang}/` />
