LukeParke/sveltekit-og
1
0
Fork 0
mirror of https://github.com/LukeHagar/sveltekit-og.git synced 2025-12-06 12:47:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

v3 initialized

Browse Source
This commit is contained in:
Shivam Meena
2023-12-13 22:39:41 +05:30
parent a62b831fa6
commit d4663f8123
61 changed files with 296 additions and 3778 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -10,3 +10,5 @@ node_modules
vite.config.js.timestamp-* vite.config.js.timestamp-*
vite.config.ts.timestamp-* vite.config.ts.timestamp-*
.idea .idea
.vercel
.netlify

13
examples/cf-page-build/.eslintignore
View File

@@ -1,13 +0,0 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

15
examples/cf-page-build/.eslintrc.cjs
View File

@@ -1,15 +0,0 @@
module.exports = {
root: true,
extends: ['eslint:recommended', 'prettier'],
plugins: ['svelte3'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020
},
env: {
browser: true,
es2017: true,
node: true
}
};

8
examples/cf-page-build/.gitignore vendored
View File

@@ -1,8 +0,0 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example

1
examples/cf-page-build/.npmrc
View File

@@ -1 +0,0 @@
engine-strict=true

13
examples/cf-page-build/.prettierignore
View File

@@ -1,13 +0,0 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

9
examples/cf-page-build/.prettierrc
View File

@@ -1,9 +0,0 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

38
examples/cf-page-build/README.md
View File

@@ -1,38 +0,0 @@
# create-svelte
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

29
examples/cf-page-build/package.json
View File

@@ -1,29 +0,0 @@
{
"name": "examples",
"version": "0.0.2",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"build:prod": "cd ../.. && npm install && npm build && cd examples/cf-pages-build && npm install && npm build",
"preview": "vite preview",
"test": "playwright test",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"@ethercorps/sveltekit-og": "^2.0.2",
"@playwright/test": "^1.38.1",
"@sveltejs/adapter-cloudflare": "^2.3.3",
"@sveltejs/kit": "^1.25.1",
"eslint": "^8.50.0",
"eslint-config-prettier": "^8.10.0",
"eslint-plugin-svelte": "^2.34.0",
"prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.10.1",
"svelte": "^4.2.1",
"url": "^0.11.3",
"vite": "^4.4.10"
},
"type": "module"
}

9
examples/cf-page-build/playwright.config.js
View File

@@ -1,9 +0,0 @@
/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
webServer: {
command: 'npm run build && npm run preview',
port: 4173
}
};
export default config;

1733
examples/cf-page-build/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

12
examples/cf-page-build/src/app.html
View File

@@ -1,12 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body>
<div>%sveltekit.body%</div>
</body>
</html>

25
examples/cf-page-build/src/routes/+server.ts
View File

@@ -1,25 +0,0 @@
import { ImageResponse } from '@ethercorps/sveltekit-og';
import type { RequestHandler } from '@sveltejs/kit';
const template = `
<div tw="bg-gray-50 flex w-full h-full items-center justify-center">
<div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
<h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
<span>Ready to dive in?</span>
<span tw="text-indigo-600">Start your free trial today.</span>
</h2>
<div tw="mt-8 flex md:mt-0">
<div tw="flex rounded-md shadow">
<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>
</div>
<div tw="ml-3 flex rounded-md shadow">
<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>
</div>
</div>
</div>
</div>
`;
export const GET: RequestHandler = async () => {
return ImageResponse(template);
};

10
examples/cf-page-build/src/routes/cog/+server.ts
View File

@@ -1,10 +0,0 @@
import OG from './OG.svelte';
import type { RequestHandler } from '@sveltejs/kit';
import { componentToImageResponse } from '@ethercorps/sveltekit-og';
export const GET: RequestHandler = async () => {
return componentToImageResponse(
OG,
{ text: 'Ready to dive in?', spanText: 'Start your free trial today.' }
);
};

29
examples/cf-page-build/src/routes/cog/OG.svelte
View File

@@ -1,29 +0,0 @@
<script>
export let text;
export let spanText;
</script>
<div tw="bg-gray-50 flex w-full h-full items-center justify-center">
<div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
<h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
<span>{text}</span>
<span tw="text-indigo-600">{spanText}</span>
</h2>
<div tw="mt-8 flex md:mt-0">
<div tw="flex rounded-md shadow">
<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
>
</div>
<div tw="ml-3 flex rounded-md shadow">
<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
>
</div>
</div>
</div>
</div>

BIN
examples/cf-page-build/static/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
examples/cf-page-build/static/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

13
examples/cf-page-build/svelte.config.js
View File

@@ -1,13 +0,0 @@
import adapter from '@sveltejs/adapter-cloudflare';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
prerender: {
crawl: true
}
}
};
export default config;

6
examples/cf-page-build/tests/test.js
View File

@@ -1,6 +0,0 @@
import { expect, test } from '@playwright/test';
test('index page has expected h1', async ({ page }) => {
await page.goto('/');
expect(await page.textContent('h1')).toBe('Welcome to SvelteKit');
});

7
examples/cf-page-build/vite.config.js
View File

@@ -1,7 +0,0 @@
import { sveltekit } from '@sveltejs/kit/vite';
const config = {
plugins: [sveltekit()]
};
export default config;

13
examples/cf-workers-build/.eslintignore
View File

@@ -1,13 +0,0 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

15
examples/cf-workers-build/.eslintrc.cjs
View File

