mirror of
https://github.com/LukeHagar/sveltekit-og.git
synced 2025-12-06 12:47:49 +00:00
docs update
This commit is contained in:
49
README.md
49
README.md
@@ -3,9 +3,7 @@
|
|||||||
Dynamically generate Open Graph images from an HTML+CSS template or Svelte component using fast and efficient conversion from HTML > SVG > PNG. Based on [Satori](https://github.com/vercel/satori#documentation). No headless browser required.
|
Dynamically generate Open Graph images from an HTML+CSS template or Svelte component using fast and efficient conversion from HTML > SVG > PNG. Based on [Satori](https://github.com/vercel/satori#documentation). No headless browser required.
|
||||||
|
|
||||||
## Disclaimer
|
## Disclaimer
|
||||||
|
This project doesn't support edge services like vercel edge and cloudflare workers.
|
||||||
This `documentation` is currently `unmaintained` , as the `development` focus is `compatibility` with cloudflare, vercel and vercel edge.
|
|
||||||
I won't suggest anyone to use this library in `production` till `January 1, 2024`.
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
@@ -13,12 +11,6 @@ I won't suggest anyone to use this library in `production` till `January 1, 202
|
|||||||
pnpm install -D @ethercorps/sveltekit-og
|
pnpm install -D @ethercorps/sveltekit-og
|
||||||
```
|
```
|
||||||
|
|
||||||
> Using with Cloudflare Pages or Workers then you have to provide `url` polyfill by just installing it as `devDependency`.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm i -D url
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
Create a file at `/src/routes/og/+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.
|
||||||
@@ -89,15 +81,15 @@ By default, `@ethercorps/sveltekit-og` includes only 'Noto Sans' font. If you ne
|
|||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
- `ImageResponse` · [_source_](/src/routes/new/+server.ts) · [_demo_](https://sveltekit-og-five.vercel.app/new)
|
- `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)
|
- `Component Rendering` · [_source_](/src/routes/sc/+server.ts) · [_demo_](https://sveltekit-og-five.vercel.app/sc)
|
||||||
|
|
||||||
## API Reference
|
## API Reference
|
||||||
|
|
||||||
The package exposes an `ImageResponse` and `componentToImageResponse` constructors, with the following options available:
|
The package exposes an `ImageResponse` constructors, with the following options available:
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
import {ImageResponse, componentToImageResponse} from '@ethercorps/sveltekit-og'
|
import {ImageResponse} from '@ethercorps/sveltekit-og'
|
||||||
import {SvelteComponent} from "svelte";
|
import {SvelteComponent} from "svelte";
|
||||||
|
|
||||||
// ...
|
// ...
|
||||||
@@ -120,32 +112,16 @@ ImageResponse(
|
|||||||
status ? : number = 200
|
status ? : number = 200
|
||||||
statusText ? : string
|
statusText ? : string
|
||||||
headers ? : Record<string, string>
|
headers ? : Record<string, string>
|
||||||
})
|
} {props})
|
||||||
|
|
||||||
componentToImageResponse(
|
|
||||||
component : typeof SvelteComponent,
|
|
||||||
props : {}, // All export let example inside prop dictionary
|
|
||||||
options : {
|
|
||||||
width ? : number = 1200
|
|
||||||
height ? : number = 630
|
|
||||||
fonts ? : {
|
|
||||||
name: string,
|
|
||||||
data: ArrayBuffer,
|
|
||||||
weight: number,
|
|
||||||
style: 'normal' | 'italic'
|
|
||||||
}[]
|
|
||||||
debug ? : boolean = false
|
|
||||||
graphemeImages ? : Record<string, string>;
|
|
||||||
loadAdditionalAsset ? : (languageCode: string, segment: string) => Promise<SatoriOptions["fonts"] | string | undefined>;
|
|
||||||
// Options that will be passed to the HTTP response
|
|
||||||
status ? : number = 200
|
|
||||||
statusText ? : string
|
|
||||||
headers ? : Record<string, string>
|
|
||||||
})
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Changelog
|
## Changelog
|
||||||
|
|
||||||
|
### v3.0.0 (Breaking Changes)
|
||||||
|
|
||||||
|
> Just install @ethercorps/sveltekit-og
|
||||||
|
> No wasm as of now, only support for nodejs based runtime.
|
||||||
|
|
||||||
### v1.2.3 Update (Breaking Changes)
|
### v1.2.3 Update (Breaking Changes)
|
||||||
|
|
||||||
> Now you have to install dependency by yourself which will make it easier to build for all plateforms.
|
> Now you have to install dependency by yourself which will make it easier to build for all plateforms.
|
||||||
@@ -182,7 +158,8 @@ This project will not be possible without the following projects:
|
|||||||
|
|
||||||
- [Satori & @vercel/og](https://github.com/vercel/satori)
|
- [Satori & @vercel/og](https://github.com/vercel/satori)
|
||||||
- [Noto by Google Fonts](https://fonts.google.com/noto)
|
- [Noto by Google Fonts](https://fonts.google.com/noto)
|
||||||
- [svg2png-wasm](https://github.com/ssssota/svg2png-wasm)
|
|
||||||
|
[//]: # (- [svg2png-wasm](https://github.com/ssssota/svg2png-wasm))
|
||||||
|
|
||||||
## Authors
|
## Authors
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user