add leaderboard open graph img

app/leaderboard/[guildId]/api.ts

···
 import { ApiV1GuildsGetResponse, ApiV1GuildsModulesLeaderboardGetResponse, ApiV1GuildsTopmembersGetResponse, ApiV1GuildsTopmembersPaginationGetResponse } from "@/typings";
 
-export async function getGuild(guildId: string): Promise<ApiV1GuildsGetResponse> {
+export async function getGuild(guildId: string): Promise<ApiV1GuildsGetResponse | undefined> {
     const res = await fetch(`${process.env.NEXT_PUBLIC_API}/guilds/${guildId}`, {
         headers: { Authorization: process.env.API_SECRET as string },
         next: { revalidate: 60 * 60 }

app/leaderboard/[guildId]/layout.tsx

···
 import { getDesign, getGuild, getPagination } from "./api";
 import Side from "./side.component";
 
-interface LeaderboardProps {
+export interface LeaderboardProps {
     params: { guildId: string },
     children: React.ReactNode;
 }
···
     const guild = await getGuild(params.guildId);
 
     const title = `${guild?.name || "Unknown"}'s Leaderboard`;
-    const description = `Effortlessly discover the most active chatters, voice timers, and acknowledge top inviters. Explore the vibrant community dynamics of the ${guild?.name || "unknown"} discord server right from your web browser.`;
+    const description = `Discover the most active chatters, voice timers, and top inviters. ${guild?.name ? `Explore the community of the ${guild.name} discord server right from your web browser.` : ""}`;
     const url = getCanonicalUrl("leaderboard", params.guildId);
 
     return {
···
             description,
             url,
             type: "website",
-            images: guild?.icon ? `https://cdn.discordapp.com/icons/${guild?.id}/${guild?.icon}.webp?size=256` : "/discord.png"
+            images: {
+                url: `https://4099-2001-871-21c-d364-74bb-b3f8-c7d7-1ffe.ngrok-free.app/leaderboard/${params.guildId}/open-graph.png`,
+                width: 1200,
+                height: 630,
+                type: "image/png"
+            }
         },
         twitter: {
-            card: "summary",
+            card: "summary_large_image",
             title,
             description
         },
-        robots: guild.name ? "index, follow" : "noindex"
+        robots: guild?.name ? "index, follow" : "noindex"
     };
 };
 

app/leaderboard/[guildId]/open-graph.png/route.tsx

···
+/* eslint-disable @next/next/no-img-element */
+
+import { readFile } from "fs/promises";
+import { ImageResponse } from "next/og";
+import { NextRequest } from "next/server";
+
+import { getGuild, getTopMembers } from "../api";
+import { LeaderboardProps } from "../layout";
+
+// export const revalidate = 3600; // 1 hour
+
+export async function GET(
+    request: NextRequest,
+    { params }: LeaderboardProps
+) {
+    const guild = await getGuild(params.guildId);
+    const members = await getTopMembers(params.guildId, { page: 1, type: "messages" });
+
+    const intl = new Intl.NumberFormat("en", { notation: "standard" });
+
+    return new ImageResponse(
+        (
+            <div tw="bg-[#0d0f11] p-18 flex flex-col w-full h-full text-6xl text-white">
+                <div tw="flex mb-6">
+                    <span tw="text-3xl bg-violet-400/75 opacity-80 pt-2 px-4 rounded-xl w-min" style={{ fontWeight: 500 }}>Leaderboard</span>
+                </div>
+                <div tw="flex mb-2 items-center">
+                    {guild?.icon && <img src={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`} tw="h-20 w-20 rounded-2xl relative bottom-3 mr-5" alt="" />}
+                    <div style={{ fontWeight: 800, fontSize: "5rem" }}>{guild?.name || "unknown"}</div>
+                </div>
+                <div tw="text-4xl text-gray-500" style={{ fontWeight: 500 }}>Explore the vibrant community dynamics</div>
+
+                <div tw="flex justify-between mt-42">
+                    {members.slice(0, 3).map((member) => (
+                        <div key={member.id} tw="flex flex-col">
+                            <div tw="flex mb-2 text-5xl" style={{ fontWeight: 600 }}>@{member.username}</div>
+                            <div tw="text-2xl text-gray-400 flex text-3xl" style={{ fontWeight: 500 }}>{intl.format(member.activity.messages)} messages</div>
+                        </div>
+                    ))}
+                </div>
+
+            </div>
+        ),
+        {
+            width: 1200,
+            height: 630,
+            fonts: [
+                {
+                    name: "Poppins",
+                    data: await readFile(process.cwd() + "/assets/Poppins-Regular.ttf"),
+                    style: "normal",
+                    weight: 400
+                },
+                {
+                    name: "Poppins",
+                    data: await readFile(process.cwd() + "/assets/Poppins-Medium.ttf"),
+                    style: "normal",
+                    weight: 500
+                },
+                {
+                    name: "Poppins",
+                    data: await readFile(process.cwd() + "/assets/Poppins-SemiBold.ttf"),
+                    style: "normal",
+                    weight: 600
+                },
+                {
+                    name: "Poppins",
+                    data: await readFile(process.cwd() + "/assets/Poppins-ExtraBold.ttf"),
+                    style: "normal",
+                    weight: 800
+                }
+            ]
+        }
+    );
+}