diff --git a/packages/core/lang/en.json b/packages/core/lang/en.json index e79edfac0..85f0db3af 100644 --- a/packages/core/lang/en.json +++ b/packages/core/lang/en.json @@ -26,11 +26,12 @@ "locales": { "en": "English", "es": "Spanish", - "hr": "Croatian", "pt": "Portuguese", "ru": "Russian", "uk": "Ukrainian", - "zh": "Chinese" + "zh": "Chinese", + "ja": "Japanese", + "fr": "French" }, "wn8_percentile": { diff --git a/packages/core/src/blitzkit/supportedLocales.ts b/packages/core/src/blitzkit/supportedLocales.ts index 74711ec08..0983b5b4f 100644 --- a/packages/core/src/blitzkit/supportedLocales.ts +++ b/packages/core/src/blitzkit/supportedLocales.ts @@ -23,3 +23,14 @@ export const SUPPORTED_LOCALE_BLITZ_MAP: Record = { uk: 'uk', zh: 'zh-Hans', }; + +export const SUPPORTED_LOCALE_FLAGS: Record = { + en: 'πŸ‡ΊπŸ‡Έ', + es: 'πŸ‡ͺπŸ‡Έ', + fr: 'πŸ‡«πŸ‡·', + ja: 'πŸ‡―πŸ‡΅', + pt: 'πŸ‡΅πŸ‡Ή', + ru: 'πŸ‡·πŸ‡Ί', + uk: 'πŸ‡ΊπŸ‡¦', + zh: 'πŸ‡¨πŸ‡³', +}; diff --git a/packages/website/src/components/LinkI18n.tsx b/packages/website/src/components/LinkI18n.tsx index ba8e66a50..4252fed1d 100644 --- a/packages/website/src/components/LinkI18n.tsx +++ b/packages/website/src/components/LinkI18n.tsx @@ -1,13 +1,10 @@ import { Link, type LinkProps } from '@radix-ui/themes'; -import { getBestLocale } from '../core/i18n/getBestLocale'; import type { LocaleAcceptorProps } from '../hooks/useLocale'; type LinkI18nProps = LinkProps & LocaleAcceptorProps; export function LinkI18n({ locale, href, ...props }: LinkI18nProps) { - const bestLocale = getBestLocale(); - const resolvedLocale = locale ?? bestLocale; - const prefix = resolvedLocale === undefined ? '' : `/${resolvedLocale}`; + const prefix = locale === undefined ? '' : `/${locale}`; return ( diff --git a/packages/website/src/components/LocaleSwitcher.tsx b/packages/website/src/components/LocaleSwitcher.tsx new file mode 100644 index 000000000..765382532 --- /dev/null +++ b/packages/website/src/components/LocaleSwitcher.tsx @@ -0,0 +1,41 @@ +import { + DEFAULT_LOCALE, + localizedStrings, + SUPPORTED_LOCALE_FLAGS, + SUPPORTED_LOCALES, +} from '@blitzkit/core'; +import { GlobeIcon } from '@radix-ui/react-icons'; +import { Flex, Select, Text } from '@radix-ui/themes'; +import type { LocaleAcceptorProps } from '../hooks/useLocale'; +import { BlitzKitTheme } from './BlitzKitTheme'; + +export function LocaleSwitcher({ locale }: LocaleAcceptorProps) { + return ( + + + + + + + { + localStorage.setItem('preferred-locale', locale); + window.location.pathname = `/${locale === DEFAULT_LOCALE ? '' : locale}`; + }} + > + + + + {SUPPORTED_LOCALES.map((locale) => ( + + {SUPPORTED_LOCALE_FLAGS[locale]}{' '} + {localizedStrings[locale].common.locales[locale]} + + ))} + + + + + ); +} diff --git a/packages/website/src/core/i18n/getBestLocale.ts b/packages/website/src/core/i18n/getBestLocale.ts index 471f663ed..0aa502545 100644 --- a/packages/website/src/core/i18n/getBestLocale.ts +++ b/packages/website/src/core/i18n/getBestLocale.ts @@ -1,8 +1,12 @@ import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from '@blitzkit/core'; export function getBestLocale() { - const desiredLocale = navigator.language.split('-')[0]; - const isSupported = SUPPORTED_LOCALES.includes(desiredLocale); + const desiredLocale = + localStorage.getItem('preferred-locale') ?? + navigator.language.split('-')[0]; + const isSupported = (SUPPORTED_LOCALES as unknown as string[]).includes( + desiredLocale, + ); const isDefault = desiredLocale === DEFAULT_LOCALE; if (!isSupported || isDefault) return undefined; diff --git a/packages/website/src/pages/[...locale]/index.astro b/packages/website/src/pages/[...locale]/index.astro index d96f67d92..783fd9480 100644 --- a/packages/website/src/pages/[...locale]/index.astro +++ b/packages/website/src/pages/[...locale]/index.astro @@ -2,14 +2,14 @@ import { assertSecret, DEFAULT_LOCALE, - localizedStrings, SUPPORTED_LOCALES, } from '@blitzkit/core'; -import { Box, Flex, Heading, Link, Separator } from '@radix-ui/themes'; +import { Box, Flex, Heading } from '@radix-ui/themes'; import type { GetStaticPaths } from 'astro'; import { AesonPlug } from '../../components/AesonPlug'; import HomeHero from '../../components/HomeHero.astro'; import { HomePageHotTanks } from '../../components/HomePageHotTanks'; +import { LocaleSwitcher } from '../../components/LocaleSwitcher'; import { Plugs } from '../../components/Plugs'; import ToolCard from '../../components/ToolCard.astro'; import { @@ -42,30 +42,7 @@ export const getStaticPaths = (() => { - - { - SUPPORTED_LOCALES.map((thisLocale, index) => { - const selected = - thisLocale === locale || - (locale === undefined && thisLocale === DEFAULT_LOCALE); - const localeNames = localizedStrings[thisLocale].common.locales; - - return ( - <> - {index > 0 && } - - - {localeNames[thisLocale as keyof typeof localeNames]} - - - ); - }) - } - +