feat: localize language

packages/core/lang/en.json

@@ -714,6 +714,11 @@
   },
 
   "website": {
+    "settings": {
+      "dev_mode": "Development mode",
+      "language": "Language"
+    },
+
     "common": {
       "copy_button": {
         "copied": "Copied!"

packages/website/src/components/Home/HomeLocaleSwitcher.tsx

@@ -0,0 +1,22 @@
+import { DEFAULT_LOCALE } from '@blitzkit/core';
+import { GlobeIcon } from '@radix-ui/react-icons';
+import { Flex, Text } from '@radix-ui/themes';
+import type { LocaleAcceptorProps } from '../../hooks/useLocale';
+import { BlitzKitTheme } from '../BlitzKitTheme';
+import { LocaleSwitcher } from '../LocaleSwitcher';
+
+export function HomeLocaleSwitcher({
+  locale = DEFAULT_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>
+
+        <LocaleSwitcher locale={locale} />
+      </Flex>
+    </BlitzKitTheme>
+  );
+}

packages/website/src/components/LocaleSwitcher.tsx

@@ -4,38 +4,28 @@ import {
   SUPPORTED_LOCALE_FLAGS,
   SUPPORTED_LOCALES,
 } from '@blitzkit/core';
-import { GlobeIcon } from '@radix-ui/react-icons';
-import { Flex, Select, Text } from '@radix-ui/themes';
+import { Select } 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.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>
+      <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>
   );
 }

packages/website/src/core/blitzkit/branches.ts

@@ -1,6 +1,6 @@
 import { assertSecret, DEFAULT_LOCALE, localizedStrings } from '@blitzkit/core';
 
-export function resolveBranchName(locale = DEFAULT_LOCALE) {
+export function resolveBranchName(locale: string = DEFAULT_LOCALE) {
   const strings = localizedStrings[locale];
   const secret = assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH);
 

packages/website/src/pages/[...locale]/index.astro

@@ -7,9 +7,9 @@ import {
 import { Box, Flex, Heading } from '@radix-ui/themes';
 import type { GetStaticPaths } from 'astro';
 import { AesonPlug } from '../../components/AesonPlug';
+import { HomeLocaleSwitcher } from '../../components/Home/HomeLocaleSwitcher';
 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 {
@@ -44,7 +44,7 @@ export const getStaticPaths = (() => {
 <BaseLayout>
   <HomeHero />
 
-  <LocaleSwitcher {locale} client:load />
+  <HomeLocaleSwitcher {locale} client:load />
 
   <Plugs client:idle />
 

packages/website/src/pages/[...locale]/settings/_index.tsx

@@ -1,34 +1,45 @@
-import { Flex, Heading, Switch, Text } from '@radix-ui/themes';
+import { DEFAULT_LOCALE } from '@blitzkit/core';
+import { Flex, Switch, Text } from '@radix-ui/themes';
+import { LocaleSwitcher } from '../../../components/LocaleSwitcher';
 import { PageWrapper } from '../../../components/PageWrapper';
+import {
+  LocaleProvider,
+  useLocale,
+  type LocaleAcceptorProps,
+} from '../../../hooks/useLocale';
 import { App } from '../../../stores/app';
 
-export function Page() {
+export function Page({ locale = DEFAULT_LOCALE }: LocaleAcceptorProps) {
   return (
-    <App.Provider>
-      <Content />
-    </App.Provider>
+    <LocaleProvider locale={locale}>
+      <App.Provider>
+        <Content locale={locale} />
+      </App.Provider>
+    </LocaleProvider>
   );
 }
 
-function Content() {
+function Content({ locale }: LocaleAcceptorProps) {
   const developerMode = App.useDeferred((state) => state.developerMode, false);
   const appStore = App.useStore();
+  const { strings } = useLocale();
 
   return (
     <PageWrapper justify="center" align="center">
-      <Flex direction="column" gap="4">
-        <Flex gap="3" direction="column">
-          <Heading size="5">Advanced</Heading>
+      <Flex gap="3" direction="column" width="100%" maxWidth="20rem">
+        <Flex align="center" gap="2" justify="between">
+          <Text>{strings.website.settings.dev_mode}</Text>
+          <Switch
+            checked={developerMode}
+            onCheckedChange={(checked) =>
+              appStore.setState({ developerMode: checked })
+            }
+          />
+        </Flex>
 
-          <Flex align="center" gap="2">
-            <Text>Developer mode</Text>
-            <Switch
-              checked={developerMode}
-              onCheckedChange={(checked) =>
-                appStore.setState({ developerMode: checked })
-              }
-            />
-          </Flex>
+        <Flex align="center" gap="2" justify="between">
+          <Text>{strings.website.settings.language}</Text>
+          <LocaleSwitcher locale={locale} />
         </Flex>
       </Flex>
     </PageWrapper>

packages/website/src/pages/[...locale]/settings/index.astro

@@ -1,8 +1,12 @@
 ---
 import BaseLayout from '../../../layouts/BaseLayout.astro';
 import { Page } from './_index';
+
+export { getStaticPaths } from '../index.astro';
+
+const { locale } = Astro.params;
 ---
 
 <BaseLayout>
-  <Page client:load />
+  <Page {locale} client:load />
 </BaseLayout>