feat: start of gallery

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

@@ -0,0 +1,27 @@
+import type { APIRoute, GetStaticPaths } from 'astro';
+import { fetchGlossary } from '../../../core/blitz/fetchGlossary';
+
+export const getStaticPaths = (async () => {
+  const glossary = await fetchGlossary();
+  const avatarKeys = Object.keys(glossary)
+    .filter((key) => key.startsWith('avatar_'))
+    .map((key) => key.replace('avatar_', ''));
+
+  return avatarKeys.map((avatar) => ({ params: { avatar } }));
+}) satisfies GetStaticPaths;
+
+const glossary = await fetchGlossary();
+
+export const GET: APIRoute<{}, { avatar: string }> = async ({ params }) => {
+  const image =
+    glossary[`avatar_${params.avatar}`].image_url ??
+    'https://i.imgur.com/uXBiK05.jpeg';
+
+  if (import.meta.env.MODE === 'development') {
+    return Response.redirect(image);
+  } else {
+    const response = await fetch(image);
+    const blob = await response.blob();
+    return new Response(blob, { headers: response.headers });
+  }
+};

packages/website/src/pages/index.astro

@@ -1,11 +1,12 @@
 ---
-import { Box, Flex, Heading } from '@radix-ui/themes';
+import { Flex, Heading } from '@radix-ui/themes';
 import HomeHero from '../components/HomeHero.astro';
 import { Plugs } from '../components/Plugs.tsx';
 import ToolCard from '../components/ToolCard.astro';
 import {
   compareTool,
   discordTool,
+  galleryTool,
   moreTool,
   performanceTool,
   sessionTool,
@@ -30,15 +31,15 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={galleryTool} />
         <ToolCard tool={sessionTool} />
         {/* <ToolCard tool={embedTool} /> */}
         {/* <ToolCard tool={ratingTool} /> */}
-        <ToolCard tool={discordTool} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={discordTool} />
         <ToolCard tool={moreTool} />
-        <Box flexGrow="1" />
       </Flex>
 
       <Heading align="center" mt="6">Other cool projects</Heading>

packages/website/src/pages/tools/gallery/index.astro

@@ -0,0 +1,45 @@
+---
+import { assertSecret, type BlitzGlossary } from '@blitzkit/core';
+import { Flex, Text } from '@radix-ui/themes';
+import { PageWrapper } from '../../../components/PageWrapper';
+import { galleryTool } from '../../../constants/tools';
+import ToolLayout from '../../../layouts/ToolLayout.astro';
+
+const response = await fetch(assertSecret(import.meta.env.WOTB_GLOSSARY), {
+  cache: 'force-cache',
+});
+const avatars = Object.entries((await response.json()) as BlitzGlossary)
+  .filter(
+    ([key, value]) =>
+      key.startsWith('avatar') &&
+      !key.endsWith('_part') &&
+      value.image_url !== null,
+  )
+  .sort(([, a], [, b]) => a.title.localeCompare(b.title));
+---
+
+<ToolLayout tool={galleryTool}>
+  <PageWrapper>
+    <Flex wrap="wrap" gap="4">
+      {
+        avatars.map(([key, value]) => {
+          return (
+            <Flex direction="column" align="center">
+              <img
+                style={{
+                  width: '4rem',
+                  aspectRatio: '7 / 8',
+                  objectFit: 'cover',
+                }}
+                src={`/api/gallery/${key.replace('avatar_', '')}.webp`}
+              />
+              <Text style={{ maxWidth: '6rem' }} align="center">
+                {value.title}
+              </Text>
+            </Flex>
+          );
+        })
+      }
+    </Flex>
+  </PageWrapper>
+</ToolLayout>