Added Og

2025-12-10 04:21:49 +00:00 · 2022-10-20 15:21:16 +05:30
parent ea4c699750
commit eab564d9b0
19 changed files with 2816 additions and 2 deletions
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Locals {}
+	// interface PageData {}
+	// interface Error {}
+	// interface Platform {}
+}
--- a/src/app.html
+++ b/src/app.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body>
+		<div>%sveltekit.body%</div>
+	</body>
+</html>
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -0,0 +1,68 @@
+import { html as toReactNode } from 'satori-html';
+import satori from 'satori';
+import { Resvg, initWasm } from '@resvg/resvg-wasm';
+import { join } from 'path';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import type { SvelteComponent } from 'svelte';
+import type { SatoriOptions } from 'satori';
+
+const __filename = fileURLToPath(import.meta.url);
+const resSvgWasm = initWasm(readFileSync(join(__filename, '../vendors/resvg.wasm')));
+const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
+const fontData: ArrayBuffer = await fontFile.arrayBuffer();
+
+export const ImageResponse = class {
+	constructor(htmlTemplate: string, optionsByUser: ImageResponseOptions) {
+		const options = Object.assign({ width: 1200, height: 630, debug: !1 }, optionsByUser);
+		const png = new ReadableStream({
+			async start(a) {
+				await resSvgWasm;
+				const svg = await satori(toReactNode(htmlTemplate), {
+					width: options.width,
+					height: options.height,
+					fonts: options.fonts || [
+						{
+							name: 'Inter Latin',
+							data: fontData,
+							weight: 400,
+							style: 'normal'
+						}
+					]
+				});
+				const pngData = new Resvg(svg, { fitTo: { mode: 'width', value: options.width } });
+				a.enqueue(pngData.render().asPng());
+				a.close();
+			}
+		});
+		return new Response(png, {
+			headers: {
+				'Content-Type': 'image/png',
+				'cache-control': 'public, immutable, no-transform, max-age=31536000',
+				...options.headers
+			},
+
+			status: options.status,
+			statusText: options.statusText
+		});
+	}
+};
+
+export const componentToImageResponse = class {
+	constructor(component: SvelteComponent, props = {}, optionsByUser: ImageResponseOptions) {
+		const SvelteRenderedMarkup = component.render(props);
+		let htmlTemplate = `${SvelteRenderedMarkup.html}`;
+		if (SvelteRenderedMarkup && SvelteRenderedMarkup.css && SvelteRenderedMarkup.css.code) {
+			htmlTemplate = `${SvelteRenderedMarkup.html}<style>${SvelteRenderedMarkup.css.code}</style>`;
+		}
+		return new ImageResponse(htmlTemplate, optionsByUser);
+	}
+};
+
+export type ImageResponseOptions = ConstructorParameters<typeof Response>[1] & ImageOptions;
+type ImageOptions = {
+	width?: number;
+	height?: number;
+	debug?: boolean;
+	fonts?: SatoriOptions['fonts'];
+};
--- a/src/lib/vendors/resvg.wasm
+++ b/src/lib/vendors/resvg.wasm
--- a/src/routes/+server.ts
+++ b/src/routes/+server.ts
@@ -0,0 +1,37 @@
+import { ImageResponse } from '$lib';
+import type { RequestHandler } from './$types';
+
+const template = `
+ <div tw="bg-gray-50 flex w-full h-full items-center justify-center">
+    <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
+      <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
+        <span>Ready to dive in?</span>
+        <span tw="text-indigo-600">Start your free trial today.</span>
+      </h2>
+      <div tw="mt-8 flex md:mt-0">
+        <div tw="flex rounded-md shadow">
+          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white">Get started</a>
+        </div>
+        <div tw="ml-3 flex rounded-md shadow">
+          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600">Learn more</a>
+        </div>
+      </div>
+    </div>
+  </div>
+`;
+const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
+const fontData: ArrayBuffer = await fontFile.arrayBuffer();
+
+export const GET: RequestHandler = async () => {
+	return new ImageResponse(template, {
+		height: 400,
+		width: 800,
+		fonts: [
+			{
+				name: 'Inter',
+				data: fontData,
+				weight: 400
+			}
+		]
+	});
+};