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,19 +4,11 @@ import {
   SUPPORTED_LOCALE_FLAGS,
   SUPPORTED_LOCALES,
 } from '@blitzkit/core';
-import { GlobeIcon } from '@radix-ui/react-icons';
+import { Select } from '@radix-ui/themes';
-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) => {
@@ -35,7 +27,5 @@ export function LocaleSwitcher({ locale }: LocaleAcceptorProps) {
         ))}
       </Select.Content>
     </Select.Root>
-      </Flex>
-    </BlitzKitTheme>
   );
 }

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,27 +1,34 @@
-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 (
+    <LocaleProvider locale={locale}>
       <App.Provider>
-      <Content />
+        <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" width="100%" maxWidth="20rem">
-        <Flex gap="3" direction="column">
+        <Flex align="center" gap="2" justify="between">
-          <Heading size="5">Advanced</Heading>
+          <Text>{strings.website.settings.dev_mode}</Text>
-
-          <Flex align="center" gap="2">
-            <Text>Developer mode</Text>
           <Switch
             checked={developerMode}
             onCheckedChange={(checked) =>
@@ -29,6 +36,10 @@ function Content() {
             }
           />
         </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>