The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
add noscript warning & move last page into providers
+85
-70
+59
-38
app/layout.tsx
+59
-38
app/layout.tsx
···
13
13
import Header from "@/components/header";
14
14
import TopggIcon from "@/components/icons/topgg";
15
15
import LoginButton from "@/components/login-button";
16
+
import Notice, { NoticeType } from "@/components/notice";
16
17
import cn from "@/utils/cn";
17
18
import { getBaseUrl } from "@/utils/urls";
18
19
19
20
import { Provider } from "./provider";
20
-
import { StoreLastPage } from "./store-lastpage";
21
21
22
22
const outfit = Outfit({ subsets: ["latin"] });
23
23
const montserrat = Montserrat({ subsets: ["latin"] });
···
91
91
}: {
92
92
children: React.ReactNode
93
93
}) {
94
-
const cookieStore = cookies();
95
94
96
95
return (
97
96
<CookiesProvider>
···
110
109
>
111
110
<div id="bg" className="absolute top-0 right-0 w-screen h-screen -z-10" />
112
111
113
-
<nav className="p-4 flex items-center gap-2 text-base font-medium dark:text-neutral-300 text-neutral-700 select-none h-20">
114
-
<Link
115
-
aria-label="Go to Wamellow's homepage"
116
-
className={cn("font-semibold flex items-center mr-2", montserrat.className)}
117
-
href="/?utm_source=wamellow.com&utm_medium=header"
118
-
>
119
-
<Image src="/waya-v3-small.webp" width={64} height={64} alt="" className="rounded-full mr-2 w-8 h-8 shrink-0" />
120
-
<span className="text-xl dark:text-neutral-100 text-neutral-900 hidden sm:block">Wamellow</span>
121
-
</Link>
122
112
123
-
<Divider
124
-
className="h-10 rotate-6 mx-1"
125
-
orientation="vertical"
126
-
/>
127
-
128
-
<div className="flex gap-1">
129
-
<Link
130
-
href="https://ko-fi.com/mwlica"
131
-
className="dark:hover:bg-wamellow-alpha hover:bg-wamellow-100-alpha py-1 px-3 rounded-md duration-200 hidden sm:flex items-center gap-2 group"
132
-
>
133
-
<SiKofi className="group-hover:text-[#ff6c6b] duration-200 mt-0.5" />
134
-
Donate
135
-
</Link>
136
-
<Link href="/vote" className="dark:hover:bg-wamellow-alpha hover:bg-wamellow-100-alpha py-1 px-3 rounded-md duration-200 flex items-center gap-2 group">
137
-
<TopggIcon className="group-hover:text-[#ff3366] duration-200 h-5 w-5 mt-0.5" />
138
-
Vote
139
-
</Link>
140
-
</div>
141
-
142
-
{cookieStore.get("hasSession")?.value === "true" ?
143
-
<Header className="ml-auto" />
144
-
:
145
-
<LoginButton />
146
-
}
147
-
</nav>
113
+
<NoScript />
114
+
<NavBar />
148
115
149
116
<Provider>
150
117
{children}
151
118
</Provider>
152
-
153
-
<StoreLastPage />
154
119
155
120
</body>
156
121
</html>
157
122
</CookiesProvider>
123
+
);
124
+
}
125
+
126
+
function NoScript() {
127
+
return (
128
+
<noscript className="p-4 pb-0 flex">
129
+
<Notice
130
+
className="mb-0"
131
+
message="This site needs JavaScript to work - Please either enable JavaScript or update to a supported Browser."
132
+
type={NoticeType.Info}
133
+
/>
134
+
</noscript>
135
+
);
136
+
}
137
+
138
+
function NavBar() {
139
+
const cookieStore = cookies();
140
+
141
+
return (
142
+
<nav className="p-4 flex items-center gap-2 text-base font-medium dark:text-neutral-300 text-neutral-700 select-none h-20">
143
+
<Link
144
+
aria-label="Go to Wamellow's homepage"
145
+
className={cn("font-semibold flex items-center mr-2", montserrat.className)}
146
+
href="/?utm_source=wamellow.com&utm_medium=header"
147
+
>
148
+
<Image src="/waya-v3-small.webp" width={64} height={64} alt="" className="rounded-full mr-2 w-8 h-8 shrink-0" />
149
+
<span className="text-xl dark:text-neutral-100 text-neutral-900 hidden sm:block">Wamellow</span>
150
+
</Link>
151
+
152
+
<Divider
153
+
className="h-10 rotate-6 mx-1"
154
+
orientation="vertical"
155
+
/>
156
+
157
+
<div className="flex gap-1">
158
+
<Link
159
+
href="https://ko-fi.com/mwlica"
160
+
className="dark:hover:bg-wamellow-alpha hover:bg-wamellow-100-alpha py-1 px-3 rounded-md duration-200 hidden sm:flex items-center gap-2 group"
161
+
>
162
+
<SiKofi className="group-hover:text-[#ff6c6b] duration-200 mt-0.5" />
163
+
Donate
164
+
</Link>
165
+
<Link
166
+
href="/vote"
167
+
className="dark:hover:bg-wamellow-alpha hover:bg-wamellow-100-alpha py-1 px-3 rounded-md duration-200 flex items-center gap-2 group"
168
+
>
169
+
<TopggIcon className="group-hover:text-[#ff3366] duration-200 h-5 w-5 mt-0.5" />
170
+
Vote
171
+
</Link>
172
+
</div>
173
+
174
+
{cookieStore.get("hasSession")?.value === "true"
175
+
? <Header className="ml-auto" />
176
+
: <LoginButton />
177
+
}
178
+
</nav>
158
179
);
159
180
}
+26
app/provider.tsx
+26
app/provider.tsx
···
1
1
"use client";
2
2
3
3
import { NextUIProvider } from "@nextui-org/react";
4
+
import { usePathname } from "next/navigation";
5
+
import { useCookies } from "next-client-cookies";
6
+
import { useEffect } from "react";
4
7
import { QueryClient, QueryClientProvider } from "react-query";
8
+
9
+
import { guildStore } from "@/common/guilds";
5
10
6
11
const queryClient = new QueryClient();
7
12
···
10
15
}
11
16
12
17
export function Provider({ children }: Props) {
18
+
const cookies = useCookies();
19
+
const path = usePathname();
20
+
21
+
useEffect(() => {
22
+
cookies.set(
23
+
"lastpage",
24
+
path,
25
+
{
26
+
secure: process.env.NEXT_PUBLIC_BASE_URL?.startsWith("https://"),
27
+
sameSite: "none",
28
+
domain: process.env.NEXT_PUBLIC_BASE_URL?.split("://")[1],
29
+
expires: 28
30
+
}
31
+
);
32
+
33
+
const params = new URLSearchParams(window.location.search);
34
+
if (params.get("spotify_login_success") === "true" && path !== "/login/spotify") window.close();
35
+
36
+
if (!path.startsWith("/dashboard/")) guildStore.setState(undefined);
37
+
}, [path]);
38
+
13
39
return (
14
40
<NextUIProvider style={{ minHeight: "85%" }}>
15
41
<QueryClientProvider client={queryClient}>
-32
app/store-lastpage.tsx
-32
app/store-lastpage.tsx
···
1
-
"use client";
2
-
3
-
import { usePathname } from "next/navigation";
4
-
import { useCookies } from "next-client-cookies";
5
-
import { useEffect } from "react";
6
-
7
-
import { guildStore } from "@/common/guilds";
8
-
9
-
export function StoreLastPage() {
10
-
const cookies = useCookies();
11
-
const path = usePathname();
12
-
13
-
useEffect(() => {
14
-
cookies.set(
15
-
"lastpage",
16
-
path,
17
-
{
18
-
secure: process.env.NEXT_PUBLIC_BASE_URL?.startsWith("https://"),
19
-
sameSite: "none",
20
-
domain: process.env.NEXT_PUBLIC_BASE_URL?.split("://")[1],
21
-
expires: 28
22
-
}
23
-
);
24
-
25
-
const params = new URLSearchParams(window.location.search);
26
-
if (params.get("spotify_login_success") === "true" && path !== "/login/spotify") window.close();
27
-
28
-
if (!path.startsWith("/dashboard/")) guildStore.setState(undefined);
29
-
}, [path]);
30
-
31
-
return <></>;
32
-
}