@@ -139,15 +121,11 @@
button {
display: grid;
place-items: center;
- border-radius: 2px;
background-color: rgb(var(--color-white) / 1);
color: rgb(var(--color-magnum-700) / 1);
box-shadow: 0px 1px 2px 0px rgb(var(--color-black) / 0.05);
font-size: 14px;
-
- padding-inline: 0.75rem;
- height: 2rem;
}
button:hover {
diff --git a/src/routes/og/+server.ts b/src/routes/og/+server.ts
index ac8d25b..2eafec8 100644
--- a/src/routes/og/+server.ts
+++ b/src/routes/og/+server.ts
@@ -1,56 +1,27 @@
-import type { RequestHandler } from '@sveltejs/kit';
-import satori from 'satori';
-import { Resvg } from '@resvg/resvg-js';
-import { html as toReactNode } from 'satori-html';
-import NotoSans from '$lib/fonts/NotoSans-Regular.ttf';
import SocialImageCard from '$components/socialImageCard.svelte';
+import { componentToPng } from '$lib/renderImage.js';
const height = 630;
const width = 1200;
-export const GET: RequestHandler = async ({ url }) => {
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ url }) {
try {
- const ogImage = `${new URL(url.origin).href}images/bored-game.png`;
+ const faviconImageLocation = 'images/bored-game.png';
+ const image = `${new URL(url.origin).href}${faviconImageLocation}`;
const header = url.searchParams.get('header') ?? undefined;
const page = url.searchParams.get('page') ?? undefined;
const content = url.searchParams.get('content') ?? '';
- const result = SocialImageCard.render({
+
+ return componentToPng(SocialImageCard, {
header,
page,
content,
- image: ogImage,
- width,
- height,
+ image,
+ width: `${width}`,
+ height: `${height}`,
url: new URL(url.origin).href
- });
- console.log('result', result);
- const element = toReactNode(`${result.html}`);
- const svg = await satori(element, {
- fonts: [
- {
- name: 'Noto Sans',
- data: Buffer.from(NotoSans),
- style: 'normal'
- }
- ],
- 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'
- }
- });
+ }, height, width);
} catch (e) {
console.error(e);
}
diff --git a/src/styles/global.pcss b/src/styles/global.pcss
index 917ab60..0068e69 100644
--- a/src/styles/global.pcss
+++ b/src/styles/global.pcss
@@ -132,7 +132,7 @@
--toast-error-background: var(--tomatoOrange);
/* Media Queryies - Not yet supported in CSS */
- /*
+ /*
--xsmall: 340px;
--small: 500px;
--large: 960px;
diff --git a/vite.config.ts b/vite.config.ts
index d3c6e89..922b554 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,6 @@
import { sentrySvelteKit } from "@sentry/sveltekit";
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
-// import fs from 'fs';
export default defineConfig({
plugins: [
@@ -19,6 +18,9 @@ export default defineConfig({
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
},
+ define: {
+ SUPERFORMS_LEGACY: true
+ },
css: {
devSourcemap: true,
preprocessorOptions: {
@@ -43,15 +45,3 @@ export default defineConfig({
}
}
});
-
-// function rawFonts(ext) {
-// return {
-// name: 'vite-plugin-raw-fonts',
-// transform(code, id) {
-// if (ext.some((e) => id.endsWith(e))) {
-// const buffer = fs.readFileSync(id);
-// return { code: `export default ${JSON.stringify(buffer)}`, map: null };
-// }
-// }
-// };
-// }
\ No newline at end of file