Add default opengraph on error (#5552)

src/lib/open-graph.ts

@@ -6,3 +6,8 @@ type RoadmapOpenGraphQuery = {
 export function getOpenGraphImageUrl(params: RoadmapOpenGraphQuery) {
   return `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/og-images/${params.group}/${params.resourceId}.png`;
 }
+
+export async function getDefaultOpenGraphImageBuffer() {
+  const defaultImageUrl = `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/images/og-img.png`;
+  return fetch(defaultImageUrl).then((response) => response.arrayBuffer());
+}

src/pages/og/[slug].ts

@@ -1,4 +1,5 @@
 import type { APIRoute } from 'astro';
+import { getDefaultOpenGraphImageBuffer } from '../../lib/open-graph';
 
 export const prerender = false;
 
@@ -10,26 +11,22 @@ export const GET: APIRoute<any, Params> = async (context) => {
   const { slug } = context.params;
 
   if (!slug.startsWith('user-')) {
-    return new Response(
+    const buffer = await getDefaultOpenGraphImageBuffer();
-      JSON.stringify({
+    return new Response(buffer, {
-        error: 'Invalid slug',
+      headers: {
-      }),
+        'Content-Type': 'image/png',
-      {
-        status: 400,
       },
-    );
+    });
   }
 
   const username = slug.replace('user-', '');
   if (!username) {
-    return new Response(
+    const buffer = await getDefaultOpenGraphImageBuffer();
-      JSON.stringify({
+    return new Response(buffer, {
-        error: 'Invalid username',
+      headers: {
-      }),
+        'Content-Type': 'image/png',
-      {
-        status: 400,
       },
-    );
+    });
   }
 
   const response = await fetch(