fix: use inlining based on filename

This commit is contained in:
Bart van der Braak 2024-01-21 23:36:47 +01:00
parent ecc83f4a4f
commit aa8fb480d0
3 changed files with 6 additions and 40 deletions

View file

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 101 KiB

View file

@ -4,32 +4,16 @@ import { html as toReactNode } from 'satori-html';
import { OgImage } from '$lib/components/site'; import { OgImage } from '$lib/components/site';
import GeistRegular from '$lib/assets/og/Geist-Regular.woff'; import GeistRegular from '$lib/assets/og/Geist-Regular.woff';
import GeistBold from '$lib/assets/og/Geist-Bold.woff'; import GeistBold from '$lib/assets/og/Geist-Bold.woff';
import imageData from '$lib/assets/og/me.jpg?base64'; import imageData from '$lib/assets/og/me-inline.jpg';
// import { readFile } from 'fs/promises';
// import path from 'path';
const height = 630; const height = 630;
const width = 1200; const width = 1200;
// const getImageData = async () => {
// // try {
// const imagePath = path.join(process.cwd(), Me);
// 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} */ /** @type {import('./$types').RequestHandler} */
export const GET = async ({ url }) => { export const GET = async ({ url }) => {
// try {
const title = url.searchParams.get('title') ?? undefined; const title = url.searchParams.get('title') ?? undefined;
const subTitle = url.searchParams.get('subTitle') ?? undefined; const subTitle = url.searchParams.get('subTitle') ?? undefined;
// const imageData = await getImageData();
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
const result = (OgImage as any).render({ title, subTitle, imageData }); const result = (OgImage as any).render({ title, subTitle, imageData });
const element = toReactNode(`${result.html}<style>${result.css.code}</style>`); const element = toReactNode(`${result.html}<style>${result.css.code}</style>`);
@ -66,13 +50,4 @@ export const GET = async ({ url }) => {
'cache-control': 'public, max-age=86400, immutable' 'cache-control': 'public, max-age=86400, immutable'
} }
}); });
// } catch (error) {
// console.error('Error generating image:', error);
// return new Response('Internal Server Error', {
// status: 500,
// headers: {
// 'content-type': 'text/plain'
// }
// });
// }
}; };

View file

@ -4,12 +4,7 @@ import { defineConfig } from 'vite';
import fs from 'fs'; import fs from 'fs';
export default defineConfig({ export default defineConfig({
plugins: [enhancedImages(), sveltekit(), rawFonts(['.woff']), base64()], plugins: [base64(['.jpg']), enhancedImages(), rawFonts(['.woff']), sveltekit()],
server: {
fs: {
allow: ['./']
}
},
define: { define: {
'import.meta.env.VERCEL_URL': JSON.stringify(process.env.VERCEL_URL) 'import.meta.env.VERCEL_URL': JSON.stringify(process.env.VERCEL_URL)
} }
@ -27,18 +22,14 @@ function rawFonts(ext: string[]) {
}; };
} }
function base64() { function base64(ext: string[]) {
return { return {
name: 'vite-plugin-base64-loader', name: 'vite-plugin-base64-loader',
transform(_code: string, id: string) { transform(_code: string, id: string) {
const [path, query] = id.split('?'); if (id.includes('inline') && ext.some((e) => id.endsWith(e))) {
const base64 = fs.readFileSync(id, { encoding: 'base64' });
if (query !== 'base64') { return { code: `export default ${JSON.stringify(base64)}`, map: null };
return null;
} }
const base64 = fs.readFileSync(path, { encoding: 'base64' });
return { code: `export default ${JSON.stringify(base64)}`, map: null };
} }
}; };
} }