@@ -1,15 +0,0 @@
module.exports = {
root: true,
extends: ['eslint:recommended', 'prettier'],
plugins: ['svelte3'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020
},
env: {
browser: true,
es2017: true,
node: true
}
};

9
examples/cf-workers-build/.gitignore vendored
View File

@@ -1,9 +0,0 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
/.cloudflare

1
examples/cf-workers-build/.npmrc
View File

@@ -1 +0,0 @@
engine-strict=true

13
examples/cf-workers-build/.prettierignore
View File

@@ -1,13 +0,0 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

9
examples/cf-workers-build/.prettierrc
View File

@@ -1,9 +0,0 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

38
examples/cf-workers-build/README.md
View File

@@ -1,38 +0,0 @@
# create-svelte
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

29
examples/cf-workers-build/package.json
View File

@@ -1,29 +0,0 @@
{
"name": "examples",
"version": "0.0.2",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"test": "playwright test",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"@ethercorps/sveltekit-og": "link:../..",
"@playwright/test": "^1.37.1",
"@sveltejs/adapter-cloudflare-workers": "^1.1.4",
"@sveltejs/adapter-static": "^2.0.3",
"@sveltejs/kit": "^1.24.0",
"eslint": "^8.48.0",
"eslint-config-prettier": "^8.10.0",
"eslint-plugin-svelte3": "^4.0.0",
"prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.10.1",
"svelte": "^3.59.2",
"url": "^0.11.1",
"vite": "^4.4.9"
},
"type": "module"
}

9
examples/cf-workers-build/playwright.config.js
View File

@@ -1,9 +0,0 @@
/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
webServer: {
command: 'npm run build && npm run preview',
port: 4173
}
};
export default config;

1358
examples/cf-workers-build/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

15
examples/cf-workers-build/src/app.html
View File

@@ -1,15 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body>
<div>%sveltekit.body%</div>
</body>
<script>
var global = global || window;
</script>
</html>

37
examples/cf-workers-build/src/routes/+server.ts
View File

@@ -1,37 +0,0 @@
import { ImageResponse } from '@ethercorps/sveltekit-og';
import type { RequestHandler } from '@sveltejs/kit';
const template = `
<div tw="bg-gray-50 flex w-full h-full items-center justify-center">
<div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
<h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
<span>Ready to dive in?</span>
<span tw="text-indigo-600">Start your free trial today.</span>
</h2>
<div tw="mt-8 flex md:mt-0">
<div tw="flex rounded-md shadow">
<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>
</div>
<div tw="ml-3 flex rounded-md shadow">
<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>
</div>
</div>
</div>
</div>
`;
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 ImageResponse(template, {
height: 400,
width: 800,
fonts: [
{
name: 'Inter',
data: fontData,
weight: 400
}
]
});
};

24
examples/cf-workers-build/src/routes/cog/+server.ts
View File

@@ -1,24 +0,0 @@
import OG from './OG.svelte';
import type { RequestHandler } from '@sveltejs/kit';
import { componentToImageResponse } from '@ethercorps/sveltekit-og';
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 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
}
]
}
);
};

29
examples/cf-workers-build/src/routes/cog/OG.svelte
View File

@@ -1,29 +0,0 @@
<script>
export let text;
export let spanText;
</script>
<div tw="bg-gray-50 flex w-full h-full items-center justify-center">
<div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
<h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
<span>{text}</span>
<span tw="text-indigo-600">{spanText}</span>
</h2>
<div tw="mt-8 flex md:mt-0">
<div tw="flex rounded-md shadow">
<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
>
</div>
<div tw="ml-3 flex rounded-md shadow">
<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
>
</div>
</div>
</div>
</div>

BIN
examples/cf-workers-build/static/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
examples/cf-workers-build/static/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

10
examples/cf-workers-build/svelte.config.js
View File

@@ -1,10 +0,0 @@
import adapter from '@sveltejs/adapter-cloudflare-workers';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter()
}
};
export default config;

6
examples/cf-workers-build/tests/test.js
View File

@@ -1,6 +0,0 @@
import { expect, test } from '@playwright/test';
test('index page has expected h1', async ({ page }) => {
await page.goto('/');
expect(await page.textContent('h1')).toBe('Welcome to SvelteKit');
});

7
examples/cf-workers-build/vite.config.js
View File

@@ -1,7 +0,0 @@
import { sveltekit } from '@sveltejs/kit/vite';
const config = {
plugins: [sveltekit()]
};
export default config;

12
examples/cf-workers-build/wrangler.toml
View File

@@ -1,12 +0,0 @@
name = "test-sk-og"
account_id = "394fea48b28fa3f0d4751e6a12240570"
main = "./.cloudflare/worker.js"
site.bucket = "./.cloudflare/public"
build.command = "pnpm run build"
compatibility_date = "2023-06-05"
compatibility_flags = [ "nodejs_compat" ]
workers_dev = true

6
examples/netlify-build/package.json
View File

@@ -11,7 +11,6 @@
"format": "prettier --plugin-search-dir . --write ." "format": "prettier --plugin-search-dir . --write ."
}, },
"devDependencies": { "devDependencies": {
"@ethercorps/sveltekit-og": "link:../../package",
"@playwright/test": "^1.34.3", "@playwright/test": "^1.34.3",
"@sveltejs/adapter-netlify": "^2.0.7", "@sveltejs/adapter-netlify": "^2.0.7",
"@sveltejs/kit": "^1.20.2", "@sveltejs/kit": "^1.20.2",
@@ -23,5 +22,8 @@
"svelte": "^3.59.1", "svelte": "^3.59.1",
"vite": "^4.3.9" "vite": "^4.3.9"
}, },
"type": "module" "type": "module",
"dependencies": {
"@ethercorps/sveltekit-og": "link:../../"
}
} }

