diff --git a/src/routes/og.png/+server.ts b/src/routes/og.png/+server.ts
index 31ad2cf..8047c33 100644
--- a/src/routes/og.png/+server.ts
+++ b/src/routes/og.png/+server.ts
@@ -4,52 +4,73 @@ import { html as toReactNode } from 'satori-html';
import { OgImage } from '$lib/components/site';
import GeistRegular from '$lib/assets/og/Geist-Regular.woff';
import GeistBold from '$lib/assets/og/Geist-Bold.woff';
-import { readFileSync } from 'fs';
+import { readFile } from 'fs/promises';
+import path from 'path';
const height = 630;
const width = 1200;
-const meImage = readFileSync(`${process.cwd()}/src/lib/assets/og/me.jpg`);
-const imageData = Buffer.from(meImage).toString('base64');
+const getImageData = async () => {
+ try {
+ const imagePath = path.join(process.cwd(), 'src', 'lib', 'assets', 'og', 'me.jpg');
+ const meImage = await readFile(imagePath);
+ return Buffer.from(meImage).toString('base64');
+ } catch (error) {
+ console.error('Error reading image:', error);
+ throw error;
+ }
+};
/** @type {import('./$types').RequestHandler} */
export const GET = async ({ url }) => {
- const title = url.searchParams.get('title') ?? undefined;
- const subTitle = url.searchParams.get('subTitle') ?? undefined;
+ try {
+ const title = url.searchParams.get('title') ?? undefined;
+ const subTitle = url.searchParams.get('subTitle') ?? undefined;
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const result = (OgImage as any).render({ title, subTitle, imageData });
- const element = toReactNode(`${result.html}`);
+ const imageData = await getImageData();
- const svg = await satori(element, {
- fonts: [
- {
- name: 'Geist Regular',
- data: Buffer.from(GeistRegular),
- weight: 100
- },
- {
- name: 'Geist Bold',
- data: Buffer.from(GeistBold),
- weight: 700
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const result = (OgImage as any).render({ title, subTitle, imageData });
+ const element = toReactNode(`${result.html}`);
+
+ const svg = await satori(element, {
+ fonts: [
+ {
+ name: 'Geist Regular',
+ data: Buffer.from(GeistRegular),
+ weight: 100
+ },
+ {
+ name: 'Geist Bold',
+ data: Buffer.from(GeistBold),
+ weight: 700
+ }
+ ],
+ height,
+ width
+ });
+
+ const resvg = new Resvg(svg, {
+ fitTo: {
+ mode: 'width',
+ value: width
}
- ],
- height,
- width
- });
+ });
- const resvg = new Resvg(svg, {
- fitTo: {
- mode: 'width',
- value: width
- }
- });
+ const image = resvg.render();
- const image = resvg.render();
-
- return new Response(image.asPng(), {
- headers: {
- 'content-type': 'image/png'
- }
- });
+ return new Response(image.asPng(), {
+ headers: {
+ 'content-type': 'image/png'
+ }
+ });
+ } catch (error) {
+ console.error('Error generating image:', error);
+ return new Response('Internal Server Error', {
+ status: 500,
+ headers: {
+ 'content-type': 'text/plain'
+ }
+ });
+ }
};