Moving images around, adding og image generation, and updating og tags to use the image generator.

package.json

@@ -22,6 +22,7 @@
 		"@iconify-icons/simple-icons": "^1.2.74",
 		"@melt-ui/pp": "^0.1.4",
 		"@playwright/test": "^1.40.1",
+		"@resvg/resvg-js": "^2.6.0",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/adapter-vercel": "^1.0.6",
 		"@sveltejs/enhanced-img": "^0.1.5",
@@ -44,6 +45,8 @@
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
 		"sass": "^1.69.5",
+		"satori": "^0.10.11",
+		"satori-html": "^0.3.2",
 		"scrape-it": "^6.1.0",
 		"sharp": "^0.32.6",
 		"svelte": "^4.2.8",
@@ -57,7 +60,7 @@
 		"vanilla-lazyload": "^17.8.5",
 		"vite": "^4.5.1",
 		"vite-imagetools": "^5.1.2",
-		"vitest": "^0.32.2"
+		"vitest": "^0.32.4"
 	},
 	"type": "module",
 	"engines": {
@@ -67,6 +70,7 @@
 	"dependencies": {
 		"@melt-ui/svelte": "^0.50.1",
 		"@types/nprogress": "^0.2.3",
+		"@vercel/og": "^0.5.20",
 		"ioredis": "^5.3.2",
 		"nprogress": "^0.2.0"
 	}

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@types/nprogress':
     specifier: ^0.2.3
     version: 0.2.3
+  '@vercel/og':
+    specifier: ^0.5.20
+    version: 0.5.20
   ioredis:
     specifier: ^5.3.2
     version: 5.3.2
@@ -37,6 +40,9 @@ devDependencies:
   '@playwright/test':
     specifier: ^1.40.1
     version: 1.40.1
+  '@resvg/resvg-js':
+    specifier: ^2.6.0
+    version: 2.6.0
   '@sveltejs/adapter-static':
     specifier: ^2.0.3
     version: 2.0.3(@sveltejs/kit@1.27.7)
@@ -103,6 +109,12 @@ devDependencies:
   sass:
     specifier: ^1.69.5
     version: 1.69.5
+  satori:
+    specifier: ^0.10.11
+    version: 0.10.11
+  satori-html:
+    specifier: ^0.3.2
+    version: 0.3.2
   scrape-it:
     specifier: ^6.1.0
     version: 6.1.0
@@ -143,7 +155,7 @@ devDependencies:
     specifier: ^5.1.2
     version: 5.1.2
   vitest:
-    specifier: ^0.32.2
+    specifier: ^0.32.4
     version: 0.32.4(sass@1.69.5)
 
 packages:
@@ -1382,6 +1394,137 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
+  /@resvg/resvg-js-android-arm-eabi@2.6.0:
+    resolution: {integrity: sha512-lJnZ/2P5aMocrFMW7HWhVne5gH82I8xH6zsfH75MYr4+/JOaVcGCTEQ06XFohGMdYRP3v05SSPLPvTM/RHjxfA==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    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: true
+    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: true
+    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: true
+    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: true
+    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: true
+    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: true
+    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: true
+    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: true
+    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: true
+    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: true
+    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: true
+    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: true
+
+  /@resvg/resvg-wasm@2.6.0:
+    resolution: {integrity: sha512-iDkBM6Ivex8nULtBu8cX670/lfsGxq8U1cuqE+qS9xFpPQP1enPdVm/33Kq3+B+bAldA+AHNZnCgpmlHo/fZrQ==}
+    engines: {node: '>= 10'}
+    dev: false
+
   /@rollup/pluginutils@4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
@@ -1418,6 +1561,14 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /@shuding/opentype.js@1.4.0-beta.0:
+    resolution: {integrity: sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==}
+    engines: {node: '>= 8.0.0'}
+    hasBin: true
+    dependencies:
+      fflate: 0.7.4
+      string.prototype.codepointat: 0.2.1
+
   /@sinclair/typebox@0.27.8:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: true
@@ -1724,6 +1875,15 @@ packages:
       - supports-color
     dev: true
 
+  /@vercel/og@0.5.20:
+    resolution: {integrity: sha512-zi+ZXSx/peXA+1lq7s/5Vzmm/TTfTSf/5P1qNYnh42+7X+pZmahWoXt0i7SWiq3WagfsNUNA4hUDapDiHRoXqA==}
+    engines: {node: '>=16'}
+    dependencies:
+      '@resvg/resvg-wasm': 2.6.0
+      satori: 0.10.9
+      yoga-wasm-web: 0.3.3
+    dev: false
+
   /@vitest/expect@0.32.4:
     resolution: {integrity: sha512-m7EPUqmGIwIeoU763N+ivkFjTzbaBn0n9evsTOcde03ugy2avPs3kZbYmw3DkcH1j5mxhMhdamJkLQ6dM1bk/A==}
     dependencies:
@@ -1904,7 +2064,7 @@ packages:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.21.11
-      caniuse-lite: 1.0.30001539
+      caniuse-lite: 1.0.30001566
       fraction.js: 4.3.6
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -1943,6 +2103,10 @@ packages:
       typpy: 2.3.13
     dev: true
 
+  /base64-js@0.0.8:
+    resolution: {integrity: sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==}
+    engines: {node: '>= 0.4'}
+
   /base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: true
@@ -1989,7 +2153,7 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001539
+      caniuse-lite: 1.0.30001566
       electron-to-chromium: 1.4.529
       node-releases: 2.0.13
       update-browserslist-db: 1.0.13(browserslist@4.21.11)
@@ -2000,7 +2164,7 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001510
+      caniuse-lite: 1.0.30001566
       electron-to-chromium: 1.4.447
       node-releases: 2.0.12
       update-browserslist-db: 1.0.11(browserslist@4.21.9)
@@ -2027,12 +2191,11 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /caniuse-lite@1.0.30001510:
+  /camelize@1.0.1:
-    resolution: {integrity: sha512-z35lD6xjHklPNgjW4P68R30Er5OCIZE0C1bUf8IMXSh34WJYXfIy+GxIEraQXYJ2dvTU8TumjYAeLrPhpMlsuw==}
+    resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
-    dev: true
 
-  /caniuse-lite@1.0.30001539:
+  /caniuse-lite@1.0.30001566:
-    resolution: {integrity: sha512-hfS5tE8bnNiNvEOEkm8HElUHroYwlqMMENEzELymy77+tJ6m+gA2krtHl5hxJaj71OlpC2cHZbdSMX1/YEqEkA==}
+    resolution: {integrity: sha512-ggIhCsTxmITBAMmK8yZjEhCO5/47jKXPu6Dha/wuCS4JePVL+3uiDEBuhu2aIoT+bqTOR8L76Ip1ARL9xYsEJA==}
     dev: true
 
   /chai@4.3.7:
@@ -2140,7 +2303,6 @@ packages:
 
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: true
 
   /color-string@1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
@@ -2192,6 +2354,9 @@ packages:
       which: 2.0.2
     dev: true
 
+  /css-background-parser@0.1.0:
+    resolution: {integrity: sha512-2EZLisiZQ+7m4wwur/qiYJRniHX4K5Tc9w93MT3AS0WS1u5kaZ4FKXlOTBhOjc+CgEgPiGY+fX1yWD8UwpEqUA==}
+
   /css-blank-pseudo@5.0.2(postcss@8.4.32):
     resolution: {integrity: sha512-aCU4AZ7uEcVSUzagTlA9pHciz7aWPKA/YzrEkpdSopJ2pvhIxiQ5sYeMz1/KByxlIo4XBdvMNJAVKMg/GRnhfw==}
     engines: {node: ^14 || ^16 || >=18}
@@ -2202,6 +2367,13 @@ packages:
       postcss-selector-parser: 6.0.13
     dev: true
 
+  /css-box-shadow@1.0.0-3:
+    resolution: {integrity: sha512-9jaqR6e7Ohds+aWwmhe6wILJ99xYQbfmK9QQB9CcMjDbTxPZjwEmUQpU91OG05Xgm8BahT5fW+svbsQGjS/zPg==}
+
+  /css-color-keywords@1.0.0:
+    resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==}
+    engines: {node: '>=4'}
+
   /css-has-pseudo@5.0.2(postcss@8.4.32):
     resolution: {integrity: sha512-q+U+4QdwwB7T9VEW/LyO6CFrLAeLqOykC5mDqJXc7aKZAhDbq7BvGT13VGJe+IwBfdN2o3Xdw2kJ5IxwV1Sc9Q==}
     engines: {node: ^14 || ^16 || >=18}
@@ -2233,6 +2405,13 @@ packages:
       nth-check: 2.1.1
     dev: true
 
+  /css-to-react-native@3.2.0:
+    resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
+    dependencies:
+      camelize: 1.0.1
+      css-color-keywords: 1.0.0
+      postcss-value-parser: 4.2.0
+
   /css-tree@2.3.1:
     resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@@ -2387,6 +2566,9 @@ packages:
     resolution: {integrity: sha512-6uyPyXTo8lkv8SWAmjKFbG42U073TXlzD4R8rW3EzuznhFS2olCIAfjjQtV2dV2ar/vRF55KUd3zQYnCB0dd3A==}
     dev: true
 
+  /emoji-regex@10.3.0:
+    resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
+
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
@@ -2479,6 +2661,9 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
   /escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -2693,6 +2878,9 @@ packages:
       reusify: 1.0.4
     dev: true
 
+  /fflate@0.7.4:
+    resolution: {integrity: sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==}
+
   /file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -2899,6 +3087,10 @@ packages:
       function-bind: 1.1.1
     dev: true
 
+  /hex-rgb@4.3.0:
+    resolution: {integrity: sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==}
+    engines: {node: '>=6'}
+
   /htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
     dependencies:
@@ -3118,6 +3310,12 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
+  /linebreak@1.1.0:
+    resolution: {integrity: sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==}
+    dependencies:
+      base64-js: 0.0.8
+      unicode-trie: 2.0.0
+
   /local-pkg@0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}
