Skip to content

Commit 3df206c

Browse files
mrepol742mrepol742
authored
Merge pull request #51 from mrepol742/master
feat(seo): add Open Graph and Twitter metadata
2 parents 222937d + 90b7435 commit 3df206c

6 files changed

Lines changed: 229 additions & 29 deletions

File tree

‎app/(auth)/login/page.tsx‎

Lines changed: 74 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,58 @@ export const metadata: Metadata = {
77
title: "Login - DevPulse",
88
description:
99
"Log in to your DevPulse account to monitor your coding activity and compete on leaderboards.",
10+
keywords: [
11+
"DevPulse",
12+
"login",
13+
"coding activity tracker",
14+
"developer leaderboards",
15+
"WakaTime integration",
16+
"coding stats",
17+
"programming habits",
18+
"developer competition",
19+
"flex your projects",
20+
"coding streaks",
21+
"productivity insights",
22+
],
23+
openGraph: {
24+
title: "Login - DevPulse",
25+
description:
26+
"Log in to your DevPulse account to monitor your coding activity and compete on leaderboards.",
27+
url: "https://devpulse-waka.vercel.app/login",
28+
siteName: "DevPulse",
29+
images: [
30+
{
31+
url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
32+
width: 1200,
33+
height: 630,
34+
alt: "DevPulse Cover Image",
35+
},
36+
],
37+
locale: "en_US",
38+
type: "website",
39+
},
40+
twitter: {
41+
card: "summary_large_image",
42+
title: "Login - DevPulse",
43+
description:
44+
"Log in to your DevPulse account to monitor your coding activity and compete on leaderboards.",
45+
images: [
46+
{
47+
url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
48+
alt: "DevPulse Cover Image",
49+
},
50+
],
51+
},
1052
};
1153

