feat: homepage

packages/website/src/components/Footer.astro

@@ -2,10 +2,12 @@
 import { assertSecret, fetchGameDefinitions } from '@blitzkit/core';
 import { Code, Flex, Heading, Link, Text } from '@radix-ui/themes';
 import packageJson from '../../../../package.json';
+import { getStrings } from '../core/i18n/getStrings';
 import { LinkI18n } from './LinkI18n';
 
 const gameDefinitions = await fetchGameDefinitions();
 const { locale } = Astro.params;
+const strings = getStrings(locale);
 ---
 
 <style>
@@ -15,7 +17,6 @@ const { locale } = Astro.params;
 </style>
 
 <Flex className="footer" gap="6" p="6" direction="column" align="center">
-  {locale}
   <Flex
     align="center"
     justify="between"
@@ -34,9 +35,9 @@ const { locale } = Astro.params;
       }}
     >
       <Heading>BlitzKit</Heading>
-      <Text color="gray">Everything World of Tanks Blitz</Text>
+      <Text color="gray">{strings.website.footer.motto}</Text>
       <Text size="1" color="gray">
-        Unaffiliated with Wargaming or any service
+        {strings.website.footer.copyright}
       </Text>
     </Flex>
 
@@ -63,7 +64,7 @@ const { locale } = Astro.params;
           sm: 'auto',
         }}
       >
-        <Heading size="3">About</Heading>
+        <Heading size="3">{strings.website.footer.about.title}</Heading>
         <Flex
           direction="column"
           align={{
@@ -71,25 +72,26 @@ const { locale } = Astro.params;
             sm: 'start',
           }}
         >
-          <LinkI18n {locale} href="/docs/about/credits" color="gray"
-            >Credits</LinkI18n
-          >
+          <LinkI18n {locale} href="/docs/about/credits" color="gray">
+            {strings.website.footer.about.credits}
+          </LinkI18n>
           <Link
             href="https://discord.gg/nDt7AjGJQH"
             target="_blank"
             color="gray"
           >
-            Discord
+            {strings.website.footer.about.discord}
           </Link>
           <Link
             href="https://github.com/tresabhi/blitzkit"
             target="_blank"
             color="gray"
           >
-            GitHub
+            {strings.website.footer.about.github}
           </Link>
-          <LinkI18n {locale} href="/docs/patches" color="gray">Patches</LinkI18n
-          >
+          <LinkI18n {locale} href="/docs/patches" color="gray">
+            {strings.website.footer.about.patches}
+          </LinkI18n>
         </Flex>
       </Flex>
 
@@ -105,13 +107,13 @@ const { locale } = Astro.params;
           sm: 'auto',
         }}
       >
-        <Heading size="3">Legal</Heading>
+        <Heading size="3">{strings.website.footer.legal.title}</Heading>
         <Flex direction="column">
           <LinkI18n {locale} href="/docs/legal/privacy-policy" color="gray">
-            Privacy policy
+            {strings.website.footer.legal.privacy}
           </LinkI18n>
           <LinkI18n {locale} href="/docs/legal/terms-of-service" color="gray">
-            Terms of service
+            {strings.website.footer.legal.terms}
           </LinkI18n>
         </Flex>
       </Flex>

packages/website/src/components/HomeHero.astro

@@ -1,9 +1,14 @@
 ---
 import { Code, Flex, Heading, Text } from '@radix-ui/themes';
 import { resolveBranchName } from '../core/blitzkit/branches';
+import { DEFAULT_LOCALE } from '@blitzkit/core';
+import { getStrings } from '../core/i18n/getStrings';
+import { literals } from '../core/i18n/literals';
 
-const branchName = resolveBranchName();
+const { locale } = Astro.params;
+const branchName = resolveBranchName(locale);
 const isBranchNamed = branchName !== undefined;
+const strings = getStrings(locale);
 ---
 
 <style>
@@ -141,7 +146,9 @@ const isBranchNamed = branchName !== undefined;
         </Flex>
       </Heading>
 
-      <Text color="gray" align="center" size="4">By TrèsAbhi ❤️</Text>
+      <Text color="gray" align="center" size="4"
+        >{literals(strings.website.home.hero.credit, ['TrèsAbhi'])}</Text
+      >
     </Flex>
   </Flex>
 </Flex>

packages/website/src/components/HomePageHotTanks.tsx

@@ -3,7 +3,8 @@ import { EyeOpenIcon } from '@radix-ui/react-icons';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
 import { google } from 'googleapis';
 import { awaitableTankDefinitions } from '../core/awaitables/tankDefinitions';
-import { LocaleProvider } from '../hooks/useLocale';
+import { literals } from '../core/i18n/literals';
+import { LocaleProvider, useLocale } from '../hooks/useLocale';
 import { TankopediaPersistent } from '../stores/tankopediaPersistent';
 import { TankCard } from './TankCard';
 
