Skip to content

Commit 2ee3899

Browse files
yoannfleurydevyoannfleurydev
committed
feat: implement new library
1 parent d74c04c commit 2ee3899

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+116
-323
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"@astrojs/sitemap": "3.6.0",
2323
"@astrojs/tailwind": "6.0.2",
2424
"@astrojs/vercel": "8.2.10",
25+
"@bearstudio/astro-dynamic-assets": "link:../../Library/pnpm/global/5/node_modules/@bearstudio/astro-dynamic-assets",
2526
"@bearstudio/astro-typed-routes": "0.1.3",
2627
"@bearstudio/lunalink": "0.3.1",
2728
"@fontsource-variable/inter": "5.2.8",

‎pnpm-lock.yaml‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/generated-assets/api.ts‎

Lines changed: 0 additions & 72 deletions
This file was deleted.

‎src/generated-assets/components/CfpCoverNoFlag.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { LogoIcon } from "@/components/LogoIcon";
2-
import {
3-
getAstroImageBase64,
4-
type AssetImageConfig,
5-
} from "@/generated-assets/image";
2+
import { getAstroImageBase64 } from "@/generated-assets/image";
63
import { COLORS } from "@/generated-assets/theme";
74
import worldImage from "@/assets/images/world.png";
5+
import type { AssetImageConfig } from "@bearstudio/astro-dynamic-assets";
86

