feat: added svelte component render for og-images

This commit is contained in:
Bart van der Braak 2024-01-19 01:49:35 +01:00
parent 1be9ad4668
commit 3bb7737625
10 changed files with 239 additions and 236 deletions

1
.gitignore vendored
View file

@ -8,3 +8,4 @@ node_modules
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
.vercel

View file

@ -14,23 +14,23 @@
"prepare": "npx husky install && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
},
"devDependencies": {
"@sveltejs/adapter-vercel": "^4.0.4",
"@sveltejs/adapter-vercel": "^4.0.5",
"@sveltejs/enhanced-img": "^0.1.8",
"@sveltejs/kit": "^2.3.2",
"@sveltejs/kit": "^2.3.4",
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"@typescript-eslint/eslint-plugin": "^6.18.1",
"@typescript-eslint/parser": "^6.18.1",
"autoprefixer": "^10.4.16",
"@typescript-eslint/eslint-plugin": "^6.19.0",
"@typescript-eslint/parser": "^6.19.0",
"autoprefixer": "^10.4.17",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
"lint-staged": "^15.2.0",
"postcss": "^8.4.33",
"postcss-load-config": "^5.0.2",
"prettier": "^3.2.2",
"prettier": "^3.2.4",
"prettier-plugin-svelte": "^3.1.2",
"prettier-plugin-tailwindcss": "^0.5.11",
"svelte": "^4.2.8",
"svelte": "^4.2.9",
"svelte-check": "^3.6.3",
"tailwindcss": "^3.4.1",
"tslib": "^2.6.2",
@ -38,15 +38,17 @@
"vite": "^5.0.11"
},
"dependencies": {
"@ethercorps/sveltekit-og": "^3.0.0",
"@resvg/resvg-js": "^2.6.0",
"@types/node": "^20.11.5",
"@vercel/analytics": "^1.1.1",
"@vercel/speed-insights": "^1.0.3",
"@vercel/speed-insights": "^1.0.4",
"bits-ui": "^0.14.0",
"clsx": "^2.1.0",
"lucide-svelte": "^0.311.0",
"mode-watcher": "^0.1.2",
"radix-icons-svelte": "^1.2.1",
"satori": "^0.10.11",
"satori-html": "^0.3.2",
"svelte-wrap-balancer": "^0.0.4",
"tailwind-merge": "^2.2.0",
"tailwind-variants": "^0.1.20"

View file

@ -5,9 +5,9 @@ settings:
excludeLinksFromLockfile: false
dependencies:
'@ethercorps/sveltekit-og':
specifier: ^3.0.0
version: 3.0.0(svelte@4.2.8)
'@resvg/resvg-js':
specifier: ^2.6.0
version: 2.6.0
'@types/node':
specifier: ^20.11.5
version: 20.11.5
@ -15,23 +15,29 @@ dependencies:
specifier: ^1.1.1
version: 1.1.1
'@vercel/speed-insights':
specifier: ^1.0.3
version: 1.0.3
specifier: ^1.0.4
version: 1.0.4
bits-ui:
specifier: ^0.14.0
version: 0.14.0(svelte@4.2.8)
version: 0.14.0(svelte@4.2.9)
clsx:
specifier: ^2.1.0
version: 2.1.0
lucide-svelte:
specifier: ^0.311.0
version: 0.311.0(svelte@4.2.8)
version: 0.311.0(svelte@4.2.9)
mode-watcher:
specifier: ^0.1.2
version: 0.1.2(svelte@4.2.8)
version: 0.1.2(svelte@4.2.9)
radix-icons-svelte:
specifier: ^1.2.1
version: 1.2.1
satori:
specifier: ^0.10.11
version: 0.10.11
satori-html:
specifier: ^0.3.2
version: 0.3.2
svelte-wrap-balancer:
specifier: ^0.0.4
version: 0.0.4
@ -44,26 +50,26 @@ dependencies:
devDependencies:
'@sveltejs/adapter-vercel':
specifier: ^4.0.4
version: 4.0.4(@sveltejs/kit@2.3.2)
specifier: ^4.0.5
version: 4.0.5(@sveltejs/kit@2.3.4)
'@sveltejs/enhanced-img':
specifier: ^0.1.8
version: 0.1.8(svelte@4.2.8)
version: 0.1.8(svelte@4.2.9)
'@sveltejs/kit':
specifier: ^2.3.2
version: 2.3.2(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11)
specifier: ^2.3.4
version: 2.3.4(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.9)(vite@5.0.11)
'@sveltejs/vite-plugin-svelte':
specifier: ^3.0.1
version: 3.0.1(svelte@4.2.8)(vite@5.0.11)
version: 3.0.1(svelte@4.2.9)(vite@5.0.11)
'@typescript-eslint/eslint-plugin':
specifier: ^6.18.1
version: 6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.3.3)
specifier: ^6.19.0
version: 6.19.0(@typescript-eslint/parser@6.19.0)(eslint@8.56.0)(typescript@5.3.3)
'@typescript-eslint/parser':
specifier: ^6.18.1
version: 6.18.1(eslint@8.56.0)(typescript@5.3.3)
specifier: ^6.19.0
version: 6.19.0(eslint@8.56.0)(typescript@5.3.3)
autoprefixer:
specifier: ^10.4.16
version: 10.4.16(postcss@8.4.33)
specifier: ^10.4.17
version: 10.4.17(postcss@8.4.33)
eslint:
specifier: ^8.56.0
version: 8.56.0
@ -72,7 +78,7 @@ devDependencies:
version: 9.1.0(eslint@8.56.0)
eslint-plugin-svelte:
specifier: ^2.35.1
version: 2.35.1(eslint@8.56.0)(svelte@4.2.8)
version: 2.35.1(eslint@8.56.0)(svelte@4.2.9)
lint-staged:
specifier: ^15.2.0
version: 15.2.0
@ -83,20 +89,20 @@ devDependencies:
specifier: ^5.0.2
version: 5.0.2(postcss@8.4.33)
prettier:
specifier: ^3.2.2
version: 3.2.2
specifier: ^3.2.4
version: 3.2.4
prettier-plugin-svelte:
specifier: ^3.1.2
version: 3.1.2(prettier@3.2.2)(svelte@4.2.8)
version: 3.1.2(prettier@3.2.4)(svelte@4.2.9)
prettier-plugin-tailwindcss:
specifier: ^0.5.11
version: 0.5.11(prettier-plugin-svelte@3.1.2)(prettier@3.2.2)
version: 0.5.11(prettier-plugin-svelte@3.1.2)(prettier@3.2.4)
svelte:
specifier: ^4.2.8
version: 4.2.8
specifier: ^4.2.9
version: 4.2.9
svelte-check:
specifier: ^3.6.3
version: 3.6.3(postcss-load-config@5.0.2)(postcss@8.4.33)(svelte@4.2.8)
version: 3.6.3(postcss-load-config@5.0.2)(postcss@8.4.33)(svelte@4.2.9)
tailwindcss:
specifier: ^3.4.1
version: 3.4.1
@ -387,25 +393,6 @@ packages:
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true
/@ethercorps/svelte-h2j@0.1.0(svelte@4.2.8):
resolution: {integrity: sha512-0cs5FgGgiJRgHr2paR3/49Fv/KsOjqbLEPbgZjJtdBiqUD3awZwgoK6ynwTA3zBq+KfHqAJjJU1XWbCwQMih3Q==}
peerDependencies:
svelte: ^4.0.0
dependencies:
svelte: 4.2.8
dev: false
/@ethercorps/sveltekit-og@3.0.0(svelte@4.2.8):
resolution: {integrity: sha512-CQRmcfCPnTEqP+EeHBE7wWp1sNxpBaT4Fb5Js5fGnWEgFFIDbJEEcFiT0Uwc1CteolXY+CyTOg7mokcOtu3d7w==}
peerDependencies:
svelte: ^4.0.0
dependencies:
'@ethercorps/svelte-h2j': 0.1.0(svelte@4.2.8)
'@resvg/resvg-js': 2.6.0
satori: 0.10.11
svelte: 4.2.8
dev: false
/@floating-ui/core@1.5.3:
resolution: {integrity: sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==}
dependencies:
@ -691,7 +678,7 @@ packages:
- supports-color
dev: true
/@melt-ui/svelte@0.68.0(svelte@4.2.8):
/@melt-ui/svelte@0.68.0(svelte@4.2.9):
resolution: {integrity: sha512-/QvA98hnYEodZtHJ71+ocum/WWp30hVNt3F8uiZKnNYwZDaiQYjlyR9AaGKYcZLCe6R68op1mfCzc0kTzJilyA==}
peerDependencies:
svelte: '>=3 <5'
@ -702,7 +689,7 @@ packages:
dequal: 2.0.3
focus-trap: 7.5.4
nanoid: 5.0.4
svelte: 4.2.8
svelte: 4.2.9
dev: false
/@nodelib/fs.scandir@2.1.5:
@ -994,12 +981,12 @@ packages:
string.prototype.codepointat: 0.2.1
dev: false
/@sveltejs/adapter-vercel@4.0.4(@sveltejs/kit@2.3.2):
resolution: {integrity: sha512-2MMThT6eROTqAGmx81Xv+tafhpetQfRUDIsboFiGgkFoaxcmoTzW4t9GyXZdMY8xl1YOdvAnZXcCgacYzmVWVw==}
/@sveltejs/adapter-vercel@4.0.5(@sveltejs/kit@2.3.4):
resolution: {integrity: sha512-SABZvRry8pUggFrBLbIi88dCH5gP3M0O/8HvvLjOTCwTVn3E8H1ppJ8ujhj8xNuoi4rm9JVy6qYSYp2EsgOugw==}
peerDependencies:
'@sveltejs/kit': ^2.0.0
dependencies:
'@sveltejs/kit': 2.3.2(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11)
'@sveltejs/kit': 2.3.4(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.9)(vite@5.0.11)
'@vercel/nft': 0.26.2
esbuild: 0.19.11
transitivePeerDependencies:
@ -1007,19 +994,19 @@ packages:
- supports-color
dev: true
/@sveltejs/enhanced-img@0.1.8(svelte@4.2.8):
/@sveltejs/enhanced-img@0.1.8(svelte@4.2.9):
resolution: {integrity: sha512-0cLVR9KiO0/t3VVm64OM7bPHTkdaT2aaz1rwoAhao+EBXR3vMvLoYXLHvz8o9/552PSV8G844RkH7qkGc3YAiQ==}
dependencies:
magic-string: 0.30.5
svelte-parse-markup: 0.1.2(svelte@4.2.8)
svelte-parse-markup: 0.1.2(svelte@4.2.9)
vite-imagetools: 6.2.9
transitivePeerDependencies:
- rollup
- svelte
dev: true
/@sveltejs/kit@2.3.2(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11):
resolution: {integrity: sha512-AzGWV1TyUSkBuciy06E5NegXndIEgTthDtllv80qynEJFh8bZD62ZxLajiQLOsKGqRDilEQyshDARQxjIqiaqg==}
/@sveltejs/kit@2.3.4(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.9)(vite@5.0.11):
resolution: {integrity: sha512-Q4rXMMLSv38IeiVJhA3M0M0t6M8zNXsjj2xhUkWlxhkKu+cRqOL/vyFTuJ+5aiQlmMzCGq1yqFnHoc6R0NZ7gQ==}
engines: {node: '>=18.13'}
hasBin: true
requiresBuild: true
@ -1028,7 +1015,7 @@ packages:
svelte: ^4.0.0 || ^5.0.0-next.0
vite: ^5.0.3
dependencies:
'@sveltejs/vite-plugin-svelte': 3.0.1(svelte@4.2.8)(vite@5.0.11)
'@sveltejs/vite-plugin-svelte': 3.0.1(svelte@4.2.9)(vite@5.0.11)
'@types/cookie': 0.6.0
cookie: 0.6.0
devalue: 4.3.2
@ -1040,12 +1027,12 @@ packages:
sade: 1.8.1
set-cookie-parser: 2.6.0
sirv: 2.0.4
svelte: 4.2.8
svelte: 4.2.9
tiny-glob: 0.2.9
vite: 5.0.11(@types/node@20.11.5)
dev: true
/@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11):
/@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.9)(vite@5.0.11):
resolution: {integrity: sha512-gjr9ZFg1BSlIpfZ4PRewigrvYmHWbDrq2uvvPB1AmTWKuM+dI1JXQSUu2pIrYLb/QncyiIGkFDFKTwJ0XqQZZg==}
engines: {node: ^18.0.0 || >=20}
peerDependencies:
@ -1053,28 +1040,28 @@ packages:
svelte: ^4.0.0 || ^5.0.0-next.0
vite: ^5.0.0
dependencies:
'@sveltejs/vite-plugin-svelte': 3.0.1(svelte@4.2.8)(vite@5.0.11)
'@sveltejs/vite-plugin-svelte': 3.0.1(svelte@4.2.9)(vite@5.0.11)
debug: 4.3.4
svelte: 4.2.8
svelte: 4.2.9
vite: 5.0.11(@types/node@20.11.5)
transitivePeerDependencies:
- supports-color
dev: true
/@sveltejs/vite-plugin-svelte@3.0.1(svelte@4.2.8)(vite@5.0.11):
/@sveltejs/vite-plugin-svelte@3.0.1(svelte@4.2.9)(vite@5.0.11):
resolution: {integrity: sha512-CGURX6Ps+TkOovK6xV+Y2rn8JKa8ZPUHPZ/NKgCxAmgBrXReavzFl8aOSCj3kQ1xqT7yGJj53hjcV/gqwDAaWA==}
engines: {node: ^18.0.0 || >=20}
peerDependencies:
svelte: ^4.0.0 || ^5.0.0-next.0
vite: ^5.0.0
dependencies:
'@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11)
'@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.9)(vite@5.0.11)
debug: 4.3.4
deepmerge: 4.3.1
kleur: 4.1.5
magic-string: 0.30.5
svelte: 4.2.8
svelte-hmr: 0.15.3(svelte@4.2.8)
svelte: 4.2.9
svelte-hmr: 0.15.3(svelte@4.2.9)
vite: 5.0.11(@types/node@20.11.5)
vitefu: 0.2.5(vite@5.0.11)
transitivePeerDependencies:
@ -1111,8 +1098,8 @@ packages:
resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
dev: true
/@typescript-eslint/eslint-plugin@6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.3.3):
resolution: {integrity: sha512-nISDRYnnIpk7VCFrGcu1rnZfM1Dh9LRHnfgdkjcbi/l7g16VYRri3TjXi9Ir4lOZSw5N/gnV/3H7jIPQ8Q4daA==}
/@typescript-eslint/eslint-plugin@6.19.0(@typescript-eslint/parser@6.19.0)(eslint@8.56.0)(typescript@5.3.3):
resolution: {integrity: sha512-DUCUkQNklCQYnrBSSikjVChdc84/vMPDQSgJTHBZ64G9bA9w0Crc0rd2diujKbTdp6w2J47qkeHQLoi0rpLCdg==}
engines: {node: ^16.0.0 || >=18.0.0}
peerDependencies:
'@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
@ -1123,11 +1110,11 @@ packages:
optional: true
dependencies:
'@eslint-community/regexpp': 4.10.0
'@typescript-eslint/parser': 6.18.1(eslint@8.56.0)(typescript@5.3.3)
'@typescript-eslint/scope-manager': 6.18.1
'@typescript-eslint/type-utils': 6.18.1(eslint@8.56.0)(typescript@5.3.3)
'@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@5.3.3)
'@typescript-eslint/visitor-keys': 6.18.1
'@typescript-eslint/parser': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
'@typescript-eslint/scope-manager': 6.19.0
'@typescript-eslint/type-utils': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
'@typescript-eslint/utils': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
'@typescript-eslint/visitor-keys': 6.19.0
debug: 4.3.4
eslint: 8.56.0
graphemer: 1.4.0
@ -1140,8 +1127,8 @@ packages:
- supports-color
dev: true
/@typescript-eslint/parser@6.18.1(eslint@8.56.0)(typescript@5.3.3):
resolution: {integrity: sha512-zct/MdJnVaRRNy9e84XnVtRv9Vf91/qqe+hZJtKanjojud4wAVy/7lXxJmMyX6X6J+xc6c//YEWvpeif8cAhWA==}
/@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3):
resolution: {integrity: sha512-1DyBLG5SH7PYCd00QlroiW60YJ4rWMuUGa/JBV0iZuqi4l4IK3twKPq5ZkEebmGqRjXWVgsUzfd3+nZveewgow==}
engines: {node: ^16.0.0 || >=18.0.0}
peerDependencies:
eslint: ^7.0.0 || ^8.0.0
@ -1150,10 +1137,10 @@ packages:
typescript:
optional: true
dependencies:
'@typescript-eslint/scope-manager': 6.18.1
'@typescript-eslint/types': 6.18.1
'@typescript-eslint/typescript-estree': 6.18.1(typescript@5.3.3)
'@typescript-eslint/visitor-keys': 6.18.1
'@typescript-eslint/scope-manager': 6.19.0
'@typescript-eslint/types': 6.19.0
'@typescript-eslint/typescript-estree': 6.19.0(typescript@5.3.3)
'@typescript-eslint/visitor-keys': 6.19.0
debug: 4.3.4
eslint: 8.56.0
typescript: 5.3.3
@ -1161,16 +1148,16 @@ packages:
- supports-color
dev: true
/@typescript-eslint/scope-manager@6.18.1:
resolution: {integrity: sha512-BgdBwXPFmZzaZUuw6wKiHKIovms97a7eTImjkXCZE04TGHysG+0hDQPmygyvgtkoB/aOQwSM/nWv3LzrOIQOBw==}
/@typescript-eslint/scope-manager@6.19.0:
resolution: {integrity: sha512-dO1XMhV2ehBI6QN8Ufi7I10wmUovmLU0Oru3n5LVlM2JuzB4M+dVphCPLkVpKvGij2j/pHBWuJ9piuXx+BhzxQ==}
engines: {node: ^16.0.0 || >=18.0.0}
dependencies:
'@typescript-eslint/types': 6.18.1
'@typescript-eslint/visitor-keys': 6.18.1
'@typescript-eslint/types': 6.19.0
'@typescript-eslint/visitor-keys': 6.19.0
dev: true
/@typescript-eslint/type-utils@6.18.1(eslint@8.56.0)(typescript@5.3.3):
resolution: {integrity: sha512-wyOSKhuzHeU/5pcRDP2G2Ndci+4g653V43gXTpt4nbyoIOAASkGDA9JIAgbQCdCkcr1MvpSYWzxTz0olCn8+/Q==}
/@typescript-eslint/type-utils@6.19.0(eslint@8.56.0)(typescript@5.3.3):
resolution: {integrity: sha512-mcvS6WSWbjiSxKCwBcXtOM5pRkPQ6kcDds/juxcy/727IQr3xMEcwr/YLHW2A2+Fp5ql6khjbKBzOyjuPqGi/w==}
engines: {node: ^16.0.0 || >=18.0.0}
peerDependencies:
eslint: ^7.0.0 || ^8.0.0
@ -1179,8 +1166,8 @@ packages:
typescript:
optional: true
dependencies:
'@typescript-eslint/typescript-estree': 6.18.1(typescript@5.3.3)
'@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@5.3.3)
'@typescript-eslint/typescript-estree': 6.19.0(typescript@5.3.3)
'@typescript-eslint/utils': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
debug: 4.3.4
eslint: 8.56.0
ts-api-utils: 1.0.3(typescript@5.3.3)
@ -1189,13 +1176,13 @@ packages:
- supports-color
dev: true
/@typescript-eslint/types@6.18.1:
resolution: {integrity: sha512-4TuMAe+tc5oA7wwfqMtB0Y5OrREPF1GeJBAjqwgZh1lEMH5PJQgWgHGfYufVB51LtjD+peZylmeyxUXPfENLCw==}
/@typescript-eslint/types@6.19.0:
resolution: {integrity: sha512-lFviGV/vYhOy3m8BJ/nAKoAyNhInTdXpftonhWle66XHAtT1ouBlkjL496b5H5hb8dWXHwtypTqgtb/DEa+j5A==}
engines: {node: ^16.0.0 || >=18.0.0}
dev: true
/@typescript-eslint/typescript-estree@6.18.1(typescript@5.3.3):
resolution: {integrity: sha512-fv9B94UAhywPRhUeeV/v+3SBDvcPiLxRZJw/xZeeGgRLQZ6rLMG+8krrJUyIf6s1ecWTzlsbp0rlw7n9sjufHA==}
/@typescript-eslint/typescript-estree@6.19.0(typescript@5.3.3):
resolution: {integrity: sha512-o/zefXIbbLBZ8YJ51NlkSAt2BamrK6XOmuxSR3hynMIzzyMY33KuJ9vuMdFSXW+H0tVvdF9qBPTHA91HDb4BIQ==}
engines: {node: ^16.0.0 || >=18.0.0}
peerDependencies:
typescript: '*'
@ -1203,8 +1190,8 @@ packages:
typescript:
optional: true
dependencies:
'@typescript-eslint/types': 6.18.1
'@typescript-eslint/visitor-keys': 6.18.1
'@typescript-eslint/types': 6.19.0
'@typescript-eslint/visitor-keys': 6.19.0
debug: 4.3.4
globby: 11.1.0
is-glob: 4.0.3
@ -1216,8 +1203,8 @@ packages:
- supports-color
dev: true
/@typescript-eslint/utils@6.18.1(eslint@8.56.0)(typescript@5.3.3):
resolution: {integrity: sha512-zZmTuVZvD1wpoceHvoQpOiewmWu3uP9FuTWo8vqpy2ffsmfCE8mklRPi+vmnIYAIk9t/4kOThri2QCDgor+OpQ==}
/@typescript-eslint/utils@6.19.0(eslint@8.56.0)(typescript@5.3.3):
resolution: {integrity: sha512-QR41YXySiuN++/dC9UArYOg4X86OAYP83OWTewpVx5ct1IZhjjgTLocj7QNxGhWoTqknsgpl7L+hGygCO+sdYw==}
engines: {node: ^16.0.0 || >=18.0.0}
peerDependencies:
eslint: ^7.0.0 || ^8.0.0
@ -1225,9 +1212,9 @@ packages:
'@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
'@types/json-schema': 7.0.15
'@types/semver': 7.5.6
'@typescript-eslint/scope-manager': 6.18.1
'@typescript-eslint/types': 6.18.1
'@typescript-eslint/typescript-estree': 6.18.1(typescript@5.3.3)
'@typescript-eslint/scope-manager': 6.19.0
'@typescript-eslint/types': 6.19.0
'@typescript-eslint/typescript-estree': 6.19.0(typescript@5.3.3)
eslint: 8.56.0
semver: 7.5.4
transitivePeerDependencies:
@ -1235,11 +1222,11 @@ packages:
- typescript
dev: true
/@typescript-eslint/visitor-keys@6.18.1:
resolution: {integrity: sha512-/kvt0C5lRqGoCfsbmm7/CwMqoSkY3zzHLIjdhHZQW3VFrnz7ATecOHR7nb7V+xn4286MBxfnQfQhAmCI0u+bJA==}
/@typescript-eslint/visitor-keys@6.19.0:
resolution: {integrity: sha512-hZaUCORLgubBvtGpp1JEFEazcuEdfxta9j4iUwdSAr7mEsYYAp3EAUyCZk3VEEqGj6W+AV4uWyrDGtrlawAsgQ==}
engines: {node: ^16.0.0 || >=18.0.0}
dependencies:
'@typescript-eslint/types': 6.18.1
'@typescript-eslint/types': 6.19.0
eslint-visitor-keys: 3.4.3
dev: true
@ -1275,8 +1262,8 @@ packages:
- supports-color
dev: true
/@vercel/speed-insights@1.0.3:
resolution: {integrity: sha512-bKIt0HDdF6hP2bJZyS+za3k6sKeAXNRLSIUbwVwvyvKdsHBWS6ILBvmD1wXHZZyTqjU1TP7dTE/F6lHM6rBdKA==}
/@vercel/speed-insights@1.0.4:
resolution: {integrity: sha512-Q7O0bnV11KUqNKAKA984YWIGxCjqgOuJdwH1cdItqlkUVTLbIm8BhObro6hJobGMSUHm+z7xjQ0YbC8ps1ekDg==}
requiresBuild: true
dev: false
@ -1391,15 +1378,15 @@ packages:
resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
dev: true
/autoprefixer@10.4.16(postcss@8.4.33):
resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
/autoprefixer@10.4.17(postcss@8.4.33):
resolution: {integrity: sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==}
engines: {node: ^10 || ^12 || >=14}
hasBin: true
peerDependencies:
postcss: ^8.1.0
dependencies:
browserslist: 4.22.2
caniuse-lite: 1.0.30001576
caniuse-lite: 1.0.30001578
fraction.js: 4.3.7
normalize-range: 0.1.2
picocolors: 1.0.0
@ -1407,8 +1394,8 @@ packages:
postcss-value-parser: 4.2.0
dev: true
/axobject-query@3.2.1:
resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
/axobject-query@4.0.0:
resolution: {integrity: sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==}
dependencies:
dequal: 2.0.3
@ -1430,15 +1417,15 @@ packages:
file-uri-to-path: 1.0.0
dev: true
/bits-ui@0.14.0(svelte@4.2.8):
/bits-ui@0.14.0(svelte@4.2.9):
resolution: {integrity: sha512-S1LNwp/Sge1Ro1g0iJ+msIUeJYmoNhXBFShnLDOUOKQe3JG1wd027KxZnVd7db6UWr1IqlJdd4/bbB7NYXeYDw==}
peerDependencies:
svelte: ^4.0.0
dependencies:
'@internationalized/date': 3.5.1
'@melt-ui/svelte': 0.68.0(svelte@4.2.8)
'@melt-ui/svelte': 0.68.0(svelte@4.2.9)
nanoid: 5.0.4
svelte: 4.2.8
svelte: 4.2.9
dev: false
/brace-expansion@1.1.11:
@ -1464,8 +1451,8 @@ packages:
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
hasBin: true
dependencies:
caniuse-lite: 1.0.30001576
electron-to-chromium: 1.4.630
caniuse-lite: 1.0.30001578
electron-to-chromium: 1.4.637
node-releases: 2.0.14
update-browserslist-db: 1.0.13(browserslist@4.22.2)
dev: true
@ -1487,8 +1474,8 @@ packages:
resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
dev: false
/caniuse-lite@1.0.30001576:
resolution: {integrity: sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==}
/caniuse-lite@1.0.30001578:
resolution: {integrity: sha512-J/jkFgsQ3NEl4w2lCoM9ZPxrD+FoBNJ7uJUpGVjIg/j0OwJosWM36EPDv+Yyi0V4twBk9pPmlFS+PLykgEvUmg==}
dev: true
/chalk@4.1.2:
@ -1714,8 +1701,8 @@ packages:
/eastasianwidth@0.2.0:
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
/electron-to-chromium@1.4.630:
resolution: {integrity: sha512-osHqhtjojpCsACVnuD11xO5g9xaCyw7Qqn/C2KParkMv42i8jrJJgx3g7mkHfpxwhy9MnOJr8+pKOdZ7qzgizg==}
/electron-to-chromium@1.4.637:
resolution: {integrity: sha512-G7j3UCOukFtxVO1vWrPQUoDk3kL70mtvjc/DC/k2o7lE0wAdq+Vwp1ipagOow+BH0uVztFysLWbkM/RTIrbK3w==}
dev: true
/emoji-regex@10.3.0:
@ -1794,7 +1781,7 @@ packages:
eslint: 8.56.0
dev: true
/eslint-plugin-svelte@2.35.1(eslint@8.56.0)(svelte@4.2.8):
/eslint-plugin-svelte@2.35.1(eslint@8.56.0)(svelte@4.2.9):
resolution: {integrity: sha512-IF8TpLnROSGy98Z3NrsKXWDSCbNY2ReHDcrYTuXZMbfX7VmESISR78TWgO9zdg4Dht1X8coub5jKwHzP0ExRug==}
engines: {node: ^14.17.0 || >=16.0.0}
peerDependencies:
@ -1816,8 +1803,8 @@ packages:
postcss-safe-parser: 6.0.0(postcss@8.4.33)
postcss-selector-parser: 6.0.15
semver: 7.5.4
svelte: 4.2.8
svelte-eslint-parser: 0.33.1(svelte@4.2.8)
svelte: 4.2.9
svelte-eslint-parser: 0.33.1(svelte@4.2.9)
transitivePeerDependencies:
- supports-color
- ts-node
@ -2426,12 +2413,12 @@ packages:
yallist: 4.0.0
dev: true
/lucide-svelte@0.311.0(svelte@4.2.8):
/lucide-svelte@0.311.0(svelte@4.2.9):
resolution: {integrity: sha512-uqdLXboPovTD4cG7Gxgc2gD+ITHoWByIBg2n+3pjMDBOLM7G2RNmsBtYnGkDTtYfGn1vhPRMq7u/erhn+yjzQQ==}
peerDependencies:
svelte: '>=3 <5'
dependencies:
svelte: 4.2.8
svelte: 4.2.9
dev: false
/magic-string@0.30.5:
@ -2533,12 +2520,12 @@ packages:
hasBin: true
dev: true
/mode-watcher@0.1.2(svelte@4.2.8):
/mode-watcher@0.1.2(svelte@4.2.9):
resolution: {integrity: sha512-XTdPCdqC3kqSvB+Q262Kor983YJkkB2Z3vj9uqg5IqKQpOdiz+xB99Jihp8sWbyM67drC7KKp0Nt5FzCypZi2g==}
peerDependencies:
svelte: ^4.0.0
dependencies:
svelte: 4.2.8
svelte: 4.2.9
dev: false
/mri@1.2.0:
@ -2885,17 +2872,17 @@ packages:
engines: {node: '>= 0.8.0'}
dev: true
/prettier-plugin-svelte@3.1.2(prettier@3.2.2)(svelte@4.2.8):
/prettier-plugin-svelte@3.1.2(prettier@3.2.4)(svelte@4.2.9):
resolution: {integrity: sha512-7xfMZtwgAWHMT0iZc8jN4o65zgbAQ3+O32V6W7pXrqNvKnHnkoyQCGCbKeUyXKZLbYE0YhFRnamfxfkEGxm8qA==}
peerDependencies:
prettier: ^3.0.0
svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
dependencies:
prettier: 3.2.2
svelte: 4.2.8
prettier: 3.2.4
svelte: 4.2.9
dev: true
/prettier-plugin-tailwindcss@0.5.11(prettier-plugin-svelte@3.1.2)(prettier@3.2.2):
/prettier-plugin-tailwindcss@0.5.11(prettier-plugin-svelte@3.1.2)(prettier@3.2.4):
resolution: {integrity: sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==}
engines: {node: '>=14.21.3'}
peerDependencies:
@ -2944,12 +2931,12 @@ packages:
prettier-plugin-twig-melody:
optional: true
dependencies:
prettier: 3.2.2
prettier-plugin-svelte: 3.1.2(prettier@3.2.2)(svelte@4.2.8)
prettier: 3.2.4
prettier-plugin-svelte: 3.1.2(prettier@3.2.4)(svelte@4.2.9)
dev: true
/prettier@3.2.2:
resolution: {integrity: sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A==}
/prettier@3.2.4:
resolution: {integrity: sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==}
engines: {node: '>=14'}
hasBin: true
dev: true
@ -3086,6 +3073,12 @@ packages:
rimraf: 2.7.1
dev: true
/satori-html@0.3.2:
resolution: {integrity: sha512-wjTh14iqADFKDK80e51/98MplTGfxz2RmIzh0GqShlf4a67+BooLywF17TvJPD6phO0Hxm7Mf1N5LtRYvdkYRA==}
dependencies:
ultrahtml: 1.5.2
dev: false
/satori@0.10.11:
resolution: {integrity: sha512-yLm1xPRPZUaKcBZJ6nmezoJjHB4MqV8x7Mu0PyZUJodRWRDD27UbeMwzuY9LEGG57WYLO4CQsGPlbHWV1Ex9TQ==}
engines: {node: '>=16'}
@ -3318,7 +3311,7 @@ packages:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'}
/svelte-check@3.6.3(postcss-load-config@5.0.2)(postcss@8.4.33)(svelte@4.2.8):
/svelte-check@3.6.3(postcss-load-config@5.0.2)(postcss@8.4.33)(svelte@4.2.9):
resolution: {integrity: sha512-Q2nGnoysxUnB9KjnjpQLZwdjK62DHyW6nuH/gm2qteFnDk0lCehe/6z8TsIvYeKjC6luKaWxiNGyOcWiLLPSwA==}
hasBin: true
peerDependencies:
@ -3330,8 +3323,8 @@ packages:
import-fresh: 3.3.0
picocolors: 1.0.0
sade: 1.8.1
svelte: 4.2.8
svelte-preprocess: 5.1.3(postcss-load-config@5.0.2)(postcss@8.4.33)(svelte@4.2.8)(typescript@5.3.3)
svelte: 4.2.9
svelte-preprocess: 5.1.3(postcss-load-config@5.0.2)(postcss@8.4.33)(svelte@4.2.9)(typescript@5.3.3)
typescript: 5.3.3
transitivePeerDependencies:
- '@babel/core'
@ -3345,7 +3338,7 @@ packages:
- sugarss
dev: true
/svelte-eslint-parser@0.33.1(svelte@4.2.8):
/svelte-eslint-parser@0.33.1(svelte@4.2.9):
resolution: {integrity: sha512-vo7xPGTlKBGdLH8T5L64FipvTrqv3OQRx9d2z5X05KKZDlF4rQk8KViZO4flKERY+5BiVdOh7zZ7JGJWo5P0uA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
@ -3359,27 +3352,27 @@ packages:
espree: 9.6.1
postcss: 8.4.33
postcss-scss: 4.0.9(postcss@8.4.33)
svelte: 4.2.8
svelte: 4.2.9
dev: true
/svelte-hmr@0.15.3(svelte@4.2.8):
/svelte-hmr@0.15.3(svelte@4.2.9):
resolution: {integrity: sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==}
engines: {node: ^12.20 || ^14.13.1 || >= 16}
peerDependencies:
svelte: ^3.19.0 || ^4.0.0
dependencies:
svelte: 4.2.8
svelte: 4.2.9
dev: true
/svelte-parse-markup@0.1.2(svelte@4.2.8):
/svelte-parse-markup@0.1.2(svelte@4.2.9):
resolution: {integrity: sha512-DycY7DJr7VqofiJ63ut1/NEG92HrWWL56VWITn/cJCu+LlZhMoBkBXT4opUitPEEwbq1nMQbv4vTKUfbOqIW1g==}
peerDependencies:
svelte: ^3.0.0 || ^4.0.0
dependencies:
svelte: 4.2.8
svelte: 4.2.9
dev: true
/svelte-preprocess@5.1.3(postcss-load-config@5.0.2)(postcss@8.4.33)(svelte@4.2.8)(typescript@5.3.3):
/svelte-preprocess@5.1.3(postcss-load-config@5.0.2)(postcss@8.4.33)(svelte@4.2.9)(typescript@5.3.3):
resolution: {integrity: sha512-xxAkmxGHT+J/GourS5mVJeOXZzne1FR5ljeOUAMXUkfEhkLEllRreXpbl3dIYJlcJRfL1LO1uIAPpBpBfiqGPw==}
engines: {node: '>= 16.0.0', pnpm: ^8.0.0}
requiresBuild: true
@ -3424,7 +3417,7 @@ packages:
postcss-load-config: 5.0.2(postcss@8.4.33)
sorcery: 0.11.0
strip-indent: 3.0.0
svelte: 4.2.8
svelte: 4.2.9
typescript: 5.3.3
dev: true
@ -3432,16 +3425,17 @@ packages:
resolution: {integrity: sha512-o+WbHrl426YLDUMgNWJ0yKImmecZ6rFI6WFsrMx7YgsgdaZjtJX0d373TbJ35lzeBqsnMvjdRptl12qE0Mbe9w==}
dev: false
/svelte@4.2.8:
resolution: {integrity: sha512-hU6dh1MPl8gh6klQZwK/n73GiAHiR95IkFsesLPbMeEZi36ydaXL/ZAb4g9sayT0MXzpxyZjR28yderJHxcmYA==}
/svelte@4.2.9:
resolution: {integrity: sha512-hsoB/WZGEPFXeRRLPhPrbRz67PhP6sqYgvwcAs+gWdSQSvNDw+/lTeUJSWe5h2xC97Fz/8QxAOqItwBzNJPU8w==}
engines: {node: '>=16'}
dependencies:
'@ampproject/remapping': 2.2.1
'@jridgewell/sourcemap-codec': 1.4.15
'@jridgewell/trace-mapping': 0.3.21
'@types/estree': 1.0.5
acorn: 8.11.3
aria-query: 5.3.0
axobject-query: 3.2.1
axobject-query: 4.0.0
code-red: 1.0.4
css-tree: 2.3.1
estree-walker: 3.0.3
@ -3595,6 +3589,10 @@ packages:
hasBin: true
dev: true
/ultrahtml@1.5.2:
resolution: {integrity: sha512-qh4mBffhlkiXwDAOxvSGxhL0QEQsTbnP9BozOK3OYPEGvPvdWzvAUaXNtUSMdNsKDtuyjEbyVUPFZ52SSLhLqw==}
dev: false
/undici-types@5.26.5:
resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}

