LukeParke/sveltekit-og
1
0
Fork 0
mirror of https://github.com/LukeHagar/sveltekit-og.git synced 2025-12-06 12:47:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: README updates v2

Browse Source
This commit is contained in:
Jason
2023-06-06 16:57:44 -04:00
committed by GitHub
parent bb858debb2
commit 7085548eaa
1 changed files with 48 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
README.md
View File

@@ -10,15 +10,15 @@ 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 = `
<div tw="bg-gray-50 flex w-full">
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>
@@ -26,50 +26,54 @@ const htmlString = `
</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>
<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 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>
<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 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, {
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 await ImageResponse(template, {
height: 630,
width: 1200,
fonts: [
{
name: 'sans serif',
data: fontData400,
style: 'normal',
weight: 700
name: 'Inter Latin',
data: fontData,
weight: 400
}
]
});
return { svg };
}
};
```
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)