diff --git a/README.md b/README.md
index b3b1292..b1ba6c2 100644
--- a/README.md
+++ b/README.md
@@ -30,10 +30,8 @@ const template = `
`;
-const fontFile400 = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
-const fontFile700 = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff');
-const fontData400: ArrayBuffer = await fontFile400.arrayBuffer();
-const fontData700: ArrayBuffer = await fontFile700.arrayBuffer();
+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 new ImageResponse(template, {
@@ -42,13 +40,8 @@ export const GET: RequestHandler = async () => {
fonts: [
{
name: 'Inter Latin',
- data: fontData400,
+ data: fontData,
weight: 400
- },
- {
- name: 'Inter Latin',
- data: fontData700,
- weight: 700
}
]
});
@@ -62,6 +55,11 @@ Then run `pnpm dev` and access localhost:5173/og, the React element will be rend
Read more about the API, supported features and check out the examples on Satori Playground.
+## Examples:
+- `ImageResponse` · [_source_](/src/routes/+server.ts) · [_demo_](https://sveltekit-og-five.vercel.app)
+- `componentToImageResponse` · [_source_](/src/routes/component-og/) · [_demo_](https://sveltekit-og-five.vercel.app/component-og)
+
+
## API Reference
The package exposes an `ImageResponse` constructor, with the following options available:
@@ -105,7 +103,7 @@ During development, the `cache-control: no-cache, no-store` header is used inste
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 'Inter Latin' font included. If you need to use other fonts, you can pass them in the `fonts` option.
+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.
## Acknowledgements
@@ -113,5 +111,5 @@ By default, `@ethercorps/sveltekit-og` only has the 'Inter Latin' font included.
This project will not be possible without the following projects:
- [Satori & @vercel/og](https://github.com/vercel/satori)
-- [Google Fonts](https://fonts.google.com)
+- [Noto by Google Fonts](https://fonts.google.com/noto)
- [Resvg.js](https://github.com/yisibl/resvg-js)
diff --git a/src/app.html b/src/app.html
index 2f83674..886d08c 100644
--- a/src/app.html
+++ b/src/app.html
@@ -4,6 +4,7 @@
+
%sveltekit.head%
diff --git a/src/lib/index.ts b/src/lib/index.ts
index a529872..1f4ccfd 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,14 +1,12 @@
import { html as toReactNode } from 'satori-html';
import satori from 'satori';
import { Resvg, initWasm } from '@resvg/resvg-wasm';
-import { join } from 'path';
-import { readFileSync } from 'fs';
import { fileURLToPath } from 'url';
import type { SvelteComponent } from 'svelte';
import type { SatoriOptions } from 'satori';
const __filename = fileURLToPath(import.meta.url);
const resSvgWasm = initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'));
-const fontFile = await fetch('https://github.com/etherCorps/sveltekit-og/blob/main/static/noto-sans.ttf');
+const fontFile = await fetch('https://sveltekit-og-five.vercel.app/noto-sans.ttf');
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
export const ImageResponse = class {
@@ -30,7 +28,6 @@ export const ImageResponse = class {
}
]
});
- console.log(svg)
const pngData = new Resvg(svg, { fitTo: { mode: 'width', value: options.width } });
a.enqueue(await pngData.render().asPng());
a.close();
@@ -52,7 +49,7 @@ export const ImageResponse = class {
};
export const componentToImageResponse = class {
- constructor(component: SvelteComponent, props = {}, optionsByUser: ImageResponseOptions) {
+ constructor(component, props = {}, optionsByUser: ImageResponseOptions) {
const SvelteRenderedMarkup = component.render(props);
let htmlTemplate = `${SvelteRenderedMarkup.html}`;
if (SvelteRenderedMarkup && SvelteRenderedMarkup.css && SvelteRenderedMarkup.css.code) {
diff --git a/src/routes/component-og/+server.ts b/src/routes/component-og/+server.ts
new file mode 100644
index 0000000..9533f6b
--- /dev/null
+++ b/src/routes/component-og/+server.ts
@@ -0,0 +1,21 @@
+import OG from "./OG.svelte";
+import {componentToImageResponse} from "$lib";
+import type {RequestHandler} from "./$types";
+
+
+const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff');
+const fontData: ArrayBuffer = await fontFile.arrayBuffer();
+
+export const GET: RequestHandler = async () => {
+ return new componentToImageResponse(OG, {text: 'Ready to dive in?', spanText: 'Start your free trial today.'}, {
+ height: 250,
+ width: 500,
+ fonts: [
+ {
+ name: 'Inter Latin',
+ data: fontData,
+ weight: 700
+ }
+ ]
+ });
+};
diff --git a/src/routes/component-og/OG.svelte b/src/routes/component-og/OG.svelte
new file mode 100644
index 0000000..86e913a
--- /dev/null
+++ b/src/routes/component-og/OG.svelte
@@ -0,0 +1,21 @@
+
+
+
+ {text}
+ {spanText}
+
+
+
+