feat: add user open graph (#5543)

* feat: add user open graph

* fix: add proxy for open graph

src/api/api.ts

@@ -1,4 +1,3 @@
-import Cookies from 'js-cookie';
 import { TOKEN_COOKIE_NAME } from '../lib/jwt.ts';
 import type { APIContext } from 'astro';
 

src/pages/og/[slug].ts

@@ -0,0 +1,45 @@
+import type { APIRoute } from 'astro';
+
+export const prerender = false;
+
+type Params = {
+  slug: string;
+};
+
+export const GET: APIRoute<any, Params> = async (context) => {
+  const { slug } = context.params;
+
+  if (!slug.startsWith('user-')) {
+    return new Response(
+      JSON.stringify({
+        error: 'Invalid slug',
+      }),
+      {
+        status: 400,
+      },
+    );
+  }
+
+  const username = slug.replace('user-', '');
+  if (!username) {
+    return new Response(
+      JSON.stringify({
+        error: 'Invalid username',
+      }),
+      {
+        status: 400,
+      },
+    );
+  }
+
+  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

@@ -1,11 +1,7 @@
 ---
-import { FrownIcon } from 'lucide-react';
 import { userApi } from '../../api/user';
-import AccountLayout from '../../layouts/AccountLayout.astro';
 import { UserPublicProfilePage } from '../../components/UserPublicProfile/UserPublicProfilePage';
-import OpenSourceBanner from '../../components/OpenSourceBanner.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
-import Footer from '../../components/Footer.astro';
-import BaseLayout from "../../layouts/BaseLayout.astro";
 
 export const prerender = false;
 
@@ -26,10 +22,17 @@ let errorMessage = '';
 if (error || !userDetails) {
   errorMessage = error?.message || 'User not found';
 }
+
+const origin = Astro.url.origin;
+const ogImage = `${origin}/og/user-${username}`;
 ---
 
-<BaseLayout title={`${userDetails?.name} - Skill Profile at roadmap.sh`}>
+<BaseLayout
-  {!errorMessage && <UserPublicProfilePage {...userDetails} client:load />}
+  title={`${userDetails?.name || 'Unknown'} - Skill Profile at roadmap.sh`}
+  description='Check out my skill profile at roadmap.sh'
+  ogImageUrl={ogImage}
+>
+  {!errorMessage && <UserPublicProfilePage {...userDetails!} client:load />}
   {
     errorMessage && (
       <div class='container my-24 flex flex-col'>