og to png

package.json

@@ -27,6 +27,7 @@
     "@tailwindcss/vite": "^4.0.7",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
+    "@resvg/resvg-js": "^2.6.2",
     "astro": "^5.7.13",
     "astro-expressive-code": "^0.40.2",
     "astro-icon": "^1.1.5",

src/components/PostHead.astro

@@ -20,7 +20,7 @@ const ogImage = {
   url: new URL(`/api/og/${encodeURIComponent(post.id)}`, siteUrl).toString(),
   width: 1200,
   height: 630,
-  type: 'image/svg+xml',
+  type: 'image/png',
 }
 const canonicalUrl = Astro.url
 ---

src/pages/api/og/[slug].ts

@@ -1,4 +1,5 @@
 import type { APIRoute } from 'astro'
+import { Resvg } from '@resvg/resvg-js'
 import { SITE } from '@/consts'
 import { fetchRemotePost, normalizePost } from '@/lib/data-utils'
 import { formatDate } from '@/lib/utils'
@@ -158,10 +159,19 @@ export const GET: APIRoute = async ({ params }) => {
     siteHost,
   })
 
-  return new Response(svg, {
+  const png = new Resvg(svg, {
+    fitTo: {
+      mode: 'width',
+      value: WIDTH,
+    },
+  })
+    .render()
+    .asPng()
+
+  return new Response(png, {
     status: 200,
     headers: {
-      'Content-Type': 'image/svg+xml; charset=utf-8',
+      'Content-Type': 'image/png',
       'Cache-Control':
         'public, max-age=0, s-maxage=86400, stale-while-revalidate=604800',
     },