diff --git a/README.md b/README.md index 330edae..58ff3f4 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,63 @@ About Generate Open Graph Images dynamically from HTML/CSS without a browser in SvelteKit. +## v1.0.0 Update (Breaking Changes) +Finally, we have added html to react like element like object using svelte compiler. +Now you can use `{ toReactElement }` with `"@ethercorps/sveltekit-og"` like: + +```typescript +// +page.server.js + +import { toReactElement } from "@ethercorps/sveltekit-og" +import satori from "satori"; + +const htmlString = ` +
+
+

+ Ready to dive in? + Start your free trial today. +

+
+
+ Get started +
+
+ Learn more +
+
+
+
+ `; +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 }; +} +``` + +- We have changed to function based instead of class based ImageResponse and componentToImageResponse. +- Removed `@resvg/resvg-wasm` with `@resvg/resvg-js` because of internal errors. +- Removed `satori-html` because now we have `toReactElement` out of the box with svelte compiler. + ## Quick Start Install `@ethercorps/sveltekit-og`, then use it inside a server endpoint route (+server.ts or +server.js): @@ -34,7 +91,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 await ImageResponse(template, { height: 250, width: 500, fonts: [ @@ -68,7 +125,7 @@ import {ImageResponse, componentToImageResponse} from '@ethercorps/sveltekit-og' import {SvelteComponent} from "svelte"; // ... -new ImageResponse( +ImageResponse( element : string, options : { width ? : number = 1200 @@ -88,7 +145,7 @@ new ImageResponse( headers ? : Record }) -new componentToImageResponse( +componentToImageResponse( component : typeof SvelteComponent, props : {}, // All export let example inside prop dictionary options : { @@ -130,7 +187,6 @@ By default, `@ethercorps/sveltekit-og` only has the 'Noto Sans' font included. I This project will not be possible without the following projects: - [Satori & @vercel/og](https://github.com/vercel/satori) -- [Satori-Html](https://github.com/natemoo-re/satori-html) - [Noto by Google Fonts](https://fonts.google.com/noto) - [Resvg.js](https://github.com/yisibl/resvg-js) diff --git a/src/routes/test/+page.server.js b/src/routes/test/+page.server.js index f91f60f..5d4716b 100644 --- a/src/routes/test/+page.server.js +++ b/src/routes/test/+page.server.js @@ -1,4 +1,4 @@ -import toReactElement from '$lib/toReactElement'; +import { toReactElement } from '$lib'; import satori from 'satori'; const htmlString = `