Skip to content

Commit 3360bb4

Browse files
bokikobokiko
committed
fix: add per-page metadata to dashboard, download, and community pages
All three pages used 'use client' at the top level, which prevents Next.js from exporting the metadata object. As a result, every page shared the same generic homepage title and description — the layout.tsx template ('%s | PingDiff') was dead code for these routes. Fix: split each page into a thin server wrapper (exports metadata) and a client component (holds all interactive state). This is the standard App Router pattern for mixing metadata with client-side state. Each page now has a distinct <title> and <meta description>: /dashboard → 'Dashboard | PingDiff' /download → 'Download | PingDiff' /community → 'Community | PingDiff' Also adds per-page og:title and og:description so social shares (Twitter, Discord, iMessage) show accurate previews instead of the generic homepage copy. Build verified clean (no TypeScript or ESLint errors).
1 parent 71f7db6 commit 3360bb4

6 files changed

Lines changed: 934 additions & 890 deletions

File tree

‎web/src/app/community/CommunityClient.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
"use client";
2+
3+
import { MessageSquare, ThumbsUp, Users, Construction } from "lucide-react";
4+
import { Navbar } from "@/components/Navbar";
5+
import { Footer } from "@/components/Footer";
6+
7+
export default function CommunityClient() {
8+
return (
9+
<div className="min-h-screen">
10+
<a href="#main-content" className="skip-to-content focus-ring">
11+
Skip to main content
12+
</a>
13+
<Navbar />
14+
15+
<main id="main-content" className="max-w-6xl mx-auto px-4 py-16">
16+
{/* Coming Soon Banner */}
17+
<div className="text-center mb-16">
18+
<div className="inline-flex items-center justify-center w-20 h-20 bg-yellow-500/20 rounded-2xl mb-6">
19+
<Construction className="w-10 h-10 text-yellow-500" />
20+
</div>
21+
<h1 className="text-4xl font-bold mb-4">Community Hub</h1>
22+
<p className="text-zinc-400 text-lg max-w-xl mx-auto">
23+
Share tips, compare results, and help other players find the best servers.
24+
</p>
25+
<div className="mt-6 inline-flex items-center gap-2 bg-yellow-500/10 border border-yellow-500/20 rounded-full px-4 py-2">
26+
<span className="text-yellow-400 text-sm font-medium">Coming Soon</span>
27+
</div>
28+
</div>
29+
30+
{/* Preview Features */}
31+
<div className="grid md:grid-cols-3 gap-6 mb-16">
32+
<div className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 opacity-60">
33+
<div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mb-4">
34+
<MessageSquare className="w-6 h-6 text-blue-500" />
35+
</div>
36+
<h3 className="text-xl font-semibold mb-2">ISP Tips</h3>
37+
<p className="text-zinc-400">
38+
Share and discover tips for optimizing your connection based on your ISP and region.
39+
</p>
40+
</div>
41+
42+
<div className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 opacity-60">
43+
<div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mb-4">
44+
<ThumbsUp className="w-6 h-6 text-green-500" />
45+
</div>
46+
<h3 className="text-xl font-semibold mb-2">Upvote System</h3>
47+
<p className="text-zinc-400">
48+
Vote on the most helpful tips to surface the best advice for each region.
49+
</p>
50+
</div>
51+
52+
<div className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 opacity-60">
53+
<div className="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4">
54+
<Users className="w-6 h-6 text-purple-500" />
55+
</div>
56+
<h3 className="text-xl font-semibold mb-2">Leaderboards</h3>
57+
<p className="text-zinc-400">
58+
See the best ping results by region, ISP, and server location.
59+
</p>
60+
</div>
61+
</div>
62+
63+
{/* CTA */}
64+
<div className="text-center bg-zinc-900/50 border border-zinc-800 rounded-2xl p-8">
65+
<h2 className="text-2xl font-bold mb-4">Want to be notified when Community launches?</h2>
66+
<p className="text-zinc-400 mb-6">
67+
Star our GitHub repo to get updates on new features.
68+
</p>
69+
<a
70+
href="https://github.com/bokiko/pingdiff"
71+
target="_blank"
72+
rel="noopener noreferrer"
73+
className="inline-flex items-center gap-2 btn-primary px-6 py-3 rounded-xl font-medium"
74+
>
75+
Star on GitHub
76+
</a>
77+
</div>
78+
</main>
79+
80+
<Footer />
81+
</div>
82+
);
83+
}