97
export const CfpCoverNoFlag = async (props: { config: AssetImageConfig }) => {
108
const noFlagImage = await getAstroImageBase64(worldImage);

‎src/generated-assets/image.ts‎

Lines changed: 0 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,7 @@
11
import fs from "fs/promises";
2-
import satori from "satori";
3-
import sharp from "sharp";
42
import path from "node:path";
53
import type { ImageMetadata } from "astro";
64
import { match } from "ts-pattern";
7-
import { renderToStaticMarkup } from "react-dom/server";
8-
9-
import { COLORS, FONTS } from "./theme";
10-
11-
export type AssetImageConfig = {
12-
width: number;
13-
height: number;
14-
debugScale?: number | undefined;
15-
};
16-
17-
export async function SVG(
18-
component: JSX.Element,
19-
params: { width: number; height: number },
20-
) {
21-
const fonts = await Promise.all(
22-
FONTS.map(async ({ url, ...font }) => ({
23-
...font,
24-
data: await match(import.meta.env.DEV)
25-
.with(true, async () => await fs.readFile(`./public/${url}`))
26-
.with(false, async () => {
27-
const res = await fetch(new URL(url, import.meta.env.SITE));
28-
29-
if (!res.ok) {
30-
throw new Error(`Failed to fetch font: ${url}`);
31-
}
32-
return Buffer.from(await res.arrayBuffer());
33-
})
34-
.run(),
35-
})),
36-
);
37-
38-
return await satori(component, {
39-
width: params.width,
40-
height: params.height,
41-
fonts,
42-
});
43-
}
44-
45-
export async function JPG(component: JSX.Element, params: AssetImageConfig) {
46-
return await sharp(Buffer.from(await SVG(component, params)))
47-
.jpeg()
48-
.toBuffer();
49-
}
50-
51-
export async function DEBUG_HTML(
52-
component: JSX.Element,
53-
params: AssetImageConfig,
54-
) {
55-
const html = renderToStaticMarkup(component);
56-
return `<!DOCTYPE html>
57-
<html>
58-
<head>
59-
<title>Debug</title>
60-
<style>
61-
${FONTS.map(
62-
(font) => `
63-
@font-face {
64-
font-family: ${font.name};
65-
font-style: ${font.style};
66-
font-weight: ${font.weight};
67-
src: url("${font.url}") format("truetype");
68-
}
69-
`,
70-
).join(" ")}
71-
:root {
72-
--width: ${params.width}px;
73-
--height: ${params.height}px;
74-
--scale: ${params.debugScale ?? 0.4};
75-
}
76-
body {
77-
background: ${COLORS.background} url('/debug.png') repeat;
78-
margin: 0;
79-
width: 100vw;
80-
height: 100vh;
81-
display: flex;
82-
align-items: center;
83-
justify-content: center;
84-
min-width: calc(var(--width)*var(--scale));
85-
min-height: calc(var(--height)*var(--scale));
86-
}
87-
#screen {
88-
width: calc(var(--width)*var(--scale));
89-
height: calc(var(--height)*var(--scale));
90-
overflow: hidden;
91-
}
92-
#render {
93-
width: var(--width);
94-
height: var(--height);
95-
flex: none;
96-
transform: scale(var(--scale));
97-
transform-origin: top left;
98-
background: black;
99-
}
100-
101-
</style>
102-
</head>
103-
<body>
104-
<div id="screen">
105-
<div id="render">
106-
${html}
107-
</div>
108-
</div>
109-
</body>
110-
</html>`;
111-
}
112-
113-
export async function generateImageResponseSVG(svg: string) {
114-
return new Response(svg, {
115-
headers: {
116-
"Content-Type": "image/svg+xml",
117-
},
118-
});
119-
}
120-
121-
export async function generateImageResponseJPG(jpg: Buffer) {
122-
return new Response(new Uint8Array(jpg), {
123-
headers: {
124-
"Content-Type": "image/jpeg",
125-
},
126-
});
127-
}
128-
129-
export async function generateImageResponseHTML(html: string) {
130-
return new Response(html, {
131-
headers: {
132-
"Content-Type": "text/html; charset=utf-8",
133-
},
134-
});
135-
}
1365

1376
function getAstroImagePath(image: ImageMetadata) {
1387
return import.meta.env.DEV

‎src/lib/astro-dynamic-assets.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { astroDynamicAssets } from "@bearstudio/astro-dynamic-assets";
2+
3+
export const dynamicAssets = astroDynamicAssets({
4+
site: import.meta.env.SITE,
5+
fonts: [
6+
{
7+
name: "Tomorrow",
8+
url: "/fonts/tomorrow/Tomorrow-Regular.ttf",
9+
style: "normal",
10+
weight: 400,
11+
},
12+
{
13+
name: "Tomorrow",
14+
url: "/fonts/tomorrow/Tomorrow-Medium.ttf",
15+
style: "normal",
16+
weight: 500,
17+
},
18+
{
19+
name: "Tomorrow",
20+
url: "/fonts/tomorrow/Tomorrow-Bold.ttf",
21+
style: "normal",
22+
weight: 700,
23+
},
24+
],
25+
theme: {
26+
primary: "#EBFF11",
27+
black: "#000000",
28+
white: "#FFFFFF",
29+
background: "#171717",
30+
},
31+
});

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import { apiImageEndpoint } from "@/generated-assets/api";
2-
import type { APIRoute } from "astro";
1+
import { dynamicAssets } from "@/lib/astro-dynamic-assets";
32

43
export const prerender = false;
54

6-
export const GET: APIRoute = apiImageEndpoint(
5+
export const GET = dynamicAssets.apiImageEndpoint(
76
import.meta.glob("./_*.tsx", { eager: true }),
87
);

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import { Frame } from "@/generated-assets/components/Frame";
2-
import {
3-
getAstroImageBase64,
4-
type AssetImageConfig,
5-
} from "@/generated-assets/image";
2+
import { getAstroImageBase64 } from "@/generated-assets/image";
63
import { COLORS } from "@/generated-assets/theme";
74
import { getEventData } from "./_utils";
85
import { LogoIcon } from "@/components/LogoIcon";
96
import { CfpCoverNoFlag } from "@/generated-assets/components/CfpCoverNoFlag";
107
import { getCoverImage } from "@/lib/events";
8+
import type { AssetImageConfig } from "@bearstudio/astro-dynamic-assets";
119

1210
export const config: AssetImageConfig = {
1311
width: 1080,

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import { Frame } from "@/generated-assets/components/Frame";
2-
import {
3-
getAstroImageBase64,
4-
type AssetImageConfig,
5-
} from "@/generated-assets/image";
2+
import { getAstroImageBase64 } from "@/generated-assets/image";
63
import { BgImage } from "@/generated-assets/components/BgImage";
74
import { COLORS } from "@/generated-assets/theme";
85
import { Logo } from "@/components/Logo";
96
import { getEventDisplayDate, getEventDisplayType } from "@/lib/events";
107
import { getEventData } from "./_utils";
8+
import type { AssetImageConfig } from "@bearstudio/astro-dynamic-assets";
119

1210
export const config: AssetImageConfig = {
1311
width: 1920,

‎src/pages/events/[id]/assets/_qrcode-bg.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Frame } from "@/generated-assets/components/Frame";
22
import {
33
getAstroImageBase64,
44
imageBufferToBase64,
5-
type AssetImageConfig,
65
} from "@/generated-assets/image";
76
import { BgImage } from "@/generated-assets/components/BgImage";
87
import { COLORS } from "@/generated-assets/theme";
@@ -11,6 +10,7 @@ import { lunalink } from "@bearstudio/lunalink";
1110
import { ROUTES } from "@/routes.gen";
1211
import QRCode from "qrcode";
1312
import type { APIContext } from "astro";
13+
import type { AssetImageConfig } from "@bearstudio/astro-dynamic-assets";
1414

1515
export const config: AssetImageConfig = {
1616
width: 1080,

0 commit comments

Comments
 (0)