From dd3a81b5bf231f0a196cedd9b1820b18f3fd535b Mon Sep 17 00:00:00 2001 From: ~hedy Date: Mon, 6 May 2024 19:43:22 +0800 Subject: [PATCH] refactor: Avoid duplicating pages for each language 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/`. --- src/components/Header.astro | 4 ++-- src/components/home/Goals.astro | 4 ++-- src/components/home/Hero.astro | 4 ++-- src/components/home/Roadmap.astro | 4 ++-- src/components/home/Values.astro | 4 ++-- src/i18n/utils.ts | 6 ------ src/layouts/Layout.astro | 4 +--- src/pages/[lang]/index.astro | 15 +++++++++++++++ src/pages/en/index.astro | 8 -------- src/pages/index.astro | 6 +++++- 10 files changed, 31 insertions(+), 28 deletions(-) create mode 100644 src/pages/[lang]/index.astro delete mode 100644 src/pages/en/index.astro diff --git a/src/components/Header.astro b/src/components/Header.astro index c6e97ab..bf2afd7 100644 --- 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 index 9a22f5a..a5f3f0f 100644 --- 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 index 7d67586..86a0b1c 100644 --- 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 index a526b4d..9c3b3b3 100644 --- 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 index 9bbb1a2..0b64a89 100644 --- 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 index b358317..940e5b2 100644 --- 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 index bfeeabc..6d69766 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,5 +1,4 @@ --- -import { getLangFromUrl } from '../i18n/utils'; import Header from "../components/Header.astro"; interface Props { @@ -7,8 +6,7 @@ interface Props { } const { title } = Astro.props; - -const lang = getLangFromUrl(Astro.url); +const { lang } = Astro.params; --- diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro new file mode 100644 index 0000000..9d341d0 --- /dev/null +++ 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 } } + )) +} +--- + + + + diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro deleted file mode 100644 index c96b1cc..0000000 --- a/src/pages/en/index.astro +++ /dev/null @@ -1,8 +0,0 @@ ---- -import Layout from "../../layouts/Layout.astro"; -import Home from "../../components/home/Home.astro"; ---- - - - - diff --git a/src/pages/index.astro b/src/pages/index.astro index 655eb6c..0f45caa 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1 +1,5 @@ - +--- +import { defaultLang } from '../i18n/ui'; +--- + +