feat: translate tier list

.github/workflows/website.yml

@@ -2,6 +2,8 @@ name: Website
 
 on:
   push:
+    branches:
+      - main
   workflow_dispatch:
 
   schedule:
@@ -52,8 +54,6 @@ jobs:
           path: dist/website
 
   deploy-github-pages:
-    if: github.ref == 'refs/heads/main'
-
     name: Deploy to GitHub Pages
     runs-on: ubuntu-latest
     needs: build

packages/core/lang/en.json

@@ -713,6 +713,12 @@
   },
 
   "website": {
+    "common": {
+      "copy_button": {
+        "copied": "Copied!"
+      }
+    },
+
     "home": {
       "hero": {
         "credit": "By %s1 ❤️"
@@ -795,7 +801,11 @@
         "name": "Tier list",
         "button": "Rank tanks",
         "description": "Rank Blitz tanks",
-        "seo_description": "Explore tier lists ranking tanks from best to worst, based on player ratings and statistical performance in World of Tanks Blitz"
+        "seo_description": "Explore tier lists ranking tanks from best to worst, based on player ratings and statistical performance in World of Tanks Blitz",
+        "buttons": {
+          "reset": "Reset",
+          "share": "Share"
+        }
       },
       "embed": {
         "name": "Embed",

packages/website/src/components/CopyButton.tsx

@@ -1,5 +1,6 @@
 import { Button, type ButtonProps, Tooltip } from '@radix-ui/themes';
 import { useState } from 'react';
+import { useLocale } from '../hooks/useLocale';
 
 interface CopyButtonProps extends ButtonProps {
   copy: () => string | undefined;
@@ -7,9 +8,13 @@ interface CopyButtonProps extends ButtonProps {
 
 export function CopyButton({ copy, ...props }: CopyButtonProps) {
   const [tooltipOpen, setTooltipOpen] = useState(false);
+  const { strings } = useLocale();
 
   return (
-    <Tooltip open={tooltipOpen} content="Copied!">
+    <Tooltip
+      open={tooltipOpen}
+      content={strings.website.common.copy_button.copied}
+    >
       <Button
         {...props}
         onClick={() => {

packages/website/src/components/TierList/Controls/components/Share.tsx

@@ -1,10 +1,12 @@
 import { Share2Icon } from '@radix-ui/react-icons';
 import { generateTierListParams } from '../../../../core/blitzkit/generateTierListParams';
+import { useLocale } from '../../../../hooks/useLocale';
 import { TierList } from '../../../../stores/tierList';
 import { CopyButton } from '../../../CopyButton';
 
 export function Share() {
   const rows = TierList.use((state) => state.rows);
+  const { strings } = useLocale();
 
   return (
     <CopyButton
@@ -13,7 +15,7 @@ export function Share() {
         `${location.origin}/tools/tier-list?${generateTierListParams(rows)}`
       }
     >
-      <Share2Icon /> Share
+      <Share2Icon /> {strings.website.tools.tier_list.buttons.share}
     </CopyButton>
   );
 }

packages/website/src/components/TierList/Controls/index.tsx

@@ -1,10 +1,12 @@
 import { ReloadIcon } from '@radix-ui/react-icons';
 import { Button, Flex } from '@radix-ui/themes';
+import { useLocale } from '../../../hooks/useLocale';
 import { TierList, tierListInitialState } from '../../../stores/tierList';
 import { Share } from './components/Share';
 
 export function TierListControls() {
   const mutateTierList = TierList.useMutation();
+  const { strings } = useLocale();
 
   return (
     <Flex justify="center" gap="2">
@@ -16,7 +18,7 @@ export function TierListControls() {
           });
         }}
       >
-        <ReloadIcon /> Reset
+        <ReloadIcon /> {strings.website.tools.tier_list.buttons.reset}
       </Button>
 
       <Share />

packages/website/src/pages/[...locale]/tools/tier-list/_index.tsx

@@ -4,16 +4,22 @@ import { TierListControls } from '../../../../components/TierList/Controls';
 import { TierListTable } from '../../../../components/TierList/Table';
 import { TierListTiles } from '../../../../components/TierList/Tiles';
 import { URLManager } from '../../../../components/TierList/URLManager';
+import {
+  LocaleProvider,
+  type LocaleAcceptorProps,
+} from '../../../../hooks/useLocale';
 import { TankopediaPersistent } from '../../../../stores/tankopediaPersistent';
 import { TierList } from '../../../../stores/tierList';
 
-export function Page() {
+export function Page({ locale }: LocaleAcceptorProps) {
   return (
-    <TierList.Provider>
-      <TankopediaPersistent.Provider>
-        <Content />
-      </TankopediaPersistent.Provider>
-    </TierList.Provider>
+    <LocaleProvider locale={locale}>
+      <TierList.Provider>
+        <TankopediaPersistent.Provider>
+          <Content />
+        </TankopediaPersistent.Provider>
+      </TierList.Provider>
+    </LocaleProvider>
   );
 }
 

packages/website/src/pages/[...locale]/tools/tier-list/index.astro

@@ -4,8 +4,10 @@ import ToolLayout from '../../../../layouts/ToolLayout.astro';
 import { Page } from './_index';
 
 export { getStaticPaths } from '../../index.astro';
+
+const { locale } = Astro.params;
 ---
 
 <ToolLayout tool={tierListTool}>
-  <Page client:load />
+  <Page {locale} client:load />
 </ToolLayout>