From 643e1dd35230334b9820b9f4208e1a01e6365e29 Mon Sep 17 00:00:00 2001 From: Mark Greene Date: Mon, 5 Oct 2026 08:10:52 +1300 Subject: [PATCH] Fix: crop transparent padding from fade flags The fade flag images are 2:1 but the flag only fills the left part, with the rest transparent. That made `cover` + `center` in the tech tree node crop and offset the visible flag. - Trim the transparent border from the fade flag in the `/flags/fade/[id].webp` route using `sharp` - Revert the tech tree node back to `cover` + `center`, since the image is now just the flag --- .../src/pages/[...chunk_api]/flags/fade/[id].webp.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/website/src/pages/[...chunk_api]/flags/fade/[id].webp.ts b/packages/website/src/pages/[...chunk_api]/flags/fade/[id].webp.ts index e31a8ede0..d45c08343 100644 --- a/packages/website/src/pages/[...chunk_api]/flags/fade/[id].webp.ts +++ b/packages/website/src/pages/[...chunk_api]/flags/fade/[id].webp.ts @@ -1,3 +1,4 @@ +import sharp from "sharp"; import type { APIContext, GetStaticPathsItem } from "astro"; import { mixStaticPaths } from "../../../../core/blitzkit/mixStaticPaths"; import { vfs } from "../../../../core/blitzkit/vfs"; @@ -29,7 +30,10 @@ export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => { }); export async function GET({ props }: APIContext<{ path: string }>) { - const bytes = new Uint8Array(await vfs.file(props.path)); + const bytes = await sharp(new Uint8Array(await vfs.file(props.path))) + .trim({ background: { r: 0, g: 0, b: 0, alpha: 0 }, threshold: 1 }) + .webp() + .toBuffer(); - return new Response(bytes); + return new Response(new Uint8Array(bytes)); }