@@ -79,13 +80,15 @@ export function HomePageHotTanks({ locale }: HomePageHotTanksProps) {
 }
 
 function Content() {
+  const { locale, strings } = useLocale();
+
   return (
     <Flex direction="column" pt="4" pb="8">
       <Heading align="center" size="5">
-        Popular tanks
+        {strings.website.home.hot_tanks.title}
       </Heading>
       <Text color="gray" align="center" mb="5" size="2">
-        Last 7 days
+        {literals(strings.website.home.hot_tanks.subtitle, ['7'])}
       </Text>
 
       <Flex justify="center" gap="4" wrap="wrap">
@@ -96,7 +99,7 @@ function Content() {
               discriminator={
                 <Flex align="center" gap="1" justify="center">
                   <EyeOpenIcon />
-                  {Math.round(row.views * (30 / 7)).toLocaleString('en-US')}
+                  {Math.round(row.views * (30 / 7)).toLocaleString(locale)}
                 </Flex>
               }
             />

packages/website/src/components/Navbar.astro

@@ -19,14 +19,15 @@ import {
 } from '@radix-ui/themes';
 import { resolveBranchName } from '../core/blitzkit/branches';
 import { homeTool, TOOLS } from '../constants/tools';
-import { NavbarAccount } from './NavbarAccount';
 import { LinkI18n } from './LinkI18n';
+import { getStrings } from '../core/i18n/getStrings';
 
 const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
 const tools = [homeTool, ...toolsFiltered];
-const branchName = resolveBranchName();
-const isBranchNamed = branchName !== undefined;
 const { locale } = Astro.params;
+const branchName = resolveBranchName(locale);
+const isBranchNamed = branchName !== undefined;
+const strings = getStrings(locale);
 ---
 
 <style>
@@ -139,14 +140,17 @@ const { locale } = Astro.params;
                 (branch) =>
                   branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
               );
-              const selected = Astro.url.pathname.startsWith(
-                `/tools/${tool.id}`,
-              );
+              const selected = Astro.url.pathname.includes(`/tools/${tool.id}`);
+              const toolStrings =
+                strings.website.tools[
+                  (tool.stringsId ??
+                    tool.id) as keyof typeof strings.website.tools
+                ];
 
               if (unavailableOnBranch) return null;
 
               return (
-                <Fragment key={tool.title}>
+                <Fragment key={tool.id}>
                   {index > 0 && <Separator orientation="vertical" size="1" />}
                   <LinkI18n
                     {locale}
@@ -156,7 +160,7 @@ const { locale } = Astro.params;
                     href={`/tools/${tool.id}`}
                     underline={selected ? 'always' : 'hover'}
                   >
-                    {tool.title}
+                    {toolStrings.name}
                   </LinkI18n>
                 </Fragment>
               );
@@ -212,6 +216,11 @@ const { locale } = Astro.params;
               (branch) =>
                 branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
             );
+            const toolStrings =
+              strings.website.tools[
+                (tool.stringsId ??
+                  tool.id) as keyof typeof strings.website.tools
+              ];
 
             if (unavailableOnBranch) return null;
 
@@ -265,7 +274,7 @@ const { locale } = Astro.params;
                       WebkitBackdropFilter: 'blur(4rem)',
                     }}
                   >
-                    <Text>{tool.title}</Text>
+                    <Text>{toolStrings.name}</Text>
                   </Flex>
                 </LinkI18n>
               </Flex>

packages/website/src/components/ToolCard.astro

@@ -3,6 +3,7 @@ import { assertSecret, imgur, ImgurSize } from '@blitzkit/core';
 import { CaretRightIcon } from '@radix-ui/react-icons';
 import { Box, Button, Code, Flex, Heading, Text } from '@radix-ui/themes';
 import type { Tool } from '../constants/tools';
+import { getStrings } from '../core/i18n/getStrings';
 import { LinkI18n } from './LinkI18n';
 
 interface Props {
@@ -14,6 +15,11 @@ const disabled = tool.branches?.every(
   (branch) => branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
 );
 const { locale } = Astro.params;
+const strings = getStrings(locale);
+const toolStrings =
+  strings.website.tools[
+    (tool.stringsId??tool.id ) as keyof typeof strings.website.tools
+  ];
 ---
 
 <style>
@@ -101,7 +107,7 @@ const { locale } = Astro.params;
           size={{ initial: '6', sm: tool.significant ? '7' : '5' }}
           weight="medium"
         >
-          {tool.title}
+          {toolStrings.name}
         </Heading>
         <Text
           align={{ initial: 'center', sm: 'left' }}
@@ -115,7 +121,7 @@ const { locale } = Astro.params;
                 <Code>{assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH)}</Code>
               </>
             ) : (
-              tool.description
+              toolStrings.description
             )
           }
         </Text>
@@ -132,7 +138,7 @@ const { locale } = Astro.params;
             color={tool.button.color}
             style={{ cursor: 'inherit' }}
           >
-            {tool.button.text}
+            {toolStrings.button}
             <CaretRightIcon />
           </Button>
         )