https://github.com/skorfmann/og-link
Generate Open Graph images with Satori on Cloudflare Workers
https://github.com/skorfmann/og-link
cloudflare-workers opengraph resvg satori
Last synced: 6 months ago
JSON representation
Generate Open Graph images with Satori on Cloudflare Workers
- Host: GitHub
- URL: https://github.com/skorfmann/og-link
- Owner: skorfmann
- License: mpl-2.0
- Created: 2023-07-14T08:20:59.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-10T21:08:51.000Z (about 2 years ago)
- Last Synced: 2025-03-01T23:27:08.557Z (7 months ago)
- Topics: cloudflare-workers, opengraph, resvg, satori
- Language: TypeScript
- Homepage:
- Size: 80.1 KB
- Stars: 7
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Open Graph Link
Generate Open Graph images with [satori](https://github.com/vercel/satori) and a custom fork of [workers-og](https://github.com/kvnang/workers-og/tree/main/packages/workers-og) (mainly to update dependencies).
`workers-og` is using [resvg](https://github.com/yisibl/resvg-js) to turn the `svg` generated by satori into a `png`.
## Usage
The worker expects a [base64url](https://en.wikipedia.org/wiki/Base64#URL_applications) JSON payload:
```
{
"title": "Hello World"
}
```
which then can be assembled in the following url path
`https:///image//og.png`
Please note, that LinkedIn doesn't accept subdomains on the `workers.dev` domain from Clouflare when scraping for open graph images. Took me a while to figure this out.
## Deploy
```
npm install
wrangler deploy
```
## Template
The [src/template.tsx](./src/template.tsx) file was entirely generated with OpenAI's GPT-4.
### Example
```
{
"title": "Kickoff Meetup @ Machine Minds Lisbon"
}
```
turns into this url
```
https:///image/eyJ0aXRsZSI6IktpY2tvZmYgTWVldHVwIEAgTWFjaGluZSBNaW5kcyBMaXNib24gIn0%3D/og.png
```
and results in this image (takes ~2 seconds to render)
## Todo
- [ ] Caching of generated images would be nice
- [ ] Some authenticity check for the payload
- [ ] Dynamic templates or template elements