feat: imageProxy

bun.lock

@@ -208,6 +208,7 @@
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-promise-suspense": "^0.3.4",
+        "sharp": "^0.34.5",
         "three": "^0.180.0",
         "three-stdlib": "^2.36.0",
         "typescript": "^5.9.3",

packages/website-ue/package.json

@@ -37,6 +37,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-promise-suspense": "^0.3.4",
+    "sharp": "^0.34.5",
     "three": "^0.180.0",
     "three-stdlib": "^2.36.0",
     "typescript": "^5.9.3",

packages/website-ue/src/core/api/imageProxy.ts

@@ -0,0 +1,23 @@
+import sharp from "sharp";
+
+export async function imageProxy(url: string) {
+  if (import.meta.env.DEV) {
+    return Response.redirect(url);
+  }
+
+  let response: Response;
+
+  try {
+    response = await fetch(url);
+  } catch (error) {
+    console.warn(`Failed to fetch image proxy ${url}:`, error);
+    return new Response(null, { status: 404 });
+  }
+
+  const buffer = await response.arrayBuffer();
+  const image = sharp(buffer);
+  const webp = await image.webp().toBuffer();
+  const array = new Uint8Array(webp);
+
+  return new Response(array);
+}

packages/website-ue/src/pages/api/avatars/[id].webp.ts

@@ -1,5 +1,6 @@
 import type { APIContext, GetStaticPaths } from "astro";
 import { api } from "../../../core/api/dynamic";
+import { imageProxy } from "../../../core/api/imageProxy";
 
 export const getStaticPaths = (async () => {
   const avatars = await api.avatars();
@@ -16,12 +17,5 @@ export async function GET({ params }: APIContext<never, { id: string }>) {
   const avatar = await api.avatar(params.id);
   const profileAvatar = avatar.ProfileAvatar();
 
-  if (import.meta.env.DEV) {
-    return Response.redirect(profileAvatar.avatar);
-  }
-
-  const response = await fetch(profileAvatar.avatar);
-  const buffer = await response.arrayBuffer();
-
-  return new Response(buffer);
+  return await imageProxy(profileAvatar.avatar);
 }

packages/website-ue/src/pages/api/backgrounds/[id].webp.ts

@@ -1,5 +1,6 @@
 import type { APIContext, GetStaticPaths } from "astro";
 import { api } from "../../../core/api/dynamic";
+import { imageProxy } from "../../../core/api/imageProxy";
 
 export const getStaticPaths = (async () => {
   const backgrounds = await api.backgrounds();
@@ -16,12 +17,5 @@ export async function GET({ params }: APIContext<never, { id: string }>) {
   const avatar = await api.background(params.id);
   const profileBackground = avatar.ProfileBackground();
 
-  if (import.meta.env.DEV) {
-    return Response.redirect(profileBackground.background);
-  }
-
-  const response = await fetch(profileBackground.background);
-  const buffer = await response.arrayBuffer();
-
-  return new Response(buffer);
+  return await imageProxy(profileBackground.background);
 }