-
- {title} - {subTitle} -
-
-
+
+
diff --git a/src/routes/og.png/+server.ts b/src/routes/og.png/+server.ts
index 9e1055a..39701d1 100644
--- a/src/routes/og.png/+server.ts
+++ b/src/routes/og.png/+server.ts
@@ -1,82 +1,51 @@
-import { ImageResponse } from '@ethercorps/sveltekit-og';
-import type { RequestHandler } from '@sveltejs/kit';
-import { promises as fs } from 'fs';
+import satori from 'satori';
+import { Resvg } from '@resvg/resvg-js';
+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';
-const fontPath = 'static/fonts/Geist/Geist-Bold.woff';
-const template = `
-
+
+
+ {title}
++ {subTitle} +
+
+ 
-
-`;
+const height = 630;
+const width = 1200;
-let fontData: Buffer;
-try {
- fontData = await fs.readFile(fontPath);
-} catch (err) {
- console.error('Error reading the font file:', err);
-}
+/** @type {import('./$types').RequestHandler} */
+export const GET = async ({ url }) => {
+ const title = url.searchParams.get('title') ?? undefined;
+ const subTitle = url.searchParams.get('subTitle') ?? undefined;
-export const GET: RequestHandler = async () => {
- return new ImageResponse(template, {
- height: 630,
- width: 1200,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const result = (OgImage as any).render({ title, subTitle });
+ const element = toReactNode(`${result.html}`);
+
+ const svg = await satori(element, {
fonts: [
{
- name: 'geist-sans',
- data: fontData,
+ 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
+ }
+ });
+
+ const image = resvg.render();
+
+ return new Response(image.asPng(), {
+ headers: {
+ 'content-type': 'image/png'
+ }
});
};
diff --git a/src/routes/og.png/preview/+page.svelte b/src/routes/og.png/preview/+page.svelte
new file mode 100644
index 0000000..62720c1
--- /dev/null
+++ b/src/routes/og.png/preview/+page.svelte
@@ -0,0 +1,7 @@
+
+
+
-
- - I made this for you - Featuring current work and studies in a SvelteKit-based portfolio. -
-
-
-
-
+
diff --git a/vite.config.ts b/vite.config.ts
index 30b72df..98563fb 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,9 +1,10 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { enhancedImages } from '@sveltejs/enhanced-img';
import { defineConfig } from 'vite';
+import fs from 'fs';
export default defineConfig({
- plugins: [enhancedImages(), sveltekit()],
+ plugins: [enhancedImages(), sveltekit(), rawFonts(['.woff'])],
ssr: {
noExternal: ['three']
},
@@ -11,3 +12,15 @@ export default defineConfig({
'import.meta.env.VERCEL_ANALYTICS_ID': JSON.stringify(process.env.VERCEL_ANALYTICS_ID)
}
});
+
+function rawFonts(ext: string[]) {
+ return {
+ name: 'vite-plugin-raw-fonts',
+ transform(_code: string, id: string) {
+ if (ext.some((e) => id.endsWith(e))) {
+ const buffer = fs.readFileSync(id);
+ return { code: `export default ${JSON.stringify(buffer)}`, map: null };
+ }
+ }
+ };
+}