feat: translate gallery

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

@@ -3,14 +3,32 @@ import { Callout, Flex } from '@radix-ui/themes';
 import { GalleryList, type Avatar } from '../../../../components/Gallery/List';
 import { GallerySearch } from '../../../../components/Gallery/Search';
 import { PageWrapper } from '../../../../components/PageWrapper';
+import { literals } from '../../../../core/i18n/literals';
+import {
+  LocaleProvider,
+  useLocale,
+  type LocaleAcceptorProps,
+} from '../../../../hooks/useLocale';
 import { GalleryEphemeral } from '../../../../stores/galleryEphemeral';
 
-interface PageProps {
+interface ContentProps {
   avatars: Avatar[];
   lastUpdated: string;
 }
 
-export function Page({ avatars, lastUpdated }: PageProps) {
+type PageProps = ContentProps & LocaleAcceptorProps;
+
+export function Page({ locale, ...props }: PageProps) {
+  return (
+    <LocaleProvider locale={locale}>
+      <Content {...props} />
+    </LocaleProvider>
+  );
+}
+
+function Content({ avatars, lastUpdated }: ContentProps) {
+  const { strings } = useLocale();
+
   return (
     <PageWrapper maxWidth="80rem" color="gold">
       <Flex justify="center">
@@ -18,7 +36,11 @@ export function Page({ avatars, lastUpdated }: PageProps) {
           <Callout.Icon>
             <CalendarIcon />
           </Callout.Icon>
-          <Callout.Text>Last updated on {lastUpdated}</Callout.Text>
+          <Callout.Text>
+            {literals(strings.website.tools.gallery.last_updated, [
+              lastUpdated,
+            ])}
+          </Callout.Text>
         </Callout.Root>
       </Flex>
 

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

@@ -7,7 +7,8 @@ import { Page } from './_index';
 
 export { getStaticPaths } from '../../index.astro';
 
-const glossary = await fetchGlossary();
+const { locale } = Astro.params;
+const glossary = await fetchGlossary(locale);
 const avatars = Object.entries(glossary)
   .filter(
     ([key, value]) =>
@@ -20,9 +21,9 @@ const avatars = Object.entries(glossary)
       ({ id: key.replace('avatar_', ''), name: value.title }) satisfies Avatar,
   )
   .sort((a, b) => a.name.localeCompare(b.name));
-const lastUpdated = new Date().toLocaleDateString();
+const lastUpdated = new Date().toLocaleDateString(locale);
 ---
 
 <ToolLayout tool={galleryTool}>
-  <Page {avatars} {lastUpdated} client:load />
+  <Page {locale} {avatars} {lastUpdated} client:load />
 </ToolLayout>

packages/website/src/pages/api/gallery/[avatar].webp.ts

@@ -1,8 +1,9 @@
+import { DEFAULT_LOCALE } from '@blitzkit/core';
 import type { APIRoute, GetStaticPaths } from 'astro';
 import { fetchGlossary } from '../../../core/blitz/fetchGlossary';
 
 export const getStaticPaths = (async () => {
-  const glossary = await fetchGlossary();
+  const glossary = await fetchGlossary(DEFAULT_LOCALE);
   const avatarKeys = Object.keys(glossary)
     .filter((key) => key.startsWith('avatar_'))
     .map((key) => key.replace('avatar_', ''));
@@ -10,7 +11,7 @@ export const getStaticPaths = (async () => {
   return avatarKeys.map((avatar) => ({ params: { avatar } }));
 }) satisfies GetStaticPaths;
 
-const glossary = await fetchGlossary();
+const glossary = await fetchGlossary(DEFAULT_LOCALE);
 
 export const GET: APIRoute<{}, { avatar: string }> = async ({ params }) => {
   const image =