feat: auto prefixor

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": {

packages/core/src/blitzkit/supportedLocales.ts

@@ -23,3 +23,14 @@ export const SUPPORTED_LOCALE_BLITZ_MAP: Record<SupportedLocale, string> = {
   uk: 'uk',
   zh: 'zh-Hans',
 };
+
+export const SUPPORTED_LOCALE_FLAGS: Record<SupportedLocale, string> = {
+  en: '🇺🇸',
+  es: '🇪🇸',
+  fr: '🇫🇷',
+  ja: '🇯🇵',
+  pt: '🇵🇹',
+  ru: '🇷🇺',
+  uk: '🇺🇦',
+  zh: '🇨🇳',
+};

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 (
     <Link href={href?.startsWith('/') ? `${prefix}${href}` : href} {...props} />

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 (
+    <BlitzKitTheme>
+      <Flex justify="center" mt="4" py="6" align="center" gap="3">
+        <Text size="5" trim="end" color="gray">
+          <GlobeIcon width="1em" height="1em" />
+        </Text>
+
+        <Select.Root
+          defaultValue={locale}
+          onValueChange={(locale) => {
+            localStorage.setItem('preferred-locale', locale);
+            window.location.pathname = `/${locale === DEFAULT_LOCALE ? '' : locale}`;
+          }}
+        >
+          <Select.Trigger />
+
+          <Select.Content>
+            {SUPPORTED_LOCALES.map((locale) => (
+              <Select.Item key={locale} value={locale}>
+                {SUPPORTED_LOCALE_FLAGS[locale]}{' '}
+                {localizedStrings[locale].common.locales[locale]}
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select.Root>
+      </Flex>
+    </BlitzKitTheme>
+  );
+}

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;

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 = (() => {
 <BaseLayout>
   <HomeHero />
 
-  <Flex justify="center" gap="3" pt="6" pb="4" align="center">
-    {
-      SUPPORTED_LOCALES.map((thisLocale, index) => {
-        const selected =
-          thisLocale === locale ||
-          (locale === undefined && thisLocale === DEFAULT_LOCALE);
-        const localeNames = localizedStrings[thisLocale].common.locales;
-
-        return (
-          <>
-            {index > 0 && <Separator orientation="vertical" size="1" />}
-
-            <Link
-              color="gray"
-              highContrast={selected}
-              href={`/${thisLocale === DEFAULT_LOCALE ? '' : thisLocale}`}
-            >
-              {localeNames[thisLocale as keyof typeof localeNames]}
-            </Link>
-          </>
-        );
-      })
-    }
-  </Flex>
+  <LocaleSwitcher {locale} client:load />
 
   <Plugs client:idle />