feat: some more localized links

packages/website/src/pages/[...locale]/tools/embed/_index.tsx

@@ -2,12 +2,14 @@ import { imgur, ImgurSize } from '@blitzkit/core';
 import { Box, Flex, Link, Text } from '@radix-ui/themes';
 import { capitalize } from 'lodash-es';
 import { PreviewWrapper } from '../../../../components/Embeds/PreviewWrapper';
+import { LinkI18n } from '../../../../components/LinkI18n';
 import { PageWrapper } from '../../../../components/PageWrapper';
 import {
   embedConfigurations,
   extractEmbedConfigDefaults,
 } from '../../../../constants/embeds';
 import { Var } from '../../../../core/radix/var';
+import { useLocale } from '../../../../hooks/useLocale';
 import { App } from '../../../../stores/app';
 import { EmbedState } from '../../../../stores/embedState';
 
@@ -26,6 +28,8 @@ function Content() {
   //   expires: 0,
   // });
 
+  const { locale } = useLocale();
+
   return (
     <PageWrapper color="red">
       {/* {!wargaming && (
@@ -61,7 +65,8 @@ function Content() {
             key={embed}
             data={extractEmbedConfigDefaults(config)}
           >
-            <Link
+            <LinkI18n
+              locale={locale}
               href={`/tools/embed/${embed}`}
               color="gray"
               highContrast
@@ -101,7 +106,7 @@ function Content() {
                   />
                 </Box>
               </Flex>
-            </Link>
+            </LinkI18n>
           </EmbedState.Provider>
         ))}
       </Flex>

packages/website/src/pages/[...locale]/tools/tankopedia/[id]/_index.tsx

@@ -12,6 +12,7 @@ import { VideoSection } from '../../../../../components/Tankopedia/VideoSection'
 import { awaitableModelDefinitions } from '../../../../../core/awaitables/modelDefinitions';
 import { awaitableProvisionDefinitions } from '../../../../../core/awaitables/provisionDefinitions';
 import { awaitableTankDefinitions } from '../../../../../core/awaitables/tankDefinitions';
+import { LocaleProvider } from '../../../../../hooks/useLocale';
 import { App } from '../../../../../stores/app';
 import { Duel } from '../../../../../stores/duel';
 import { TankopediaEphemeral } from '../../../../../stores/tankopediaEphemeral';
@@ -20,6 +21,7 @@ import type { MaybeSkeletonComponentProps } from '../../../../../types/maybeSkel
 
 type PageProps = MaybeSkeletonComponentProps & {
   id: number;
+  locale: string | undefined;
 };
 
 const [tankDefinitions, provisionDefinitions, modelDefinitions] =
@@ -29,33 +31,35 @@ const [tankDefinitions, provisionDefinitions, modelDefinitions] =
     awaitableModelDefinitions,
   ]);
 
-export function Page({ id, skeleton }: PageProps) {
+export function Page({ id, skeleton, locale }: PageProps) {
   const tank = tankDefinitions.tanks[id];
   const model = modelDefinitions.models[id];
 
   return (
-    <TankopediaEphemeral.Provider data={model}>
-      <App.Provider>
-        <TankopediaPersistent.Provider>
-          <Duel.Provider
-            data={{ tank, provisionDefinitions: provisionDefinitions }}
-          >
-            <PageWrapper p="0" maxWidth="unset" color="purple" gap="9" pb="9">
-              <HeroSection skeleton={skeleton} />
-              <CalloutsSection />
-              <MetaSection />
-              {tank.type === TankType.RESEARCHABLE && !tank.deprecated && (
-                <TechTreeSection skeleton={skeleton} />
-              )}
-              <CharacteristicsSection />
-              <GameModeSection />
-              <TankopediaCharts />
-              <VideoSection skeleton={skeleton} />
-              <HistorySection />
-            </PageWrapper>
-          </Duel.Provider>
-        </TankopediaPersistent.Provider>
-      </App.Provider>
-    </TankopediaEphemeral.Provider>
+    <LocaleProvider locale={locale}>
+      <TankopediaEphemeral.Provider data={model}>
+        <App.Provider>
+          <TankopediaPersistent.Provider>
+            <Duel.Provider
+              data={{ tank, provisionDefinitions: provisionDefinitions }}
+            >
+              <PageWrapper p="0" maxWidth="unset" color="purple" gap="9" pb="9">
+                <HeroSection skeleton={skeleton} />
+                <CalloutsSection />
+                <MetaSection />
+                {tank.type === TankType.RESEARCHABLE && !tank.deprecated && (
+                  <TechTreeSection skeleton={skeleton} />
+                )}
+                <CharacteristicsSection />
+                <GameModeSection />
+                <TankopediaCharts />
+                <VideoSection skeleton={skeleton} />
+                <HistorySection />
+              </PageWrapper>
+            </Duel.Provider>
+          </TankopediaPersistent.Provider>
+        </App.Provider>
+      </TankopediaEphemeral.Provider>
+    </LocaleProvider>
   );
 }

packages/website/src/pages/[...locale]/tools/tankopedia/[id]/index.astro

@@ -31,7 +31,7 @@ export const getStaticPaths = (async () => {
     .flat();
 }) satisfies GetStaticPaths;
 
-const { id } = Astro.params;
+const { id, locale } = Astro.params;
 
 const tankDefinitions = await fetchTankDefinitions();
 const skillDefinitions = await fetchSkillDefinitions();
@@ -96,7 +96,7 @@ const description = `${
 <meta name="twitter:image:src" content={icon} />
 
 <BaseLayout>
-  <Page id={id} client:only="react">
-    <Page id={id} skeleton slot="fallback" />
+  <Page {locale} id={id} client:only="react">
+    <Page {locale} id={id} skeleton slot="fallback" />
   </Page>
 </BaseLayout>