@ethercorps/sveltekit-og 4.2.1 → 4.3.0-beta.1
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 +35 -193
- package/dist/fonts.d.ts +5 -13
- package/dist/fonts.js +28 -24
- package/dist/helpers/create.d.ts +7 -4
- package/dist/helpers/create.js +39 -28
- package/dist/helpers/defaults.d.ts +4 -4
- package/dist/helpers/defaults.js +28 -18
- package/dist/helpers/emoji.d.ts +1 -1
- package/dist/helpers/emoji.js +31 -21
- package/dist/helpers/error-handler.d.ts +37 -0
- package/dist/helpers/error-handler.js +75 -0
- package/dist/helpers/logger.d.ts +7 -0
- package/dist/helpers/logger.js +21 -0
- package/dist/helpers/response.d.ts +30 -0
- package/dist/helpers/response.js +52 -0
- package/dist/helpers/to-html.d.ts +10 -0
- package/dist/helpers/to-html.js +10 -0
- package/dist/helpers/toJSX.d.ts +3 -3
- package/dist/helpers/toJSX.js +9 -7
- package/dist/helpers/utils.d.ts +2 -0
- package/dist/helpers/utils.js +25 -0
- package/dist/image-response.d.ts +2 -2
- package/dist/image-response.js +13 -21
- package/dist/plugin.js +6 -6
- package/dist/providers/instances.d.ts +3 -3
- package/dist/providers/instances.js +43 -15
- package/dist/providers/resvg/edge.d.ts +1 -1
- package/dist/providers/resvg/edge.js +10 -6
- package/dist/providers/resvg/node.d.ts +1 -1
- package/dist/providers/resvg/node.js +18 -9
- package/dist/providers/satori/edge.d.ts +6 -0
- package/dist/providers/satori/edge.js +12 -0
- package/dist/providers/satori/node.d.ts +1 -1
- package/dist/providers/satori/node.js +4 -4
- package/dist/takumi/fonts.d.ts +16 -0
- package/dist/takumi/fonts.js +15 -0
- package/dist/takumi/image-response.d.ts +6 -0
- package/dist/takumi/image-response.js +27 -0
- package/dist/takumi/index.d.ts +5 -0
- package/dist/takumi/index.js +4 -0
- package/dist/takumi/render.d.ts +4 -0
- package/dist/takumi/render.js +23 -0
- package/dist/takumi/renderer.d.ts +7 -0
- package/dist/takumi/renderer.js +39 -0
- package/dist/takumi/types.d.ts +64 -0
- package/dist/takumi/types.js +1 -0
- package/dist/types.d.ts +10 -14
- package/package.json +67 -20
- package/dist/providers/resvg/resvg.wasm +0 -0
package/README.md
CHANGED
|
@@ -4,225 +4,67 @@
|
|
|
4
4
|
|
|
5
5
|
# SvelteKit Open Graph Image Generation
|
|
6
6
|
|
|
7
|
-
Dynamically generate Open Graph images from an HTML+CSS template or Svelte component
|
|
7
|
+
Dynamically generate Open Graph images from an HTML+CSS template or Svelte component. No headless browser required.
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
- With `sveltekit-og@4`, we have [official documentation](https://sveltekit-og.dev).
|
|
9
|
+
Pick the rendering engine that fits your needs:
|
|
11
10
|
|
|
12
|
-
|
|
11
|
+
- **Satori** (default) — HTML → SVG → PNG, based on [Satori](https://github.com/vercel/satori#documentation).
|
|
12
|
+
- **[Takumi](https://takumi.kane.tw)** — a Rust/WASM engine with more output formats (`webp`, `jpeg`, `ico`, `svg`, …) and a built-in font, available from `@ethercorps/sveltekit-og/takumi` (v4.3.0+).
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
pnpm install @ethercorps/sveltekit-og
|
|
16
|
-
```
|
|
14
|
+
## Table of Contents
|
|
17
15
|
|
|
18
|
-
|
|
16
|
+
- [SvelteKit Open Graph Image Generation](#sveltekit-open-graph-image-generation)
|
|
17
|
+
- [Table of Contents](#table-of-contents)
|
|
18
|
+
- [Docs](#docs)
|
|
19
|
+
- [Installation](#installation)
|
|
20
|
+
- [Usage](#usage)
|
|
21
|
+
- [Examples](#examples)
|
|
22
|
+
- [Contributing](#contributing)
|
|
23
|
+
- [Changelog](#changelog)
|
|
24
|
+
- [License](#license)
|
|
25
|
+
- [Acknowledgements](#acknowledgements)
|
|
26
|
+
- [Authors](#authors)
|
|
27
|
+
- [Contributors](#contributors)
|
|
19
28
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
- Add vite plugin
|
|
23
|
-
|
|
24
|
-
```typescript title="vite.cofig.js"
|
|
25
|
-
import { sveltekit } from '@sveltejs/kit/vite';
|
|
26
|
-
import { sveltekitOG } from '@ethercorps/sveltekit-og/plugin';
|
|
27
|
-
const config = {
|
|
28
|
-
plugins: [sveltekit(), sveltekitOG()]
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
export default config;
|
|
32
|
-
```
|
|
29
|
+
## Docs
|
|
33
30
|
|
|
34
|
-
|
|
35
|
-
- Add `rollupWasm` to `build.rollupOptions.plugins` in `vite.cofig.js` file.
|
|
36
|
-
- For more information, check [docs](https://sveltekit-og.dev/docs/getting-started)
|
|
37
|
-
|
|
38
|
-
```ts title="vite.cofig.js"
|
|
39
|
-
import { sveltekit } from '@sveltejs/kit/vite';
|
|
40
|
-
import { defineConfig } from 'vitest/config';
|
|
41
|
-
import { rollupWasm } from '@ethercorps/sveltekit-og/plugin';
|
|
42
|
-
|
|
43
|
-
export default defineConfig({
|
|
44
|
-
plugins: [sveltekit()],
|
|
45
|
-
build: {
|
|
46
|
-
rollupOptions: {
|
|
47
|
-
plugins: [rollupWasm()],
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
```
|
|
31
|
+
For more detailed information and advanced usage, please refer to the [official documentation](https://sveltekit-og.dev).
|
|
52
32
|
|
|
53
|
-
|
|
54
|
-
- Check node runtime [docs](https://sveltekit-og.dev/docs/runtime/node)
|
|
55
|
-
|
|
56
|
-
```ts title="vite.cofig.js"
|
|
57
|
-
import { sveltekit } from '@sveltejs/kit/vite';
|
|
58
|
-
import { defineConfig } from 'vitest/config';
|
|
59
|
-
import { rollupWasm } from '@ethercorps/sveltekit-og/plugin';
|
|
60
|
-
|
|
61
|
-
export default defineConfig({
|
|
62
|
-
plugins: [sveltekit()],
|
|
63
|
-
build: {
|
|
64
|
-
rollupOptions: {
|
|
65
|
-
plugins: [
|
|
66
|
-
rollupWasm({ esmImport: false })
|
|
67
|
-
],
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
});
|
|
71
|
-
```
|
|
33
|
+
## Installation
|
|
72
34
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
```typescript
|
|
76
|
-
// src/routes/og/+server.ts
|
|
77
|
-
import { ImageResponse } from '@ethercorps/sveltekit-og';
|
|
78
|
-
import { RequestHandler } from './$types';
|
|
79
|
-
|
|
80
|
-
const template = `
|
|
81
|
-
<div tw="bg-gray-50 flex w-full h-full items-center justify-center">
|
|
82
|
-
<div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
|
|
83
|
-
<h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
|
|
84
|
-
<span>Ready to dive in?</span>
|
|
85
|
-
<span tw="text-indigo-600">Start your free trial today.</span>
|
|
86
|
-
</h2>
|
|
87
|
-
<div tw="mt-8 flex md:mt-0">
|
|
88
|
-
<div tw="flex rounded-md shadow">
|
|
89
|
-
<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>
|
|
90
|
-
</div>
|
|
91
|
-
<div tw="ml-3 flex rounded-md shadow">
|
|
92
|
-
<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>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
`;
|
|
98
|
-
|
|
99
|
-
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
|
|
100
|
-
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
|
|
101
|
-
|
|
102
|
-
export const GET: RequestHandler = async () => {
|
|
103
|
-
return await new ImageResponse(template, {
|
|
104
|
-
height: 630,
|
|
105
|
-
width: 1200,
|
|
106
|
-
fonts: [
|
|
107
|
-
{
|
|
108
|
-
name: 'Inter Latin',
|
|
109
|
-
data: fontData,
|
|
110
|
-
weight: 400
|
|
111
|
-
}
|
|
112
|
-
]
|
|
113
|
-
});
|
|
114
|
-
};
|
|
35
|
+
```bash
|
|
36
|
+
pnpm install @ethercorps/sveltekit-og
|
|
115
37
|
```
|
|
116
38
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
## Example Output
|
|
120
|
-
|
|
121
|
-

|
|
122
|
-
|
|
123
|
-
## Headers
|
|
124
|
-
|
|
125
|
-
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.
|
|
126
|
-
|
|
127
|
-
## Styling
|
|
128
|
-
|
|
129
|
-
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).
|
|
130
|
-
|
|
131
|
-
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.
|
|
132
|
-
|
|
133
|
-
## Fonts
|
|
39
|
+
## Usage
|
|
134
40
|
|
|
135
|
-
|
|
41
|
+
For detailed usage instructions, please see the [Getting Started](https://sveltekit-og.dev/docs/getting-started) section of our documentation.
|
|
136
42
|
|
|
137
|
-
|
|
43
|
+
Prefer the Takumi engine — more output formats and a built-in font? See the [Takumi Engine](https://sveltekit-og.dev/docs/usage/takumi) guide.
|
|
138
44
|
|
|
139
45
|
## Examples
|
|
140
46
|
|
|
141
|
-
-
|
|
142
|
-
-
|
|
143
|
-
|
|
144
|
-
## API Reference
|
|
145
|
-
|
|
146
|
-
The package exposes an `ImageResponse` constructors, with the following options available:
|
|
147
|
-
|
|
148
|
-
```typescript
|
|
149
|
-
import {ImageResponse} from '@ethercorps/sveltekit-og'
|
|
150
|
-
import {SvelteComponent} from "svelte";
|
|
151
|
-
|
|
152
|
-
ImageResponse(
|
|
153
|
-
element : string | Component,
|
|
154
|
-
options : {
|
|
155
|
-
width ? : number = 1200
|
|
156
|
-
height ? : number = 630,
|
|
157
|
-
backgroundColor ? : string = "#fff"
|
|
158
|
-
fonts ? : {
|
|
159
|
-
name: string,
|
|
160
|
-
data: ArrayBuffer,
|
|
161
|
-
weight: number,
|
|
162
|
-
style: 'normal' | 'italic'
|
|
163
|
-
}[]
|
|
164
|
-
debug ? : boolean = false
|
|
165
|
-
// Options that will be passed to the HTTP response
|
|
166
|
-
status ? : number = 200
|
|
167
|
-
statusText ? : string
|
|
168
|
-
headers ? : Record<string, string>
|
|
169
|
-
},
|
|
170
|
-
// Component props if components.
|
|
171
|
-
ComponentProps<Component>
|
|
172
|
-
)
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
## Changelog
|
|
176
|
-
|
|
177
|
-
### v4.0.0 (Breaking Changes)
|
|
178
|
-
|
|
179
|
-
> Just install @ethercorps/sveltekit-og
|
|
180
|
-
|
|
181
|
-
> Support for NodeJS, Deno, Cloudflare Pages, Cloudflare Workers, Vercel and Netlify.
|
|
182
|
-
|
|
183
|
-
> No support for Bun tried and failed.
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
### v3.0.0 (Breaking Changes)
|
|
47
|
+
- **ImageResponse**: [_source_](/src/routes/+server.ts) · [_demo_](https://vercel.sveltekit-og.dev)
|
|
48
|
+
- **Component Rendering**: [_source_](/src/routes/sc/+server.ts) · [_demo_](https://vercel.sveltekit-og.dev/sc)
|
|
187
49
|
|
|
188
|
-
|
|
189
|
-
> No wasm as of now, only support for nodejs based runtime.
|
|
50
|
+
## Contributing
|
|
190
51
|
|
|
191
|
-
|
|
52
|
+
Contributions are welcome! Please read our [contributing guidelines](CONTRIBUTING.md) to get started.
|
|
192
53
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
```
|
|
196
|
-
npm i @resvg/resvg-js
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
```
|
|
200
|
-
npm i satori
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
> From now on their will be no issues related to build, and soon this library going to have its own documentation.
|
|
204
|
-
|
|
205
|
-
### v1.2.2 Update (Breaking Change)
|
|
206
|
-
|
|
207
|
-
- We don't provide access to satori from `@ethercorps/sveltekit-og`.
|
|
208
|
-
|
|
209
|
-
### v1.0.0 Update (Breaking Changes)
|
|
54
|
+
## Changelog
|
|
210
55
|
|
|
211
|
-
|
|
212
|
-
Now you can use `{ toReactElement }` with `"@ethercorps/sveltekit-og"` like:
|
|
56
|
+
All notable changes to this project are documented in the [changelog](CHANGELOG.md).
|
|
213
57
|
|
|
214
|
-
|
|
215
|
-
- Removed `@resvg/resvg-wasm` with `@resvg/resvg-js` because of internal errors.
|
|
216
|
-
- Removed `satori-html` because now we have `toReactElement` out of the box with svelte compiler.
|
|
217
|
-
> If you find a problem related to undefined a please check [_vite.config.js_](/vite.config.ts) and add ` define: { _a: 'undefined' } in config.`
|
|
58
|
+
## License
|
|
218
59
|
|
|
219
|
-
|
|
60
|
+
This project is licensed under the [MIT License](LICENSE).
|
|
220
61
|
|
|
221
62
|
## Acknowledgements
|
|
222
63
|
|
|
223
|
-
This project
|
|
64
|
+
This project would not be possible without the following projects:
|
|
224
65
|
|
|
225
66
|
- [Satori & @vercel/og](https://github.com/vercel/satori)
|
|
67
|
+
- [Takumi](https://takumi.kane.tw)
|
|
226
68
|
- [Noto by Google Fonts](https://fonts.google.com/noto)
|
|
227
69
|
- [fineshopdesign](https://github.com/fineshopdesign/cf-wasm)
|
|
228
70
|
|
package/dist/fonts.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { FinalFontOptions, FontStyle, FontWeight, MayBePromise } from
|
|
1
|
+
import type { FinalFontOptions, FontStyle, FontWeight, MayBePromise } from "./types.js";
|
|
2
2
|
interface BaseFontOptions {
|
|
3
3
|
weight?: FontWeight;
|
|
4
4
|
style?: FontStyle;
|
|
@@ -7,32 +7,24 @@ interface BaseFontOptions {
|
|
|
7
7
|
* All font types inherit from this class.
|
|
8
8
|
*/
|
|
9
9
|
export declare class BaseFont {
|
|
10
|
-
protected input: any;
|
|
11
10
|
name: string;
|
|
12
11
|
style: FontStyle;
|
|
13
12
|
weight: FontWeight;
|
|
14
|
-
constructor(name: string,
|
|
13
|
+
constructor(name: string, { weight, style }?: BaseFontOptions);
|
|
15
14
|
/** * Abstract getter that returns the promised ArrayBuffer.
|
|
16
15
|
* Overridden by CustomFont and GoogleFont for lazy loading.
|
|
17
16
|
*/
|
|
18
17
|
get data(): MayBePromise<Buffer | ArrayBuffer>;
|
|
19
18
|
}
|
|
20
|
-
/** * A helper class to load Custom fonts, typically from local files.
|
|
21
|
-
* The input must be a function provided by the user (e.g., using $app/server/read).
|
|
22
|
-
*/
|
|
23
19
|
export declare class CustomFont extends BaseFont {
|
|
20
|
+
protected input: MayBePromise<Buffer | ArrayBuffer> | (() => MayBePromise<Buffer | ArrayBuffer>);
|
|
24
21
|
private promise?;
|
|
25
|
-
/**
|
|
26
|
-
* Creates an instance of CustomFont.
|
|
27
|
-
* @param name The name of the font (for CSS font-family).
|
|
28
|
-
* @param input Font data as ArrayBuffer or a function that resolves to ArrayBuffer (user must provide the loading logic).
|
|
29
|
-
*/
|
|
30
22
|
constructor(name: string, input: MayBePromise<Buffer | ArrayBuffer> | (() => MayBePromise<Buffer | ArrayBuffer>), options?: BaseFontOptions);
|
|
31
|
-
/** A promise which resolves to font data as `ArrayBuffer` (Lazy load) */
|
|
23
|
+
/** A promise which resolves to font data as `ArrayBuffer` (Lazy load and CACHED) */
|
|
32
24
|
get data(): Promise<Buffer | ArrayBuffer>;
|
|
33
25
|
}
|
|
34
26
|
/** Loads Google font ArrayBuffer with caching. */
|
|
35
|
-
export declare const loadGoogleFont: (family: string, { text, weight, style, display }?: {
|
|
27
|
+
export declare const loadGoogleFont: (family: string, { text, weight, style, display, }?: {
|
|
36
28
|
text?: string;
|
|
37
29
|
weight?: string | number;
|
|
38
30
|
style?: FontStyle;
|
package/dist/fonts.js
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
import { FONT_CACHE_MAP } from
|
|
1
|
+
import { FONT_CACHE_MAP } from "./helpers/cache.js";
|
|
2
2
|
/** * Base font class defining the structure required by Satori.
|
|
3
3
|
* All font types inherit from this class.
|
|
4
4
|
*/
|
|
5
5
|
export class BaseFont {
|
|
6
|
-
input;
|
|
7
6
|
name;
|
|
8
7
|
style;
|
|
9
8
|
weight;
|
|
10
|
-
constructor(name,
|
|
11
|
-
this.input = input;
|
|
9
|
+
constructor(name, { weight = 400, style = "normal" } = {}) {
|
|
12
10
|
this.name = name;
|
|
13
11
|
this.style = style;
|
|
14
12
|
this.weight = weight;
|
|
@@ -17,43 +15,49 @@ export class BaseFont {
|
|
|
17
15
|
* Overridden by CustomFont and GoogleFont for lazy loading.
|
|
18
16
|
*/
|
|
19
17
|
get data() {
|
|
20
|
-
|
|
18
|
+
throw new Error("The 'data' getter must be implemented by subclasses of BaseFont.");
|
|
21
19
|
}
|
|
22
20
|
}
|
|
23
|
-
/** * A helper class to load Custom fonts, typically from local files.
|
|
24
|
-
* The input must be a function provided by the user (e.g., using $app/server/read).
|
|
25
|
-
*/
|
|
26
21
|
export class CustomFont extends BaseFont {
|
|
22
|
+
input;
|
|
27
23
|
promise;
|
|
28
|
-
/**
|
|
29
|
-
* Creates an instance of CustomFont.
|
|
30
|
-
* @param name The name of the font (for CSS font-family).
|
|
31
|
-
* @param input Font data as ArrayBuffer or a function that resolves to ArrayBuffer (user must provide the loading logic).
|
|
32
|
-
*/
|
|
33
24
|
constructor(name, input, options) {
|
|
34
|
-
super(name,
|
|
25
|
+
super(name, options);
|
|
26
|
+
this.input = input;
|
|
35
27
|
}
|
|
36
|
-
/** A promise which resolves to font data as `ArrayBuffer` (Lazy load) */
|
|
28
|
+
/** A promise which resolves to font data as `ArrayBuffer` (Lazy load and CACHED) */
|
|
37
29
|
get data() {
|
|
38
|
-
|
|
39
|
-
const
|
|
40
|
-
|
|
30
|
+
const cacheKey = `${this.name}-${this.weight}-${this.style}`;
|
|
31
|
+
const cachedData = FONT_CACHE_MAP.get(cacheKey);
|
|
32
|
+
if (cachedData) {
|
|
33
|
+
return Promise.resolve(cachedData);
|
|
34
|
+
}
|
|
35
|
+
const fallback = async () => {
|
|
36
|
+
const buffer = typeof this.input === "function" ? this.input() : this.input;
|
|
37
|
+
const resolvedBuffer = await buffer;
|
|
38
|
+
FONT_CACHE_MAP.set(cacheKey, resolvedBuffer);
|
|
39
|
+
return resolvedBuffer;
|
|
40
|
+
};
|
|
41
41
|
this.promise = this.promise?.then(null, fallback) ?? fallback();
|
|
42
42
|
return this.promise;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
/** Constructs Google font css url */
|
|
46
|
-
const constructGoogleFontCssUrl = (family, { text, weight = 400, style =
|
|
46
|
+
const constructGoogleFontCssUrl = (family, { text, weight = 400, style = "normal", display, } = {}) => {
|
|
47
47
|
// Logic to build the URL (e.g., https://fonts.googleapis.com/css2?family=...wght@...)
|
|
48
48
|
const params = {
|
|
49
|
-
family: `${family.replaceAll(
|
|
49
|
+
family: `${family.replaceAll(" ", "+")}:${style === "italic" ? "ital," : ""}wght@${style === "italic" ? "1," : ""}${weight}`,
|
|
50
50
|
};
|
|
51
51
|
if (text)
|
|
52
52
|
params.text = encodeURIComponent(text);
|
|
53
|
-
|
|
53
|
+
if (display)
|
|
54
|
+
params.display = display;
|
|
55
|
+
return `https://fonts.googleapis.com/css2?${Object.entries(params)
|
|
56
|
+
.map(([key, value]) => `${key}=${value}`)
|
|
57
|
+
.join("&")}`;
|
|
54
58
|
};
|
|
55
59
|
/** Loads Google font ArrayBuffer with caching. */
|
|
56
|
-
export const loadGoogleFont = async (family, { text, weight = 400, style =
|
|
60
|
+
export const loadGoogleFont = async (family, { text, weight = 400, style = "normal", display, } = {}) => {
|
|
57
61
|
const cssUrl = constructGoogleFontCssUrl(family, { text, weight, display, style });
|
|
58
62
|
const fromMap = FONT_CACHE_MAP.get(cssUrl);
|
|
59
63
|
if (fromMap) {
|
|
@@ -84,7 +88,7 @@ export class GoogleFont extends BaseFont {
|
|
|
84
88
|
text;
|
|
85
89
|
promise;
|
|
86
90
|
constructor(family, options = {}) {
|
|
87
|
-
super(options.name || family,
|
|
91
|
+
super(options.name || family, options);
|
|
88
92
|
this.family = family;
|
|
89
93
|
this.text = options.text;
|
|
90
94
|
}
|
|
@@ -108,5 +112,5 @@ export async function resolveFonts(fontClasses) {
|
|
|
108
112
|
style: fontClass.style,
|
|
109
113
|
};
|
|
110
114
|
}));
|
|
111
|
-
return resolvedFonts.filter(font => font !== null);
|
|
115
|
+
return resolvedFonts.filter((font) => font !== null);
|
|
112
116
|
}
|
package/dist/helpers/create.d.ts
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import type { Component } from
|
|
2
|
-
import type { ComponentOptions, ImageOptions } from
|
|
3
|
-
|
|
4
|
-
export declare function
|
|
1
|
+
import type { Component } from "svelte";
|
|
2
|
+
import type { ComponentOptions, ImageOptions } from "../types.js";
|
|
3
|
+
/** Single entry for the Satori and ReSVG engine */
|
|
4
|
+
export declare function createImage(element: string | Component<any>, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<Uint8Array | string>;
|
|
5
|
+
/** Create an SVG string from a Svelte component or HTML string using Satori */
|
|
6
|
+
export declare function createSvg(element: string | Component<any>, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<string>;
|
|
7
|
+
export declare function createPng(element: string | Component<any>, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<Uint8Array<ArrayBufferLike>>;
|
package/dist/helpers/create.js
CHANGED
|
@@ -1,38 +1,49 @@
|
|
|
1
|
-
import { loadDynamicAsset } from
|
|
2
|
-
import { default_fonts, DEFAULT_WIDTH } from
|
|
3
|
-
import { useResvg, useSatori } from
|
|
4
|
-
import { createVNode } from
|
|
1
|
+
import { loadDynamicAsset } from "./emoji.js";
|
|
2
|
+
import { default_fonts, DEFAULT_WIDTH } from "../helpers/defaults.js";
|
|
3
|
+
import { useResvg, useSatori } from "../providers/instances.js";
|
|
4
|
+
import { createVNode } from "./toJSX.js";
|
|
5
|
+
import { createLogger } from "./logger.js";
|
|
6
|
+
import { handleAsync, ErrorCodes } from "./error-handler.js";
|
|
7
|
+
/** Single entry for the Satori and ReSVG engine */
|
|
8
|
+
export function createImage(element, imageOptions, componentOptions) {
|
|
9
|
+
return imageOptions.format === "svg"
|
|
10
|
+
? createSvg(element, imageOptions, componentOptions)
|
|
11
|
+
: createPng(element, imageOptions, componentOptions);
|
|
12
|
+
}
|
|
13
|
+
/** Create an SVG string from a Svelte component or HTML string using Satori */
|
|
5
14
|
export async function createSvg(element, imageOptions, componentOptions) {
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
15
|
+
const log = createLogger(imageOptions.debug ?? false);
|
|
16
|
+
const vnodes = createVNode(element, componentOptions);
|
|
17
|
+
const satori = await useSatori(imageOptions.debug);
|
|
18
|
+
const satoriOptions = { ...imageOptions };
|
|
19
|
+
if (!satoriOptions.fonts) {
|
|
20
|
+
satoriOptions.fonts = await handleAsync(() => default_fonts(), ErrorCodes.FONT_LOAD_FAILED, "Failed to load default fonts for Satori");
|
|
10
21
|
}
|
|
11
|
-
satoriOptions
|
|
12
|
-
emoji: imageOptions.emoji
|
|
22
|
+
satoriOptions.loadAdditionalAsset = loadDynamicAsset({
|
|
23
|
+
emoji: imageOptions.emoji,
|
|
13
24
|
});
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
return satori(vnodes, satoriOptions);
|
|
25
|
+
log.debug("Generating SVG with Satori");
|
|
26
|
+
log.info("VNode provided to satori:", JSON.stringify(vnodes, null, 2), "\n");
|
|
27
|
+
log.info("Options provided to satori:", imageOptions);
|
|
28
|
+
return handleAsync(() => satori(vnodes, satoriOptions), ErrorCodes.SATORI_RENDER_FAILED, "Failed to render SVG with Satori");
|
|
19
29
|
}
|
|
30
|
+
/* Create a PNG image from a Svelte component or HTML string using Satori and ReSVG */
|
|
20
31
|
export async function createPng(element, imageOptions, componentOptions) {
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
const resvg_instance = await useResvg();
|
|
32
|
+
const log = createLogger(imageOptions.debug ?? false);
|
|
33
|
+
const svg = await handleAsync(() => createSvg(element, imageOptions, componentOptions), ErrorCodes.SATORI_RENDER_FAILED, "Failed to create SVG for PNG rendering");
|
|
34
|
+
log.debug("SVG generated by satori for ReSVG: \n", svg, "\n");
|
|
35
|
+
const resvg_instance = await handleAsync(() => useResvg(imageOptions.debug), ErrorCodes.RESVG_INIT_FAILED, "Failed to initialize ReSVG");
|
|
26
36
|
const resvg_options = {
|
|
27
37
|
fitTo: {
|
|
28
|
-
mode:
|
|
38
|
+
mode: "width",
|
|
29
39
|
value: imageOptions.width || DEFAULT_WIDTH,
|
|
30
|
-
}
|
|
40
|
+
},
|
|
31
41
|
};
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
42
|
+
log.debug("Rendering PNG with ReSVG");
|
|
43
|
+
log.info("Options provided to ReSVG:", resvg_options, "\n");
|
|
44
|
+
return handleAsync(async () => {
|
|
45
|
+
const resvg = new resvg_instance(svg, resvg_options);
|
|
46
|
+
const png_data = resvg.render();
|
|
47
|
+
return png_data.asPng();
|
|
48
|
+
}, ErrorCodes.RESVG_RENDER_FAILED, "Failed to render PNG with ReSVG");
|
|
38
49
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type { SatoriOptions } from
|
|
2
|
-
import type { ImageOptions } from
|
|
3
|
-
import type { EmojiType } from
|
|
4
|
-
export declare function default_fonts(): Promise<SatoriOptions[
|
|
1
|
+
import type { SatoriOptions } from "satori";
|
|
2
|
+
import type { ImageOptions } from "../types.js";
|
|
3
|
+
import type { EmojiType } from "./emoji.js";
|
|
4
|
+
export declare function default_fonts(): Promise<SatoriOptions["fonts"]>;
|
|
5
5
|
export declare const DEFAULT_FORMAT = "png";
|
|
6
6
|
export declare const DEFAULT_WIDTH = 1200;
|
|
7
7
|
export declare const DEFAULT_HEIGHT = 630;
|
package/dist/helpers/defaults.js
CHANGED
|
@@ -1,37 +1,47 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
throw
|
|
8
|
-
}
|
|
9
|
-
|
|
1
|
+
import { handleAsyncAll, validateResponse, ErrorCodes } from "./error-handler.js";
|
|
2
|
+
// fetched once per process; a rejected fetch clears the cache so the next request retries
|
|
3
|
+
let defaultFontsPromise;
|
|
4
|
+
export function default_fonts() {
|
|
5
|
+
defaultFontsPromise ??= loadDefaultFonts().catch((error) => {
|
|
6
|
+
defaultFontsPromise = undefined;
|
|
7
|
+
throw error;
|
|
8
|
+
});
|
|
9
|
+
return defaultFontsPromise;
|
|
10
|
+
}
|
|
11
|
+
async function loadDefaultFonts() {
|
|
12
|
+
const [noto_sans_regular_font_resp, noto_sans_bold_font_reps] = await handleAsyncAll([
|
|
13
|
+
() => fetch("https://cdn-sveltekit-og.ethercorps.io/NotoSans-Regular.ttf"),
|
|
14
|
+
() => fetch("https://cdn-sveltekit-og.ethercorps.io/NotoSans-Bold.ttf"),
|
|
15
|
+
], ErrorCodes.FONT_LOAD_FAILED, "Failed to fetch default fonts");
|
|
16
|
+
const [noto_sans_regular_font, noto_sans_bold_font] = await handleAsyncAll([
|
|
17
|
+
() => validateResponse(noto_sans_regular_font_resp, ErrorCodes.FONT_LOAD_FAILED, "Failed to validate regular font response"),
|
|
18
|
+
() => validateResponse(noto_sans_bold_font_reps, ErrorCodes.FONT_LOAD_FAILED, "Failed to validate bold font response"),
|
|
19
|
+
], ErrorCodes.FONT_LOAD_FAILED, "Failed to process font responses");
|
|
10
20
|
return [
|
|
11
21
|
{
|
|
12
22
|
data: noto_sans_regular_font,
|
|
13
|
-
name:
|
|
23
|
+
name: "Inter",
|
|
14
24
|
weight: 400,
|
|
15
|
-
style:
|
|
25
|
+
style: "normal",
|
|
16
26
|
},
|
|
17
27
|
{
|
|
18
28
|
data: noto_sans_bold_font,
|
|
19
|
-
name:
|
|
29
|
+
name: "Inter",
|
|
20
30
|
weight: 700,
|
|
21
|
-
style:
|
|
22
|
-
}
|
|
31
|
+
style: "normal",
|
|
32
|
+
},
|
|
23
33
|
];
|
|
24
34
|
}
|
|
25
|
-
export const DEFAULT_FORMAT =
|
|
35
|
+
export const DEFAULT_FORMAT = "png";
|
|
26
36
|
export const DEFAULT_WIDTH = 1200;
|
|
27
37
|
export const DEFAULT_HEIGHT = 630;
|
|
28
|
-
export const DEFAULT_EMOJI_PROVIDER =
|
|
38
|
+
export const DEFAULT_EMOJI_PROVIDER = "twemoji";
|
|
29
39
|
export const DEFAULT_STATUS_CODE = 200;
|
|
30
|
-
export const DEFAULT_STATUS_TEXT =
|
|
40
|
+
export const DEFAULT_STATUS_TEXT = "Success";
|
|
31
41
|
export const DEFAULT_OPTIONS = {
|
|
32
42
|
height: DEFAULT_HEIGHT,
|
|
33
43
|
width: DEFAULT_WIDTH,
|
|
34
44
|
debug: false,
|
|
35
45
|
format: DEFAULT_FORMAT,
|
|
36
|
-
emoji:
|
|
46
|
+
emoji: "twemoji",
|
|
37
47
|
};
|
package/dist/helpers/emoji.d.ts
CHANGED
|
@@ -8,6 +8,6 @@ declare const emoji_apis: {
|
|
|
8
8
|
};
|
|
9
9
|
export declare const loadDynamicAsset: ({ emoji }: {
|
|
10
10
|
emoji: EmojiType;
|
|
11
|
-
}) => (
|
|
11
|
+
}) => (code: string, text: string) => Promise<string | undefined>;
|
|
12
12
|
export type EmojiType = keyof typeof emoji_apis;
|
|
13
13
|
export {};
|