1254
export default async function Login(props: {
1355
searchParams?: Promise<{ redirect?: string }>;
1456
}) {
1557
const redirectParam = (await props.searchParams)?.redirect;
1658
const redirectTo =
17-
redirectParam && redirectParam.startsWith("/") && !redirectParam.startsWith("//")
59+
redirectParam &&
60+
redirectParam.startsWith("/") &&
61+
!redirectParam.startsWith("//")
1862
? redirectParam
1963
: undefined;
2064

@@ -26,9 +70,14 @@ export default async function Login(props: {
2670
<div className="absolute inset-0 grid-bg opacity-30" />
2771

2872
<div className="relative z-10">
29-
<Link href="/" className="flex items-center gap-3 w-fit hover:opacity-80 transition">
73+
<Link
74+
href="/"
75+
className="flex items-center gap-3 w-fit hover:opacity-80 transition"
76+
>
3077
<Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
31-
<span className="text-2xl font-bold tracking-tight text-white">DevPulse</span>
78+
<span className="text-2xl font-bold tracking-tight text-white">
79+
DevPulse
80+
</span>
3281
</Link>
3382
</div>
3483

@@ -37,26 +86,31 @@ export default async function Login(props: {
3786
Welcome back to your dashboard.
3887
</h1>
3988
<p className="text-gray-400 text-lg leading-relaxed mb-8">
40-
Access your personalized coding metrics, compare your stats, and keep your productivity streak alive.
89+
Access your personalized coding metrics, compare your stats, and
90+
keep your productivity streak alive.
4191
</p>
42-
92+
4393
<div className="glass-card border border-white/5 rounded-2xl p-5 bg-white/5 backdrop-blur-md shadow-2xl">
4494
<div className="flex items-center gap-2 mb-4">
4595
<div className="w-3 h-3 rounded-full bg-red-500/80"></div>
4696
<div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
4797
<div className="w-3 h-3 rounded-full bg-green-500/80"></div>
48-
<span className="ml-2 text-xs font-mono text-gray-500">devpulse-auth.ts</span>
98+
<span className="ml-2 text-xs font-mono text-gray-500">
99+
devpulse-auth.ts
100+
</span>
49101
</div>
50102
<div className="space-y-1.5 font-mono text-sm">
51103
<div className="flex">
52-
<span className="text-indigo-400 mr-2">import</span>
53-
<span className="text-gray-200">{"{ Metrics }"}</span>
54-
<span className="text-indigo-400 mx-2">from</span>
55-
<span className="text-green-400">&apos;@devpulse/core&apos;</span>
104+
<span className="text-indigo-400 mr-2">import</span>
105+
<span className="text-gray-200">{"{ Metrics }"}</span>
106+
<span className="text-indigo-400 mx-2">from</span>
107+
<span className="text-green-400">
108+
&apos;@devpulse/core&apos;
109+
</span>
56110
<span className="text-gray-400">;</span>
57111
</div>
58112
<div className="flex mt-2">
59-
<span className="text-purple-400 mr-2">await</span>
113+
<span className="text-purple-400 mr-2">await</span>
60114
<span className="text-blue-400">Metrics</span>
61115
<span className="text-gray-200">.</span>
62116
<span className="text-yellow-200">syncToday</span>
@@ -79,7 +133,7 @@ export default async function Login(props: {
79133
{/* Right Side - Form */}
80134
<div className="w-full lg:w-1/2 flex flex-col justify-center items-center p-8 sm:p-12 xl:p-20 relative">
81135
<div className="absolute inset-0 grid-bg opacity-20 lg:hidden" />
82-
136+
83137
<div className="w-full max-w-sm relative z-10">
84138
<div className="lg:hidden flex items-center justify-center gap-3 mb-10">
85139
<Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
@@ -88,15 +142,21 @@ export default async function Login(props: {
88142

89143
<div className="mb-8 text-left">
90144
<h2 className="text-3xl font-bold text-white mb-2">Log in</h2>
91-
<p className="text-gray-400">Enter your credentials to access your account.</p>
145+
<p className="text-gray-400">
146+
Enter your credentials to access your account.
147+
</p>
92148
</div>
93149

94150
<LoginForm />
95151

96152
<p className="mt-8 text-center text-sm text-gray-400">
97153
Don&apos;t have an account?{" "}
98154
<Link
99-
href={redirectTo ? `/signup?redirect=${encodeURIComponent(redirectTo)}` : "/signup"}
155+
href={
156+
redirectTo
157+
? `/signup?redirect=${encodeURIComponent(redirectTo)}`
158+
: "/signup"
159+
}
100160
className="text-indigo-400 hover:text-indigo-300 font-semibold transition-colors underline-offset-4 hover:underline"
101161
>
102162
Sign up

‎app/(auth)/signup/page.tsx‎

Lines changed: 60 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,45 @@ export const metadata: Metadata = {
77
title: "Sign Up - DevPulse",
88
description:
99
"Create a DevPulse account to monitor your coding activity and compete on leaderboards.",
10+
openGraph: {
11+
title: "Sign Up - DevPulse",
12+
description:
13+
"Create a DevPulse account to monitor your coding activity and compete on leaderboards.",
14+
url: "https://devpulse-waka.vercel.app/signup",
15+
siteName: "DevPulse",
16+
images: [
17+
{
18+
url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
19+
width: 1200,
20+
height: 630,
21+
alt: "DevPulse Cover Image",
22+
},
23+
],
24+
locale: "en_US",
25+
type: "website",
26+
},
27+
twitter: {
28+
card: "summary_large_image",
29+
title: "Sign Up - DevPulse",
30+
description:
31+
"Create a DevPulse account to monitor your coding activity and compete on leaderboards.",
32+
images: [
33+
{
34+
url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
35+
alt: "DevPulse Cover Image",
36+
},
37+
],
38+
},
1039
};
1140

1241
export default async function Signup(props: {
1342
searchParams?: Promise<{ redirect?: string }>;
1443
}) {
1544
const redirectParam = (await props.searchParams)?.redirect;
1645
const redirectTo =
17-
redirectParam && redirectParam.startsWith("/") && !redirectParam.startsWith("//")
46+
redirectParam &&
47+
redirectParam.startsWith("/") &&
48+
!redirectParam.startsWith("//")
1849
? redirectParam
1950
: undefined;
2051

@@ -26,9 +57,14 @@ export default async function Signup(props: {
2657
<div className="absolute inset-0 grid-bg opacity-30" />
2758

2859
<div className="relative z-10">
29-
<Link href="/" className="flex items-center gap-3 w-fit hover:opacity-80 transition">
60+
<Link
61+
href="/"
62+
className="flex items-center gap-3 w-fit hover:opacity-80 transition"
63+
>
3064
<Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
31-
<span className="text-2xl font-bold tracking-tight text-white">DevPulse</span>
65+
<span className="text-2xl font-bold tracking-tight text-white">
66+
DevPulse
67+
</span>
3268
</Link>
3369
</div>
3470

@@ -37,21 +73,24 @@ export default async function Signup(props: {
3773
Start measuring your coding pulse.
3874
</h1>
3975
<p className="text-gray-400 text-lg leading-relaxed mb-8">
40-
Join thousands of developers tracking their progress, competing on leaderboards, and leveling up their skills.
76+
Join thousands of developers tracking their progress, competing on
77+
leaderboards, and leveling up their skills.
4178
</p>
42-
79+
4380
<div className="glass-card border border-white/5 rounded-2xl p-5 bg-white/5 backdrop-blur-md shadow-2xl">
4481
<div className="flex items-center gap-2 mb-4">
4582
<div className="w-3 h-3 rounded-full bg-red-500/80"></div>
4683
<div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
4784
<div className="w-3 h-3 rounded-full bg-green-500/80"></div>
48-
<span className="ml-2 text-xs font-mono text-gray-500">setup.ts</span>
85+
<span className="ml-2 text-xs font-mono text-gray-500">
86+
setup.ts
87+
</span>
4988
</div>
5089
<div className="space-y-1.5 font-mono text-sm">
5190
<div className="flex">
52-
<span className="text-purple-400 mr-2">const</span>
53-
<span className="text-blue-400">dev</span>
54-
<span className="text-gray-200 mx-2">=</span>
91+
<span className="text-purple-400 mr-2">const</span>
92+
<span className="text-blue-400">dev</span>
93+
<span className="text-gray-200 mx-2">=</span>
5594
<span className="text-indigo-400 mr-2">new</span>
5695
<span className="text-yellow-200">Developer</span>
5796
<span className="text-gray-200">();</span>
@@ -81,24 +120,32 @@ export default async function Signup(props: {
81120
{/* Right Side - Form */}
82121
<div className="w-full lg:w-1/2 flex flex-col justify-center items-center p-8 sm:p-12 xl:p-20 relative">
83122
<div className="absolute inset-0 grid-bg opacity-20 lg:hidden" />
84-
123+
85124
<div className="w-full max-w-sm relative z-10">
86125
<div className="lg:hidden flex items-center justify-center gap-3 mb-10">
87126
<Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
88127
<h2 className="text-3xl font-bold text-white">DevPulse</h2>
89128
</div>
90129

91130
<div className="mb-8 text-left">
92-
<h2 className="text-3xl font-bold text-white mb-2">Create an account</h2>
93-
<p className="text-gray-400">Start tracking your coding stats today.</p>
131+
<h2 className="text-3xl font-bold text-white mb-2">
132+
Create an account
133+
</h2>
134+
<p className="text-gray-400">
135+
Start tracking your coding stats today.
136+
</p>
94137
</div>
95138

96139
<SignupForm />
97140

98141
<p className="mt-8 text-center text-sm text-gray-400">
99142
Already have an account?{" "}
100143
<Link
101-
href={redirectTo ? `/login?redirect=${encodeURIComponent(redirectTo)}` : "/login"}
144+
href={
145+
redirectTo
146+
? `/login?redirect=${encodeURIComponent(redirectTo)}`
147+
: "/login"
148+
}
102149
className="text-indigo-400 hover:text-indigo-300 font-semibold transition-colors underline-offset-4 hover:underline"
103150
>
104151
Log in

‎app/(public)/flex/page.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,52 @@ import Image from "next/image";
66
import { timeAgo } from "@/app/utils/time";
77
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
88
import { faExternalLink } from "@fortawesome/free-solid-svg-icons";
9+
import { Metadata } from "next";
10+
11+
export const metadata: Metadata = {
12+
title: "Flexes - DevPulse",
13+
description:
14+
"Flex your coding projects and share your achievements with the DevPulse community. See what others are working on and get inspired!",
15+
keywords: [
16+
"DevPulse",
17+
"coding flexes",
18+
"developer projects",
19+
"coding achievements",
20+
"programming flexes",
21+
"open source projects",
22+
"developer community",
23+
"coding inspiration",
24+
],
25+
openGraph: {
26+
title: "Flexes - DevPulse",
27+
description:
28+
"Flex your coding projects and share your achievements with the DevPulse community. See what others are working on and get inspired!",
29+
url: "https://devpulse-waka.vercel.app/flex",
30+
siteName: "DevPulse",
31+
images: [
32+
{
33+
url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
34+
width: 1200,
35+
height: 630,
36+
alt: "DevPulse Cover Image",
37+
},
38+
],
39+
locale: "en_US",
40+
type: "website",
41+
},
42+
twitter: {
43+
card: "summary_large_image",
44+
title: "Flexes - DevPulse",
45+
description:
46+
"Flex your coding projects and share your achievements with the DevPulse community. See what others are working on and get inspired!",
47+
images: [
48+
{
49+
url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
50+
alt: "DevPulse Cover Image",
51+
},
52+
],
53+
},
54+
};
955

1056
export default async function Flexs() {
1157
const supabase = await createClient();

‎app/(public)/join/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export async function generateMetadata({
6363
description,
6464
type: "website",
6565
siteName: "DevPulse",
66-
url: `/join?id=${encodeURIComponent(code)}`,
66+
url: `https://devpulse-waka.vercel.app/join?id=${encodeURIComponent(code)}`,
6767
},
6868
twitter: {
6969
card: "summary_large_image",

‎app/(public)/leaderboard/page.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,53 @@ import { createClient } from "../../lib/supabase/server";
33
import Footer from "@/app/components/layout/Footer";
44
import CTA from "@/app/components/layout/CTA";
55
import Image from "next/image";
6+
import { Metadata } from "next";
7+
8+
export const metadata: Metadata = {
9+
title: "Leaderboards - DevPulse",
10+
description:
11+
"Explore the DevPulse leaderboards and see how you rank against other developers. Check out the top coders and get inspired to climb the ranks!",
12+
keywords: [
13+
"DevPulse",
14+
"developer leaderboards",
15+
"coding rankings",
16+
"programming competition",
17+
"developer stats",
18+
"coding achievements",
19+
"programming leaderboards",
20+
"developer community",
21+
"coding inspiration",
22+
],
23+
openGraph: {
24+
title: "Leaderboards - DevPulse",
25+
description:
26+
"Explore the DevPulse leaderboards and see how you rank against other developers. Check out the top coders and get inspired to climb the ranks!",
27+
url: "https://devpulse-waka.vercel.app/leaderboard",
28+
siteName: "DevPulse",
29+
images: [
30+
{
31+
url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
32+
width: 1200,
33+
height: 630,
34+
alt: "DevPulse Cover Image",
35+
},
36+
],
37+
locale: "en_US",
38+
type: "website",
39+
},
40+
twitter: {
41+
card: "summary_large_image",
42+
title: "Leaderboards - DevPulse",
43+
description:
44+
"Explore the DevPulse leaderboards and see how you rank against other developers. Check out the top coders and get inspired to climb the ranks!",
45+
images: [
46+
{
47+
url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
48+
alt: "DevPulse Cover Image",
49+
},
50+
],
51+
},
52+
};
653

754
export default async function Leaderboards() {
855
const supabase = await createClient();

0 commit comments

Comments
 (0)