fix: optimize generated images dx (#215)

* fix: optimize generated images dx

* fix: better debug page

* feat: add vercel adapter

* wip: not working

* feat: add download route

* fix: download

* fix: talk square image

* fix: add server in getAstroImagePath

* quickfix: ignore not generated images

* fix: improve debug page

* feat: add sponsors, partners and coOrganisers images

---------

Co-authored-by: Yoann Fleury <yoann.fleury@yahoo.com>

Author: ivan-dalmet

.gitignore

@@ -1,5 +1,7 @@
 # build output
 dist/
+.vercel
+
 # generated types
 .astro/
 

astro.config.mjs

@@ -5,6 +5,8 @@ import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import robotsTxt from "astro-robots-txt";
 
+import vercel from "@astrojs/vercel";
+
 // https://astro.build/config
 export default defineConfig({
   site: import.meta.env.PROD
@@ -36,4 +38,6 @@ export default defineConfig({
     sitemap(),
     robotsTxt(),
   ],
+
+  adapter: vercel(),
 });

package.json

@@ -21,6 +21,7 @@
     "@astrojs/rss": "4.0.11",
     "@astrojs/sitemap": "3.2.1",
     "@astrojs/tailwind": "6.0.0",
+    "@astrojs/vercel": "8.0.5",
     "@fontsource-variable/inter": "5.0.20",
     "@fontsource/tomorrow": "5.0.20",
     "@radix-ui/react-accordion": "1.2.0",
@@ -32,6 +33,7 @@
     "@types/react-dom": "18.3.0",
     "@uidotdev/usehooks": "2.4.1",
     "@vercel/analytics": "1.4.1",
+    "adm-zip": "0.5.16",
     "astro": "5.2.3",
     "astro-robots-txt": "1.0.0",
     "astro-seo": "0.8.4",
@@ -57,6 +59,7 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "0.5.14",
+    "@types/adm-zip": "0.5.7",
     "husky": "9.1.6",
     "lint-staged": "15.2.10",
     "prettier": "3.3.3",

pnpm-lock.yaml

@@ -162,7 +162,7 @@ export async function generateImageResponse(
 function getAstroImagePath(image: ImageMetadata) {
   return import.meta.env.DEV
     ? path.resolve(image.src.replace(/\?.*/, "").replace("/@fs", ""))
-    : path.resolve(image.src.replace("/", "dist/"));
+    : path.resolve(image.src.replace("/", "dist/server/"));
 }
 
 async function getAstroImageBuffer(image: ImageMetadata) {
@@ -198,6 +198,7 @@ type ExtraProps = { isDebug: boolean; width: number; height: number };
 type PropsForRender<T> = T & { dynamicImage: ExtraProps };
 export function generateImageMethods<Props>(
   params: ImageParams & {
+    shouldBuild?: (props: Props) => boolean;
     getStaticPaths: (
       options: GetStaticPathsOptions,
     ) => Promise<Array<GetStaticPathItemWithGeneric<Props>>>;
@@ -208,8 +209,15 @@ export function generateImageMethods<Props>(
 ) {
   return (p: { __image: string }) => ({
     getStaticPaths: async (options: GetStaticPathsOptions) => {
+      const entries = await params.getStaticPaths(options);
+
       return withType({
-        entries: await params.getStaticPaths(options),
+        entries:
+          import.meta.env.PROD && params.shouldBuild
+            ? entries.filter(
+                (entry) => !!entry.props && params.shouldBuild?.(entry.props),
+              )
+            : entries,
         params: p,
       });
     },

src/dynamic-images/utils.ts

@@ -5,7 +5,7 @@ import {
   getAstroImageBase64,
 } from "@/dynamic-images/utils";
 
-import { getEventStaticPaths } from "./_utils";
+import { getEventStaticPaths, shouldBuildEventImage } from "./_utils";
 import { Frame } from "@/dynamic-images/components/Frame";
 
 import { LogoWithFriends } from "@/dynamic-images/components/LogoWithFriends";
@@ -15,6 +15,7 @@ export const saveTheDate = (config: { width: number; height: number }) =>
   generateImageMethods({
     width: config.width,
     height: config.height,
+    shouldBuild: shouldBuildEventImage,
     getStaticPaths: getEventStaticPaths,
     render: async (props) => {
       const postCover = await getAstroImageBase64(props.event.data.image.media);

src/pages/events/[id]/dynamic-images/_save-the-date.tsx

@@ -5,7 +5,7 @@ import {
   getAstroImageBase64,
 } from "@/dynamic-images/utils";
 
-import { getEventStaticPaths } from "./_utils";
+import { getEventStaticPaths, shouldBuildEventImage } from "./_utils";
 import { Frame } from "@/dynamic-images/components/Frame";
 
 import { LogoWithFriends } from "@/dynamic-images/components/LogoWithFriends";
@@ -19,6 +19,7 @@ export const ticketsAvailable = (config: {
   generateImageMethods({
     width: config.width,
     height: config.height,
+    shouldBuild: shouldBuildEventImage,
     getStaticPaths: getEventStaticPaths,
     render: async (props) => {
       const postCover = await getAstroImageBase64(props.event.data.image.media);

src/pages/events/[id]/dynamic-images/_tickets-available.tsx

@@ -1,4 +1,11 @@
-import { getCollection, getEntries } from "astro:content";
+import { getCollection, getEntries, type CollectionEntry } from "astro:content";
+import dayjs from "dayjs";
+
+export const shouldBuildEventImage = (props: {
+  event: CollectionEntry<"events">;
+}) => {
+  return dayjs().isBefore(dayjs(props.event.data.date).add(1, "day"), "day");
+};
 
 export const getEventStaticPaths = async () => {
   const events = await getCollection("events");
@@ -23,3 +30,51 @@ export const getEventStaticPaths = async () => {
     }),
   );
 };
+
+const cleanFileName = (path: string) =>
+  path
+    .split("/")
+    .at(-1)
+    ?.replace(/\.tsx$/, "")
+    .replace(/^_/, "");
+
+export const getEventAssetsSources = (event: CollectionEntry<"events">) => {
+  const eventFilesNames = Object.keys(
+    import.meta.glob("./_*.tsx", { eager: true }),
+  ).map(cleanFileName);
+  const talkFilesNames = Object.keys(
+    import.meta.glob("../talks/[talkId]/dynamic-images/_*.tsx", {
+      eager: true,
+    }),
+  ).map(cleanFileName);
+  const partnersFilesNames = Object.keys(
+    import.meta.glob("../partners/[partnerId]/dynamic-images/_*.tsx", {
+      eager: true,
+    }),
+  ).map(cleanFileName);
+
+  const sponsors = event.data.sponsors?.map((s) => s.slug) ?? [];
+  const partners = event.data.partners ?? [];
+  const coOrganizers = event.data.coOrganizers ?? [];
+
+  return [
+    eventFilesNames.map(
+      (fileName) => `/events/${event.id}/dynamic-images/${fileName}.jpg`,
+    ),
+    event.data.schedule?.flatMap((talk) =>
+      talkFilesNames.map((fileName) =>
+        !talk.slug
+          ? null
+          : `/events/${event.id}/talks/${talk.slug.id}/dynamic-images/${fileName}.jpg`,
+      ),
+    ),
+    [...coOrganizers, ...sponsors, ...partners].flatMap((partner) =>
+      partnersFilesNames.map(
+        (fileName) =>
+          `/events/${event.id}/partners/${partner.id}/dynamic-images/${fileName}.jpg`,
+      ),
+    ),
+  ]
+    .flat()
+    .filter((x) => x !== undefined && x !== null);
+};

src/pages/events/[id]/dynamic-images/_utils.ts

@@ -0,0 +1,40 @@
+import { getEventAssetsSources } from "@/pages/events/[id]/dynamic-images/_utils";
+import type { APIRoute } from "astro";
+import { getEntry } from "astro:content";
+import dayjs from "dayjs";
+import AdmZip from "adm-zip";
+
+export const prerender = false;
+
+export const GET: APIRoute = async ({ params, site }) => {
+  const event = await getEntry("events", params.id!);
+  if (!event) {
+    return new Response("", { status: 404 });
+  }
+
+  const zip = new AdmZip();
+  const imagesSrc = getEventAssetsSources(event);
+
+  await Promise.all(
+    imagesSrc.map(async (src) => {
+      const url = new URL(src, site).toString();
+      const response = await fetch(url);
+      if (!response.ok) {
+        // Ignore not generated images
+        return;
+      }
+      const blob = await response.blob();
+      zip.addFile(
+        `${src.replaceAll("/events/", "").replaceAll("/dynamic-images", "").replaceAll("/", "_")}`,
+        Buffer.from(await blob.arrayBuffer()),
+      );
+    }),
+  );
+
+  return new Response(zip.toBuffer(), {
+    headers: {
+      "Content-Type": "application/zip",
+      "Content-Disposition": `attachment; filename="${event.data.date.getFullYear()}-${event.data.country.toLowerCase()}-${event.data.city.toLowerCase()}-assets-${dayjs().format("YYYYMMDDHHmmss")}.zip"`,
+    },
+  });
+};