@@ -3465,6 +3663,9 @@ packages:
       p-limit: 3.1.0
     dev: true
 
+  /pako@0.2.9:
+    resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
+
   /parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -3472,6 +3673,12 @@ packages:
       callsites: 3.1.0
     dev: true
 
+  /parse-css-color@0.2.1:
+    resolution: {integrity: sha512-bwS/GGIFV3b6KS4uwpzCFj4w297Yl3uqnSgIPsoQkx7GMLROXfMnWvxfNkL0oh8HVhZA4hvJoEoEIqonfJ3BWg==}
+    dependencies:
+      color-name: 1.1.4
+      hex-rgb: 4.3.0
+
   /parse5-htmlparser2-tree-adapter@7.0.0:
     resolution: {integrity: sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==}
     dependencies:
@@ -3966,7 +4173,6 @@ packages:
 
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
 
   /postcss@8.4.32:
     resolution: {integrity: sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==}
@@ -4193,6 +4399,44 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /satori-html@0.3.2:
+    resolution: {integrity: sha512-wjTh14iqADFKDK80e51/98MplTGfxz2RmIzh0GqShlf4a67+BooLywF17TvJPD6phO0Hxm7Mf1N5LtRYvdkYRA==}
+    dependencies:
+      ultrahtml: 1.5.2
+    dev: true
+
+  /satori@0.10.11:
+    resolution: {integrity: sha512-yLm1xPRPZUaKcBZJ6nmezoJjHB4MqV8x7Mu0PyZUJodRWRDD27UbeMwzuY9LEGG57WYLO4CQsGPlbHWV1Ex9TQ==}
+    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.3.0
+      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: true
+
+  /satori@0.10.9:
+    resolution: {integrity: sha512-XU9EELUEZuioT4acLIpCXxHcFzrsC8muvg0MY28d+TlqwxbkTzBmWbw+3+hnCzXT7YZ0Qm8k3eXktDaEu+qmEw==}
+    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.3.0
+      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
+
   /schema-dts@1.1.2(typescript@5.3.3):
     resolution: {integrity: sha512-MpNwH0dZJHinVxk9bT8XUdjKTxMYrA5bLtrrGmFA6PTLwlOKnhi67XoRd6/ty+Djt6ZC0slR57qFhZDNMI6DhQ==}
     peerDependencies:
@@ -4404,6 +4648,9 @@ packages:
       strip-ansi: 6.0.1
     dev: true
 
+  /string.prototype.codepointat@0.2.1:
+    resolution: {integrity: sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==}
+
   /string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
     dependencies:
@@ -4666,6 +4913,9 @@ packages:
       globrex: 0.1.2
     dev: true
 
+  /tiny-inflate@1.0.3:
+    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
+
   /tinybench@2.5.1:
     resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==}
     dev: true
@@ -4753,6 +5003,10 @@ packages:
     resolution: {integrity: sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==}
     dev: true
 
+  /ultrahtml@1.5.2:
+    resolution: {integrity: sha512-qh4mBffhlkiXwDAOxvSGxhL0QEQsTbnP9BozOK3OYPEGvPvdWzvAUaXNtUSMdNsKDtuyjEbyVUPFZ52SSLhLqw==}
+    dev: true
+
   /undici@5.26.5:
     resolution: {integrity: sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==}
     engines: {node: '>=14.0'}
@@ -4760,6 +5014,12 @@ packages:
       '@fastify/busboy': 2.0.0
     dev: true
 
+  /unicode-trie@2.0.0:
+    resolution: {integrity: sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==}
+    dependencies:
+      pako: 0.2.9
+      tiny-inflate: 1.0.3
+
   /unist-util-is@5.2.0:
     resolution: {integrity: sha512-Glt17jWwZeyqrFqOK0pF1Ded5U3yzJnFr8CG1GMjCWTp9zDo2p+cmD6pWbZU8AgM5WU3IzRv6+rBwhzsGh6hBQ==}
     dev: true
