mirror of
https://github.com/TheRealOwenRees/echecsfrance.git
synced 2026-07-23 04:26:57 +00:00
Localisation (#39)
* Localisation * Update tests * Fix map markers in English view * Fix typo
This commit is contained in:
Timothy Armes
@@ -0,0 +1,28 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import Layout from "@/components/Layout";
|
||||
import ContactForm from "@/components/ContactForm";
|
||||
|
||||
// TODO fix page sizing
|
||||
export default function Contact() {
|
||||
const t = useTranslations("Contact");
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<section className="grid place-items-center bg-white dark:bg-gray-800">
|
||||
<div className="mx-auto max-w-screen-md px-4 pb-32 pt-8 lg:pt-16">
|
||||
<h2
|
||||
className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
|
||||
data-test="header2"
|
||||
>
|
||||
{t("title")}
|
||||
</h2>
|
||||
<p className="mb-8 text-center font-light text-gray-500 dark:text-gray-400 sm:text-xl lg:mb-16">
|
||||
{t("info")}
|
||||
</p>
|
||||
<ContactForm />
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { Analytics } from "@vercel/analytics/react";
|
||||
import { Inter } from "next/font/google";
|
||||
import { useLocale, NextIntlClientProvider } from "next-intl";
|
||||
import { getTranslator } from "next-intl/server";
|
||||
import { notFound } from "next/navigation";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
import "@/app/globals.css";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export async function generateMetadata({
|
||||
params: { locale },
|
||||
}: {
|
||||
params: { locale?: string };
|
||||
}) {
|
||||
// While the `locale` is required, the namespace is optional and
|
||||
// identical to the parameter that `useTranslations` accepts.
|
||||
const t = await getTranslator(locale ?? "fr", "Metadata");
|
||||
|
||||
return {
|
||||
title: t("title"),
|
||||
description: t("description"),
|
||||
keywords: t("keywords"),
|
||||
};
|
||||
}
|
||||
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
params,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
params: { locale?: string };
|
||||
}) {
|
||||
const locale = useLocale();
|
||||
|
||||
// Show a 404 error if the user requests an unknown locale
|
||||
if (params.locale !== undefined && params.locale !== locale) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
let messages;
|
||||
try {
|
||||
messages = (await import(`@/messages/${locale}.json`)).default;
|
||||
} catch (error) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<html lang={locale}>
|
||||
<body className={inter.className}>
|
||||
<NextIntlClientProvider locale={locale} messages={messages}>
|
||||
{children}
|
||||
</NextIntlClientProvider>
|
||||
<Analytics />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import Layout from "@/components/Layout";
|
||||
import bgImage from "@/public/images/map-bg.jpg";
|
||||
|
||||
export default function Home() {
|
||||
const t = useTranslations("Home");
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<header className="grid h-[calc(100%-153px)] place-items-center md:h-[calc(100%-173px)]">
|
||||
<div className="relative h-full w-full brightness-[0.2]">
|
||||
<Image
|
||||
src={bgImage}
|
||||
alt="Background image of France"
|
||||
fill={true}
|
||||
style={{ objectFit: "cover" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute text-center text-white">
|
||||
<h1 className="p-5 text-5xl" data-test="header1">
|
||||
{t("title")}
|
||||
</h1>
|
||||
<h2 className="p-5 text-3xl">{t("purpose")}</h2>
|
||||
<h3 className="mb-5 p-5 text-xl">
|
||||
{t.rich("how", {
|
||||
link: (chunks) => (
|
||||
<Link href="http://www.echecs.asso.fr/" target="_blank">
|
||||
<abbr title="Fédération Française des Échecs">{chunks}</abbr>
|
||||
</Link>
|
||||
),
|
||||
})}
|
||||
</h3>
|
||||
<Link
|
||||
href="/tournois"
|
||||
className="mb-2 mr-2 rounded-lg bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800"
|
||||
>
|
||||
{t("mapLink")}
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import Link from "next-intl/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import Layout from "@/components/Layout";
|
||||
|
||||
export default function About() {
|
||||
const t = useTranslations("About");
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<header className="grid place-items-center bg-white dark:bg-gray-800">
|
||||
<div className="h-full max-w-5xl bg-white px-4 pb-12 pt-8 dark:bg-gray-800">
|
||||
<h2
|
||||
className="mb-8 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
|
||||
data-test="header2"
|
||||
>
|
||||
{t("title")}
|
||||
</h2>
|
||||
<p className="mb-4 text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
|
||||
{t("p1")}
|
||||
</p>
|
||||
<p className="mb-4 text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
|
||||
{t.rich("p2", {
|
||||
homeLink: (chunks) => (
|
||||
<Link href="/" className="text-teal-600">
|
||||
{chunks}
|
||||
</Link>
|
||||
),
|
||||
})}
|
||||
</p>
|
||||
<p className="mb-4 text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
|
||||
{t("p3")}
|
||||
</p>
|
||||
<h3
|
||||
className="mb-4 mt-8 text-center text-2xl font-extrabold tracking-tight text-gray-900 dark:text-white"
|
||||
data-test="header2"
|
||||
>
|
||||
{t("thanksTitle")}
|
||||
</h3>
|
||||
<p className="mb-4 text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
|
||||
{t("thanksTitle")}
|
||||
</p>
|
||||
<ul className="mb-4 text-center text-teal-600">
|
||||
<li>
|
||||
<Link href="https://github.com/AlvaroNW" target="_blank">
|
||||
AlvaroNW
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="https://github.com/Florifourchette" target="_blank">
|
||||
Florifourchette
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<h3
|
||||
className="mb-4 mt-8 text-center text-2xl font-extrabold tracking-tight text-gray-900 dark:text-white"
|
||||
data-test="header2"
|
||||
>
|
||||
{t("techTitle")}
|
||||
</h3>
|
||||
<p className="mb-4 text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
|
||||
{t.rich("techInfo", {
|
||||
homeLink: (chunks) => (
|
||||
<Link href="/" className="text-teal-600">
|
||||
{chunks}
|
||||
</Link>
|
||||
),
|
||||
})}
|
||||
</p>
|
||||
<ul className="mb-4 flex justify-around text-teal-600">
|
||||
<li>
|
||||
<Link href="https://nextjs.org/" target="_blank">
|
||||
NextJS
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" target="_blank">
|
||||
Typescript
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="https://tailwindcss.com/" target="_blank">
|
||||
Tailwind
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="https://mongodb.com/" target="_blank">
|
||||
MongoDB
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="mb-4 text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
|
||||
{t("techWith")}
|
||||
</p>
|
||||
<ul className="mb-4 flex justify-around text-teal-600">
|
||||
<li>
|
||||
<Link href="https://leafletjs.com/" target="_blank">
|
||||
Leaflet
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="https://nodemailer.com/" target="_blank">
|
||||
Nodemailer
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="mb-16 text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
|
||||
{t.rich("contribInfo", {
|
||||
link: (chunks) => (
|
||||
<Link
|
||||
href="https://github.com/TheRealOwenRees/echecsfrance"
|
||||
target="_blank"
|
||||
className="text-teal-600"
|
||||
>
|
||||
{chunks}
|
||||
</Link>
|
||||
),
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import clientPromise from "@/lib/mongodb";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import Layout from "@/components/Layout";
|
||||
import TournamentTable from "@/components/TournamentTable";
|
||||
import { dateOrderingFrance } from "@/utils/dbDateOrdering";
|
||||
import { errorLog } from "@/utils/logger";
|
||||
|
||||
export const revalidate = 3600; // revalidate cache every 6 hours;
|
||||
|
||||
const LoadingMap = () => {
|
||||
const t = useTranslations("Competitions");
|
||||
return (
|
||||
<div className="grid h-screen place-items-center bg-white text-gray-900 dark:bg-gray-800 dark:text-white">
|
||||
<p>{t("loading")}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Imports the tournament map component, ensuring CSR only.
|
||||
* @remarks SSR is not supported by react-leaflet
|
||||
*/
|
||||
const TournamentMap = dynamic(() => import("@/components/TournamentMap"), {
|
||||
ssr: false,
|
||||
loading: LoadingMap,
|
||||
});
|
||||
|
||||
const getTournaments = async () => {
|
||||
try {
|
||||
const client = await clientPromise;
|
||||
const db = client.db("tournamentsFranceDB");
|
||||
const data = await dateOrderingFrance(db);
|
||||
return JSON.stringify(data);
|
||||
} catch (error) {
|
||||
errorLog(error);
|
||||
throw new Error("Error fetching tournament data");
|
||||
}
|
||||
};
|
||||
|
||||
export default async function Tournaments() {
|
||||
const tournamentData = await getTournaments();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<main className="relative grid lg:grid-cols-2">
|
||||
<div className="">
|
||||
<TournamentMap tournamentData={JSON.parse(tournamentData)} />
|
||||
</div>
|
||||
<div className="relative bg-white dark:bg-gray-800 lg:overflow-y-auto">
|
||||
<TournamentTable tournamentData={JSON.parse(tournamentData)} />
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user