chore: replace with og endpoint

src/lib/open-graph.ts

@@ -1,10 +1,10 @@
 type RoadmapOpenGraphQuery = {
-  group: 'roadmaps' | 'guides' | 'best-practices';
+  group: 'roadmap' | 'guide' | 'best-practice';
   resourceId: string;
 };
 
 export function getOpenGraphImageUrl(params: RoadmapOpenGraphQuery) {
-  return `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/og-images/${params.group}/${params.resourceId}.png`;
+  return `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/og/${params.group}-${params.resourceId}`;
 }
 
 export async function getDefaultOpenGraphImageBuffer() {

src/pages/[roadmapId]/index.astro

@@ -59,7 +59,7 @@ if (roadmapFAQs.length) {
 const ogImageUrl =
   roadmapData?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
-    group: 'roadmaps',
+    group: 'roadmap',
     resourceId: roadmapId,
   });
 ---

src/pages/backend/developer-skills.astro

@@ -11,7 +11,7 @@ const guide = await getGuideById(guideId);
 const { frontmatter: guideData } = guide!;
 
 const ogImageUrl = getOpenGraphImageUrl({
-  group: 'guides',
+  group: 'guide',
   resourceId: guideId,
 });
 ---

src/pages/backend/developer-tools.astro

@@ -11,7 +11,7 @@ const guide = await getGuideById(guideId);
 const { frontmatter: guideData } = guide!;
 
 const ogImageUrl = getOpenGraphImageUrl({
-  group: 'guides',
+  group: 'guide',
   resourceId: guideId,
 });
 ---

src/pages/backend/languages.astro

@@ -14,7 +14,7 @@ if (!guide) {
 const { frontmatter: guideData } = guide!;
 
 const ogImageUrl = getOpenGraphImageUrl({
-  group: 'guides',
+  group: 'guide',
   resourceId: guideId,
 });
 ---

src/pages/best-practices/[bestPracticeId]/index.astro

@@ -10,8 +10,8 @@ import { UserProgressModal } from '../../../components/UserProgress/UserProgress
 import { generateArticleSchema } from '../../../lib/jsonld-schema';
 import { getOpenGraphImageUrl } from '../../../lib/open-graph';
 import {
-  BestPracticeFileType,
-  BestPracticeFrontmatter,
+  type BestPracticeFileType,
+  type BestPracticeFrontmatter,
   getAllBestPractices,
 } from '../../../lib/best-practice';
 
@@ -55,7 +55,7 @@ if (bestPracticeData.schema) {
 }
 
 const ogImageUrl = getOpenGraphImageUrl({
-  group: 'best-practices',
+  group: 'best-practice',
   resourceId: bestPracticeId,
 });
 ---

src/pages/guides/[guideId].astro

@@ -27,7 +27,7 @@ const { frontmatter: guideData, author } = guide;
 const ogImageUrl =
   guideData.ogImageUrl ||
   getOpenGraphImageUrl({
-    group: 'guides',
+    group: 'guide',
     resourceId: guideId,
   });
 ---

src/pages/og/[slug].ts

@@ -4,13 +4,22 @@ import { getDefaultOpenGraphImageBuffer } from '../../lib/open-graph';
 export const prerender = false;
 
 type Params = {
-  slug: string;
+  slug:
+    | `user-${string}`
+    | `roadmap-${string}`
+    | `best-practice-${string}`
+    | `guide-${string}`;
 };
 
 export const GET: APIRoute<any, Params> = async (context) => {
   const { slug } = context.params;
 
-  if (!slug.startsWith('user-')) {
+  if (
+    !slug.startsWith('user-') &&
+    !slug.startsWith('roadmap-') &&
+    !slug.startsWith('best-practice') &&
+    !slug.startsWith('guide-')
+  ) {
     const buffer = await getDefaultOpenGraphImageBuffer();
     return new Response(buffer, {
       headers: {
@@ -19,6 +28,7 @@ export const GET: APIRoute<any, Params> = async (context) => {
     });
   }
 
+  if (slug.startsWith('user-')) {
     const username = slug.replace('user-', '');
     if (!username) {
       const buffer = await getDefaultOpenGraphImageBuffer();
@@ -39,4 +49,34 @@ export const GET: APIRoute<any, Params> = async (context) => {
         'Content-Type': 'image/svg+xml',
       },
     });
+  } else {
+    const type = slug.startsWith('roadmap-')
+      ? 'roadmap'
+      : slug.startsWith('best-practice-')
+        ? 'best-practice'
+        : 'guide';
+    const resourceId = slug.replace(`${type}-`, '');
+
+    if (!resourceId) {
+      const buffer = await getDefaultOpenGraphImageBuffer();
+      return new Response(buffer, {
+        headers: {
+          'Content-Type': 'image/png',
+        },
+      });
+    }
+
+    const url = new URL(`${import.meta.env.PUBLIC_API_URL}/v1-open-graph`);
+    url.searchParams.set('type', type);
+    url.searchParams.set('resourceId', resourceId);
+    url.searchParams.set('variant', 'image');
+    const response = await fetch(url.toString());
+
+    const svg = await response.text();
+    return new Response(svg, {
+      headers: {
+        'Content-Type': 'image/svg+xml',
+      },
+    });
+  }
 };