feat: glossary cron

packages/website/src/components/Gallery/List.tsx

@@ -1,8 +1,10 @@
+import locales from '@blitzkit/i18n/locales.json';
 import { literals } from '@blitzkit/i18n/src/literals';
 import { Flex, Text } from '@radix-ui/themes';
 import fuzzysort from 'fuzzysort';
 import { times } from 'lodash-es';
 import { useMemo, useState } from 'react';
+import { awaitableGallery } from '../../core/awaitables/gallery';
 import { useLocale } from '../../hooks/useLocale';
 import { GalleryEphemeral } from '../../stores/galleryEphemeral';
 import { GalleryCard } from './Card';
@@ -16,21 +18,30 @@ export interface Avatar {
   id: string;
 }
 
+const gallery = await awaitableGallery;
+
 const DEFAULT_LOADED = 42;
 const PREVIEW_COUNT = 28;
 
-export function GalleryList({ avatars }: GalleryListProps) {
+export function GalleryList() {
   const search = GalleryEphemeral.use((state) => state.search);
   const [loadedCards, setLoadedCards] = useState(DEFAULT_LOADED);
-  const { locale, strings } = useLocale();
+  const { locale, strings, unwrap } = useLocale();
   const filtered = useMemo(() => {
     setLoadedCards(DEFAULT_LOADED);
 
     if (search === undefined) {
-      return avatars;
+      return gallery.avatars;
     } else {
       return fuzzysort
-        .go(search, avatars, { keys: ['name', 'id'] })
+        .go(search, gallery.avatars, {
+          keys: [
+            ...locales.supported.map(
+              (supported) => `name.locales.${supported.locale}`,
+            ),
+            'id',
+          ],
+        })
         .map((result) => result.obj);
     }
   }, [search]);
@@ -45,7 +56,11 @@ export function GalleryList({ avatars }: GalleryListProps) {
 
       <Flex wrap="wrap" gap="4" justify="center">
         {filtered.slice(0, loadedCards).map((avatar) => (
-          <GalleryCard key={avatar.id} id={avatar.id} name={avatar.name} />
+          <GalleryCard
+            key={avatar.id}
+            id={avatar.id}
+            name={unwrap(avatar.name)}
+          />
         ))}
 
         {times(

packages/website/src/core/awaitables/gallery.ts

@@ -0,0 +1,3 @@
+import { fetchGallery } from '@blitzkit/core';
+
+export const awaitableGallery = fetchGallery();

packages/website/src/core/blitz/fetchGlossary.ts

@@ -1,10 +0,0 @@
-import { assertSecret, type BlitzGlossary } from '@blitzkit/core';
-
-export async function fetchGlossary(locale: string) {
-  const response = await fetch(
-    `${assertSecret(
-      import.meta.env.WOTB_GLOSSARY_DOMAIN,
-    )}/${locale}${assertSecret(import.meta.env.WOTB_GLOSSARY_PATH)}`,
-  );
-  return (await response.json()) as BlitzGlossary;
-}

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

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

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

@@ -1,29 +1,15 @@
 ---
 import type { Avatar } from '../../../../components/Gallery/List';
 import { galleryTool } from '../../../../constants/tools';
-import { fetchGlossary } from '../../../../core/blitz/fetchGlossary';
-import ToolLayout from '../../../../layouts/ToolLayout.astro';
+import { awaitableGallery } from '../../../../core/awaitables/gallery';
+ import ToolLayout from '../../../../layouts/ToolLayout.astro';
 import { Page } from './_index';
 
 export { getStaticPaths } from '../../index.astro';
 
 const { locale } = Astro.params;
-const glossary = await fetchGlossary(locale);
-const avatars = Object.entries(glossary)
-  .filter(
-    ([key, value]) =>
-      key.startsWith('avatar') &&
-      !key.endsWith('_part') &&
-      value.image_url !== null,
-  )
-  .map(
-    ([key, value]) =>
-      ({ id: key.replace('avatar_', ''), name: value.title }) satisfies Avatar,
-  )
-  .sort((a, b) => a.name.localeCompare(b.name));
-const lastUpdated = new Date().toLocaleDateString(locale);
 ---
 
 <ToolLayout tool={galleryTool}>
-  <Page {locale} {avatars} {lastUpdated} client:load />
+  <Page {locale}  client:load />
 </ToolLayout>