Skip to content

Commit 939fa1c

Browse files
JeanneGrenetJeanneGrenet
committed
fix: migrate the missing og images and remove local image generation management
1 parent f732765 commit 939fa1c

23 files changed

Lines changed: 33 additions & 289 deletions

File tree

‎src/generated-assets/api.ts‎

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

‎src/generated-assets/image.ts‎

Lines changed: 0 additions & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -1,187 +1,3 @@
1-
import fs from "fs/promises";
2-
import satori from "satori";
3-
import sharp from "sharp";
4-
import path from "node:path";
5-
import type { ImageMetadata } from "astro";
6-
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-
resizeConfig?: {
16-
width: number;
17-
height: number;
18-
};
19-
};
20-
21-
export async function SVG(
22-
component: JSX.Element,
23-
params: { width: number; height: number },
24-
) {
25-
const fonts = await Promise.all(
26-
FONTS.map(async ({ url, ...font }) => ({
27-
...font,
28-
data: await match(import.meta.env.DEV)
29-
.with(true, async () => await fs.readFile(`./public/${url}`))
30-
.with(false, async () => {
31-
const res = await fetch(new URL(url, import.meta.env.SITE));
32-
33-
if (!res.ok) {
34-
throw new Error(`Failed to fetch font: ${url}`);
35-
}
36-
return Buffer.from(await res.arrayBuffer());
37-
})
38-
.run(),
39-
})),
40-
);
41-
42-
return await satori(component, {
43-
width: params.width,
44-
height: params.height,
45-
fonts,
46-
});
47-
}
48-
49-
export async function JPG(component: JSX.Element, params: AssetImageConfig) {
50-
const imgSharp = sharp(Buffer.from(await SVG(component, params)));
51-
if (!params.resizeConfig) {
52-
return await imgSharp.jpeg().toBuffer();
53-
}
54-
return await imgSharp
55-
.resize(params.resizeConfig.width, params.resizeConfig.height)
56-
.jpeg()
57-
.toBuffer();
58-
}
59-
60-
export async function DEBUG_HTML(
61-
component: JSX.Element,
62-
params: AssetImageConfig,
63-
) {
64-
const html = renderToStaticMarkup(component);
65-
return `<!DOCTYPE html>
66-
<html>
67-
<head>
68-
<title>Debug</title>
69-
<style>
70-
${FONTS.map(
71-
(font) => `
72-
@font-face {
73-
font-family: ${font.name};
74-
font-style: ${font.style};
75-
font-weight: ${font.weight};
76-
src: url("${font.url}") format("truetype");
77-
}
78-
`,
79-
).join(" ")}
80-
:root {
81-
--width: ${params.width}px;
82-
--height: ${params.height}px;
83-
--scale: ${params.debugScale ?? 0.4};
84-
}
85-
body {
86-
background: ${COLORS.background} url('/debug.png') repeat;
87-
margin: 0;
88-
width: 100vw;
89-
height: 100vh;
90-
display: flex;
91-
align-items: center;
92-
justify-content: center;
93-
min-width: calc(var(--width)*var(--scale));
94-
min-height: calc(var(--height)*var(--scale));
95-
}
96-
#screen {
97-
width: calc(var(--width)*var(--scale));
98-
height: calc(var(--height)*var(--scale));
99-
overflow: hidden;
100-
}
101-
#render {
102-
width: var(--width);
103-
height: var(--height);
104-
flex: none;
105-
transform: scale(var(--scale));
106-
transform-origin: top left;
107-
background: black;
108-
}
109-
110-
</style>
111-
</head>
112-
<body>
113-
<div id="screen">
114-
<div id="render">
115-
${html}
116-
</div>
117-
</div>
118-
</body>
119-
</html>`;
120-
}
121-
122-
export async function generateImageResponseSVG(svg: string) {
123-
return new Response(svg, {
124-
headers: {
125-
"Content-Type": "image/svg+xml",
126-
},
127-
});
128-
}
129-
130-
export async function generateImageResponseJPG(jpg: Buffer) {
131-
return new Response(new Uint8Array(jpg), {
132-
headers: {
133-
"Content-Type": "image/jpeg",
134-
},
135-
});
136-
}
137-
138-
export async function generateImageResponseHTML(html: string) {
139-
return new Response(html, {
140-
headers: {
141-
"Content-Type": "text/html; charset=utf-8",
142-
},
143-
});
144-
}
145-
146-
function getAstroImagePath(image: ImageMetadata) {
147-
return import.meta.env.DEV
148-
? path.resolve(image.src.replace(/\?.*/, "").replace("/@fs", ""))
149-
: image.src;
150-
}
151-
152-
async function getAstroImageBuffer(image: ImageMetadata) {
153-
const fileExtension = RegExp(/.(jpg|jpeg|png)$/)
154-
.exec(image.src)?.[0]
155-
.slice(1);
156-
const fileToRead = getAstroImagePath(image);
157-
158-
return {
159-
buffer: await match(import.meta.env.DEV || !import.meta.env.SSR)
160-
.with(true, async () => await fs.readFile(fileToRead))
161-
.with(false, async () => {
162-
const res = await fetch(new URL(fileToRead, import.meta.env.SITE));
163-
164-
if (!res.ok) {
165-
throw new Error(`Failed to fetch image: ${fileToRead}`);
166-
}
167-
168-
return Buffer.from(await res.arrayBuffer());
169-
})
170-
.run(),
171-
fileType: match(fileExtension)
172-
.with("jpg", "jpeg", () => "jpeg")
173-
.with("png", () => "png")
174-
.otherwise(() => {
175-
throw new Error(`Must be a jpg, jpeg or png`);
176-
}),
177-
};
178-
}
179-
180-
export async function getAstroImageBase64(image: ImageMetadata) {
181-
const { buffer, fileType } = await getAstroImageBuffer(image);
182-
return imageBufferToBase64(buffer, fileType);
183-
}
184-
1851
export function imageBufferToBase64(buffer: Buffer, fileType: string) {
1862
return `data:image/${fileType};base64, ${buffer.toString("base64")}`;
1873
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Frame } from "@/generated-assets/components/Frame";
22
import {
33
getAstroImageBase64,
4-
imageBufferToBase64,
54
type AssetImageConfig,
6-
} from "@/generated-assets/image";
5+
} from "@bearstudio/astro-assets-generation";
6+
import { imageBufferToBase64 } from "@/generated-assets/image";
77
import { BgImage } from "@/generated-assets/components/BgImage";
88
import { COLORS } from "@/generated-assets/theme";
99
import { getEventData } from "./_utils";

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { Frame } from "@/generated-assets/components/Frame";
2-
import {
3-
imageBufferToBase64,
4-
type AssetImageConfig,
5-
} from "@/generated-assets/image";
2+
import { type AssetImageConfig } from "@bearstudio/astro-assets-generation";
3+
import { imageBufferToBase64 } from "@/generated-assets/image";
64
import { COLORS } from "@/generated-assets/theme";
75
import { getEventData } from "./_utils";
86
import { lunalink } from "@bearstudio/lunalink";

