chore: replace with og endpoint (#5571)

* chore: replace with og endpoint

* fix: update og routes

src/lib/open-graph.ts

@@ -1,13 +1,26 @@
 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() {
   const defaultImageUrl = `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/images/og-img.png`;
   return fetch(defaultImageUrl).then((response) => response.arrayBuffer());
 }
+
+export async function getResourceOpenGraph(
+  type: 'roadmap' | 'guide' | 'best-practice',
+  resourceId: string,
+) {
+  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());
+
+  return response.text();
+}

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

@@ -12,7 +12,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

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

src/pages/backend/languages.astro

@@ -15,7 +15,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

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

src/pages/og/best-practice/[slug].ts

@@ -0,0 +1,31 @@
+import type { APIRoute } from 'astro';
+import {
+  getDefaultOpenGraphImageBuffer,
+  getResourceOpenGraph,
+} from '../../../lib/open-graph';
+
+export const prerender = false;
+
+type Params = {
+  slug: string;
+};
+
+export const GET: APIRoute<any, Params> = async (context) => {
+  const { slug } = context.params;
+
+  if (!slug) {
+    const buffer = await getDefaultOpenGraphImageBuffer();
+    return new Response(buffer, {
+      headers: {
+        'Content-Type': 'image/png',
+      },
+    });
+  }
+
+  const svg = await getResourceOpenGraph('best-practice', slug);
+  return new Response(svg, {
+    headers: {
+      'Content-Type': 'image/svg+xml',
+    },
+  });
+};

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

@@ -0,0 +1,31 @@
+import type { APIRoute } from 'astro';
+import {
+  getDefaultOpenGraphImageBuffer,
+  getResourceOpenGraph,
+} from '../../../lib/open-graph';
+
+export const prerender = false;
+
+type Params = {
+  slug: string;
+};
+
+export const GET: APIRoute<any, Params> = async (context) => {
+  const { slug } = context.params;
+
+  if (!slug) {
+    const buffer = await getDefaultOpenGraphImageBuffer();
+    return new Response(buffer, {
+      headers: {
+        'Content-Type': 'image/png',
+      },
+    });
+  }
+
+  const svg = await getResourceOpenGraph('guide', slug);
+  return new Response(svg, {
+    headers: {
+      'Content-Type': 'image/svg+xml',
+    },
+  });
+};

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

@@ -0,0 +1,31 @@
+import type { APIRoute } from 'astro';
+import {
+  getDefaultOpenGraphImageBuffer,
+  getResourceOpenGraph,
+} from '../../../lib/open-graph';
+
+export const prerender = false;
+
+type Params = {
+  slug: string;
+};
+
+export const GET: APIRoute<any, Params> = async (context) => {
+  const { slug } = context.params;
+
+  if (!slug) {
+    const buffer = await getDefaultOpenGraphImageBuffer();
+    return new Response(buffer, {
+      headers: {
+        'Content-Type': 'image/png',
+      },
+    });
+  }
+
+  const svg = await getResourceOpenGraph('roadmap', slug);
+  return new Response(svg, {
+    headers: {
+      'Content-Type': 'image/svg+xml',
+    },
+  });
+};

src/pages/og/[slug].ts → src/pages/og/user/[username].ts

@@ -1,26 +1,16 @@
 import type { APIRoute } from 'astro';
-import { getDefaultOpenGraphImageBuffer } from '../../lib/open-graph';
+import { getDefaultOpenGraphImageBuffer } from '../../../lib/open-graph';
 
 export const prerender = false;
 
 type Params = {
-  slug: string;
+  username: string;
 };
 
 export const GET: APIRoute<any, Params> = async (context) => {
-  const { slug } = context.params;
+  const { username } = context.params;
 
-  if (!slug.startsWith('user-')) {
-    const buffer = await getDefaultOpenGraphImageBuffer();
-    return new Response(buffer, {
-      headers: {
-        'Content-Type': 'image/png',
-      },
-    });
-  }
-
-  const username = slug.replace('user-', '');
-  if (!username) {
+  if (!username || !/^[a-zA-Z0-9]*?[a-zA-Z]+?[a-zA-Z0-9]*?$/.test(username)) {
     const buffer = await getDefaultOpenGraphImageBuffer();
     return new Response(buffer, {
       headers: {

src/pages/u/[username].astro

@@ -24,7 +24,7 @@ if (error || !userDetails) {
 }
 
 const origin = Astro.url.origin;
-const ogImage = `${origin}/og/user-${username}`;
+const ogImage = `${origin}/og/user/${username}`;
 ---
 
 <BaseLayout