10
examples/netlify-build/pnpm-lock.yaml generated
View File

@@ -1,13 +1,15 @@
lockfileVersion: '6.1' lockfileVersion: '6.0'
settings: settings:
autoInstallPeers: true autoInstallPeers: true
excludeLinksFromLockfile: false excludeLinksFromLockfile: false
devDependencies: dependencies:
'@ethercorps/sveltekit-og': '@ethercorps/sveltekit-og':
specifier: link:../../package specifier: link:../../
version: link:../../package version: link:../..
devDependencies:
'@playwright/test': '@playwright/test':
specifier: ^1.34.3 specifier: ^1.34.3
version: 1.34.3 version: 1.34.3

10
examples/netlify-build/src/routes/+server.ts
View File

@@ -19,11 +19,13 @@ const template = `
</div> </div>
</div> </div>
`; `;
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 () => { export const GET: RequestHandler = async ({fetch}) => {
return ImageResponse(template, {
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
return new ImageResponse(template, {
height: 400, height: 400,
width: 800, width: 800,
fonts: [ fonts: [

15
examples/netlify-build/src/routes/cog/+server.ts
View File

@@ -1,14 +1,14 @@
import OG from './OG.svelte'; import OG from './OG.svelte';
import type { RequestHandler } from '@sveltejs/kit'; import type { RequestHandler } from '@sveltejs/kit';
import { componentToImageResponse } from '@ethercorps/sveltekit-og'; import { ImageResponse } from '@ethercorps/sveltekit-og';
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff'); export const GET: RequestHandler = async ({fetch}) => {
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
export const GET: RequestHandler = async () => { const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff');
return componentToImageResponse( const fontData: ArrayBuffer = await fontFile.arrayBuffer();
return new ImageResponse(
OG, OG,
{ text: 'Ready to dive in?', spanText: 'Start your free trial today.' },
{ {
height: 250, height: 250,
width: 500, width: 500,
@@ -19,6 +19,7 @@ export const GET: RequestHandler = async () => {
weight: 700 weight: 700
} }
] ]
} },
{ text: 'Ready to dive in?', spanText: 'Start your free trial today.' }
); );
}; };

6
examples/node-build/package.json
View File

@@ -11,7 +11,6 @@
"format": "prettier --plugin-search-dir . --write ." "format": "prettier --plugin-search-dir . --write ."
}, },
"devDependencies": { "devDependencies": {
"@ethercorps/sveltekit-og": "link:../../package",
"@playwright/test": "^1.35.0", "@playwright/test": "^1.35.0",
"@sveltejs/adapter-node": "^1.2.4", "@sveltejs/adapter-node": "^1.2.4",
"@sveltejs/kit": "^1.20.2", "@sveltejs/kit": "^1.20.2",
@@ -23,5 +22,8 @@
"svelte": "^3.59.1", "svelte": "^3.59.1",
"vite": "^4.3.9" "vite": "^4.3.9"
}, },
"type": "module" "type": "module",
"dependencies": {
"@ethercorps/sveltekit-og": "link:../../"
}
} }

10
examples/node-build/pnpm-lock.yaml generated
View File

@@ -1,13 +1,15 @@
lockfileVersion: '6.1' lockfileVersion: '6.0'
settings: settings:
autoInstallPeers: true autoInstallPeers: true
excludeLinksFromLockfile: false excludeLinksFromLockfile: false
devDependencies: dependencies:
'@ethercorps/sveltekit-og': '@ethercorps/sveltekit-og':
specifier: link:../../package specifier: link:../../
version: link:../../package version: link:../..
devDependencies:
'@playwright/test': '@playwright/test':
specifier: ^1.35.0 specifier: ^1.35.0
version: 1.35.0 version: 1.35.0

10
examples/node-build/src/routes/+server.ts
View File

@@ -19,11 +19,13 @@ const template = `
</div> </div>
</div> </div>
`; `;
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 () => { export const GET: RequestHandler = async ({fetch}) => {
return ImageResponse(template, {
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
return new ImageResponse(template, {
height: 400, height: 400,
width: 800, width: 800,
fonts: [ fonts: [

16
examples/node-build/src/routes/cog/+server.ts
View File

@@ -1,14 +1,15 @@
import OG from './OG.svelte'; import OG from './OG.svelte';
import type { RequestHandler } from '@sveltejs/kit'; import type { RequestHandler } from '@sveltejs/kit';
import { componentToImageResponse } from '@ethercorps/sveltekit-og'; import { ImageResponse } from '@ethercorps/sveltekit-og';
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff'); export const GET: RequestHandler = async ({fetch}) => {
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
export const GET: RequestHandler = async () => { const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff');
return componentToImageResponse( const fontData: ArrayBuffer = await fontFile.arrayBuffer();
return new ImageResponse(
OG, OG,
{ text: 'Ready to dive in?', spanText: 'Start your free trial today.' },
{ {
height: 250, height: 250,
width: 500, width: 500,
@@ -19,6 +20,7 @@ export const GET: RequestHandler = async () => {
weight: 700 weight: 700
} }
] ]
} },
{ text: 'Ready to dive in?', spanText: 'Start your free trial today.' },
); );
}; };

6
examples/vercel-build/package.json
View File

@@ -11,7 +11,6 @@
"format": "prettier --plugin-search-dir . --write ." "format": "prettier --plugin-search-dir . --write ."
}, },
"devDependencies": { "devDependencies": {
"@ethercorps/sveltekit-og": "link:../../",
"@playwright/test": "^1.34.3", "@playwright/test": "^1.34.3",
"@sveltejs/adapter-vercel": "^2.4.3", "@sveltejs/adapter-vercel": "^2.4.3",
"@sveltejs/kit": "^1.20.2", "@sveltejs/kit": "^1.20.2",
@@ -23,5 +22,8 @@
"svelte": "^3.59.1", "svelte": "^3.59.1",
"vite": "^4.3.9" "vite": "^4.3.9"
}, },
"type": "module" "type": "module",
"dependencies": {
"@ethercorps/sveltekit-og": "link:../../"
}
} }