Binary file not shown.

Binary file not shown.

BIN
src/lib/assets/og/me.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

View file

@ -1,19 +1,32 @@
<script lang="ts">
import { Icons } from '$lib/components/site';
import fs from 'fs';
import { Icons } from '.';
export let title: string = 'I made this for you';
export let subTitle: string =
'Featuring current work and studies in a SvelteKit-based portfolio.';
const buffer = fs.readFileSync('src/lib/assets/og/me.jpg');
const imageData = buffer.toString('base64');
</script>
<div class="flex h-full w-full items-center justify-center bg-black">
<div class="flex w-full flex-col justify-between p-8 px-4 py-12 md:flex-row md:items-center">
<h2 class="flex flex-col text-left text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="text-6xl text-white">{title}</span>
<span class="text-3xl text-gray-600">{subTitle}</span>
</h2>
<div class="mt-8 flex md:mt-0">
<Icons.logo></Icons.logo>
<div class="flex flex-row items-center rounded-lg p-4 shadow-md">
<div class="ml-10 flex w-7/12 flex-col">
<Icons.logo />
<h2 class="leading-tighter mb-0 text-6xl font-bold tracking-tighter text-white">{title}</h2>
<p class="mt-0 text-3xl font-thin text-gray-400">
{subTitle}
</p>
</div>
<div class="mt-0 flex w-5/12">
<img class="rounded-xl" src={`data:image/jpeg;base64,${imageData}`} width={400} alt="" />
</div>
</div>
</div>
<style>
h2 {
font-family: 'Geist Bold', 'geist-sans';
}
</style>

