From 85c40cf56e7793a1559c23072f3b456cd033e8f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Sun, 14 Jun 2026 19:52:59 +0200 Subject: [PATCH] fix: update document.title on every page via useEffect MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit All pages are 'use client' so metadata exports don't work. Each page now sets document.title via useEffect — static pages with a fixed string, dynamic pages keyed on data so the title reflects the loaded content. Co-Authored-By: Claude Sonnet 4.6 --- app/groups/page.tsx | 3 +++ app/history/page.tsx | 3 +++ app/page.tsx | 3 +++ app/players/[name]/page.tsx | 6 +++++- app/search/page.tsx | 4 ++++ app/stats/page.tsx | 3 +++ app/teams/[slug]/page.tsx | 6 +++++- app/tournaments/[year]/page.tsx | 6 ++++++ 8 files changed, 32 insertions(+), 2 deletions(-) diff --git a/app/groups/page.tsx b/app/groups/page.tsx index 0f06296..3dd5f77 100644 --- a/app/groups/page.tsx +++ b/app/groups/page.tsx @@ -1,5 +1,6 @@ 'use client' import { useQuery, gql } from '@/lib/graphql/hooks' +import { useEffect } from 'react' import Link from 'next/link' import { TeamFlag } from '@/components/team-flag' @@ -22,6 +23,8 @@ interface Standing { export default function GroupsPage() { const { data, loading } = useQuery(GROUPS_QUERY, { pollInterval: 60_000 }) + useEffect(() => { document.title = 'Group Stage · World Cup' }, []) + const standings: Standing[] = data?.groupStandings ?? [] const byGroup = standings.reduce>((acc, s) => { acc[s.groupName] = [...(acc[s.groupName] ?? []), s] diff --git a/app/history/page.tsx b/app/history/page.tsx index 0533850..b89f0a9 100644 --- a/app/history/page.tsx +++ b/app/history/page.tsx @@ -1,5 +1,6 @@ 'use client' import { useQuery, gql } from '@/lib/graphql/hooks' +import { useEffect } from 'react' import Link from 'next/link' import { TeamFlag } from '@/components/team-flag' @@ -23,6 +24,8 @@ interface Tournament { export default function HistoryPage() { + useEffect(() => { document.title = 'History · World Cup' }, []) + const { data, loading } = useQuery(HISTORY_QUERY) const tournaments: Tournament[] = data?.tournaments ?? [] const is2026InProgress = !tournaments.find(t => t.year === 2026)?.winner diff --git a/app/page.tsx b/app/page.tsx index cd9e354..bac34b7 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,5 +1,6 @@ 'use client' import { useQuery, gql } from '@/lib/graphql/hooks' +import { useEffect } from 'react' import Link from 'next/link' import { TeamFlag } from '@/components/team-flag' import { LiveBadge } from '@/components/live-badge' @@ -86,6 +87,8 @@ interface MatchData { export default function HomePage() { const { data, loading } = useQuery(HOME_QUERY, { pollInterval: 60_000 }) + useEffect(() => { document.title = 'World Cup' }, []) + const stats = data?.tournamentStats const live: MatchData[] = data?.liveMatches ?? [] const recent: MatchData[] = data?.recentMatches ?? [] diff --git a/app/players/[name]/page.tsx b/app/players/[name]/page.tsx index 723f0e3..17af495 100644 --- a/app/players/[name]/page.tsx +++ b/app/players/[name]/page.tsx @@ -1,6 +1,6 @@ 'use client' import { useQuery, gql } from '@/lib/graphql/hooks' -import { use } from 'react' +import { use, useEffect } from 'react' import Link from 'next/link' import { TeamFlag } from '@/components/team-flag' import { MatchCard } from '@/components/match-card' @@ -32,6 +32,10 @@ export default function PlayerPage({ params }: { params: Promise<{ name: string const { data, loading } = useQuery(PLAYER_QUERY, { variables: { name } }) const player: PlayerData | null = data?.player ?? null + useEffect(() => { + document.title = `${player?.playerName ?? name} · World Cup` + }, [player, name]) + // Fetch all goals for this player broken down by year const { data: goalsData } = useQuery(gql` query PlayerGoalsByYear($name: String!) { diff --git a/app/search/page.tsx b/app/search/page.tsx index c128519..7a24380 100644 --- a/app/search/page.tsx +++ b/app/search/page.tsx @@ -41,6 +41,10 @@ function SearchContent() { return () => clearTimeout(t) }, [q, router]) + useEffect(() => { + document.title = q.trim() ? `"${q.trim()}" · World Cup` : 'Search · World Cup' + }, [q]) + const skip = debouncedQ.trim().length < 2 const { data, loading } = useQuery(SEARCH_QUERY, { variables: { q: debouncedQ }, diff --git a/app/stats/page.tsx b/app/stats/page.tsx index 4ccb7d5..e24472f 100644 --- a/app/stats/page.tsx +++ b/app/stats/page.tsx @@ -1,5 +1,6 @@ 'use client' import { useQuery, gql } from '@/lib/graphql/hooks' +import { useEffect } from 'react' import Link from 'next/link' import { TeamFlag } from '@/components/team-flag' @@ -57,6 +58,8 @@ interface MatchRow { id: number; year: number; round: string; date?: string | nu interface ETStats { totalKnockoutMatches: number; wentToExtraTime: number; wentToPenalties: number; extraTimePct: number; penaltiesPct: number } export default function StatsPage() { + useEffect(() => { document.title = 'Statistics · World Cup' }, []) + const { data, loading } = useQuery(STATS_QUERY) const tournaments: Tournament[] = (data?.tournaments ?? []).filter((t: Tournament) => t.totalGoals != null).sort((a: Tournament, b: Tournament) => a.year - b.year) diff --git a/app/teams/[slug]/page.tsx b/app/teams/[slug]/page.tsx index e3adb2c..50911c3 100644 --- a/app/teams/[slug]/page.tsx +++ b/app/teams/[slug]/page.tsx @@ -1,6 +1,6 @@ 'use client' import { useQuery, gql } from '@/lib/graphql/hooks' -import { use } from 'react' +import { use, useEffect } from 'react' import Link from 'next/link' import { TeamFlag } from '@/components/team-flag' import { MatchCard } from '@/components/match-card' @@ -36,6 +36,10 @@ export default function TeamPage({ params }: { params: Promise<{ slug: string }> const { data: teamData, loading } = useQuery(TEAM_QUERY, { variables: { slug } }) const team: TeamData | null = teamData?.team ?? null + useEffect(() => { + document.title = team ? `${team.name} · World Cup` : 'Team · World Cup' + }, [team]) + // Load all scorers to filter by team const { data: scorerData } = useQuery(gql` query TeamScorers { diff --git a/app/tournaments/[year]/page.tsx b/app/tournaments/[year]/page.tsx index d50e92b..442cefa 100644 --- a/app/tournaments/[year]/page.tsx +++ b/app/tournaments/[year]/page.tsx @@ -72,6 +72,12 @@ export default function TournamentPage({ params }: { params: Promise<{ year: str if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' }) }, [data]) + useEffect(() => { + document.title = data?.tournament + ? `${year} World Cup · World Cup` + : `${year} · World Cup` + }, [data, year]) + const t = data?.tournament const standings: Standing[] = data?.groupStandings ?? [] const byGroup = standings.reduce>((acc, s) => {