feat: some locale links

packages/website/src/components/Footer.astro

@@ -2,8 +2,10 @@
 import { assertSecret, fetchGameDefinitions } from '@blitzkit/core';
 import { Code, Flex, Heading, Link, Text } from '@radix-ui/themes';
 import packageJson from '../../../../package.json';
+import { LinkI18n } from './LinkI18n';
 
 const gameDefinitions = await fetchGameDefinitions();
+const { locale } = Astro.params;
 ---
 
 <style>
@@ -13,6 +15,7 @@ const gameDefinitions = await fetchGameDefinitions();
 </style>
 
 <Flex className="footer" gap="6" p="6" direction="column" align="center">
+  {locale}
   <Flex
     align="center"
     justify="between"
@@ -68,7 +71,9 @@ const gameDefinitions = await fetchGameDefinitions();
             sm: 'start',
           }}
         >
-          <Link href="/docs/about/credits" color="gray"> Credits </Link>
+          <LinkI18n {locale} href="/docs/about/credits" color="gray"
+            >Credits</LinkI18n
+          >
           <Link
             href="https://discord.gg/nDt7AjGJQH"
             target="_blank"
@@ -83,7 +88,8 @@ const gameDefinitions = await fetchGameDefinitions();
           >
             GitHub
           </Link>
-          <Link href="/docs/patches" color="gray"> Patches </Link>
+          <LinkI18n {locale} href="/docs/patches" color="gray">Patches</LinkI18n
+          >
         </Flex>
       </Flex>
 
@@ -101,12 +107,12 @@ const gameDefinitions = await fetchGameDefinitions();
       >
         <Heading size="3">Legal</Heading>
         <Flex direction="column">
-          <Link href="/docs/legal/privacy-policy" color="gray">
+          <LinkI18n {locale} href="/docs/legal/privacy-policy" color="gray">
             Privacy policy
-          </Link>
-          <Link href="/docs/legal/terms-of-service" color="gray">
+          </LinkI18n>
+          <LinkI18n {locale} href="/docs/legal/terms-of-service" color="gray">
             Terms of service
-          </Link>
+          </LinkI18n>
         </Flex>
       </Flex>
     </Flex>

packages/website/src/components/LinkI18n.tsx

@@ -0,0 +1,19 @@
+import { Link, type LinkProps } from '@radix-ui/themes';
+import { getBestLocale } from '../core/i18n/getBestLocale';
+
+type LinkI18nProps = LinkProps & {
+  locale: string | undefined;
+};
+
+export function LinkI18n({ locale, href, ...props }: LinkI18nProps) {
+  const bestLocale = getBestLocale();
+  const resolvedLocale = locale ?? bestLocale;
+  const prefix = resolvedLocale === undefined ? '' : `/${resolvedLocale}`;
+
+  return (
+    <Link
+      href={href === undefined ? undefined : `${prefix}${href}`}
+      {...props}
+    />
+  );
+}

packages/website/src/core/i18n/getBestLocale.ts

@@ -0,0 +1,11 @@
+import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from '@blitzkit/core';
+
+export function getBestLocale() {
+  const desiredLocale = navigator.language.split('-')[0];
+  const isSupported = SUPPORTED_LOCALES.includes(desiredLocale);
+  const isDefault = desiredLocale === DEFAULT_LOCALE;
+
+  if (!isSupported || isDefault) return undefined;
+
+  return desiredLocale;
+}

packages/website/src/layouts/BaseLayout.astro

@@ -38,17 +38,16 @@ const isRoot = pathname === '/';
     <Party3 />
 
     <script>
-      import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from '@blitzkit/core';
+      import { SUPPORTED_LOCALES } from '@blitzkit/core';
+      import { getBestLocale } from '../core/i18n/getBestLocale';
 
       const isI18nPath = SUPPORTED_LOCALES.some((locale) =>
         window.location.pathname.startsWith(`/${locale}`),
       );
-      const desiredLocale = navigator.language.split('-')[0];
-      const isSupported = SUPPORTED_LOCALES.includes(desiredLocale);
-      const isDefault = desiredLocale === DEFAULT_LOCALE;
+      const bestLocale = getBestLocale();
 
-      if (!isI18nPath && isSupported && !isDefault) {
-        window.location.pathname = `/${desiredLocale}${window.location.pathname}`;
+      if (!isI18nPath && bestLocale !== undefined) {
+        window.location.pathname = `/${bestLocale}${window.location.pathname}`;
       }
     </script>
   </head>