From 7085548eaa9799bcf143fe6dc6442c06cb649d6a Mon Sep 17 00:00:00 2001 From: Jason <50032291+jasongitmail@users.noreply.github.com> Date: Tue, 6 Jun 2023 16:57:44 -0400 Subject: [PATCH] Fix: README updates v2 --- README.md | 98 +++++++++++++++++++++++++++---------------------------- 1 file changed, 48 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 4a33d73..0dad99c 100644 --- a/README.md +++ b/README.md @@ -10,66 +10,70 @@ npm install -D @ethercorps/sveltekit-og ## Usage -Create a file at: `/src/routes/og/+page.server.ts`. Alternatively, you can use JavaScript by removing the types from this example. +Create a file at: `/src/routes/og/+server.ts`. Alternatively, you can use JavaScript by removing the types from this example. ```typescript -// /src/routes/og/+page.server.ts +// src/routes/og/+server.ts +import { ImageResponse } from '@ethercorps/sveltekit-og'; +import { RequestHandler } from './$types'; -import { toReactElement, satori } from '@ethercorps/sveltekit-og'; - -const htmlString = ` -
-
-

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

-
-
- Get started -
-
- Learn more -
-
+const template = ` +
+
+

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

+
+ + - `; -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: 630, - width: 1200, - fonts: [ - { - name: 'sans serif', - data: fontData400, - style: 'normal', - weight: 700 - } - ] - }); +const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff'); +const fontData: ArrayBuffer = await fontFile.arrayBuffer(); - return { svg }; -} +export const GET: RequestHandler = async () => { + return await ImageResponse(template, { + height: 630, + width: 1200, + fonts: [ + { + name: 'Inter Latin', + data: fontData, + weight: 400 + } + ] + }); +}; ``` -Then run `npm dev` and visit `localhost:5173/og` to view your generated PNG. Remember that hot module reload does not work with server routes, so if you change your HTML or CSS, hard refresh the route to see changes. +Then run `npm dev` and visit `localhost:5173/og` to view your generated PNG. Remember that hot module reloading does not work with server routes, so if you change your HTML or CSS, hard refresh the route to see changes. ![Rendered OG image](static/demo.png) ## Headers -When run in development, image headers contain `cache-control: no-cache, no-store`. In production, image headers contain `'cache-control': 'public, immutable, no-transform, max-age=31536000'`, which caches the image at the CDN for 1 year. In both cases, the `'content-type': 'image/png'` is used. +When run in development, image headers contain `cache-control: no-cache, no-store`. In production, image headers contain `'cache-control': 'public, immutable, no-transform, max-age=31536000'`, which caches the image for 1 year. In both cases, the `'content-type': 'image/png'` is used. -Read more about the API, supported features and check out the examples on Satori Playground. +## Styling + +Notice that our example uses TailwindCSS classes (e.g. `tw="bg-gray-50"`). Alternatively, your HTML can contain style attributes using any of [the subset of CSS supported by Satori](https://github.com/vercel/satori#css). + +Satori supports only a subset of HTML and CSS. For full details, see [Satori’s documentation](https://github.com/vercel/satori#documentation). Notably, Satori only supports flex-based layouts. + +## Fonts + +Satori supports `ttf`, `otf`, and `woff` font formats. To maximize the font parsing speed, `ttf` or `otf` are recommended over `woff`. + +By default, `@ethercorps/sveltekit-og` includes only 'Noto Sans' font. If you need to use other fonts, you can specify them as shown in the example. Notably, you can also import a font file that is stored locally within your project and are not required to use fetch. ## Examples @@ -127,12 +131,6 @@ componentToImageResponse( }) ``` -### Supported HTML and CSS Features - -Please refer to [Satori’s documentation](https://github.com/vercel/satori#documentation) for a list of supported HTML and CSS features. - -By default, `@ethercorps/sveltekit-og` only has the 'Noto Sans' font included. If you need to use other fonts, you can pass them in the `fonts` option. - ## Changelog ### v1.2.3 Update (Breaking Changes)