@ethercorps/sveltekit-og 0.1.5 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -17
- package/index.d.ts +2 -2
- package/index.js +2 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,8 +9,8 @@ Install `@ethercorps/sveltekit-og`, then use it inside a server endpoint route (
|
|
|
9
9
|
|
|
10
10
|
```typescript
|
|
11
11
|
// /routes/og/+server.ts
|
|
12
|
-
import {ImageResponse} from '@ethercorps/sveltekit-og';
|
|
13
|
-
import {RequestHandler} from
|
|
12
|
+
import { ImageResponse } from '@ethercorps/sveltekit-og';
|
|
13
|
+
import { RequestHandler } from './$types';
|
|
14
14
|
|
|
15
15
|
const template = `
|
|
16
16
|
<div tw="bg-gray-50 flex w-full h-full items-center justify-center">
|
|
@@ -34,19 +34,18 @@ const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-4
|
|
|
34
34
|
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
|
|
35
35
|
|
|
36
36
|
export const GET: RequestHandler = async () => {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
37
|
+
return new ImageResponse(template, {
|
|
38
|
+
height: 250,
|
|
39
|
+
width: 500,
|
|
40
|
+
fonts: [
|
|
41
|
+
{
|
|
42
|
+
name: 'Inter Latin',
|
|
43
|
+
data: fontData,
|
|
44
|
+
weight: 400
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
});
|
|
48
48
|
};
|
|
49
|
-
|
|
50
49
|
```
|
|
51
50
|
|
|
52
51
|
Then run `pnpm dev` and access localhost:5173/og, the api/route endpoint be rendered and responded as a PNG from that api/endpoint:
|
|
@@ -56,10 +55,10 @@ Then run `pnpm dev` and access localhost:5173/og, the api/route endpoint be rend
|
|
|
56
55
|
Read more about the API, supported features and check out the examples on Satori Playground.
|
|
57
56
|
|
|
58
57
|
## Examples:
|
|
58
|
+
|
|
59
59
|
- `ImageResponse` · [_source_](/src/routes/+server.ts) · [_demo_](https://sveltekit-og-five.vercel.app)
|
|
60
60
|
- `componentToImageResponse` · [_source_](/src/routes/component-og/) · [_demo_](https://sveltekit-og-five.vercel.app/component-og)
|
|
61
61
|
|
|
62
|
-
|
|
63
62
|
## API Reference
|
|
64
63
|
|
|
65
64
|
The package exposes an `ImageResponse` and `componentToImageResponse` constructors, with the following options available:
|
|
@@ -126,7 +125,6 @@ Please refer to [Satori’s documentation](https://github.com/vercel/satori#docu
|
|
|
126
125
|
|
|
127
126
|
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.
|
|
128
127
|
|
|
129
|
-
|
|
130
128
|
## Acknowledgements
|
|
131
129
|
|
|
132
130
|
This project will not be possible without the following projects:
|
|
@@ -136,7 +134,6 @@ This project will not be possible without the following projects:
|
|
|
136
134
|
- [Noto by Google Fonts](https://fonts.google.com/noto)
|
|
137
135
|
- [Resvg.js](https://github.com/yisibl/resvg-js)
|
|
138
136
|
|
|
139
|
-
|
|
140
137
|
## Authors
|
|
141
138
|
|
|
142
139
|
- [@theetherGit](https://www.github.com/theetherGit)
|
package/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { SatoriOptions } from 'satori';
|
|
2
|
-
import type { SvelteComponent } from
|
|
2
|
+
import type { SvelteComponent } from 'svelte';
|
|
3
3
|
declare class ImageResponse {
|
|
4
4
|
constructor(htmlTemplate: string, optionsByUser: ImageResponseOptions);
|
|
5
5
|
}
|
|
@@ -13,6 +13,6 @@ declare type ImageOptions = {
|
|
|
13
13
|
debug?: boolean;
|
|
14
14
|
fonts?: SatoriOptions['fonts'];
|
|
15
15
|
graphemeImages?: Record<string, string>;
|
|
16
|
-
loadAdditionalAsset?: (languageCode: string, segment: string) => Promise<SatoriOptions[
|
|
16
|
+
loadAdditionalAsset?: (languageCode: string, segment: string) => Promise<SatoriOptions['fonts'] | string | undefined>;
|
|
17
17
|
};
|
|
18
18
|
export { componentToImageResponse, ImageResponse };
|
package/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { html as toReactNode } from 'satori-html';
|
|
2
2
|
import satori from 'satori';
|
|
3
3
|
import { Resvg, initWasm } from '@resvg/resvg-wasm';
|
|
4
|
+
import { dev } from '$app/environment';
|
|
4
5
|
const resSvgWasm = initWasm(fetch('https://sveltekit-og.ethercorps.io/resvg.wasm'));
|
|
5
6
|
const fontFile = await fetch('https://sveltekit-og.ethercorps.io/noto-sans.ttf');
|
|
6
7
|
const fontData = await fontFile.arrayBuffer();
|
|
@@ -31,7 +32,7 @@ class ImageResponse {
|
|
|
31
32
|
return new Response(png, {
|
|
32
33
|
headers: {
|
|
33
34
|
'Content-Type': 'image/png',
|
|
34
|
-
'cache-control':
|
|
35
|
+
'cache-control': dev
|
|
35
36
|
? 'no-cache, no-store'
|
|
36
37
|
: 'public, immutable, no-transform, max-age=31536000',
|
|
37
38
|
...options.headers
|