fix: update og routes

src/lib/open-graph.ts

@@ -4,10 +4,23 @@ type RoadmapOpenGraphQuery = {
 };
 
 export function getOpenGraphImageUrl(params: RoadmapOpenGraphQuery) {
-  return `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/og/${params.group}-${params.resourceId}`;
+  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/og/[slug].ts

@@ -1,82 +0,0 @@
-import type { APIRoute } from 'astro';
-import { getDefaultOpenGraphImageBuffer } from '../../lib/open-graph';
-
-export const prerender = false;
-
-type Params = {
-  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-') &&
-    !slug.startsWith('roadmap-') &&
-    !slug.startsWith('best-practice') &&
-    !slug.startsWith('guide-')
-  ) {
-    const buffer = await getDefaultOpenGraphImageBuffer();
-    return new Response(buffer, {
-      headers: {
-        'Content-Type': 'image/png',
-      },
-    });
-  }
-
-  if (slug.startsWith('user-')) {
-    const username = slug.replace('user-', '');
-    if (!username) {
-      const buffer = await getDefaultOpenGraphImageBuffer();
-      return new Response(buffer, {
-        headers: {
-          'Content-Type': 'image/png',
-        },
-      });
-    }
-
-    const response = await fetch(
-      `${import.meta.env.PUBLIC_API_URL}/v1-profile-open-graph/${username}`,
-    );
-
-    const svg = await response.text();
-    return new Response(svg, {
-      headers: {
-        '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',
-      },
-    });
-  }
-};

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/user/[username].ts

@@ -0,0 +1,32 @@
+import type { APIRoute } from 'astro';
+import { getDefaultOpenGraphImageBuffer } from '../../../lib/open-graph';
+
+export const prerender = false;
+
+type Params = {
+  username: string;
+};
+
+export const GET: APIRoute<any, Params> = async (context) => {
+  const { username } = context.params;
+
+  if (!username || !/^[a-zA-Z0-9]*?[a-zA-Z]+?[a-zA-Z0-9]*?$/.test(username)) {
+    const buffer = await getDefaultOpenGraphImageBuffer();
+    return new Response(buffer, {
+      headers: {
+        'Content-Type': 'image/png',
+      },
+    });
+  }
+
+  const response = await fetch(
+    `${import.meta.env.PUBLIC_API_URL}/v1-profile-open-graph/${username}`,
+  );
+
+  const svg = await response.text();
+  return new Response(svg, {
+    headers: {
+      'Content-Type': 'image/svg+xml',
+    },
+  });
+};

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