i18n: translate all public page bodies (EN + IT)

Internationalised the ~44 public pages with next-intl (the shell was
already translated). Each page now pulls its copy from a "pages.<slug>"
namespace via getTranslations (server) / useTranslations (client); the
EN + IT catalogs were authored by parallel agents and merged centrally,
with natural Italian (ICU plurals) and it backfilled from en for any
gap. request.ts gained getMessageFallback/onError so a missing key
degrades to the English value, never a raw key.

Behaviour unchanged (only display text moved to t() calls; queries,
actions, fields, ContentCard structure preserved). Verified on the prod
server: with NEXT_LOCALE=it, home/community/staff/news/shop/rankings all
render Italian copy, no raw-key leakage; English unchanged. The nav
language switcher toggles EN/IT live. tsc 0, vitest 49/49, next build 0.

Admin pages intentionally left in English (staff tooling).
This commit is contained in:
Simo committed 2026-06-28 20:40:06 +02:00
1 parent 1199176883
commit e004dfedaf
47 files changed
+1740 -471

No files matched your search

+11 -9
View File
@@ -1,3 +1,4 @@
import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { ContentCard } from "@/components/public/ui";
@@ -12,6 +13,7 @@ export default async function NewThreadPage({
}: {
params: Promise<{ id: string }>;
}) {
const t = await getTranslations("pages.guildForumNew");
const { id } = await params;
const guildId = Number(id);
if (!Number.isInteger(guildId) || guildId <= 0) notFound();
@@ -36,13 +38,13 @@ export default async function NewThreadPage({
return (
<main style={{ display: "grid", gap: "1.5rem" }}>
<p style={{ margin: 0 }}>
<Link href={`/guilds/${guild.id}/forum`}>← Back to forum</Link>
<Link href={`/guilds/${guild.id}/forum`}>{t("backToForum")}</Link>
</p>
<ContentCard
icon="✍️"
title="New thread"
subtitle={`in ${guild.name || "Unnamed guild"} forum`}
title={t("title")}
subtitle={t("subtitle", { guild: guild.name || t("unnamedGuild") })}
>
<form action={postThread}>
{/* Guild target drives the write; the author is taken from the session
@@ -50,35 +52,35 @@ export default async function NewThreadPage({
<input type="hidden" name="guildId" value={String(guild.id)} />
<label htmlFor="thread-subject" className="muted">
Subject
{t("subjectLabel")}
</label>
<input
id="thread-subject"
name="subject"
required
maxLength={255}
placeholder="Thread subject"
placeholder={t("subjectPlaceholder")}
style={{ width: "100%", margin: "0.4rem 0 0.9rem" }}
/>
<label htmlFor="thread-message" className="muted">
Message
{t("messageLabel")}
</label>
<textarea
id="thread-message"
name="message"
required
rows={8}
placeholder="Write your opening post…"
placeholder={t("messagePlaceholder")}
style={{ width: "100%", margin: "0.4rem 0 1rem", resize: "vertical" }}
/>
<div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
<button type="submit" className="btn btn-primary">
Post thread
{t("postThread")}
</button>
<Link href={`/guilds/${guild.id}/forum`} className="btn btn-outline">
Cancel
{t("cancel")}
</Link>
</div>
</form>
+22 -20
View File
@@ -1,3 +1,4 @@
import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { notFound } from "next/navigation";
import { ContentCard, EmptyState } from "@/components/public/ui";
@@ -26,6 +27,7 @@ export default async function GuildForumPage({
}: {
params: Promise<{ id: string }>;
}) {
const t = await getTranslations("pages.guildForum");
const { id } = await params;
const guildId = Number(id);
if (!Number.isInteger(guildId) || guildId <= 0) notFound();
@@ -92,51 +94,51 @@ export default async function GuildForumPage({
return (
<main style={{ display: "grid", gap: "1.5rem" }}>
<p style={{ margin: 0 }}>
<Link href={`/guilds/${guild.id}`}>← Back to guild</Link>
<Link href={`/guilds/${guild.id}`}>{t("backToGuild")}</Link>
</p>
<ContentCard
icon="🗣️"
title={`${guild.name || "Unnamed guild"} — Forum`}
subtitle={`${threads.length} ${threads.length === 1 ? "thread" : "threads"}`}
title={t("forumTitle", { guild: guild.name || t("unnamedGuild") })}
subtitle={`${threads.length} ${threads.length === 1 ? t("threadSingular") : t("threadPlural")}`}
action={
<Link href={`/guilds/${guild.id}/forum/new`} className="btn btn-primary">
+ New thread
{t("newThread")}
</Link>
}
/>
<ContentCard padded={threads.length === 0}>
{threads.length === 0 ? (
<EmptyState icon="🗣️">No threads in this forum yet.</EmptyState>
<EmptyState icon="🗣️">{t("empty")}</EmptyState>
) : (
<table>
<thead>
<tr>
<th style={{ padding: "0.6rem 0.75rem" }}>Subject</th>
<th style={{ padding: "0.6rem 0.75rem" }}>Author</th>
<th style={{ padding: "0.6rem 0.75rem" }}>Posts</th>
<th style={{ padding: "0.6rem 0.75rem" }}>Date</th>
<th style={{ padding: "0.6rem 0.75rem" }}>{t("colSubject")}</th>
<th style={{ padding: "0.6rem 0.75rem" }}>{t("colAuthor")}</th>
<th style={{ padding: "0.6rem 0.75rem" }}>{t("colPosts")}</th>
<th style={{ padding: "0.6rem 0.75rem" }}>{t("colDate")}</th>
</tr>
</thead>
<tbody>
{threads.map((t) => {
const opener = t.openerId ?? 0;
{threads.map((t2) => {
const opener = t2.openerId ?? 0;
const username = opener > 0 ? usernameById.get(opener) : undefined;
return (
<tr key={t.id}>
<tr key={t2.id}>
<td style={{ padding: "0.6rem 0.75rem" }}>
<span style={{ fontWeight: 700 }}>
{t.subject?.trim() || "(no subject)"}
{t2.subject?.trim() || t("noSubject")}
</span>
{t.pinned ? (
{t2.pinned ? (
<span className="online-badge online" style={{ marginLeft: "0.5rem" }}>
📌 Pinned
📌 {t("pinned")}
</span>
) : null}
{t.locked ? (
{t2.locked ? (
<span className="online-badge" style={{ marginLeft: "0.5rem" }}>
🔒 Locked
🔒 {t("locked")}
</span>
) : null}
</td>
@@ -145,15 +147,15 @@ export default async function GuildForumPage({
<Link href={`/u/${username}`}>{username}</Link>
) : (
<span className="muted">
{opener > 0 ? `User #${opener}` : "Unknown"}
{opener > 0 ? t("userNumber", { id: opener }) : t("unknown")}
</span>
)}
</td>
<td style={{ padding: "0.6rem 0.75rem" }}>
{t.postsCount ?? 0}
{t2.postsCount ?? 0}
</td>
<td className="muted" style={{ padding: "0.6rem 0.75rem" }}>
{formatTimestamp(t.createdAt)}
{formatTimestamp(t2.createdAt)}
</td>
</tr>
);
+14 -12
View File
@@ -1,3 +1,4 @@
import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { notFound } from "next/navigation";
import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
@@ -35,6 +36,7 @@ export default async function GuildPage({
}: {
params: Promise<{ id: string }>;
}) {
const t = await getTranslations("pages.guild");
const { id } = await params;
const guildId = Number(id);
if (!Number.isInteger(guildId) || guildId <= 0) notFound();
@@ -121,7 +123,7 @@ export default async function GuildPage({
return (
<main style={{ display: "grid", gap: "1.5rem" }}>
<p style={{ margin: 0 }}>
<Link href="/guilds">← All guilds</Link>
<Link href="/guilds">{t("allGuilds")}</Link>
</p>
<ContentCard>
@@ -137,9 +139,9 @@ export default async function GuildPage({
/>
) : null}
<div style={{ minWidth: 0, flex: 1 }}>
<h1 style={{ margin: "0 0 0.35rem" }}>{guild.name || "Unnamed guild"}</h1>
<h1 style={{ margin: "0 0 0.35rem" }}>{guild.name || t("unnamedGuild")}</h1>
<p style={{ margin: 0 }}>
{guild.description || <span className="muted">No description</span>}
{guild.description || <span className="muted">{t("noDescription")}</span>}
</p>
</div>
</div>
@@ -148,29 +150,29 @@ export default async function GuildPage({
<StatBlock
icon="👥"
value={members.length}
label={members.length === 1 ? "Member" : "Members"}
label={members.length === 1 ? t("memberSingular") : t("memberPlural")}
/>
{created ? <StatBlock icon="📅" value={created} label="Founded" /> : null}
{created ? <StatBlock icon="📅" value={created} label={t("founded")} /> : null}
<StatBlock
icon="🚪"
value={
<Link href={`/guilds/${guild.id}/forum`} style={{ textDecoration: "none" }}>
Forum →
{t("forumLink")}
</Link>
}
label="Discussion"
label={t("discussion")}
/>
</div>
</ContentCard>
<ContentCard
icon="👥"
title="Members"
subtitle={`${members.length} ${members.length === 1 ? "member" : "members"}`}
title={t("membersTitle")}
subtitle={`${members.length} ${members.length === 1 ? t("memberLowerSingular") : t("memberLowerPlural")}`}
padded={members.length === 0}
>
{members.length === 0 ? (
<EmptyState icon="👥">No members.</EmptyState>
<EmptyState icon="👥">{t("noMembers")}</EmptyState>
) : (
<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
{members.map((m) => (
@@ -197,11 +199,11 @@ export default async function GuildPage({
className="online-badge online"
style={{ marginBottom: "0.25rem" }}
>
👑 Owner
👑 {t("owner")}
</span>
) : null}
<p className="muted" style={{ margin: m.isOwner ? "0.25rem 0 0" : 0 }}>
{m.motto || "No motto"}
{m.motto || t("noMotto")}
</p>
</div>
</div>
+7 -5
View File
@@ -1,3 +1,4 @@
import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { excerpt } from "@/lib/format";
@@ -28,19 +29,20 @@ async function getGuilds(): Promise<GuildCard[]> {
}
export default async function GuildsPage() {
const t = await getTranslations("pages.guilds");
const guilds = await getGuilds();
return (
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="🚪"
title="Guilds"
subtitle="Browse the groups players have created and joined"
title={t("title")}
subtitle={t("subtitle")}
/>
<ContentCard padded={guilds.length === 0}>
{guilds.length === 0 ? (
<EmptyState icon="🚪">No guilds yet.</EmptyState>
<EmptyState icon="🚪">{t("empty")}</EmptyState>
) : (
<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
{guilds.map((g) => (
@@ -68,10 +70,10 @@ export default async function GuildsPage() {
) : null}
<div style={{ minWidth: 0 }}>
<h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
{g.name || "Unnamed guild"}
{g.name || t("unnamedGuild")}
</h3>
<p className="muted" style={{ margin: 0 }}>
{g.description ? excerpt(g.description, 120) : "No description"}
{g.description ? excerpt(g.description, 120) : t("noDescription")}
</p>
</div>
</Link>