@@ -5054,3 +5314,6 @@ packages:
     resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
     engines: {node: '>=12.20'}
     dev: true
+
+  /yoga-wasm-web@0.3.3:
+    resolution: {integrity: sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==}

src/lib/components/socialImageCard.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	export let header: string;
+	export let page: string;
+	export let image: string;
+	export let content: string;
+	export let width = 1200;
+	export let height = 630;
+	export let url: string;
+</script>
+
+<div class="social-card" style={`width: ${width}px; height: ${height}px;`}>
+	<div class="social-card-header">
+			<div class="social-card-title">
+				<div class="social-card-image">
+					<img src={image || '/images/b_shell_nut_favicon.png'} alt="Bradley Shellnut" />
+				</div>
+				<h1>{header}</h1>
+			</div>
+	</div>
+	<div class="social-card-content">
+		<h2 class="page">{page}</h2>
+		<p class="content">{content}</p>
+	</div>
+	<div class="social-card-footer">
+		<footer>
+			<p>Bradley Shellnut &copy; {new Date().getFullYear()} | Built by Bradley Shellnut | {url || 'https://bradleyshellnut.com'}</p>
+		</footer>
+	</div>
+</div>
+
+<style>
+	@font-face {
+		font-family: 'Fira Sans';
+		src: url('/src/lib/FiraSans-Bold.ttf');
+	}
+
+	.social-card {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		justify-content: space-between;
+		color: #D8D8D8;
+		background-color: #131415;
+	}
+
+	.social-card-header {
+		display: flex;
+		padding: 0 1.5rem;
+		flex-direction: column;
+		background-color: #2E2E2E;
+	}
+
+	.social-card-title {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		font-size: 1.875rem; /* 30px */
+		line-height: 2.25rem; /* 36px */
+		font-weight: 700;
+		letter-spacing: -0.025em;
+	}
+
+	.social-card-image {
+		display: flex;
+		width: 4rem;
+		height: 4rem;
+	}
+
+	.social-card-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 2rem;
+		padding: 1.5rem;
+		padding-top: 0;
+	}
+
+	.page {
+		font-size: 3.75rem; /* 60px */
+		line-height: 1;
+		font-weight: 700;
+	}
+
+	.content {
+		font-size: 1.25rem; /* 20px */
+		line-height: 1.75rem; /* 28px */
+	}
+
+	.social-card-footer {
+		display: flex;
+		padding: 1rem 1.5rem;
+		align-items: center;
+		font-size: 1.25rem;
+		line-height: 1.75rem;
+		font-weight: 700;
+		background-color: #2E2E2E;
+	}
+</style>