View file

@ -1,82 +1,51 @@
import { ImageResponse } from '@ethercorps/sveltekit-og';
import type { RequestHandler } from '@sveltejs/kit';
import { promises as fs } from 'fs';
import satori from 'satori';
import { Resvg } from '@resvg/resvg-js';
import { html as toReactNode } from 'satori-html';
import { OgImage } from '$lib/components/site';
import GeistRegular from '$lib/assets/og/Geist-Regular.woff';
import GeistBold from '$lib/assets/og/Geist-Bold.woff';
const fontPath = 'static/fonts/Geist/Geist-Bold.woff';
const template = `
<div tw="bg-black 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 tw="text-6xl text-white">I made this for you</span>
<span tw="text-3xl text-gray-600">Featuring current work and studies in a SvelteKit-based portfolio. </span>
</h2>
<div tw="mt-8 flex md:mt-0">
<svg width="177" height="28" viewBox="0 0 177 28">
<rect x="0.5" y="0.5" width="116.25" height="27" fill="white" stroke="black" />
<rect x="117.25" width="59.5" height="28" fill="black" />
<rect x="117.25" y="1.25" width="58.5" height="25.5" stroke="white" stroke-width="0.5" />
<path
d="M6.174 21C6.118 21 6.09 20.965 6.09 20.895L6.111 6.46798C6.111 6.41198 6.146 6.38398 6.216 6.38398H8.547C8.617 6.38398 8.652 6.41198 8.652 6.46798L8.631 12.18H11.781V6.46798C11.781 6.41198 11.809 6.38398 11.865 6.38398H14.196C14.266 6.38398 14.301 6.41198 14.301 6.46798L14.343 20.895C14.343 20.965 14.308 21 14.238 21H11.886C11.816 21 11.781 20.965 11.781 20.895V14.721H8.631V20.895C8.631 20.965 8.603 21 8.547 21H6.174Z"
fill="black"
/>
<path
d="M26.6408 21C26.5848 21 26.5568 20.965 26.5568 20.895L26.5778 6.46798C26.5778 6.41198 26.6058 6.38398 26.6618 6.38398H33.4028C33.4588 6.38398 33.4868 6.41898 33.4868 6.48898V8.84098C33.4868 8.89698 33.4588 8.92498 33.4028 8.92498H29.0978V12.201H33.4028C33.4588 12.201 33.4868 12.229 33.4868 12.285L33.5078 14.658C33.5078 14.714 33.4798 14.742 33.4238 14.742H29.0978V18.417H33.4238C33.4798 18.417 33.5078 18.452 33.5078 18.522V20.916C33.5078 20.972 33.4798 21 33.4238 21H26.6408Z"
fill="black"
/>
<path
d="M45.9592 21C45.9032 21 45.8752 20.965 45.8752 20.895L45.8962 6.48898C45.8962 6.41898 45.9312 6.38398 46.0012 6.38398H48.3322C48.4022 6.38398 48.4372 6.41898 48.4372 6.48898L48.4162 18.417H52.7422C52.8122 18.417 52.8472 18.452 52.8472 18.522V20.895C52.8472 20.965 52.8122 21 52.7422 21H45.9592Z"
fill="black"
/>
<path
d="M64.8058 21C64.7498 21 64.7218 20.965 64.7218 20.895L64.7428 6.48898C64.7428 6.41898 64.7778 6.38398 64.8478 6.38398H67.1788C67.2488 6.38398 67.2838 6.41898 67.2838 6.48898L67.2628 18.417H71.5888C71.6588 18.417 71.6938 18.452 71.6938 18.522V20.895C71.6938 20.965 71.6588 21 71.5888 21H64.8058Z"
fill="black"
/>
<path
d="M87.1664 21.21C86.4104 21.21 85.7174 21.021 85.0874 20.643C84.4714 20.251 83.9744 19.74 83.5964 19.11C83.2184 18.466 83.0294 17.759 83.0294 16.989L83.0504 10.332C83.0504 9.56198 83.2324 8.86198 83.5964 8.23198C83.9744 7.60198 84.4784 7.09798 85.1084 6.71998C85.7384 6.34198 86.4244 6.15298 87.1664 6.15298C87.9224 6.15298 88.6084 6.34198 89.2244 6.71998C89.8404 7.09798 90.3304 7.60198 90.6944 8.23198C91.0724 8.86198 91.2614 9.56198 91.2614 10.332L91.2824 16.989C91.2824 17.759 91.0934 18.466 90.7154 19.11C90.3514 19.74 89.8544 20.251 89.2244 20.643C88.6084 21.021 87.9224 21.21 87.1664 21.21ZM87.1664 18.669C87.5864 18.669 87.9504 18.501 88.2584 18.165C88.5804 17.815 88.7414 17.423 88.7414 16.989L88.7204 10.332C88.7204 9.86998 88.5734 9.47798 88.2794 9.15598C87.9854 8.83398 87.6144 8.67298 87.1664 8.67298C86.7324 8.67298 86.3614 8.83398 86.0534 9.15598C85.7454 9.46398 85.5914 9.85598 85.5914 10.332V16.989C85.5914 17.451 85.7454 17.85 86.0534 18.186C86.3614 18.508 86.7324 18.669 87.1664 18.669Z"
fill="black"
/>
<path
d="M103.463 21C103.407 21 103.379 20.965 103.379 20.895L103.421 6.46798C103.421 6.41198 103.449 6.38398 103.505 6.38398H107.537C108.335 6.38398 109.049 6.57998 109.679 6.97198C110.309 7.34998 110.806 7.85398 111.17 8.48398C111.534 9.11398 111.716 9.79998 111.716 10.542C111.716 11.144 111.576 11.704 111.296 12.222C111.03 12.74 110.708 13.16 110.33 13.482C110.736 13.888 111.051 14.357 111.275 14.889C111.499 15.421 111.611 15.981 111.611 16.569C111.611 17.381 111.415 18.123 111.023 18.795C110.631 19.467 110.099 20.006 109.427 20.412C108.769 20.804 108.034 21 107.222 21H103.463ZM105.941 12.18H107.537C108.027 12.18 108.419 12.012 108.713 11.676C109.021 11.326 109.175 10.948 109.175 10.542C109.175 10.094 109.014 9.70898 108.692 9.38698C108.37 9.05098 107.985 8.88298 107.537 8.88298H105.941V12.18ZM105.92 18.438H107.222C107.726 18.438 108.16 18.256 108.524 17.892C108.888 17.514 109.07 17.073 109.07 16.569C109.07 16.065 108.888 15.631 108.524 15.267C108.16 14.903 107.726 14.721 107.222 14.721H105.941L105.92 18.438Z"
fill="black"
/>
<path
d="M122.626 20.895L125.23 6.46803C125.244 6.41203 125.279 6.38403 125.335 6.38403H128.38C128.436 6.38403 128.471 6.41203 128.485 6.46803L130.984 20.895C130.998 20.965 130.97 21 130.9 21H128.569C128.513 21 128.478 20.965 128.464 20.895L128.233 19.362H125.377L125.146 20.895C125.132 20.965 125.097 21 125.041 21H122.71C122.654 21 122.626 20.965 122.626 20.895ZM125.797 17.115H127.813L126.952 11.214L126.826 10.437L126.742 11.214L125.797 17.115Z"
fill="white"
/>
<path
d="M142.886 21C142.83 21 142.802 20.965 142.802 20.895L142.844 6.46803C142.844 6.41203 142.872 6.38403 142.928 6.38403H147.17C147.926 6.38403 148.619 6.57303 149.249 6.95103C149.893 7.31503 150.404 7.81203 150.782 8.44203C151.16 9.05803 151.349 9.75803 151.349 10.542C151.349 11.06 151.272 11.529 151.118 11.949C150.964 12.355 150.782 12.705 150.572 12.999C150.362 13.279 150.173 13.489 150.005 13.629C150.761 14.469 151.139 15.456 151.139 16.59L151.16 20.895C151.16 20.965 151.125 21 151.055 21H148.682C148.626 21 148.598 20.979 148.598 20.937V16.59C148.598 16.086 148.416 15.652 148.052 15.288C147.702 14.91 147.268 14.721 146.75 14.721H145.364L145.343 20.895C145.343 20.965 145.315 21 145.259 21H142.886ZM145.364 12.201H147.17C147.604 12.201 147.989 12.04 148.325 11.718C148.661 11.396 148.829 11.004 148.829 10.542C148.829 10.094 148.661 9.70903 148.325 9.38703C148.003 9.06503 147.618 8.90403 147.17 8.90403H145.364V12.201Z"
fill="white"
/>
<path
d="M165.123 21C165.067 21 165.039 20.965 165.039 20.895V8.92503H162.309C162.239 8.92503 162.204 8.89003 162.204 8.82003L162.225 6.46803C162.225 6.41203 162.253 6.38403 162.309 6.38403H170.289C170.359 6.38403 170.394 6.41203 170.394 6.46803V8.82003C170.394 8.89003 170.366 8.92503 170.31 8.92503H167.559L167.58 20.895C167.58 20.965 167.552 21 167.496 21H165.123Z"
fill="white"
/>
<circle cx="117" cy="21" r="2.25" fill="black" />
<circle cx="117" cy="21" r="2.25" stroke="black" stroke-width="0.5" />
<circle cx="117" cy="21" r="2.25" stroke="white" stroke-width="0.5" />
</svg>
</div>
</div>
</div>
`;
const height = 630;
const width = 1200;
let fontData: Buffer;
try {
fontData = await fs.readFile(fontPath);
} catch (err) {
console.error('Error reading the font file:', err);
}
/** @type {import('./$types').RequestHandler} */
export const GET = async ({ url }) => {
const title = url.searchParams.get('title') ?? undefined;
const subTitle = url.searchParams.get('subTitle') ?? undefined;
export const GET: RequestHandler = async () => {
return new ImageResponse(template, {
height: 630,
width: 1200,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const result = (OgImage as any).render({ title, subTitle });
const element = toReactNode(`${result.html}<style>${result.css.code}</style>`);
const svg = await satori(element, {
fonts: [
{
name: 'geist-sans',
data: fontData,
name: 'Geist Regular',
data: Buffer.from(GeistRegular),
weight: 100
},
{
name: 'Geist Bold',
data: Buffer.from(GeistBold),
weight: 700
}
]
],
height,
width
});
const resvg = new Resvg(svg, {
fitTo: {
mode: 'width',
value: width
}
});
const image = resvg.render();
return new Response(image.asPng(), {
headers: {
'content-type': 'image/png'
}
});
};

View file

@ -0,0 +1,7 @@
<script>
import { OgImage } from '$lib/components/site';
</script>
<div class="h-[630px] w-[1200px]">
<OgImage />
</div>

View file

@ -1,9 +1,10 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { enhancedImages } from '@sveltejs/enhanced-img';
import { defineConfig } from 'vite';
import fs from 'fs';
export default defineConfig({
plugins: [enhancedImages(), sveltekit()],
plugins: [enhancedImages(), sveltekit(), rawFonts(['.woff'])],
ssr: {
noExternal: ['three']
},
@ -11,3 +12,15 @@ export default defineConfig({
'import.meta.env.VERCEL_ANALYTICS_ID': JSON.stringify(process.env.VERCEL_ANALYTICS_ID)
}
});
function rawFonts(ext: string[]) {
return {
name: 'vite-plugin-raw-fonts',
transform(_code: string, id: string) {
if (ext.some((e) => id.endsWith(e))) {
const buffer = fs.readFileSync(id);
return { code: `export default ${JSON.stringify(buffer)}`, map: null };
}
}
};
}