optimize preview image generation

Author: andrelandgraf

website/app/modules/image-gen/templates.tsx

@@ -243,6 +243,7 @@ export function SpeakersPreview({ speakers }: { speakers: Profile[] }) {
 /**
  * Social preview for the landing page
  * w1200 h630: 8 images - 4 per row (2 rows)
+ * one img will be 315x300
  */
 export function LandingPagePreview({ images }: { images: Image[] }) {
   const maxImages = 8;

website/app/routes/preview[.png].tsx

@@ -14,7 +14,18 @@ export async function loader({ context }: Route.LoaderArgs) {
     s3Client: context.s3Client,
   });
 
-  const jsx = <LandingPagePreview images={pastEventImages} />;
+  const resizedImages = pastEventImages.map((image) => {
+    const search = new URLSearchParams();
+    search.set("w", "300");
+    search.set("h", "315");
+    search.set("src", image.url);
+    return {
+    ...image,
+    url: context.mainConfig.origin + "/img" + "?" + search.toString(),
+    };
+  });
+
+  const jsx = <LandingPagePreview images={resizedImages} />;
   const svg = await time("satori", async () =>
     satori(jsx, {
       width: 1200,