The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
fix unknown guild og image
+24
-20
+24
-20
app/leaderboard/[guildId]/open-graph.png/route.tsx
+24
-20
app/leaderboard/[guildId]/open-graph.png/route.tsx
···
5
5
import { NextRequest } from "next/server";
6
6
7
7
import { getGuild } from "@/lib/api";
8
+
import { intl } from "@/utils/numbers";
8
9
import { truncate } from "@/utils/truncate";
10
+
import { getCanonicalUrl } from "@/utils/urls";
9
11
10
12
import { getTopMembers } from "../api";
11
13
import Icon from "../icon.component";
···
23
25
const guild = await getGuild(params.guildId);
24
26
const members = await getTopMembers(params.guildId, { page: 1, type: "messages" });
25
27
26
-
const intl = new Intl.NumberFormat("en", { notation: "standard" });
28
+
const guildExists = guild && "id" in guild;
27
29
28
30
return new ImageResponse(
29
31
(
···
33
35
</div>
34
36
<div tw="flex mb-3 items-center">
35
37
<img
36
-
src={guild?.icon ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png` : "/discord.png"}
38
+
src={guildExists && guild.icon ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png` : getCanonicalUrl("discord.png")}
37
39
tw="h-20 w-20 rounded-2xl relative bottom-3 mr-5"
38
40
alt=""
39
41
/>
40
-
<div style={{ fontWeight: 800, fontSize: "5rem" }}>{truncate(guild?.name || "unknown", 20)}</div>
42
+
<div style={{ fontWeight: 800, fontSize: "5rem" }}>{truncate(guildExists ? guild.name : "unknown", 20)}</div>
41
43
</div>
42
44
<div tw="text-4xl text-gray-500 mb-42" style={{ fontWeight: 500 }}>Explore the vibrant community dynamics</div>
43
45
44
46
45
-
<div tw="flex justify-between">
46
-
{members.slice(0, 3).map((member) => (
47
-
<div key={member.id} tw="flex flex-col">
48
-
<div tw="flex items-center mb-2 text-5xl" style={{ fontWeight: 600 }}>
49
-
<img
50
-
src={member?.avatar ? `https://cdn.discordapp.com/avatars/${member.id}/${member.avatar}.png` : "/discord.png"}
51
-
tw="h-14 w-14 rounded-full mb-2.5 mr-4"
52
-
alt=""
53
-
/>
54
-
{truncate(member.globalName || member.username || "unknown", 10)}
55
-
</div>
47
+
{Array.isArray(members) &&
48
+
<div tw="flex justify-between">
49
+
{members.slice(0, 3).map((member) => (
50
+
<div key={member.id} tw="flex flex-col">
51
+
<div tw="flex items-center mb-2 text-5xl" style={{ fontWeight: 600 }}>
52
+
<img
53
+
src={member?.avatar ? `https://cdn.discordapp.com/avatars/${member.id}/${member.avatar}.png` : getCanonicalUrl("discord.png")}
54
+
tw="h-14 w-14 rounded-full mb-2.5 mr-4"
55
+
alt=""
56
+
/>
57
+
{truncate(member.globalName || member.username || "unknown", 10)}
58
+
</div>
56
59
57
-
<div tw="text-3xl text-gray-400 flex text-3xl" style={{ fontWeight: 500 }}>
58
-
<span tw="mr-2">{intl.format(member.activity.messages)}</span>
59
-
<Icon type={type as "messages"} />
60
+
<div tw="text-3xl text-gray-400 flex text-3xl" style={{ fontWeight: 500 }}>
61
+
<span tw="mr-2">{intl.format(member.activity.messages)}</span>
62
+
<Icon type={type as "messages"} />
63
+
</div>
60
64
</div>
61
-
</div>
62
-
))}
63
-
</div>
65
+
))}
66
+
</div>
67
+
}
64
68
65
69
</div>
66
70
),
