french translations

TODO

@@ -1,7 +1,7 @@
-footer
-
 need a 'return to top' arrow button on smaller screens
 
+muti-language i18n support
+
 light/dark theme
 
 tests for tournois, testing the loading of map and table, then counting the markers
@@ -17,8 +17,6 @@ error handling
 e2e tests for tournament page:
     - make sure number of markers = tournamentData.length
 
-home page
-
 about page
 
 contact page

app/api/tournaments/france/route.ts

@@ -15,6 +15,7 @@ export async function GET() {
     /**
      * Converts date from string into a date to allow ordering
      */
+    // TODO add into a middleware?
     const data = await db
       .collection("tournaments")
       .aggregate([

app/contactez-nous/page.tsx

@@ -3,10 +3,10 @@ import Layout from "@/components/Layout";
 export default function Contact() {
   return (
     <Layout>
-      <header className="grid h-[calc(100%-176px)] md:h-[calc(100%-132px)] place-items-center">
+      <header className="grid h-[calc(100%-216px)] md:h-[calc(100%-172px)] place-items-center">
         <div className="relative h-full w-full bg-amber-200"></div>
         <div className="absolute">
-          <h1>Contact Page</h1>
+          <h1>Contactez-Nous</h1>
         </div>
       </header>
     </Layout>

app/page.tsx

@@ -4,16 +4,16 @@ import Layout from "@/components/Layout";
 export default function Home() {
   return (
     <Layout>
-      <header className="grid h-[calc(100%-176px)] md:h-[calc(100%-132px)] place-items-center">
+      <header className="grid h-[calc(100%-216px)] md:h-[calc(100%-172px)] place-items-center">
         <div className="relative h-full w-full bg-[url('/images/map-bg.jpg')] bg-cover bg-center brightness-[0.2]"></div>
         <div className="absolute text-center">
           <h1 className="text-5xl p-5">Echecs France</h1>
-          <h2 className="text-3xl p-5 capitalize">
+          <h2 className="text-3xl p-5">
-            Find chess tournaments in France on a map
+            Trouvez Vos Tournois d'Echecs en France Sur Une Carte
           </h2>
           <h3 className="text-xl p-5 mb-5">
-            A visual representation of all the chess tournaments published by
+            Une représentation visuelle de tous les tournois d'échecs publiés
-            the{" "}
+            par la{" "}
             <Link href="http://www.echecs.asso.fr/" target="_blank">
               <abbr title="Fédération Française des Échecs">FFE</abbr>
             </Link>
@@ -22,7 +22,7 @@ export default function Home() {
             href="/tournois"
             className="text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
           >
-            Get Started
+            Voir La Carte
           </Link>
         </div>
       </header>

app/qui-sommes-nous/page.tsx

@@ -3,10 +3,10 @@ import Layout from "@/components/Layout";
 export default function About() {
   return (
     <Layout>
-      <header className="grid h-[calc(100%-176px)] md:h-[calc(100%-132px)] place-items-center">
+      <header className="grid h-[calc(100%-216px)] md:h-[calc(100%-172px)] place-items-center">
         <div className="relative h-full w-full bg-amber-200"></div>
         <div className="absolute">
-          <h1>About Page</h1>
+          <h1>Qui Sommes-Nous</h1>
         </div>
       </header>
     </Layout>

components/Footer.tsx

@@ -3,11 +3,11 @@ import { FaGithub } from "react-icons/fa";
 
 export default function Footer() {
   return (
-    <footer className="grid grid-cols-2 bg-gray-800 text-white p-3">
+    <footer className="grid justify-items-center bg-gray-800 text-white py-2 px-5">
-      <div>
+      <div className="p-2">
         <p>&copy; {new Date().getFullYear()} - Owen Rees</p>
       </div>
-      <div>
+      <div className="p-2">
         <Link
           href="https://github.com/TheRealOwenRees/echecsfrance"
           target="_blank"

components/Navbar.tsx

@@ -25,17 +25,17 @@ export default function Navbar() {
             <li className="mr-10">
               <Link
                 className="inline-block border-b-4 py-5 border-transparent hover:border-teal-600 transition-all ease-in-out duration-300"
-                href="/about"
+                href="/qui-sommes-nous"
               >
-                About
+                Qui Sommes-Nous
               </Link>
             </li>
             <li className="">
               <Link
                 className="inline-block border-b-4 py-5 border-transparent hover:border-teal-600 transition-all ease-in-out duration-300"
-                href="/contact"
+                href="/contactez-nous"
               >
-                Contact
+                Contactez-Nous
               </Link>
             </li>
           </ul>

components/TournamentMap.tsx

@@ -24,7 +24,7 @@ export default function TournamentMap({ tournamentData }: TournamentDataProps) {
   return (
     <section
       id="tournament-map"
-      className="grid h-[calc(100vh-128px)] md:h-[calc(100vh-82px)] lg:h-[calc(100vh-132px)]"
+      className="grid h-[calc(100vh-128px)] md:h-[calc(100vh-82px)] lg:h-[calc(100vh-172px)]"
     >
       <MapContainer
         center={center}

components/TournamentTable.tsx

@@ -21,7 +21,7 @@ export default function TournamentTable({
   const stickyHeader = "sticky top-0 p-3 bg-gray-600";
 
   return (
-    <section className="w-full grid auto-rows-max h-[calc(100vh-176px)] md:h-[calc(100vh-82px)] lg:h-[calc(100vh-132px)] lg:col-start-2 lg:col-end-3">
+    <section className="w-full grid auto-rows-max lg:h-[calc(100vh-172px)] lg:col-start-2 lg:col-end-3">
       <SearchBar
         tournamentFilter={tournamentFilter}
         setTournamentFilter={setTournamentFilter}

cypress/component/mounting.cy.tsx

@@ -1,6 +1,6 @@
 import Home from "@/app/page";
-import About from "@/app/about/page";
+import About from "@/app/qui-sommes-nous/page";
-import Contact from "@/app/contact/page";
+import Contact from "@/app/contactez-nous/page";
 
 const navbarFooterCheck = () => {
   it("includes navbar", () => {
@@ -31,7 +31,7 @@ describe("Verify component mount", () => {
     });
 
     it("correct h1 tags with page title included", () => {
-      cy.get("h1").contains("about", { matchCase: false });
+      cy.get("h1").contains("qui sommes-nous", { matchCase: false });
     });
 
     navbarFooterCheck();
@@ -43,7 +43,7 @@ describe("Verify component mount", () => {
     });
 
     it("correct h1 tags with page title included", () => {
-      cy.get("h1").contains("contact", { matchCase: false });
+      cy.get("h1").contains("contactez-nous", { matchCase: false });
     });
 
     navbarFooterCheck();

cypress/e2e/links.cy.ts

@@ -1,18 +1,22 @@
 describe("Test all links", () => {
-  const pages = ["tournois", "about", "contact"];
+  const pages = ["tournois", "qui sommes-nous", "contactez-nous"];
 
-  it("Check navbar links point to correct pathname", () => {
+  const navLinkToSlug = (navLink: string) => {
+    return navLink.replace(/\s+/g, "-");
+  };
+
+  it("Check navbar links point to correct pathname as a slug", () => {
     cy.visit("/");
     pages.forEach((page) => {
       cy.contains(page, { matchCase: false }).click();
-      cy.location("pathname").should("eq", `/${page}`); // url path matches link name
+      cy.location("pathname").should("eq", `/${navLinkToSlug(page)}`); // url path matches link name, replacing whitespace with hyphens
       cy.go("back");
     });
   });
 
   it("Check dead links", () => {
     pages.forEach((page) => {
-      cy.visit(`/${page}`);
+      cy.visit(`/${navLinkToSlug(page)}`);
       cy.get("a:not([href*='mailto:']").each((link) => {
         if (
           !link