src/lib/content/portfolio/personal-website-gatsby.ts

@@ -1,6 +1,6 @@
-import meta from '$lib/assets/images/Bradley_Shellnut_New_Site.png?metadata';
+import meta from '$lib/assets/images/portfolio/Bradley_Shellnut_New_Site.png?metadata';
-import formatMeta from '$lib/assets/images/Bradley_Shellnut_New_Site.png?format=webp;avif;png&metadata';
+import formatMeta from '$lib/assets/images/portfolio/Bradley_Shellnut_New_Site.png?format=webp;avif;png&metadata';
-import placeholder from '$lib/assets/images/Bradley_Shellnut_New_Site.png?w=100&png&blur=10';
+import placeholder from '$lib/assets/images/portfolio/Bradley_Shellnut_New_Site.png?w=100&png&blur=10';
 
 type ImageMeta = {
 	format: string;

src/routes/+page.server.ts

@@ -19,10 +19,10 @@ export const load: PageServerLoad = async ({ fetch, setHeaders, url }) => {
 			locale: 'en_US',
 			images: [
 				{
-					url: `${baseUrl}b_shell_nut_favicon.gif`,
+					url: `${baseUrl}?header=Home | bradleyshellnut.com&page=Hi I'm Bradley Shellnut.&content=I'm a full stack software engineer currently working on Java Spring, PostgreSQL, and React / Angular JS.`,
-					alt: 'Bradley Shellnut Website Logo',
+					alt: 'Bradley Shellnut Website Home Page',
-					width: 512,
+					width: 1200,
-					height: 512
+					height: 630
 				}
 			]
 		},
@@ -30,7 +30,7 @@ export const load: PageServerLoad = async ({ fetch, setHeaders, url }) => {
 			title: 'Home',
 			description: 'Home page',
 			card: 'summary_large_image',
-			image: `${baseUrl}b_shell_nut_favicon.gif`,
+			image: `${baseUrl}?header=Home | bradleyshellnut.com&page=Hi I'm Bradley Shellnut.&content=I'm a full stack software engineer currently working on Java Spring, PostgreSQL, and React / Angular JS.`,
 			imageAlt: 'Bradley Shellnut Website Logo'
 		},
 		url: currentPageUrl

src/routes/about/+page.ts

@@ -19,10 +19,10 @@ export const load: PageLoad = async ({ url }) => {
 			locale: 'en_US',
 			images: [
 				{
-					url: `${baseUrl}b_shell_nut_favicon.gif`,
+					url: `${baseUrl}?header=About | bradleyshellnut.com&page=Hey! My name is Bradley Shellnut.&content=I am a full stack software engineer who's interested in new tech and not afraid to discover new interests.`,
-					alt: 'Bradley Shellnut Website Logo',
+					alt: 'About Bradley Shellnut',
-					width: 512,
+					width: 1200,
-					height: 512
+					height: 630
 				}
 			]
 		},
@@ -30,7 +30,7 @@ export const load: PageLoad = async ({ url }) => {
 			title: 'About',
 			description: 'About page',
 			card: 'summary_large_image',
-			image: `${baseUrl}b_shell_nut_favicon.gif`,
+			image: `${baseUrl}?header=About | bradleyshellnut.com&page=Hey! My name is Bradley Shellnut.&content=I am a full stack software engineer who's interested in new tech and not afraid to discover new interests.`,
 			imageAlt: 'Bradley Shellnut Website Logo'
 		},
 		url: currentPageUrl

src/routes/articles/[page]/+page.server.ts

@@ -49,10 +49,10 @@ export const load: PageServerLoad = async ({ fetch, params, setHeaders, url }) =
 			locale: 'en_US',
 			images: [
 				{
-					url: `${baseUrl}b_shell_nut_favicon.gif`,
+					url: `${baseUrl}?header=Articles Page ${page} | bradleyshellnut.com&page=My favorite articles`,
-					alt: 'Bradley Shellnut Website Logo',
+					alt: `Bradley Shellnut Articles Page ${page}`,
-					width: 512,
+					width: 1200,
-					height: 512
+					height: 630
 				}
 			]
 		},
