feat: implement new image generation library

package.json

@@ -22,6 +22,7 @@
     "@astrojs/sitemap": "3.6.0",
     "@astrojs/tailwind": "6.0.2",
     "@astrojs/vercel": "8.2.10",
+    "@bearstudio/astro-dynamic-assets": "link:../../Library/pnpm/global/5/node_modules/@bearstudio/astro-dynamic-assets",
     "@bearstudio/astro-typed-routes": "0.1.3",
     "@bearstudio/lunalink": "0.3.1",
     "@fontsource-variable/inter": "5.2.8",

src/generated-assets/components/CfpCoverNoFlag.tsx

@@ -1,13 +1,10 @@
 import { LogoIcon } from "@/components/LogoIcon";
-import {
-  getAstroImageBase64,
-  type AssetImageConfig,
-} from "@/generated-assets/image";
 import { COLORS } from "@/generated-assets/theme";
 import worldImage from "@/assets/images/world.png";
-
+import type { AssetImageConfig } from "@bearstudio/astro-dynamic-assets";
+import DynamicAssets from "@/lib/astro-dynamic-assets";
 export const CfpCoverNoFlag = async (props: { config: AssetImageConfig }) => {
-  const noFlagImage = await getAstroImageBase64(worldImage);
+  const noFlagImage = await DynamicAssets.getAstroImageBase64(worldImage);
 
   return (
     <div

src/lib/astro-dynamic-assets.ts

@@ -0,0 +1,26 @@
+import { astroDynamicAssets } from "@bearstudio/astro-dynamic-assets";
+
+export default astroDynamicAssets({
+  site: import.meta.env.SITE,
+  fonts: [
+    {
+      name: "Tomorrow",
+      url: "/fonts/tomorrow/Tomorrow-Regular.ttf",
+      style: "normal",
+      weight: 400,
+    },
+    {
+      name: "Tomorrow",
+      url: "/fonts/tomorrow/Tomorrow-Medium.ttf",
+      style: "normal",
+      weight: 500,
+    },
+    {
+      name: "Tomorrow",
+      url: "/fonts/tomorrow/Tomorrow-Bold.ttf",
+      style: "normal",
+      weight: 700,
+    },
+  ],
+  ssr: import.meta.env.SSR,
+});

src/pages/events/[id]/assets/[__image].[__type].ts

@@ -1,8 +1,6 @@
-import { apiImageEndpoint } from "@/generated-assets/api";
-import type { APIRoute } from "astro";
-
+import DynamicAssets from "@/lib/astro-dynamic-assets";
 export const prerender = false;
 
-export const GET: APIRoute = apiImageEndpoint(
+export const GET = DynamicAssets.apiImageEndpoint(
   import.meta.glob("./_*.tsx", { eager: true }),
 );

src/pages/events/[id]/assets/_cfp-cover.tsx

@@ -1,13 +1,11 @@
 import { Frame } from "@/generated-assets/components/Frame";
-import {
-  getAstroImageBase64,
-  type AssetImageConfig,
-} from "@/generated-assets/image";
 import { COLORS } from "@/generated-assets/theme";
 import { getEventData } from "./_utils";
 import { LogoIcon } from "@/components/LogoIcon";
 import { CfpCoverNoFlag } from "@/generated-assets/components/CfpCoverNoFlag";
 import { getCoverImage } from "@/lib/events";
+import type { AssetImageConfig } from "@bearstudio/astro-dynamic-assets";
+import DynamicAssets from "@/lib/astro-dynamic-assets";
 
 export const config: AssetImageConfig = {
   width: 1080,
@@ -29,8 +27,8 @@ export default async function cfpCover({ params }: { params: { id: string } }) {
     );
   }
   const cover = await getCoverImage("events", event.id);
-  const eventflag = await getAstroImageBase64(flag);
-  const postCover = await getAstroImageBase64(cover.media);
+  const eventflag = await DynamicAssets.getAstroImageBase64(flag);
+  const postCover = await DynamicAssets.getAstroImageBase64(cover.media);
 
   return (
     <Frame {...config} style={{ padding: 128 }}>

src/pages/events/[id]/assets/_og-image.tsx

@@ -1,13 +1,11 @@
 import { Frame } from "@/generated-assets/components/Frame";
-import {
-  getAstroImageBase64,
-  type AssetImageConfig,
-} from "@/generated-assets/image";
 import { BgImage } from "@/generated-assets/components/BgImage";
 import { COLORS } from "@/generated-assets/theme";
 import { Logo } from "@/components/Logo";
 import { getEventDisplayDate, getEventDisplayType } from "@/lib/events";
 import { getEventData } from "./_utils";
+import type { AssetImageConfig } from "@bearstudio/astro-dynamic-assets";
+import DynamicAssets from "@/lib/astro-dynamic-assets";
 
 export const config: AssetImageConfig = {
   width: 1920,
@@ -16,7 +14,9 @@ export const config: AssetImageConfig = {
 
 export default async function ({ params }: { params: { id: string } }) {
   const event = await getEventData(params.id);
-  const postCover = await getAstroImageBase64(event.data.image.media);
+  const postCover = await DynamicAssets.getAstroImageBase64(
+    event.data.image.media,
+  );
   return (
     <Frame {...config} style={{ padding: 128 }}>
       <BgImage src={postCover} width={config.width} height={config.height} />