├── .eslintignore
├── .eslintrc.cjs
├── .gitignore
├── .npmrc
├── .prettierignore
├── .prettierrc
├── README.md
├── examples
├── netlify-build
│ ├── .eslintignore
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── .npmrc
│ ├── .prettierignore
│ ├── .prettierrc
│ ├── README.md
│ ├── netlify.toml
│ ├── package.json
│ ├── playwright.config.js
│ ├── pnpm-lock.yaml
│ ├── src
│ │ ├── app.html
│ │ └── routes
│ │ │ ├── +server.ts
│ │ │ └── cog
│ │ │ ├── +server.ts
│ │ │ └── OG.svelte
│ ├── static
│ │ ├── favicon.ico
│ │ └── favicon.png
│ ├── svelte.config.js
│ ├── tests
│ │ └── test.js
│ └── vite.config.js
├── node-build
│ ├── .eslintignore
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── .npmrc
│ ├── .prettierignore
│ ├── .prettierrc
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── playwright.config.js
│ ├── pnpm-lock.yaml
│ ├── src
│ │ ├── app.html
│ │ └── routes
│ │ │ ├── +server.ts
│ │ │ └── cog
│ │ │ ├── +server.ts
│ │ │ └── OG.svelte
│ ├── static
│ │ ├── favicon.ico
│ │ └── favicon.png
│ ├── svelte.config.js
│ ├── tests
│ │ └── test.js
│ └── vite.config.js
└── vercel-build
│ ├── .eslintignore
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── .npmrc
│ ├── .prettierignore
│ ├── .prettierrc
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── playwright.config.js
│ ├── pnpm-lock.yaml
│ ├── src
│ ├── app.html
│ └── routes
│ │ ├── +server.ts
│ │ └── cog
│ │ ├── +server.ts
│ │ └── OG.svelte
│ ├── static
│ ├── favicon.ico
│ └── favicon.png
│ ├── svelte.config.js
│ ├── tests
│ └── test.js
│ └── vite.config.js
├── package.json
├── pnpm-lock.yaml
├── src
├── app.d.ts
├── app.html
├── index.test.ts
├── lib
│ ├── api.ts
│ ├── font.ts
│ ├── index.ts
│ └── types.ts
└── routes
│ ├── +server.ts
│ └── sc
│ ├── +server.ts
│ └── OG.svelte
├── static
├── demo.png
└── favicon.png
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts
/.eslintignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 | .env
7 | .env.*
8 | !.env.example
9 |
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | extends: [
4 | 'eslint:recommended',
5 | 'plugin:@typescript-eslint/recommended',
6 | 'plugin:svelte/recommended',
7 | 'prettier'
8 | ],
9 | parser: '@typescript-eslint/parser',
10 | plugins: ['@typescript-eslint'],
11 | parserOptions: {
12 | sourceType: 'module',
13 | ecmaVersion: 2020,
14 | extraFileExtensions: ['.svelte']
15 | },
16 | env: {
17 | browser: true,
18 | es2017: true,
19 | node: true
20 | },
21 | overrides: [
22 | {
23 | files: ['*.svelte'],
24 | parser: 'svelte-eslint-parser',
25 | parserOptions: {
26 | parser: '@typescript-eslint/parser'
27 | }
28 | }
29 | ]
30 | };
31 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /dist
5 | /.svelte-kit
6 | /package
7 | .env
8 | .env.*
9 | !.env.example
10 | vite.config.js.timestamp-*
11 | vite.config.ts.timestamp-*
12 | .idea
13 | .vercel
14 | .netlify
15 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | resolution-mode=highest
3 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 | .env
7 | .env.*
8 | !.env.example
9 |
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "useTabs": true,
3 | "singleQuote": true,
4 | "trailingComma": "none",
5 | "printWidth": 100,
6 | "plugins": ["prettier-plugin-svelte"],
7 | "pluginSearchDirs": ["."],
8 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
9 | }
10 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # SvelteKit Open Graph Image Generation
2 |
3 | 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.
4 |
5 | ## Disclaimer
6 | This project doesn't support edge services like vercel edge and cloudflare workers.
7 |
8 | ## Installation
9 |
10 | ```bash
11 | pnpm install @ethercorps/sveltekit-og
12 | ```
13 |
14 | ## Usage
15 |
16 | Create a file at `/src/routes/og/+server.ts`. Alternatively, you can use JavaScript by removing the types from this example.
17 |
18 | ```typescript
19 | // src/routes/og/+server.ts
20 | import { ImageResponse } from '@ethercorps/sveltekit-og';
21 | import { RequestHandler } from './$types';
22 |
23 | const template = `
24 |
25 |
26 |
27 | Ready to dive in?
28 | Start your free trial today.
29 |
30 |
38 |
39 |
%sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/netlify-build/src/routes/+server.ts:
--------------------------------------------------------------------------------
1 | import { ImageResponse } from '@ethercorps/sveltekit-og';
2 | import type { RequestHandler } from '@sveltejs/kit';
3 |
4 | const template = `
5 |
6 |
7 |
8 | Ready to dive in?
9 | Start your free trial today.
10 |
11 |
19 |
20 |
7 |
8 |
9 | {text}
10 | {spanText}
11 |
12 |
28 |
29 |
%sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/node-build/src/routes/+server.ts:
--------------------------------------------------------------------------------
1 | import { ImageResponse } from '@ethercorps/sveltekit-og';
2 | import type { RequestHandler } from '@sveltejs/kit';
3 |
4 | const template = `
5 |
6 |
7 |
8 | Ready to dive in?
9 | Start your free trial today.
10 |
11 |
19 |
20 |
7 |
8 |
9 | {text}
10 | {spanText}
11 |
12 |
28 |
29 |
%sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/vercel-build/src/routes/+server.ts:
--------------------------------------------------------------------------------
1 | import { ImageResponse } from '@ethercorps/sveltekit-og';
2 | import type { RequestHandler } from '@sveltejs/kit';
3 |
4 | const template = `
5 |
6 |
7 |
8 | Ready to dive in?
9 | Start your free trial today.
10 |
11 |
19 |
20 |
7 |
8 |
9 | {text}
10 | {spanText}
11 |
12 |
28 |
29 |
%sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/index.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from 'vitest';
2 |
3 | describe('sum test', () => {
4 | it('adds 1 + 2 to equal 3', () => {
5 | expect(1 + 2).toBe(3);
6 | });
7 | });
8 |
--------------------------------------------------------------------------------
/src/lib/api.ts:
--------------------------------------------------------------------------------
1 | import satori from 'satori';
2 | import { Resvg } from '@resvg/resvg-js';
3 | import { loadGoogleFont } from './font.js';
4 | import type { ComponentOptions, ImageResponseOptions } from './types.js';
5 | import {toReactElement, svelteComponentToJsx} from "@ethercorps/svelte-h2j"
6 | import {SvelteComponent} from "svelte";
7 |
8 | export const og = async ( element: string | typeof SvelteComponent, options: ImageResponseOptions, componentOptions: ComponentOptions) => {
9 |
10 | const reactElement = typeof element === 'string' ? toReactElement(element) : svelteComponentToJsx(element, componentOptions);
11 |
12 | // render the React element-like object into an SVG
13 | const svg = await satori(reactElement, {
14 | width: options.width || 1200,
15 | height: options.height || 630,
16 | fonts: options.fonts?.length
17 | ? options.fonts
18 | : [
19 | {
20 | name: 'Bitter',
21 | data: await loadGoogleFont({ family: 'Bitter', weight: 600 }),
22 | weight: 500,
23 | style: 'normal'
24 | }
25 | ]
26 | });
27 |
28 | const requestedFormat = options.format || 'png';
29 |
30 | if (requestedFormat === 'svg') {
31 | return svg;
32 | }
33 |
34 | // convert the SVG into a PNG
35 | const opts = {
36 | // background: "rgba(238, 235, 230, .9)",
37 | fitTo: {
38 | mode: 'width' as const,
39 | value: options.width || 1200
40 | },
41 | font: {
42 | loadSystemFonts: false // It will be faster to disable loading system fonts.
43 | }
44 | };
45 | const resvg = new Resvg(svg, opts);
46 | const pngData = resvg.render();
47 | const pngBuffer = pngData.asPng();
48 |
49 | return pngBuffer;
50 | };
51 |
52 | export class ImageResponse extends Response {
53 | constructor(element: string | typeof SvelteComponent, options: ImageResponseOptions = {} , { props = {}, style='' }: ComponentOptions) {
54 | super();
55 |
56 | const body = new ReadableStream({
57 | async start(controller) {
58 | const buffer = await og( element, options, { props, style });
59 | controller.enqueue(buffer);
60 | controller.close();
61 | }
62 | });
63 |
64 |
65 | return new Response(body, {
66 | headers: {
67 | 'Content-Type': 'image/png',
68 | 'Cache-Control': options.debug
69 | ? 'no-cache, no-store'
70 | : 'public, immutable, no-transform, max-age=31536000',
71 | ...options.headers
72 | },
73 | status: options.status || 200,
74 | statusText: options.statusText
75 | });
76 | }
77 | }
78 |
79 | declare const apis: {
80 | twemoji: (code: any) => string;
81 | openmoji: string;
82 | blobmoji: string;
83 | noto: string;
84 | fluent: (code: any) => string;
85 | fluentFlat: (code: any) => string;
86 | };
87 |
88 | declare type EmojiType = keyof typeof apis;
89 |
90 | type Weight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
91 | type Style$1 = 'normal' | 'italic';
92 |
93 | interface FontOptions {
94 | data: Buffer | ArrayBuffer;
95 | name: string;
96 | weight?: Weight;
97 | style?: Style$1;
98 | lang?: string;
99 | }
100 |
--------------------------------------------------------------------------------
/src/lib/font.ts:
--------------------------------------------------------------------------------
1 | export async function loadGoogleFont({
2 | family,
3 | weight,
4 | text
5 | }: {
6 | family: string;
7 | weight?: number;
8 | text?: string;
9 | }) {
10 | const params: Record = {
11 | family: `${encodeURIComponent(family)}${weight ? `:wght@${weight}` : ''}`
12 | };
13 |
14 | if (text) {
15 | params.text = text;
16 | } else {
17 | params.subset = 'latin';
18 | }
19 |
20 | const url = `https://fonts.googleapis.com/css2?${Object.keys(params)
21 | .map((key) => `${key}=${params[key]}`)
22 | .join('&')}`;
23 |
24 | const res = await fetch(`${url}`, {
25 | headers: {
26 | // construct user agent to get TTF font
27 | 'User-Agent':
28 | 'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1'
29 | }
30 | });
31 |
32 | const body = await res.text();
33 | // Get the font URL from the CSS text
34 | const fontUrl = body.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)?.[1];
35 |
36 | if (!fontUrl) {
37 | throw new Error('Could not find font URL');
38 | }
39 |
40 | return fetch(fontUrl).then((res) => res.arrayBuffer());
41 | }
42 |
--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | export {ImageResponse} from "./api.js"
2 | export type {ImageResponseOptions, ComponentOptions} from "./types.js"
3 |
--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
1 | import type { SatoriOptions } from 'satori/wasm';
2 |
3 | export interface ImageResponseOptions {
4 | width?: number;
5 | height?: number;
6 | // emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji',
7 | fonts?: SatoriOptions['fonts'];
8 | debug?: boolean;
9 |
10 | // Options that will be passed to the HTTP response
11 | status?: number;
12 | statusText?: string;
13 | headers?: Record;
14 |
15 | // Format
16 | format?: 'svg' | 'png'; // Defaults to 'png'
17 | }
18 |
19 | export type ComponentOptions = {
20 | props?: Record;
21 | style?: string;
22 | };
--------------------------------------------------------------------------------
/src/routes/+server.ts:
--------------------------------------------------------------------------------
1 | import type {RequestHandler} from "@sveltejs/kit";
2 | import {ImageResponse} from "$lib";
3 |
4 | export const GET: RequestHandler = async () => {
5 | const html = 'hello, world
';
6 | return new ImageResponse(html)
7 | };
8 |
--------------------------------------------------------------------------------
/src/routes/sc/+server.ts:
--------------------------------------------------------------------------------
1 | import type {RequestHandler} from "@sveltejs/kit";
2 | import {ImageResponse} from "$lib/api.js";
3 | import OG from "./OG.svelte";
4 |
5 | export const GET: RequestHandler = async () => {
6 | return new ImageResponse(
7 | OG as any,
8 | {},
9 | { props: {
10 | text: 'Ready to dive in?', spanText: 'Start your free trial today.'
11 | }
12 | }
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/src/routes/sc/OG.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 | {text}
10 | {spanText}
11 |
12 |
13 |
29 |
30 |