‎src/pages/events/[id]/assets/_utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
EXCLUDED_CATEGORIES_BY_TYPE,
55
type AssetCategoryId,
66
} from "@/assets/consts";
7-
import { NotFoundAssetError } from "@/generated-assets/api";
7+
import { NotFoundAssetError } from "@bearstudio/astro-assets-generation";
88
import { getImageNameFromTsxPath } from "@/generated-assets/image";
99
import { eventWithComputed } from "@/lib/events";
1010
import {

‎src/pages/events/[id]/attendee/[name]/_utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NotFoundAssetError } from "@/generated-assets/api";
1+
import { NotFoundAssetError } from "@bearstudio/astro-assets-generation";
22
import { eventWithComputed } from "@/lib/events";
33
import { getEntry } from "astro:content";
44

‎src/pages/events/locations/[countryId]/[cityId]/assets/[__image].[__type].ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { apiImageEndpoint } from "@/generated-assets/api";
1+
import { apiImageEndpoint } from "@bearstudio/astro-assets-generation";
22
import type { APIRoute } from "astro";
33

44
export const prerender = false;

‎src/pages/events/locations/[countryId]/[cityId]/assets/_og-image.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Frame } from "@/generated-assets/components/Frame";
22
import {
33
getAstroImageBase64,
44
type AssetImageConfig,
5-
} from "@/generated-assets/image";
5+
} from "@bearstudio/astro-assets-generation";
66
import { BgImage } from "@/generated-assets/components/BgImage";
77
import { Logo } from "@/components/Logo";
88
import {
@@ -42,7 +42,7 @@ export default async function ({
4242
zIndex: 100,
4343
}}
4444
>
45-
<Logo style={{ width: 169 * 3, height: 18 * 3 }} />
45+
<Logo style={{ width: 169 * 3, height: 18 * 3 }} color="white" />
4646

4747
<div
4848
style={{

‎src/pages/events/locations/[countryId]/[cityId]/assets/_utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NotFoundAssetError } from "@/generated-assets/api";
1+
import { NotFoundAssetError } from "@bearstudio/astro-assets-generation";
22
import { getEntry } from "astro:content";
33

44
export const getCityData = async (id: string) => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { apiImageEndpoint } from "@/generated-assets/api";
1+
import { apiImageEndpoint } from "@bearstudio/astro-assets-generation";
22
import type { APIRoute } from "astro";
33

44
export const prerender = false;

0 commit comments

Comments
 (0)