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

Merge pull request #39 from etherCorps/og-for-all

Browse Source 
remove wasm
This commit is contained in:
Shivam Meena
2024-01-15 08:38:51 +05:30
committed by GitHub
parent 90be2298f1 325bda83a4
commit e5c5e5b88b
62 changed files with 753 additions and 4146 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

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

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

11
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';
export const GET: RequestHandler = async ({fetch}) => {
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff'); const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff');
const fontData: ArrayBuffer = await fontFile.arrayBuffer(); const fontData: ArrayBuffer = await fontFile.arrayBuffer();
export const GET: RequestHandler = async () => { return new ImageResponse(
return componentToImageResponse(
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.' }
); );
}; };

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

@@ -11,9 +11,8 @@
"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.3.1",
"@sveltejs/kit": "^1.20.2", "@sveltejs/kit": "^1.20.2",
"eslint": "^8.42.0", "eslint": "^8.42.0",
"eslint-config-prettier": "^8.8.0", "eslint-config-prettier": "^8.8.0",
@@ -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:../.."
}
} }

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

@@ -1,19 +1,21 @@
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
'@sveltejs/adapter-node': '@sveltejs/adapter-node':
specifier: ^1.2.4 specifier: ^1.3.1
version: 1.2.4(@sveltejs/kit@1.20.2) version: 1.3.1(@sveltejs/kit@1.20.2)
'@sveltejs/kit': '@sveltejs/kit':
specifier: ^1.20.2 specifier: ^1.20.2
version: 1.20.2(svelte@3.59.1)(vite@4.3.9) version: 1.20.2(svelte@3.59.1)(vite@4.3.9)
@@ -336,11 +338,11 @@ packages:
resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==} resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
dev: true dev: true
/@rollup/plugin-commonjs@24.1.0(rollup@3.24.0): /@rollup/plugin-commonjs@25.0.7(rollup@3.24.0):
resolution: {integrity: sha512-eSL45hjhCWI0jCCXcNtLVqM5N1JlBGvlFfY0m6oOYnLCJ6N0qEXoZql4sY2MOUArzhH4SA/qBpTxvvZp2Sc+DQ==} resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==}
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}
peerDependencies: peerDependencies:
rollup: ^2.68.0||^3.0.0 rollup: ^2.68.0||^3.0.0||^4.0.0
peerDependenciesMeta: peerDependenciesMeta:
rollup: rollup:
optional: true optional: true
@@ -350,7 +352,7 @@ packages:
estree-walker: 2.0.2 estree-walker: 2.0.2
glob: 8.1.0 glob: 8.1.0
is-reference: 1.2.1 is-reference: 1.2.1
magic-string: 0.27.0 magic-string: 0.30.5
rollup: 3.24.0 rollup: 3.24.0
dev: true dev: true
@@ -400,12 +402,12 @@ packages:
rollup: 3.24.0 rollup: 3.24.0
dev: true dev: true
/@sveltejs/adapter-node@1.2.4(@sveltejs/kit@1.20.2): /@sveltejs/adapter-node@1.3.1(@sveltejs/kit@1.20.2):
resolution: {integrity: sha512-TNnhS+OKRZ9RKnC+ho5mlE2FJquI61i0v7yOXxBUSU3LAoYH2kwVVL8P8ecjefmZ8BOfM1V54pBnDODBU5CEaA==} resolution: {integrity: sha512-A0VgRQDCDPzdLNoiAbcOxGw4zT1Mc+n1LwT1OmO350R7WxrEqdMUChPPOd1iMfIDWlP4ie6E2d/WQf5es2d4Zw==}
peerDependencies: peerDependencies:
'@sveltejs/kit': ^1.0.0 '@sveltejs/kit': ^1.0.0
dependencies: dependencies:
'@rollup/plugin-commonjs': 24.1.0(rollup@3.24.0) '@rollup/plugin-commonjs': 25.0.7(rollup@3.24.0)
'@rollup/plugin-json': 6.0.0(rollup@3.24.0) '@rollup/plugin-json': 6.0.0(rollup@3.24.0)
'@rollup/plugin-node-resolve': 15.1.0(rollup@3.24.0) '@rollup/plugin-node-resolve': 15.1.0(rollup@3.24.0)
'@sveltejs/kit': 1.20.2(svelte@3.59.1)(vite@4.3.9) '@sveltejs/kit': 1.20.2(svelte@3.59.1)(vite@4.3.9)
@@ -1027,15 +1029,15 @@ packages:
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
dev: true dev: true
/magic-string@0.27.0: /magic-string@0.30.0:
resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==} resolution: {integrity: sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==}
engines: {node: '>=12'} engines: {node: '>=12'}
dependencies: dependencies:
'@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/sourcemap-codec': 1.4.15
dev: true dev: true
/magic-string@0.30.0: /magic-string@0.30.5:
resolution: {integrity: sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==} resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
engines: {node: '>=12'} engines: {node: '>=12'}
dependencies: dependencies:
'@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/sourcemap-codec': 1.4.15

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

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

