Updated Examples

examples/package.json

@@ -11,19 +11,17 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.27.1",
+		"@ethercorps/sveltekit-og": "^1.0.0",
+		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
-		"eslint": "^8.27.0",
+		"eslint": "^8.29.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",
-		"prettier": "^2.7.1",
+		"prettier": "^2.8.1",
-		"prettier-plugin-svelte": "^2.8.0",
+		"prettier-plugin-svelte": "^2.8.1",
-		"svelte": "^3.53.1",
+		"svelte": "^3.54.0",
-		"vite": "^3.2.3"
+		"vite": "^3.2.5"
 	},
-	"type": "module",
+	"type": "module"
-	"dependencies": {
-		"@ethercorps/sveltekit-og": "^0.1.7"
-	}
 }

examples/src/routes/+server.ts

@@ -1,5 +1,5 @@
 import { ImageResponse } from '@ethercorps/sveltekit-og';
-import type { RequestHandler } from './$types';
+import type { RequestHandler } from "@sveltejs/kit";
 
 const template = `
  <div tw="bg-gray-50 flex w-full h-full items-center justify-center">
@@ -23,7 +23,7 @@ const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-4
 const fontData: ArrayBuffer = await fontFile.arrayBuffer();
 
 export const GET: RequestHandler = async () => {
-	return new ImageResponse(template, {
+	return ImageResponse(template, {
 		height: 400,
 		width: 800,
 		fonts: [

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

@@ -6,7 +6,7 @@ const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-7
 const fontData: ArrayBuffer = await fontFile.arrayBuffer();
 
 export const GET: RequestHandler = async () => {
-	return new componentToImageResponse(
+	return componentToImageResponse(
 		OG,
 		{ text: 'Ready to dive in?', spanText: 'Start your free trial today.' },
 		{

examples/src/routes/htmlToReact/+page.server.js

@@ -0,0 +1,42 @@
+import { toReactElement, satori } from '@ethercorps/sveltekit-og';
+const htmlString = `
+        <div tw="bg-gray-50 flex w-full">
+        <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 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 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 newNode = toReactElement(htmlString);
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load() {
+	const fontFile400 = await fetch(
+		'https://og-playground.vercel.app/inter-latin-ext-400-normal.woff'
+	);
+	const fontData400 = await fontFile400.arrayBuffer();
+	const svg = await satori(newNode, {
+		height: 350,
+		width: 500,
+		fonts: [
+			{
+				name: 'sans serif',
+				data: fontData400,
+				style: 'normal',
+				weight: 700
+			}
+		]
+	});
+
+	return { svg };
+}

examples/src/routes/htmlToReact/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let data;
+</script>
+
+{@html data.svg}