feat: migrate road card endpoint (#5583)

src/components/RoadCard/RoadCardPage.tsx

@@ -34,7 +34,7 @@ export function RoadCardPage() {
   }
 
   const badgeUrl = new URL(
-    `${import.meta.env.PUBLIC_API_URL}/v1-badge/${version}/${user?.id}`,
+    `${import.meta.env.PUBLIC_APP_URL}/card/${version}/${user?.id}`,
   );
 
   badgeUrl.searchParams.set('variant', variant);
@@ -146,7 +146,7 @@ export function RoadCardPage() {
               className="flex cursor-pointer items-center justify-center rounded border border-gray-300 p-1.5 px-2 text-sm font-medium disabled:bg-blue-50"
               onClick={() => copyText(badgeUrl.toString())}
             >
-              <CopyIcon size={16} className="inline-block h-4 w-4 mr-1" />
+              <CopyIcon size={16} className="mr-1 inline-block h-4 w-4" />
 
               {isCopied ? 'Copied!' : 'Copy Link'}
             </button>

src/env.d.ts

@@ -4,6 +4,7 @@
 interface ImportMetaEnv {
   GITHUB_SHA: string;
   PUBLIC_API_URL: string;
+  PUBLIC_APP_URL: string;
   PUBLIC_AVATAR_BASE_URL: string;
   PUBLIC_EDITOR_APP_URL: string;
 }

src/lib/road-card.ts

@@ -0,0 +1,17 @@
+export async function getRoadCard(
+  version: 'tall' | 'wide',
+  userId: string,
+  variant: 'dark' | 'light',
+  roadmaps: string = '',
+) {
+  const url = new URL(
+    `${import.meta.env.PUBLIC_API_URL}/v1-badge/${version}/${userId}`,
+  );
+  url.searchParams.set('variant', variant);
+  if (roadmaps) {
+    url.searchParams.set('roadmaps', roadmaps);
+  }
+
+  const response = await fetch(url.toString());
+  return response.text();
+}

src/pages/card/[version]/[userId].ts

@@ -0,0 +1,34 @@
+import type { APIRoute } from 'astro';
+import { getDefaultOpenGraphImageBuffer } from '../../../lib/open-graph';
+import { getRoadCard } from '../../../lib/road-card';
+
+export const prerender = false;
+
+type Params = {
+  version: 'tall' | 'wide';
+  userId: string;
+};
+
+export const GET: APIRoute<any, Params> = async (context) => {
+  const { userId, version } = context.params;
+
+  if (!userId || !version) {
+    const buffer = await getDefaultOpenGraphImageBuffer();
+    return new Response(buffer, {
+      headers: {
+        'Content-Type': 'image/png',
+      },
+    });
+  }
+
+  const searchParams = new URLSearchParams(context.url.searchParams);
+  const variant = (searchParams.get('variant') as 'dark' | 'light') || 'dark';
+  const roadmaps = searchParams.get('roadmaps') || '';
+
+  const svg = await getRoadCard(version, userId, variant, roadmaps);
+  return new Response(svg, {
+    headers: {
+      'Content-Type': 'image/svg+xml',
+    },
+  });
+};