12
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';
export const GET: RequestHandler = async ({fetch}) => {
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff'); const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff');
const fontData: ArrayBuffer = await fontFile.arrayBuffer(); const fontData: ArrayBuffer = await fontFile.arrayBuffer();
export const GET: RequestHandler = async () => {
return componentToImageResponse( 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

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

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

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

@@ -1,15 +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';
export const GET: RequestHandler = async ({fetch}) => {
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff'); const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff');
const fontData: ArrayBuffer = await fontFile.arrayBuffer(); const fontData: ArrayBuffer = await fontFile.arrayBuffer();
return new ImageResponse(
export const GET: RequestHandler = async () => {
return componentToImageResponse(
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 +19,7 @@ export const GET: RequestHandler = async () => {
weight: 700 weight: 700
} }
] ]
} },
{ text: 'Ready to dive in?', spanText: 'Start your free trial today.' }
); );
}; };

43
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",
@@ -16,7 +16,8 @@
"exports": { "exports": {
".": { ".": {
"types": "./dist/index.d.ts", "types": "./dist/index.d.ts",
"svelte": "./dist/index.js" "svelte": "./dist/index.js",
"import": "./dist/index.js"
} }
}, },
"files": [ "files": [
@@ -28,29 +29,31 @@
"svelte": "^4.0.0" "svelte": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-auto": "^2.1.1",
"@sveltejs/kit": "^1.20.4", "@sveltejs/kit": "^1.30.3",
"@sveltejs/package": "^2.0.0", "@sveltejs/package": "^2.2.5",
"@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.45.0", "@typescript-eslint/parser": "^5.62.0",
"eslint": "^8.28.0", "css-tree": "^2.3.1",
"eslint-config-prettier": "^8.5.0", "eslint": "^8.56.0",
"eslint-plugin-svelte": "^2.30.0", "eslint-config-prettier": "^8.10.0",
"prettier": "^2.8.0", "eslint-plugin-svelte": "^2.35.1",
"prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.10.1", "prettier-plugin-svelte": "^2.10.1",
"publint": "^0.1.9", "publint": "^0.1.16",
"svelte": "^4.0.5", "svelte": "^4.2.8",
"svelte-check": "^3.4.3", "svelte-check": "^3.6.3",
"tslib": "^2.4.1", "tslib": "^2.6.2",
"typescript": "^5.0.0", "typescript": "^5.3.3",
"vite": "^4.4.2", "vite": "^4.5.1",
"vitest": "^0.34.0" "vitest": "^0.34.6"
}, },
"svelte": "./dist/index.js", "svelte": "./dist/index.js",
"types": "./dist/index.d.ts", "types": "./dist/index.d.ts",
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@vercel/og": "^0.5.17", "@ethercorps/svelte-h2j": "^0.1.0",
"satori-html": "^0.3.2" "@resvg/resvg-js": "^2.6.0",
"satori": "^0.10.11"
} }
} }

905
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

125
src/lib/api.ts
View File

@@ -1,18 +1,80 @@
import { html } from "satori-html"; import satori from 'satori';
import {ImageResponse as IR} from "@vercel/og" import { Resvg } from '@resvg/resvg-js';
import { loadGoogleFont } from './font.js';
import type { ImageResponseOptions } from './types.js';
import {toReactElement, svelteComponentToJsx} from "@ethercorps/svelte-h2j"
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 = html(`${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;
@@ -35,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;
};

41
src/lib/font.ts Normal file
View File

@@ -0,0 +1,41 @@
export async function loadGoogleFont({
family,
weight,
text
}: {
family: string;
weight?: number;
text?: string;
}) {
const params: Record<string, string> = {
family: `${encodeURIComponent(family)}${weight ? `:wght@${weight}` : ''}`
};
if (text) {
params.text = text;
} else {
params.subset = 'latin';
}
const url = `https://fonts.googleapis.com/css2?${Object.keys(params)
.map((key) => `${key}=${params[key]}`)
.join('&')}`;
const res = await fetch(`${url}`, {
headers: {
// construct user agent to get TTF font
'User-Agent':
'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'
}
});
const body = await res.text();
// Get the font URL from the CSS text
const fontUrl = body.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)?.[1];
if (!fontUrl) {
throw new Error('Could not find font URL');
}
return fetch(fontUrl).then((res) => res.arrayBuffer());
}

3
src/lib/index.ts
View File

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

17
src/lib/types.ts Normal file
View File

@@ -0,0 +1,17 @@
import type { SatoriOptions } from 'satori/wasm';
export interface ImageResponseOptions {
width?: number;
height?: number;
// emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji',
fonts?: SatoriOptions['fonts'];
debug?: boolean;
// Options that will be passed to the HTTP response
status?: number;
statusText?: string;
headers?: Record<string, string>;
// Format
format?: 'svg' | 'png'; // Defaults to 'png'
}

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.' }
); );
}; };

1
src/routes/sc/OG.svelte
View File

@@ -9,6 +9,7 @@
<span>{text}</span> <span>{text}</span>
<span tw="text-indigo-600">{spanText}</span> <span tw="text-indigo-600">{spanText}</span>
</h2> </h2>
<div tw="mt-8 flex md:mt-0"> <div tw="mt-8 flex md:mt-0">
<div tw="flex rounded-md shadow"> <div tw="flex rounded-md shadow">
<a <a

3
vite.config.ts
View File

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