The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
add avatars to og lb image & cache params
+23
-4
+4
-1
app/leaderboard/[guildId]/layout.tsx
+4
-1
app/leaderboard/[guildId]/layout.tsx
···
28
28
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.` : ""}`;
29
29
const url = getCanonicalUrl("leaderboard", params.guildId);
30
30
31
+
const date = new Date();
32
+
const cacheQuery = `${date.getDate()}${date.getHours()}`
33
+
31
34
return {
32
35
title,
33
36
description,
···
40
43
url,
41
44
type: "website",
42
45
images: {
43
-
url: getCanonicalUrl("leaderboard", params.guildId, "open-graph.png"),
46
+
url: getCanonicalUrl("leaderboard", params.guildId, `open-graph.png?ca=${cacheQuery}`),
44
47
width: 1200,
45
48
height: 630,
46
49
type: "image/png"
+19
-3
app/leaderboard/[guildId]/open-graph.png/route.tsx
+19
-3
app/leaderboard/[guildId]/open-graph.png/route.tsx
···
8
8
9
9
import { getGuild, getTopMembers } from "../api";
10
10
import { LeaderboardProps } from "../layout";
11
+
import MessagesIcon from "@/components/icons/messages";
11
12
12
13
export const revalidate = 3600; // 1 hour
13
14
···
27
28
<span tw="text-3xl bg-violet-400/75 opacity-80 pt-2 px-4 rounded-xl" style={{ fontWeight: 500 }}>Leaderboard</span>
28
29
</div>
29
30
<div tw="flex mb-3 items-center">
30
-
{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="" /> : <></>}
31
+
<img
32
+
src={guild?.icon ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png` : "/discord.png"}
33
+
tw="h-20 w-20 rounded-2xl relative bottom-3 mr-5"
34
+
alt=""
35
+
/>
31
36
<div style={{ fontWeight: 800, fontSize: "5rem" }}>{truncate(guild?.name || "unknown", 20)}</div>
32
37
</div>
33
38
<div tw="text-4xl text-gray-500 mb-42" style={{ fontWeight: 500 }}>Explore the vibrant community dynamics</div>
···
36
41
<div tw="flex justify-between">
37
42
{members.slice(0, 3).map((member) => (
38
43
<div key={member.id} tw="flex flex-col">
39
-
<div tw="flex mb-2 text-5xl" style={{ fontWeight: 600 }}>@{truncate(member.username || "unknown", 8)}</div>
40
-
<div tw="text-2xl text-gray-400 flex text-3xl" style={{ fontWeight: 500 }}>{intl.format(member.activity.messages)} messages</div>
44
+
<div tw="flex items-center mb-2 text-5xl" style={{ fontWeight: 600 }}>
45
+
<img
46
+
src={member?.avatar ? `https://cdn.discordapp.com/avatars/${member.id}/${member.avatar}.png` : "/discord.png"}
47
+
tw="h-14 w-14 rounded-full mb-2.5 mr-4"
48
+
alt=""
49
+
/>
50
+
{truncate(member.globalName || member.username || "unknown", 10)}
51
+
</div>
52
+
53
+
<div tw="text-3xl text-gray-400 flex text-3xl" style={{ fontWeight: 500 }}>
54
+
<span tw="mr-2">{intl.format(member.activity.messages)}</span>
55
+
<MessagesIcon height="0.9em" />
56
+
</div>
41
57
</div>
42
58
))}
43
59
</div>
