feat: in house icons

packages/website/src/core/blitzkit/blobMirror.ts

@@ -0,0 +1,9 @@
+export async function blobMirror(url: string) {
+  if (import.meta.env.MODE === 'development') {
+    return Response.redirect(url);
+  } else {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return new Response(blob, { headers: response.headers });
+  }
+}

packages/website/src/pages/[...locale]/tanks/index.astro

@@ -1,24 +1,21 @@
 ---
-import { asset, fetchTank } from '@blitzkit/core';
+import { fetchTanksFull } from '@blitzkit/core';
 import { Box, Flex, Text } from '@radix-ui/themes';
 import { LinkI18n } from '../../../components/LinkI18n';
 import { PageWrapper } from '../../../components/PageWrapper';
 import { tanksTool } from '../../../constants/tools';
-import { awaitableTanks } from '../../../core/awaitables/tanks';
 import ToolLayout from '../../../layouts/ToolLayout.astro';
 
 export { getStaticPaths } from '../index.astro';
 
 const locale = Astro.params.locale;
-
+const tanksFull = await fetchTanksFull();
-const tanks = await awaitableTanks;
-const fullTanks = await Promise.all(tanks.tanks.map(({ id }) => fetchTank(id)));
 ---
 
 <ToolLayout tool={tanksTool}>
   <PageWrapper>
     {
-      fullTanks
+      tanksFull.tanks
         .sort((a, b) => a.slug.localeCompare(b.slug))
         .map((tank) => {
           return (
@@ -28,7 +25,7 @@ const fullTanks = await Promise.all(tanks.tanks.map(({ id }) => fetchTank(id)));
                   width="8rem"
                   height="6rem"
                   style={{
-                    backgroundImage: `url(${asset(`tanks/${tank.id}/icons/big.png`)})`,
+                    backgroundImage: `url(/api/tanks/${tank.id}/icons/big.png)`,
                     backgroundSize: '150%',
                     backgroundPosition: 'center',
                   }}

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

@@ -2,6 +2,7 @@ import { imgur } from '@blitzkit/core';
 import { DEFAULT_LOCALE } from '@blitzkit/i18n';
 import type { APIRoute, GetStaticPaths } from 'astro';
 import { fetchGlossary } from '../../../core/blitz/fetchGlossary';
+import { blobMirror } from '../../../core/blitzkit/blobMirror';
 
 export const getStaticPaths = (async () => {
   const glossary = await fetchGlossary(DEFAULT_LOCALE);
@@ -23,15 +24,8 @@ const glossary = await fetchGlossary(DEFAULT_LOCALE);
  * @returns WEBP.
  */
 export const GET: APIRoute<{}, { avatar: string }> = async ({ params }) => {
-  const image =
+  return await blobMirror(
     glossary[`avatar_${params.avatar}`].image_url ??
-    imgur('uXBiK05', { format: 'jpeg' });
+      imgur('uXBiK05', { format: '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/api/tanks/[id]/icons/big.png.ts

@@ -1,5 +1,6 @@
 import { asset } from '@blitzkit/core';
 import type { APIRoute } from 'astro';
+import { blobMirror } from '../../../../../core/blitzkit/blobMirror';
 
 export { getStaticPaths } from '../meta.json';
 
@@ -10,7 +11,5 @@ export { getStaticPaths } from '../meta.json';
  * @returns PNG.
  */
 export const GET: APIRoute<{}, { id: string }> = async ({ params }) => {
-  const response = await fetch(asset(`tanks/${params.id}/icons/big.png`));
+  return await blobMirror(asset(`/tanks/${params.id}/icons/big.png`));
-  const blob = await response.blob();
-  return new Response(blob, { headers: response.headers });
 };

packages/website/src/pages/api/tanks/[id]/icons/small.png.ts

@@ -1,5 +1,6 @@
 import { asset } from '@blitzkit/core';
 import type { APIRoute } from 'astro';
+import { blobMirror } from '../../../../../core/blitzkit/blobMirror';
 
 export { getStaticPaths } from '../meta.json';
 
@@ -10,7 +11,5 @@ export { getStaticPaths } from '../meta.json';
  * @returns PNG.
  */
 export const GET: APIRoute<{}, { id: string }> = async ({ params }) => {
-  const response = await fetch(asset(`tanks/${params.id}/icons/small.png`));
+  return await blobMirror(asset(`/tanks/${params.id}/icons/small.png`));
-  const blob = await response.blob();
-  return new Response(blob, { headers: response.headers });
 };