@@ -60,7 +60,7 @@ export const load: PageServerLoad = async ({ fetch, params, setHeaders, url }) =
 			title: 'Favorite Articles',
 			description: 'My favorite articles',
 			card: 'summary_large_image',
-			image: `${baseUrl}b_shell_nut_favicon.gif`,
+			image: `${baseUrl}?header=Articles Page ${page} | bradleyshellnut.com&page=My favorite articles`,
 			imageAlt: 'Bradley Shellnut Website Logo'
 		},
 		url: currentPageUrl

src/routes/og/+server.ts

@@ -0,0 +1,57 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import satori from 'satori';
+import { Resvg } from '@resvg/resvg-js';
+import { html as toReactNode } from 'satori-html';
+import FiraSansSemiBold from '$lib/fonts/FiraSans-SemiBold.ttf';
+import SocialImageCard from '$lib/components/socialImageCard.svelte';
+
+const height = 630;
+const width = 1200;
+
+export const GET: RequestHandler = async ({ url }) => {
+	try {
+		const ogImage = `${new URL(url.origin).href}/b_shell_nut_favicon.png`;
+		const header = url.searchParams.get('header') ?? undefined;
+		const page = url.searchParams.get('page') ?? undefined;
+		const content = url.searchParams.get('content') ?? '';
+		const result = SocialImageCard.render({
+			header,
+			page,
+			content,
+			image: ogImage,
+			width,
+			height,
+			url: new URL(url.origin).href
+		});
+		console.log('result', result);
+		const element = toReactNode(`${result.html}<style>${result.css.code}</style>`);
+		const svg = await satori(element, {
+			fonts: [
+				{
+					name: 'Fira Sans',
+					data: Buffer.from(FiraSansSemiBold),
+					style: 'normal'
+				}
+			],
+			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'
+			}
+		});
+	} catch (e) {
+		console.error(e);
+	}
+};

src/routes/portfolio/+page.server.ts

@@ -20,10 +20,10 @@ export const load: PageServerLoad = async ({ url }) => {
 			locale: 'en_US',
 			images: [
 				{
-					url: `${baseUrl}b_shell_nut_favicon.gif`,
+					url: `${baseUrl}?header=Portfolio | bradleyshellnut.com&page=My portfolio of sites I have created.`,
-					alt: 'Bradley Shellnut Website Logo',
+					alt: 'Bradley Shellnut Portfolio Page',
-					width: 512,
+					width: 1200,
-					height: 512
+					height: 630
 				}
 			]
 		},
@@ -31,7 +31,7 @@ export const load: PageServerLoad = async ({ url }) => {
 			title: 'Portfolio',
 			description: "Bradley Shellnut's Portfolio",
 			card: 'summary_large_image',
-			image: `${baseUrl}b_shell_nut_favicon.gif`,
+			image: `${baseUrl}?header=Portfolio | bradleyshellnut.com&page=My portfolio of sites I have created.`,
 			imageAlt: 'Bradley Shellnut Website Logo'
 		},
 		url: currentPageUrl

src/routes/portfolio/+page.svelte

@@ -2,10 +2,10 @@
 	import { createTabs, melt } from '@melt-ui/svelte';
 	import GitHub from '@iconify-icons/simple-icons/github';
 	import Portfolio from '$lib/components/Portfolio.svelte';
