The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
fix lightmode, improve leaderboard pages
+41
-28
+6
-6
app/(home)/layout.tsx
+6
-6
app/(home)/layout.tsx
···
48
48
</div>
49
49
50
50
<div className="ml-auto svg-max flex flex-wrap items-center gap-2 mt-2 md:mt-0">
51
-
<Link href="https://tiktok.com/@waya.one" className="text-neutral-400 hover:text-neutral-300 duration-200 h-6 w-6" aria-label="Wamellow on TikTok">
51
+
<Link href="https://tiktok.com/@waya.one" className="text-neutral-400 hover:dark:text-neutral-300 hover:text-neutral-700 duration-200 h-6 w-6" aria-label="Wamellow on TikTok">
52
52
<BiLogoTiktok />
53
53
</Link>
54
-
<Link href="https://youtube.com/@wayabot" className="text-neutral-400 hover:text-neutral-300 duration-200 h-6 w-6" aria-label="Wamellow on YouTube">
54
+
<Link href="https://youtube.com/@wayabot" className="text-neutral-400 hover:dark:text-neutral-300 hover:text-neutral-700 duration-200 h-6 w-6" aria-label="Wamellow on YouTube">
55
55
<BiLogoYoutube />
56
56
</Link>
57
-
<Link href="https://twitter.com/licamw" className="text-neutral-400 hover:text-neutral-300 duration-200 h-6 w-6" aria-label="Wamellow on Twitter (X.com)">
57
+
<Link href="https://twitter.com/licamw" className="text-neutral-400 hover:dark:text-neutral-300 hover:text-neutral-700 duration-200 h-6 w-6" aria-label="Wamellow on Twitter (X.com)">
58
58
<BiLogoTwitter />
59
59
</Link>
60
-
<Link href="https://github.com/Luna-devv" className="text-neutral-400 hover:text-neutral-300 duration-200 h-6 w-6" aria-label="Wamellow's developers on GitHub">
60
+
<Link href="https://github.com/Luna-devv" className="text-neutral-400 hover:dark:text-neutral-300 hover:text-neutral-700 duration-200 h-6 w-6" aria-label="Wamellow's developers on GitHub">
61
61
<BiLogoGithub />
62
62
</Link>
63
-
<Link href="mailto:support@waya.one" className="text-neutral-400 hover:text-neutral-300 duration-200 h-6 w-6" aria-label="Contaxt Wamellow via email">
63
+
<Link href="mailto:support@waya.one" className="text-neutral-400 hover:dark:text-neutral-300 hover:text-neutral-700 duration-200 h-6 w-6" aria-label="Contaxt Wamellow via email">
64
64
<BiLogoGmail />
65
65
</Link>
66
-
<Link href="https://lunish.nl/kofi" className="text-neutral-400 hover:text-neutral-300 duration-200 h-[22px] w-[22px]" aria-label="Support Wamellow's developers monetarily on Kofi">
66
+
<Link href="https://lunish.nl/kofi" className="text-neutral-400 hover:dark:text-neutral-300 hover:text-neutral-700 duration-200 h-[22px] w-[22px]" aria-label="Support Wamellow's developers monetarily on Kofi">
67
67
<SiKofi />
68
68
</Link>
69
69
<Link href="https://top.gg/bot/1125449347451068437" className="text-neutral-400 hover:text-[#ff3366] duration-200 h-6 w-6" aria-label="Wamellow on top.gg">
+26
-9
app/(home)/page.tsx
+26
-9
app/(home)/page.tsx
···
2
2
import Image from "next/image";
3
3
import Link from "next/link";
4
4
import { BsDiscord } from "react-icons/bs";
5
-
import { HiArrowRight, HiInformationCircle, HiPlus } from "react-icons/hi";
5
+
import { HiArrowRight, HiExternalLink, HiInformationCircle, HiPlus } from "react-icons/hi";
6
6
7
7
import ClientCountUp from "@/components/ClientCountUp";
8
8
import Highlight from "@/components/discord/Markdown";
···
15
15
const montserrat = Montserrat({ subsets: ["latin"] });
16
16
const handwritten = Patrick_Hand({ subsets: ["latin"], weight: "400" });
17
17
18
-
export default async function Home() {
18
+
export default async function Home({ searchParams }: { searchParams: { ref: string } }) {
19
19
const topGuilds = await fetch(`${process.env.NEXT_PUBLIC_API}/top-guilds`, { headers: { Authorization: process.env.API_SECRET as string }, next: { revalidate: 60 * 60 } }).then((res) => res.json()) as ApiV1TopguildsGetResponse[];
20
20
const stats = await fetch(`${process.env.NEXT_PUBLIC_API}/statistics`, { headers: { Authorization: process.env.API_SECRET as string }, next: { revalidate: 60 * 60 } }).then((res) => res.json()) as ApiV1StatisticsGetResponse;
21
21
···
24
24
25
25
const InnerMarquee = ({ id }: { id: number }) => (
26
26
<>
27
-
{topGuilds.slice(id === 2 ? 10 : 0, id * 10)?.map((guild) => (
27
+
{[...topGuilds, ...topGuilds, ...topGuilds, ...topGuilds].slice(id === 2 ? 10 : 0, id * 10)?.map((guild) => (
28
28
<div className="dark:bg-wamellow bg-wamellow-100 py-4 px-5 flex items-center rounded-lg w-72 drop-shadow-md" key={Math.random().toString()}>
29
29
<Image src={(guild.icon && !guild.icon.includes("null")) ? guild.icon : "/discord.png"} loading="lazy" width={52} height={52} alt="Server" className="rounded-full" />
30
30
<div className="ml-3 text-sm">
···
53
53
</div>
54
54
</div>
55
55
56
-
<div className="md:text-xl text-md py-4 px-8 max-w-4xl sm:text-center flex flex-col items-center">
56
+
<div className="md:text-xl text-md md:py-4 py-2 px-4 max-w-4xl sm:text-center flex flex-col items-center">
57
57
<span className="tracking-wide">
58
58
Experience the next-gen revolution with Wamellow, offering a list of features and extensive customization, providing a superior alternative to popular bots.
59
59
</span>
···
64
64
<span className="block sm:hidden">Wamellow</span>
65
65
<span className="hidden sm:block">Invite Wamellow</span>
66
66
</Link>
67
-
<Link href="/support" className="flex text-neutral-300 dark:bg-wamellow bg-wamellow-100 dark:hover:bg-wamellow-light hover:bg-wamellow-100-light dark:hover:text-neutral-100 py-2 px-4 rounded-md duration-200 w-1/2 sm:w-fit justify-center gap-2">
67
+
<Link href="/support" className="flex dark:text-neutral-300 text-neutral-700 dark:bg-wamellow bg-wamellow-100 dark:hover:bg-wamellow-light hover:bg-wamellow-100-light py-2 px-4 rounded-md duration-200 w-1/2 sm:w-fit justify-center gap-2">
68
68
<BsDiscord className="relative top-1" />
69
69
<span className="block sm:hidden">Support</span>
70
70
<span className="hidden sm:block">Join support</span>
···
83
83
84
84
</div>
85
85
86
-
<div className="lg:mt-20 mt-12 max-w-full w-full">
86
+
<div className="lg:mt-20 mt-12" />
87
+
88
+
{searchParams.ref === "waya.one" &&
89
+
<span className="w-full text-neutral-100 bg-violet-400/25 py-3 px-5 mb-6 rounded-md md:flex items-center">
90
+
<div className="flex gap-2 items-center">
91
+
<HiInformationCircle className="h-6 w-6" />
92
+
<span className="text-md font-medium">Learn more about what Wamellow.com will do with Waya.one</span>
93
+
</div>
94
+
95
+
<Link href="/new" className="ml-auto md:mt-0 mt-3 w-fit flex text-blue-400 hover:text-blue-500 duration-300 items-center gap-2">
96
+
<span>View article</span>
97
+
<HiExternalLink className="h-5 w-5" />
98
+
</Link>
99
+
100
+
</span>
101
+
}
102
+
103
+
<div className="max-w-full w-full">
87
104
<h2 className={`${montserrat.className} lg:text-3xl text-2xl dark:text-neutral-100 text-neutral-900 font-semibold underline decoration-violet-400`}>Widely used by you</h2>
88
-
<div className="md:text-xl text-md mt-3 tracking-wide">
105
+
<div className="md:text-xl text-md mt-3">
89
106
Wamellow is widely embraced across diverse servers, setting it apart as the go-to choice.
90
107
</div>
91
108
···
117
134
<div className="flex flex-col md:flex-row gap-8 items-center">
118
135
119
136
<div className="md:w-1/2">
120
-
<h2 className={`${montserrat.className} lg:text-3xl text-2xl dark:text-neutral-100 text-neutral-900 font-semibold underline decoration-violet-400`}>Fun /ranks and /lederboards 🦄</h2>
137
+
<h2 className={`${montserrat.className} lg:text-3xl text-2xl dark:text-neutral-100 text-neutral-900 font-semibold underline decoration-violet-400`}>Fun /ranks & /leaderboards 🦄</h2>
121
138
<div className="text-md pt-6">
122
139
Enhance your server{"’"}s engagement with our text-, voice- and invite based leaderboards, tailored to track and reward your most active members.
123
140
Craft tailored access to channels and roles, granting exclusive permissions to dedicated members.
···
292
309
<div className="dark:bg-wamellow/75 bg-wamellow-100/70 p-5 md:w-1/4 md:block hidden">
293
310
<div className="flex">
294
311
<div className="text-sm mb-0.5">Our experience with</div>
295
-
<Link href="https://discordlist.gg/user/821472922140803112" className="ml-auto hover:text-violet-400 duration-300">
312
+
<Link href="https://discordlist.gg/user/821472922140803112" className="ml-auto dark:text-neutral-400 text-neutral-600 dark:hover:text-violet-400 hover:text-violet-600 duration-300">
296
313
<HiInformationCircle />
297
314
</Link>
298
315
</div>
+5
-6
app/dashboard/page.tsx
+5
-6
app/dashboard/page.tsx
···
76
76
<LoginButton
77
77
className="w-full md:w-fit text-center"
78
78
addClassName="justify-center"
79
-
width={web.width}
80
-
message="Reload Guilds"
79
+
message="Reload"
81
80
/>
82
81
</div>
83
82
</div>
···
85
84
<div className="flex gap-3">
86
85
<hr className="mx-0 p-1 my-4 dark:border-wamellow-light border-wamellow-100-light w-full" />
87
86
88
-
<div className="bg-wamellow md:flex gap-1 text-neutral-400 rounded-md overflow-hidden w-[72px] mb-5 hidden">
89
-
<button onClick={() => setDisplay("GRID")} className={`h-7 w-8 flex items-center justify-center p-[4px] rounded-md ${display === "GRID" ? "bg-neutral-700/50" : "hover:bg-neutral-700/30"}`}>
87
+
<div className="dark:bg-wamellow bg-wamellow-100 md:flex gap-1 dark:text-neutral-400 text-neutral-600 rounded-md overflow-hidden w-[72px] mb-5 hidden">
88
+
<button onClick={() => setDisplay("GRID")} className={`h-7 w-8 flex items-center justify-center p-[4px] rounded-md ${display === "GRID" ? "dark:bg-neutral-700/50 bg-neutral-400/50" : "dark:bg-neutral-800/30 bg-neutral-400/30"}`}>
90
89
<HiViewGrid />
91
90
</button>
92
-
<button onClick={() => setDisplay("LIST")} className={`h-7 w-8 flex items-center justify-center p-[4px] rounded-md ${display === "LIST" ? "bg-neutral-700/50" : "hover:bg-neutral-700/30"}`}>
91
+
<button onClick={() => setDisplay("LIST")} className={`h-7 w-8 flex items-center justify-center p-[4px] rounded-md ${display === "LIST" ? "dark:bg-neutral-700/50 bg-neutral-400/50" : "dark:bg-neutral-800/30 bg-neutral-400/30"}`}>
93
92
<HiViewList />
94
93
</button>
95
94
</div>
···
134
133
<ImageReduceMotion url={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}`} size={56} alt={`Server icon of @${guild.name}`} className="rounded-lg h-14 w-14 z-1 relative drop-shadow-md" />
135
134
<div className="ml-3 text-sm relative bottom-1">
136
135
<div className="text-lg dark:text-neutral-200 font-medium text-neutral-800 mb-3">{truncate(guild.name, 20)}</div>
137
-
<Link href={`/dashboard/${guild.id}${searchParams.get("to") ? `/${searchParams.get("to")}` : ""}`} className="bg-neutral-500/40 hover:bg-neutral-400/40 hover:text-neutral-100 py-2 px-3 rounded-md duration-200">Manage</Link>
136
+
<Link href={`/dashboard/${guild.id}${searchParams.get("to") ? `/${searchParams.get("to")}` : ""}`} className="dark:bg-neutral-500/40 bg-neutral-400/40 dark:hover:bg-neutral-400/40 hover:bg-neutral-500/40 hover:text-neutral-900 dark:hover:text-neutral-200 py-2 px-3 rounded-md duration-200">Manage</Link>
138
137
</div>
139
138
140
139
</motion.li>
+3
-6
app/leaderboard/[guildId]/PageComponent.tsx
+3
-6
app/leaderboard/[guildId]/PageComponent.tsx
···
4
4
import { HiArrowLeft, HiArrowRight } from "react-icons/hi";
5
5
6
6
import { userStore } from "@/common/user";
7
-
import { webStore } from "@/common/webstore";
8
7
import LoginButton from "@/components/LoginButton";
9
8
10
9
const PageComponent: FunctionComponent<{ searchParams: { page: string, type: string }, membersLength: number }> = ({ searchParams, membersLength }) => {
11
10
const user = userStore((s) => s);
12
-
const web = webStore((w) => w);
13
11
14
12
if (!user?.id) return (
15
13
<LoginButton
16
14
className="w-full text-center"
17
15
addClassName="justify-center"
18
-
width={web.width}
19
16
message="Login to view more"
20
17
/>
21
18
);
···
24
21
<>
25
22
<Link
26
23
href={(searchParams.page && (parseInt(searchParams.page) || 0) !== 0) ? `?page=${(parseInt(searchParams.page) || 0) - 1}${searchParams.type ? `&type=${searchParams.type}` : ""}` : ""}
27
-
className={`dark:bg-wamellow bg-wamellow-100 hover:dark:bg-wamellow-light hover:bg-wamellow-100-light h-full w-1/3 rounded-l-md duration-100 flex items-center ${(!searchParams.page || (parseInt(searchParams.page) || 0) === 0) ? "cursor-not-allowed opacity-50" : "opacity-80 cursor-pointer"}`}
24
+
className={`dark:bg-wamellow bg-wamellow-160 hover:dark:bg-wamellow-light hover:bg-wamellow-160-light h-full w-14 rounded-l-md duration-100 flex items-center ${(!searchParams.page || (parseInt(searchParams.page) || 0) === 0) ? "cursor-not-allowed opacity-50" : "opacity-80 cursor-pointer"}`}
28
25
>
29
26
<HiArrowLeft className="m-auto text-2xl font-thin dark:text-neutral-300 text-neutral-700 p-1" />
30
27
</Link>
31
28
32
29
<input
33
-
className="outline-none text-center w-1/3 min-h-full dark:bg-wamellow bg-wamellow-100 font-semibold text-md flex items-center text-neutral-500 rounded-none opacity-80"
30
+
className="outline-none text-center w-14 min-h-full dark:bg-wamellow bg-wamellow-160 font-semibold text-md flex items-center text-neutral-500 rounded-none opacity-80"
34
31
value={searchParams.page ?? 0}
35
32
inputMode="numeric"
36
33
disabled={true}
···
38
35
39
36
<Link
40
37
href={membersLength >= 10 ? `?page=${(parseInt(searchParams.page) || 0) + 1}${searchParams.type ? `&type=${searchParams.type}` : ""}` : ""}
41
-
className={`dark:bg-wamellow bg-wamellow-100 hover:dark:bg-wamellow-light hover:bg-wamellow-100-light h-full w-1/3 rounded-r-md duration-100 flex items-center ${membersLength >= 10 ? "opacity-80 cursor-pointer" : "cursor-not-allowed opacity-50"}`}
38
+
className={`dark:bg-wamellow bg-wamellow-160 hover:dark:bg-wamellow-light hover:bg-wamellow-160-light h-full w-14 rounded-r-md duration-100 flex items-center ${membersLength >= 10 ? "opacity-80 cursor-pointer" : "cursor-not-allowed opacity-50"}`}
42
39
>
43
40
<HiArrowRight className="m-auto text-2xl font-thin dark:text-neutral-300 text-neutral-700 p-1" />
44
41
</Link>