Examples Complete

examples/package-lock.json

@@ -8,7 +8,7 @@
 			"name": "examples",
 			"version": "0.0.1",
 			"dependencies": {
-				"@ethercorps/sveltekit-og": "^0.1.5"
+				"@ethercorps/sveltekit-og": "^0.1.7"
 			},
 			"devDependencies": {
 				"@playwright/test": "^1.25.0",
@@ -85,9 +85,9 @@
 			}
 		},
 		"node_modules/@ethercorps/sveltekit-og": {
-			"version": "0.1.5",
-			"resolved": "https://registry.npmjs.org/@ethercorps/sveltekit-og/-/sveltekit-og-0.1.5.tgz",
-			"integrity": "sha512-wFPXA9lyQ4gg2gaAl/Ww6Z2MR/tx3fQ0Ap7CDdMvy7qhNmRZli83VK5q0YpQBYlDM3Jd36OvnjDaAUD6xn5cBQ==",
+			"version": "0.1.7",
+			"resolved": "https://registry.npmjs.org/@ethercorps/sveltekit-og/-/sveltekit-og-0.1.7.tgz",
+			"integrity": "sha512-Z5NBmntBLG1kYr6MSBtvBdzQ1YrrI461i/v+RgGRrBQVy4T9Gl2BzaCEfP1mHOtjb9XkE0gtdExl9Td93JghvA==",
 			"dependencies": {
 				"@resvg/resvg-wasm": "^2.1.0",
 				"satori": "^0.0.43",
@@ -2901,9 +2901,9 @@
 			}
 		},
 		"@ethercorps/sveltekit-og": {
-			"version": "0.1.5",
-			"resolved": "https://registry.npmjs.org/@ethercorps/sveltekit-og/-/sveltekit-og-0.1.5.tgz",
-			"integrity": "sha512-wFPXA9lyQ4gg2gaAl/Ww6Z2MR/tx3fQ0Ap7CDdMvy7qhNmRZli83VK5q0YpQBYlDM3Jd36OvnjDaAUD6xn5cBQ==",
+			"version": "0.1.7",
+			"resolved": "https://registry.npmjs.org/@ethercorps/sveltekit-og/-/sveltekit-og-0.1.7.tgz",
+			"integrity": "sha512-Z5NBmntBLG1kYr6MSBtvBdzQ1YrrI461i/v+RgGRrBQVy4T9Gl2BzaCEfP1mHOtjb9XkE0gtdExl9Td93JghvA==",
 			"requires": {
 				"@resvg/resvg-wasm": "^2.1.0",
 				"satori": "^0.0.43",

examples/package.json

@@ -24,6 +24,6 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@ethercorps/sveltekit-og": "^0.1.5"
+		"@ethercorps/sveltekit-og": "^0.1.7"
 	}
 }

examples/src/routes/cog/+server.ts

@@ -0,0 +1,24 @@
+import OG from './OG.svelte';
+import type { RequestHandler } from '@sveltejs/kit';
+import {componentToImageResponse} from "@ethercorps/sveltekit-og";
+
+const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff');
+const fontData: ArrayBuffer = await fontFile.arrayBuffer();
+
+export const GET: RequestHandler = async () => {
+	return new componentToImageResponse(
+		OG,
+		{ text: 'Ready to dive in?', spanText: 'Start your free trial today.' },
+		{
+			height: 250,
+			width: 500,
+			fonts: [
+				{
+					name: 'Inter Latin',
+					data: fontData,
+					weight: 700
+				}
+			]
+		}
+	);
+};

examples/src/routes/cog/OG.svelte

@@ -0,0 +1,29 @@
+<script>
+	export let text;
+	export let spanText;
+</script>
+
+<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>{text}</span>
+			<span tw="text-indigo-600">{spanText}</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>