4
examples/vercel-build/pnpm-lock.yaml generated
View File

@@ -4,10 +4,12 @@ settings:
autoInstallPeers: true autoInstallPeers: true
excludeLinksFromLockfile: false excludeLinksFromLockfile: false
devDependencies: dependencies:
'@ethercorps/sveltekit-og': '@ethercorps/sveltekit-og':
specifier: link:../../ specifier: link:../../
version: link:../.. version: link:../..
devDependencies:
'@playwright/test': '@playwright/test':
specifier: ^1.34.3 specifier: ^1.34.3
version: 1.34.3 version: 1.34.3

10
examples/vercel-build/src/routes/+server.ts
View File

@@ -19,11 +19,13 @@ const template = `
</div> </div>
</div> </div>
`; `;
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 () => { export const GET: RequestHandler = async ({fetch}) => {
return ImageResponse(template, {
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
return new ImageResponse(template, {
height: 400, height: 400,
width: 800, width: 800,
fonts: [ fonts: [

16
examples/vercel-build/src/routes/cog/+server.ts
View File

@@ -1,15 +1,16 @@
import OG from './OG.svelte'; import OG from './OG.svelte';
import type { RequestHandler } from '@sveltejs/kit'; import type { RequestHandler } from '@sveltejs/kit';
import { componentToImageResponse } from '@ethercorps/sveltekit-og'; import { ImageResponse } from '@ethercorps/sveltekit-og';
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff'); export const GET: RequestHandler = async ({fetch}) => {
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
export const GET: RequestHandler = async () => { const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff');
return componentToImageResponse( const fontData: ArrayBuffer = await fontFile.arrayBuffer();
console.log(typeof OG)
return new ImageResponse(
OG, OG,
{ text: 'Ready to dive in?', spanText: 'Start your free trial today.' },
{ {
debug: true,
height: 250, height: 250,
width: 500, width: 500,
fonts: [ fonts: [
@@ -19,6 +20,7 @@ export const GET: RequestHandler = async () => {
weight: 700 weight: 700
} }
] ]
} },
{ text: 'Ready to dive in?', spanText: 'Start your free trial today.' }
); );
}; };

9
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@ethercorps/sveltekit-og", "name": "@ethercorps/sveltekit-og",
"version": "2.0.2", "version": "3.0.0",
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
"build": "vite build && npm run package", "build": "vite build && npm run package",
@@ -33,6 +33,7 @@
"@sveltejs/package": "^2.0.0", "@sveltejs/package": "^2.0.0",
"@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0", "@typescript-eslint/parser": "^5.45.0",
"css-tree": "^2.3.1",
"eslint": "^8.28.0", "eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0", "eslint-plugin-svelte": "^2.30.0",
@@ -51,10 +52,8 @@
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@ethercorps/svelte-h2j": "^0.1.0", "@ethercorps/svelte-h2j": "^0.1.0",
"@resvg/resvg-wasm": "^2.6.0", "@resvg/resvg-js": "^2.6.0",
"@vercel/og": "^0.5.17",
"satori": "^0.10.11", "satori": "^0.10.11",
"satori-html": "^0.3.2", "vite-plugin-wasm": "^3.2.2"
"yoga-wasm-web": "^0.3.3"
} }
} }

200
pnpm-lock.yaml generated
View File

@@ -8,18 +8,21 @@ dependencies:
'@ethercorps/svelte-h2j': '@ethercorps/svelte-h2j':
specifier: ^0.1.0 specifier: ^0.1.0
version: 0.1.0(svelte@4.2.1) version: 0.1.0(svelte@4.2.1)
'@resvg/resvg-js':
specifier: ^2.6.0
version: 2.6.0
'@resvg/resvg-wasm': '@resvg/resvg-wasm':
specifier: ^2.6.0 specifier: ^2.6.0
version: 2.6.0 version: 2.6.0
'@vercel/og':
specifier: ^0.5.17
version: 0.5.17
satori: satori:
specifier: ^0.10.11 specifier: ^0.10.11
version: 0.10.11 version: 0.10.11
satori-html: satori-html:
specifier: ^0.3.2 specifier: ^0.3.2
version: 0.3.2 version: 0.3.2
vite-plugin-wasm:
specifier: ^3.2.2
version: 3.2.2(vite@4.4.9)
yoga-wasm-web: yoga-wasm-web:
specifier: ^0.3.3 specifier: ^0.3.3
version: 0.3.3 version: 0.3.3
@@ -40,6 +43,9 @@ devDependencies:
'@typescript-eslint/parser': '@typescript-eslint/parser':
specifier: ^5.45.0 specifier: ^5.45.0
version: 5.62.0(eslint@8.50.0)(typescript@5.2.2) version: 5.62.0(eslint@8.50.0)(typescript@5.2.2)
css-tree:
specifier: ^2.3.1
version: 2.3.1
eslint: eslint:
specifier: ^8.28.0 specifier: ^8.28.0
version: 8.50.0 version: 8.50.0
@@ -97,7 +103,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [android] os: [android]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/android-arm@0.18.20: /@esbuild/android-arm@0.18.20:
@@ -106,7 +111,6 @@ packages:
cpu: [arm] cpu: [arm]
os: [android] os: [android]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/android-x64@0.18.20: /@esbuild/android-x64@0.18.20:
@@ -115,7 +119,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [android] os: [android]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/darwin-arm64@0.18.20: /@esbuild/darwin-arm64@0.18.20:
@@ -124,7 +127,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/darwin-x64@0.18.20: /@esbuild/darwin-x64@0.18.20:
@@ -133,7 +135,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/freebsd-arm64@0.18.20: /@esbuild/freebsd-arm64@0.18.20:
@@ -142,7 +143,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [freebsd] os: [freebsd]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/freebsd-x64@0.18.20: /@esbuild/freebsd-x64@0.18.20:
@@ -151,7 +151,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [freebsd] os: [freebsd]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-arm64@0.18.20: /@esbuild/linux-arm64@0.18.20:
@@ -160,7 +159,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-arm@0.18.20: /@esbuild/linux-arm@0.18.20:
@@ -169,7 +167,6 @@ packages:
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-ia32@0.18.20: /@esbuild/linux-ia32@0.18.20:
@@ -178,7 +175,6 @@ packages:
cpu: [ia32] cpu: [ia32]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-loong64@0.18.20: /@esbuild/linux-loong64@0.18.20:
@@ -187,7 +183,6 @@ packages:
cpu: [loong64] cpu: [loong64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-mips64el@0.18.20: /@esbuild/linux-mips64el@0.18.20:
@@ -196,7 +191,6 @@ packages:
cpu: [mips64el] cpu: [mips64el]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-ppc64@0.18.20: /@esbuild/linux-ppc64@0.18.20:
@@ -205,7 +199,6 @@ packages:
cpu: [ppc64] cpu: [ppc64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-riscv64@0.18.20: /@esbuild/linux-riscv64@0.18.20:
@@ -214,7 +207,6 @@ packages:
cpu: [riscv64] cpu: [riscv64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-s390x@0.18.20: /@esbuild/linux-s390x@0.18.20:
@@ -223,7 +215,6 @@ packages:
cpu: [s390x] cpu: [s390x]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-x64@0.18.20: /@esbuild/linux-x64@0.18.20:
@@ -232,7 +223,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/netbsd-x64@0.18.20: /@esbuild/netbsd-x64@0.18.20:
@@ -241,7 +231,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [netbsd] os: [netbsd]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/openbsd-x64@0.18.20: /@esbuild/openbsd-x64@0.18.20:
@@ -250,7 +239,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [openbsd] os: [openbsd]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/sunos-x64@0.18.20: /@esbuild/sunos-x64@0.18.20:
@@ -259,7 +247,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [sunos] os: [sunos]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/win32-arm64@0.18.20: /@esbuild/win32-arm64@0.18.20:
@@ -268,7 +255,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/win32-ia32@0.18.20: /@esbuild/win32-ia32@0.18.20:
@@ -277,7 +263,6 @@ packages:
cpu: [ia32] cpu: [ia32]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/win32-x64@0.18.20: /@esbuild/win32-x64@0.18.20:
@@ -286,7 +271,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@eslint-community/eslint-utils@4.4.0(eslint@8.50.0): /@eslint-community/eslint-utils@4.4.0(eslint@8.50.0):
@@ -411,9 +395,130 @@ packages:
resolution: {integrity: sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==} resolution: {integrity: sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==}
dev: true dev: true
/@resvg/resvg-wasm@2.4.1: /@resvg/resvg-js-android-arm-eabi@2.6.0:
resolution: {integrity: sha512-yi6R0HyHtsoWTRA06Col4WoDs7SvlXU3DLMNP2bdAgs7HK18dTEVl1weXgxRzi8gwLteGUbIg29zulxIB3GSdg==} resolution: {integrity: sha512-lJnZ/2P5aMocrFMW7HWhVne5gH82I8xH6zsfH75MYr4+/JOaVcGCTEQ06XFohGMdYRP3v05SSPLPvTM/RHjxfA==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm]
os: [android]
requiresBuild: true
dev: false
optional: true
/@resvg/resvg-js-android-arm64@2.6.0:
resolution: {integrity: sha512-N527f529bjMwYWShZYfBD60dXA4Fux+D695QsHQ93BDYZSHUoOh1CUGUyICevnTxs7VgEl98XpArmUWBZQVMfQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [android]
requiresBuild: true
dev: false
optional: true
/@resvg/resvg-js-darwin-arm64@2.6.0:
resolution: {integrity: sha512-MabUKLVayEwlPo0mIqAmMt+qESN8LltCvv5+GLgVga1avpUrkxj/fkU1TKm8kQegutUjbP/B0QuMuUr0uhF8ew==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
requiresBuild: true
dev: false
optional: true
/@resvg/resvg-js-darwin-x64@2.6.0:
resolution: {integrity: sha512-zrFetdnSw/suXjmyxSjfDV7i61hahv6DDG6kM7BYN2yJ3Es5+BZtqYZTcIWogPJedYKmzN1YTMWGd/3f0ubFiA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
requiresBuild: true
dev: false
optional: true
/@resvg/resvg-js-linux-arm-gnueabihf@2.6.0:
resolution: {integrity: sha512-sH4gxXt7v7dGwjGyzLwn7SFGvwZG6DQqLaZ11MmzbCwd9Zosy1TnmrMJfn6TJ7RHezmQMgBPi18bl55FZ1AT4A==}
engines: {node: '>= 10'}
cpu: [arm]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@resvg/resvg-js-linux-arm64-gnu@2.6.0:
resolution: {integrity: sha512-fCyMncqCJtrlANADIduYF4IfnWQ295UKib7DAxFXQhBsM9PLDTpizr0qemZcCNadcwSVHnAIzL4tliZhCM8P6A==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@resvg/resvg-js-linux-arm64-musl@2.6.0:
resolution: {integrity: sha512-ouLjTgBQHQyxLht4FdMPTvuY8xzJigM9EM2Tlu0llWkN1mKyTQrvYWi6TA6XnKdzDJHy7ZLpWpjZi7F5+Pg+Vg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@resvg/resvg-js-linux-x64-gnu@2.6.0:
resolution: {integrity: sha512-n3zC8DWsvxC1AwxpKFclIPapDFibs5XdIRoV/mcIlxlh0vseW1F49b97F33BtJQRmlntsqqN6GMMqx8byB7B+Q==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@resvg/resvg-js-linux-x64-musl@2.6.0:
resolution: {integrity: sha512-n4tasK1HOlAxdTEROgYA1aCfsEKk0UOFDNd/AQTTZlTmCbHKXPq+O8npaaKlwXquxlVK8vrkcWbksbiGqbCAcw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@resvg/resvg-js-win32-arm64-msvc@2.6.0:
resolution: {integrity: sha512-X2+EoBJFwDI5LDVb51Sk7ldnVLitMGr9WwU/i21i3fAeAXZb3hM16k67DeTy16OYkT2dk/RfU1tP1wG+rWbz2Q==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
requiresBuild: true
dev: false
optional: true
/@resvg/resvg-js-win32-ia32-msvc@2.6.0:
resolution: {integrity: sha512-L7oevWjQoUgK5W1fCKn0euSVemhDXVhrjtwqpc7MwBKKimYeiOshO1Li1pa8bBt5PESahenhWgdB6lav9O0fEg==}
engines: {node: '>= 10'}
cpu: [ia32]
os: [win32]
requiresBuild: true
dev: false
optional: true
/@resvg/resvg-js-win32-x64-msvc@2.6.0:
resolution: {integrity: sha512-8lJlghb+Unki5AyKgsnFbRJwkEj9r1NpwyuBG8yEJiG1W9eEGl03R3I7bsVa3haof/3J1NlWf0rzSa1G++A2iw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
requiresBuild: true
dev: false
optional: true
/@resvg/resvg-js@2.6.0:
resolution: {integrity: sha512-Tf3YpbBKcQn991KKcw/vg7vZf98v01seSv6CVxZBbRkL/xyjnoYB6KgrFL6zskT1A4dWC/vg77KyNOW+ePaNlA==}
engines: {node: '>= 10'}
optionalDependencies:
'@resvg/resvg-js-android-arm-eabi': 2.6.0
'@resvg/resvg-js-android-arm64': 2.6.0
'@resvg/resvg-js-darwin-arm64': 2.6.0
'@resvg/resvg-js-darwin-x64': 2.6.0
'@resvg/resvg-js-linux-arm-gnueabihf': 2.6.0
'@resvg/resvg-js-linux-arm64-gnu': 2.6.0
'@resvg/resvg-js-linux-arm64-musl': 2.6.0
'@resvg/resvg-js-linux-x64-gnu': 2.6.0
'@resvg/resvg-js-linux-x64-musl': 2.6.0
'@resvg/resvg-js-win32-arm64-msvc': 2.6.0
'@resvg/resvg-js-win32-ia32-msvc': 2.6.0
'@resvg/resvg-js-win32-x64-msvc': 2.6.0
dev: false dev: false
/@resvg/resvg-wasm@2.6.0: /@resvg/resvg-wasm@2.6.0:
@@ -547,7 +652,6 @@ packages:
/@types/node@20.7.1: /@types/node@20.7.1:
resolution: {integrity: sha512-LT+OIXpp2kj4E2S/p91BMe+VgGX2+lfO+XTpfXhh+bCk2LkQtHZSub8ewFBMGP5ClysPjTDFa4sMI8Q3n4T0wg==} resolution: {integrity: sha512-LT+OIXpp2kj4E2S/p91BMe+VgGX2+lfO+XTpfXhh+bCk2LkQtHZSub8ewFBMGP5ClysPjTDFa4sMI8Q3n4T0wg==}
dev: true
/@types/pug@2.0.7: /@types/pug@2.0.7:
resolution: {integrity: sha512-I469DU0UXNC1aHepwirWhu9YKg5fkxohZD95Ey/5A7lovC+Siu+MCLffva87lnfThaOrw9Vb1DUN5t55oULAAw==} resolution: {integrity: sha512-I469DU0UXNC1aHepwirWhu9YKg5fkxohZD95Ey/5A7lovC+Siu+MCLffva87lnfThaOrw9Vb1DUN5t55oULAAw==}
@@ -687,15 +791,6 @@ packages:
eslint-visitor-keys: 3.4.3 eslint-visitor-keys: 3.4.3
dev: true dev: true
/@vercel/og@0.5.17:
resolution: {integrity: sha512-/GOyUBq3MhB3ygbhTJoZ0cHvwlyKdt0g8f4npuj4mwFlp57S7j4XWwgtqILK3XdFf25esN9i77fInrDkeRJfgA==}
engines: {node: '>=16'}
dependencies:
'@resvg/resvg-wasm': 2.4.1
satori: 0.10.8
yoga-wasm-web: 0.3.3
dev: false
/@vitest/expect@0.34.5: /@vitest/expect@0.34.5:
resolution: {integrity: sha512-/3RBIV9XEH+nRpRMqDJBufKIOQaYUH2X6bt0rKSCW0MfKhXFLYsR5ivHifeajRSTsln0FwJbitxLKHSQz/Xwkw==} resolution: {integrity: sha512-/3RBIV9XEH+nRpRMqDJBufKIOQaYUH2X6bt0rKSCW0MfKhXFLYsR5ivHifeajRSTsln0FwJbitxLKHSQz/Xwkw==}
dependencies: dependencies:
@@ -1081,7 +1176,6 @@ packages:
'@esbuild/win32-arm64': 0.18.20 '@esbuild/win32-arm64': 0.18.20
'@esbuild/win32-ia32': 0.18.20 '@esbuild/win32-ia32': 0.18.20
'@esbuild/win32-x64': 0.18.20 '@esbuild/win32-x64': 0.18.20
dev: true
/escape-html@1.0.3: /escape-html@1.0.3:
resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==} resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
@@ -1320,7 +1414,6 @@ packages:
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin] os: [darwin]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/get-func-name@2.0.2: /get-func-name@2.0.2:
@@ -1673,7 +1766,6 @@ packages:
resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true hasBin: true
dev: true
/natural-compare-lite@1.4.0: /natural-compare-lite@1.4.0:
resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==} resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
@@ -1819,7 +1911,6 @@ packages:
/picocolors@1.0.0: /picocolors@1.0.0:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
dev: true
/picomatch@2.3.1: /picomatch@2.3.1:
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -1888,7 +1979,6 @@ packages:
nanoid: 3.3.6 nanoid: 3.3.6
picocolors: 1.0.0 picocolors: 1.0.0
source-map-js: 1.0.2 source-map-js: 1.0.2
dev: true
/prelude-ls@1.2.1: /prelude-ls@1.2.1:
resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -1980,7 +2070,6 @@ packages:
hasBin: true hasBin: true
optionalDependencies: optionalDependencies:
fsevents: 2.3.3 fsevents: 2.3.3
dev: true
/run-parallel@1.2.0: /run-parallel@1.2.0:
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@@ -2026,22 +2115,6 @@ packages:
yoga-wasm-web: 0.3.3 yoga-wasm-web: 0.3.3
dev: false dev: false
/satori@0.10.8:
resolution: {integrity: sha512-WlPLxgpx5kIyMuOO6qi98DhZGIbRk5XJRqENkt6D6gyDBWGyo3M5kcSl0X/oSFHUH+n4unlzwMejoPM47s4zug==}
engines: {node: '>=16'}
dependencies:
'@shuding/opentype.js': 1.4.0-beta.0
css-background-parser: 0.1.0
css-box-shadow: 1.0.0-3
css-to-react-native: 3.2.0
emoji-regex: 10.2.1
escape-html: 1.0.3
linebreak: 1.1.0
parse-css-color: 0.2.1
postcss-value-parser: 4.2.0
yoga-wasm-web: 0.3.3
dev: false
/semver@7.5.4: /semver@7.5.4:
resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==} resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
engines: {node: '>=10'} engines: {node: '>=10'}
@@ -2414,6 +2487,14 @@ packages:
- terser - terser
dev: true dev: true
/vite-plugin-wasm@3.2.2(vite@4.4.9):
resolution: {integrity: sha512-cdbBUNR850AEoMd5nvLmnyeq63CSfoP1ctD/L2vLk/5+wsgAPlAVAzUK5nGKWO/jtehNlrSSHLteN+gFQw7VOA==}
peerDependencies:
vite: ^2 || ^3 || ^4
dependencies:
vite: 4.4.9(@types/node@20.7.1)
dev: false
/vite@4.4.9(@types/node@20.7.1): /vite@4.4.9(@types/node@20.7.1):
resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==} resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
engines: {node: ^14.18.0 || >=16.0.0} engines: {node: ^14.18.0 || >=16.0.0}
@@ -2448,7 +2529,6 @@ packages:
rollup: 3.29.4 rollup: 3.29.4
optionalDependencies: optionalDependencies:
fsevents: 2.3.3 fsevents: 2.3.3
dev: true
/vitefu@0.2.4(vite@4.4.9): /vitefu@0.2.4(vite@4.4.9):
resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==} resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}

125
src/lib/api.ts
View File

@@ -1,24 +1,80 @@
import satori, { init } from 'satori/wasm'; import satori from 'satori';
import initYoga from 'yoga-wasm-web'; import { Resvg } from '@resvg/resvg-js';
import { Resvg, initWasm } from '@resvg/resvg-wasm';
import { loadGoogleFont } from './font.js'; import { loadGoogleFont } from './font.js';
import type { ImageResponseOptions } from './types.js'; import type { ImageResponseOptions } from './types.js';
import {toReactElement, svelteComponentToJsx} from "@ethercorps/svelte-h2j" import {toReactElement, svelteComponentToJsx} from "@ethercorps/svelte-h2j"
import {ImageResponse as IR} from "@vercel/og"
import type {SvelteComponent} from "svelte"; import type {SvelteComponent} from "svelte";
export const ImageResponse = async (htmlTemplate: string, options?: ImageResponseOptions) => { export const og = async ( element: string | SvelteComponent, options: ImageResponseOptions, props = {}) => {
const reactVNode = toReactElement(`${htmlTemplate}`);
console.log(reactVNode); const reactElement = typeof element === 'string' ? toReactElement(element) : svelteComponentToJsx(element, props);
return new IR(reactVNode, options)
// render the React element-like object into an SVG
const svg = await satori(reactElement, {
width: options.width || 1200,
height: options.height || 630,
fonts: options.fonts?.length
? options.fonts
: [
{
name: 'Bitter',
data: await loadGoogleFont({ family: 'Bitter', weight: 600 }),
weight: 500,
style: 'normal'
}
]
});
const requestedFormat = options.format || 'png';
if (requestedFormat === 'svg') {
return svg;
}
// convert the SVG into a PNG
const opts = {
// background: "rgba(238, 235, 230, .9)",
fitTo: {
mode: 'width' as const,
value: options.width || 1200
},
font: {
loadSystemFonts: false // It will be faster to disable loading system fonts.
}
};
const resvg = new Resvg(svg, opts);
const pngData = resvg.render();
const pngBuffer = pngData.asPng();
return pngBuffer;
}; };
export const componentToImageResponse = async (component: SvelteComponent, props: Record<string, any>, options?: ImageResponseOptions) => { export class ImageResponse extends Response {
const ssrSvelte = component.render(props); constructor(element: string | SvelteComponent, options: ImageResponseOptions = {} , props= {}) {
console.log(ssrSvelte); super();
return ImageResponse(`${ssrSvelte.html}<style>${ssrSvelte.css.code}</style>`, options)
}; const body = new ReadableStream({
async start(controller) {
const buffer = await og( element, options, props);
controller.enqueue(buffer);
controller.close();
}
});
return new Response(body, {
headers: {
'Content-Type': 'image/png',
'Cache-Control': options.debug
? 'no-cache, no-store'
: 'public, immutable, no-transform, max-age=31536000',
...options.headers
},
status: options.status || 200,
statusText: options.statusText
});
}
}
declare const apis: { declare const apis: {
twemoji: (code: any) => string; twemoji: (code: any) => string;
@@ -41,44 +97,3 @@ interface FontOptions {
style?: Style$1; style?: Style$1;
lang?: string; lang?: string;
} }
// export declare type ImageResponseOptions = ImageOptions & ConstructorParameters<typeof Response>[1];
// declare type ImageOptions = {
// /**
// * The width of the image.
// *
// * @type {number}
// * @default 1200
// */
// width?: number;
// /**
// * The height of the image.
// *
// * @type {number}
// * @default 630
// */
// height?: number;
// /**
// * Display debug information on the image.
// *
// * @type {boolean}
// * @default false
// */
// debug?: boolean;
// /**
// * A list of fonts to use.
// *
// * @type {{ data: ArrayBuffer; name: string; weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; style?: 'normal' | 'italic' }[]}
// * @default Noto Sans Latin Regular.
// */
// fonts?: FontOptions[];
// /**
// * Using a specific Emoji style. Defaults to `twemoji`.
// *
// * @link https://github.com/vercel/og#emoji
// * @type {EmojiType}
// * @default 'twemoji'
// */
// emoji?: EmojiType;
// };

2
src/lib/index.ts
View File

@@ -1,2 +1,2 @@
export {componentToImageResponse, ImageResponse} from "./api.js" export {ImageResponse} from "./api.js"
export type {ImageResponseOptions} from "./types.js" export type {ImageResponseOptions} from "./types.js"

BIN
src/lib/vendors/resvg.wasm vendored Normal file
View File

Binary file not shown.

BIN
src/lib/vendors/yoga.wasm vendored Normal file
View File

Binary file not shown.

2
src/routes/+server.ts
View File

@@ -3,5 +3,5 @@ import {ImageResponse} from "$lib";
export const GET: RequestHandler = async () => { export const GET: RequestHandler = async () => {
const html = '<div style="color: black; background: aqua; height: 100vh;">hello, world</div>'; const html = '<div style="color: black; background: aqua; height: 100vh;">hello, world</div>';
return ImageResponse(html) return new ImageResponse(html)
}; };

7
src/routes/sc/+server.ts
View File

@@ -1,10 +1,11 @@
import type {RequestHandler} from "@sveltejs/kit"; import type {RequestHandler} from "@sveltejs/kit";
import {componentToImageResponse} from "$lib"; import {ImageResponse} from "$lib/api.js";
import OG from "./OG.svelte"; import OG from "./OG.svelte";
export const GET: RequestHandler = async () => { export const GET: RequestHandler = async () => {
return await componentToImageResponse( return new ImageResponse(
OG, OG as any,
{},
{ text: 'Ready to dive in?', spanText: 'Start your free trial today.' } { text: 'Ready to dive in?', spanText: 'Start your free trial today.' }
); );
}; };

4
vite.config.ts
View File

@@ -1,8 +1,10 @@
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config'; import { defineConfig } from 'vitest/config';
import wasm from "vite-plugin-wasm";
import {vitePluginSvelteKitOG} from "@ethercorps/svelte-h2j/vite"
export default defineConfig({ export default defineConfig({
plugins: [sveltekit()], plugins: [vitePluginSvelteKitOG(), sveltekit(), wasm()],
test: { test: {
include: ['src/**/*.{test,spec}.{js,ts}'] include: ['src/**/*.{test,spec}.{js,ts}']
} }