‎web/src/app/community/page.tsx‎

Lines changed: 12 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,15 @@
1-
"use client";
2-
3-
import { MessageSquare, ThumbsUp, Users, Construction } from "lucide-react";
4-
import { Navbar } from "@/components/Navbar";
5-
import { Footer } from "@/components/Footer";
1+
import type { Metadata } from "next";
2+
import CommunityClient from "./CommunityClient";
3+
4+
export const metadata: Metadata = {
5+
title: "Community",
6+
description: "Share connection tips, compare ping results with other players, and find the best game servers for your region.",
7+
openGraph: {
8+
title: "PingDiff Community Hub",
9+
description: "Share connection tips, compare ping results with other players, and find the best game servers for your region.",
10+
},
11+
};
612

713
export default function CommunityPage() {
8-
return (
9-
<div className="min-h-screen">
10-
<a href="#main-content" className="skip-to-content focus-ring">
11-
Skip to main content
12-
</a>
13-
<Navbar />
14-
15-
<main id="main-content" className="max-w-6xl mx-auto px-4 py-16">
16-
{/* Coming Soon Banner */}
17-
<div className="text-center mb-16">
18-
<div className="inline-flex items-center justify-center w-20 h-20 bg-yellow-500/20 rounded-2xl mb-6">
19-
<Construction className="w-10 h-10 text-yellow-500" />
20-
</div>
21-
<h1 className="text-4xl font-bold mb-4">Community Hub</h1>
22-
<p className="text-zinc-400 text-lg max-w-xl mx-auto">
23-
Share tips, compare results, and help other players find the best servers.
24-
</p>
25-
<div className="mt-6 inline-flex items-center gap-2 bg-yellow-500/10 border border-yellow-500/20 rounded-full px-4 py-2">
26-
<span className="text-yellow-400 text-sm font-medium">Coming Soon</span>
27-
</div>
28-
</div>
29-
30-
{/* Preview Features */}
31-
<div className="grid md:grid-cols-3 gap-6 mb-16">
32-
<div className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 opacity-60">
33-
<div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mb-4">
34-
<MessageSquare className="w-6 h-6 text-blue-500" />
35-
</div>
36-
<h3 className="text-xl font-semibold mb-2">ISP Tips</h3>
37-
<p className="text-zinc-400">
38-
Share and discover tips for optimizing your connection based on your ISP and region.
39-
</p>
40-
</div>
41-
42-
<div className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 opacity-60">
43-
<div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mb-4">
44-
<ThumbsUp className="w-6 h-6 text-green-500" />
45-
</div>
46-
<h3 className="text-xl font-semibold mb-2">Upvote System</h3>
47-
<p className="text-zinc-400">
48-
Vote on the most helpful tips to surface the best advice for each region.
49-
</p>
50-
</div>
51-
52-
<div className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 opacity-60">
53-
<div className="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4">
54-
<Users className="w-6 h-6 text-purple-500" />
55-
</div>
56-
<h3 className="text-xl font-semibold mb-2">Leaderboards</h3>
57-
<p className="text-zinc-400">
58-
See the best ping results by region, ISP, and server location.
59-
</p>
60-
</div>
61-
</div>
62-
63-
{/* CTA */}
64-
<div className="text-center bg-zinc-900/50 border border-zinc-800 rounded-2xl p-8">
65-
<h2 className="text-2xl font-bold mb-4">Want to be notified when Community launches?</h2>
66-
<p className="text-zinc-400 mb-6">
67-
Star our GitHub repo to get updates on new features.
68-
</p>
69-
<a
70-
href="https://github.com/bokiko/pingdiff"
71-
target="_blank"
72-
rel="noopener noreferrer"
73-
className="inline-flex items-center gap-2 btn-primary px-6 py-3 rounded-xl font-medium"
74-
>
75-
Star on GitHub
76-
</a>
77-
</div>
78-
</main>
79-
80-
<Footer />
81-
</div>
82-
);
14+
return <CommunityClient />;
8315
}

0 commit comments

Comments
 (0)