Fix OG image generation of website

Author: fabian-hiller

pnpm-lock.yaml

@@ -1,16 +1,30 @@
 import { vercelEdgeAdapter } from '@builder.io/qwik-city/adapters/vercel-edge/vite';
 import { extendConfig } from '@builder.io/qwik-city/vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
 import baseConfig from '../../vite.config';
 
 export default extendConfig(baseConfig, () => {
   return {
+    ssr: {
+      external: ['@vercel/og'],
+    },
     build: {
       ssr: true,
       rollupOptions: {
         input: ['src/entry.vercel-edge.tsx', '@qwik-city-plan'],
       },
       outDir: '.vercel/output/functions/_qwik-city.func',
     },
-    plugins: [vercelEdgeAdapter()],
+    plugins: [
+      vercelEdgeAdapter(),
+      viteStaticCopy({
+        targets: [
+          {
+            src: 'node_modules/@vercel/og/**/*',
+            dest: 'node_modules/@vercel/og/',
+          },
+        ],
+      }),
+    ],
   };
 });

website/adapters/vercel-edge/vite.config.ts

@@ -55,11 +55,13 @@
     "vercel": "^39.2.2",
     "vite": "^5.4.11",
     "vite-imagetools": "^7.0.5",
+    "vite-plugin-static-copy": "^2.2.0",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "dependencies": {
     "@builder.io/qwik": "1.9",
     "@builder.io/qwik-city": "1.9",
+    "@vercel/og": "^0.6.4",
     "clsx": "^2.1.1",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.52.2",

website/package.json

@@ -1,5 +1,6 @@
 import type { RequestHandler } from '@builder.io/qwik-city';
-import { fetchFont, html, ImageResponse } from 'og-img';
+import { ImageResponse } from '@vercel/og';
+import { fetchFont, html } from 'og-img';
 
 export const onGet: RequestHandler = async ({ cacheControl, send, url }) => {
   // Disable caching