-	import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png?as=run";
+	import personalSite from "$lib/assets/images/portfolio/Bradley_Shellnut_New_Site.png?as=run";
-  import weddingWebsite from "$lib/assets/images/Wedding_Website.png?as=run";
+  import weddingWebsite from "$lib/assets/images/portfolio/Wedding_Website.png?as=run";
-	import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?as=run';
+	import oldSite from '$lib/assets/images/portfolio/Old_Website_Bradley_Shellnut.png?as=run';
-	import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png?as=run";
+	import shellnutArchitectWebsite from "$lib/assets/images/portfolio/Mark_Shellnut_Architect.png?as=run";
 	import PersonalWebsiteSvelteKit from "$lib/content/portfolio/personal/personal-website-sveltekit.md";
 	import WeddingWebsite from '$lib/content/portfolio/personal/wedding-website.md';
 	import MarkShellnutArchitect from '$lib/content/portfolio/professional/mark-shellnut-architect.md';

src/routes/privacy/+page.ts

@@ -20,10 +20,10 @@ export const load: PageLoad = async ({ url }) => {
 			locale: 'en_US',
 			images: [
 				{
-					url: `${baseUrl}b_shell_nut_favicon.gif`,
+					url: `${baseUrl}?header=Privacy Blog | bradleyshellnut.com&page=My thoughts on personal internet privacy.`,
-					alt: 'Bradley Shellnut Website Logo',
+					alt: 'Bradley Shellnut Privacy Blog',
-					width: 512,
+					width: 1200,
-					height: 512
+					height: 630
 				}
 			]
 		},
@@ -31,7 +31,7 @@ export const load: PageLoad = async ({ url }) => {
 			title: 'Privacy Blog',
 			description: 'My thoughts on personal internet privacy.',
 			card: 'summary_large_image',
-			image: `${baseUrl}b_shell_nut_favicon.gif`,
+			image: `${baseUrl}?header=Privacy Blog | bradleyshellnut.com&page=My thoughts on personal internet privacy.`,
 			imageAlt: 'Bradley Shellnut Website Logo'
 		},
 		url: currentPageUrl

src/routes/uses/+page.ts

@@ -20,10 +20,10 @@ export const load: PageLoad = async ({ url }) => {
 			locale: 'en_US',
 			images: [
 				{
-					url: `${baseUrl}b_shell_nut_favicon.gif`,
+					url: `${baseUrl}?header=Uses | bradleyshellnut.com&page=What I use!`,
-					alt: 'Bradley Shellnut Website Logo',
+					alt: 'Bradley Shellnut Uses Page',
-					width: 512,
+					width: 1200,
-					height: 512
+					height: 630
 				}
 			]
 		},
@@ -31,7 +31,7 @@ export const load: PageLoad = async ({ url }) => {
 			title: '/Uses',
 			description: "What I use!",
 			card: 'summary_large_image',
-			image: `${baseUrl}b_shell_nut_favicon.gif`,
+			image: `${baseUrl}?header=Uses | bradleyshellnut.com&page=What I use!`,
 			imageAlt: 'Bradley Shellnut Website Logo'
 		},
 		url: currentPageUrl

vite.config.ts

@@ -1,4 +1,5 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import fs from 'fs';
 import type { UserConfig } from 'vite';
 import { imagetools } from '@zerodevx/svelte-img/vite';
 
@@ -11,11 +12,27 @@ const config: UserConfig = {
 			profiles: {
 				run: new URLSearchParams('?w=300;480;640;1024;1920&format=avif;webp;jpg&as=run:64')
 			}
-		})
+		}),
+		rawFonts(['.ttf'])
 	],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	}
 };
 
+function rawFonts(ext) {
+	return {
+		name: 'vite-plugin-raw-fonts',
+		resolveId(id) {
+			return ext.some((e) => id.endsWith(e)) ? id : null;
+		},
+		transform(code, id) {
+			if (ext.some((e) => id.endsWith(e))) {
+				const buffer = fs.readFileSync(id);
+				return { code: `export default ${JSON.stringify(buffer)}`, map: null };
+			}
+		}
+	};
+}
+
 export default config;