Merge pull request #34 from TheRealOwenRees/about

About

.github/workflows/cypress.yml

@@ -13,11 +13,11 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-        
+
       - name: Cache npm and NextJs build
         uses: actions/cache@v3
         with:
-          # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
+          # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples#node---yarn, or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
           path: |
             ~/.npm
             ${{ github.workspace }}/.next/cache
@@ -26,7 +26,7 @@ jobs:
           # If source files changed but packages didn't, rebuild from a prior cache.
           restore-keys: |
             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
-      
+
       - name: Cypress run
         # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
         uses: cypress-io/github-action@v4
@@ -37,7 +37,7 @@ jobs:
           build: npm run build
           start: npm start
           wait-on: echo ${{ env.NEXT_PUBLIC_URL }}# Waits for above
-          # Records to Cypress Cloud 
+          # Records to Cypress Cloud
           # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record
           record: true
           parallel: true # Runs test in parallel using settings above

README-fr.md

@@ -1,4 +1,4 @@
-<h1 align="center">Echecs France</h1>
+<h1 style="text-align: center">Echecs France</h1>
 
 [![en](https://img.shields.io/badge/lang-en-blue.svg?style=for-the-badge)](https://github.com/TheRealOwenRees/echecsfrance/blob/main/README.md)
 

README.md

@@ -1,4 +1,4 @@
-<h1 align="center">Echecs France</h1>
+<h1 style="text-align: center">Echecs France</h1>
 
 [![fr](https://img.shields.io/badge/lang-fr-blue.svg?style=for-the-badge)](https://github.com/TheRealOwenRees/echecsfrance/blob/main/README-fr.md)
 
@@ -20,11 +20,11 @@ and is deployed on [Vercel](https://vercel.com/)
 
 ## Dependencies
 - [Leaflet](https://leafletjs.com/) - a Javascript library for interactive maps
-- [Nodemailer](https://nodemailer.com/about/) - a module for Node.js applications to allow easy as cake email sending
+- [Nodemailer](https://nodemailer.com/) - a module for Node.js applications to allow easy as cake email sending
 
 ## Contributions
 Contributions are encouraged. Please open an issue to discuss your ideas.  
-Add your code into a feature branch such as `feature/feature-name`. We utilise a [Github Flow](https://www.gitkraken.com/learn/git/best-practices/git-branch-strategy#github-flow-considerations) branching strategy. 
+Add your code into a feature branch such as `feature/feature-name`. We utilise a [GitHub Flow](https://www.gitkraken.com/learn/git/best-practices/git-branch-strategy#github-flow-considerations) branching strategy. 
 
 
 Please see the [TODO](https://github.com/TheRealOwenRees/echecsfrance/blob/main/TODO) file for a list of suggestions.

TODO

@@ -4,17 +4,11 @@ TESTS
 
 -----------------------------------------------------------------
 BUGS
-//TODO about page is not centred in Safari
 //TODO tournament page load is weird on 2nd click. On safari it pauses for a few seconds. Is it trying to load the entire page before displaying?
 //TODO Nodemailer 'from' reverts to echecsfrance@gmail.com - quick fix done with sender address in subject line
 
-----------------------------------------------------------------
-PAGES
-//TODO about page
-
 ----------------------------------------------------------------
 DESIGN CHANGES
-//TODO success and error messages into french - mailer
 //TODO font size on mobile screen
 //TODO mobile navbar is creeping into the page by a few pixels when hidden - move it to the right a bit. It is easier to see in light mode. I cant see this on Linux
 //TODO logo for navbar and favicon

app/layout.tsx

@@ -2,6 +2,7 @@ import { Analytics } from "@vercel/analytics/react";
 
 import "./globals.css";
 import { Inter } from "next/font/google";
+import { ReactNode } from "react";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -11,11 +12,7 @@ export const metadata = {
   keywords: "echecs, France, tournoi, tournois, FFE, carte",
 };
 
-export default function RootLayout({
+export default function RootLayout({ children }: { children: ReactNode }) {
-  children,
-}: {
-  children: React.ReactNode;
-}) {
   return (
     <html lang="en">
       <body className={inter.className}>

app/qui-sommes-nous/page.tsx

@@ -1,19 +1,121 @@
+import Link from "next/link";
 import Layout from "@/components/Layout";
 
 export default function About() {
   return (
     <Layout>
-      <header className="grid h-[calc(100%-216px)] md:h-[calc(100%-174px)] place-items-center">
+      <header className="grid place-items-center bg-white dark:bg-gray-800">
-        <div className="relative h-full w-full bg-white dark:bg-gray-800"></div>
+        <div className="h-full max-w-5xl px-4 pt-8 pb-12 bg-white dark:bg-gray-800">
-        <div className="absolute">
           <h2
-            className="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white"
+            className="mb-8 text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white"
             data-test="header2"
           >
             Qui Sommes-Nous?
           </h2>
-          <p className="mb-8 lg:mb-16 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">
+          <p className="mb-4 font-light text-center text-gray-500 dark:text-gray-400 md:text-xl">
-            Prochainement
+            Ce projet a vu le jour début 2022 afin de permettre une
+            visualisation sur une carte des tournois d&apos;échecs en France.
+            Ayant déménagé en France en 2019, je ne connaissais alors pas la
+            géographie française et je souhaitais savoir quels tournois avaient
+            lieu près de chez moi.
+          </p>
+          <p className="mb-4 font-light text-center text-gray-500 dark:text-gray-400 md:text-xl">
+            Le projet a été mis de côté jusqu&apos;au printemps 2023; date à
+            laquelle je lui ai redonné vie. Reconstruit à partir de zéro,{" "}
+            <Link href="/" className="text-teal-600">
+              Echecs France
+            </Link>{" "}
+            est désormais open source et ouvert aux contributions.
+          </p>
+          <p className="mb-4 font-light text-center text-gray-500 dark:text-gray-400 md:text-xl">
+            Je compte mettre en place un bouton de don en ligne pour ceux qui
+            souhaitent participer aux frais associés au site. Une fois les coûts
+            de fonctionnement déduits, tous les fonds restant seront redirigés
+            vers le monde des échecs soit en sponsorant des événements ou par la
+            création de dons.
+          </p>
+          <h3
+            className="mt-8 mb-4 text-2xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white"
+            data-test="header2"
+          >
+            Remerciements
+          </h3>
+          <p className="mb-4 font-light text-center text-gray-500 dark:text-gray-400 md:text-xl">
+            Ce projet est ce qu&apos;il est grâce aux contributions de vous
+            tous. Je souhaite en particulier remercier les personnes suivantes
+            pour leurs contributions:
+          </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="mt-8 mb-4 text-2xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white"
+            data-test="header2"
+          >
+            Tech Blurb
+          </h3>
+          <p className="mb-4 font-light text-center text-gray-500 dark:text-gray-400 md:text-xl">
+            <Link href="/" className="text-teal-600">
+              Echecs France
+            </Link>{" "}
+            utilise:
+          </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 font-light text-center text-gray-500 dark:text-gray-400 md:text-xl">
+            avec
+          </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 font-light text-center text-gray-500 dark:text-gray-400 md:text-xl">
+            Pour plus d&apos;informations sur les moyens de contribution,
+            veuillez visiter notre{" "}
+            <Link
+              href="https://github.com/TheRealOwenRees/echecsfrance"
+              target="_blank"
+              className="text-teal-600"
+            >
+              GitHub.
+            </Link>
           </p>
         </div>
       </header>

components/Footer.tsx

@@ -4,7 +4,7 @@ import { FaGithub, FaRegEnvelope } from "react-icons/fa";
 export default function Footer() {
   return (
     <footer
-      className="grid w-full fixed bottom-0 justify-items-center py-2 px-5 text-white bg-teal-600 text-gray-900 dark:bg-gray-700 z-30"
+      className="grid w-full fixed bottom-0 justify-items-center py-2 px-5 text-white bg-teal-600 dark:bg-gray-700 z-30"
       data-test="footer"
     >
       <div className="p-2">

components/HamburgerMenu.tsx

@@ -1,3 +1,5 @@
+// noinspection HtmlUnknownTarget
+
 interface HamburgerMenuState {
   menuVisible: boolean;
   setMenuVisible: Dispatch<SetStateAction<boolean>>;
@@ -46,6 +48,7 @@ const HamburgerMenu = ({
     menuTimeout,
   });
 
+  // noinspection HtmlUnknownTarget
   return (
     <div
       ref={menuRef}

components/Layout.tsx

@@ -1,10 +1,11 @@
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
+import { ReactNode } from "react";
 
 export default function Layout({
   children, // will be a page or nested layout
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
   return (
     <div className="h-screen min-h-[600px] bg-white dark:bg-gray-800 font-sans leading-normal tracking-normal">

components/TournamentMap.tsx

@@ -1,3 +1,5 @@
+// noinspection HttpUrlsUsage
+
 "use client";
 
 import { TournamentDataProps } from "@/types";

cypress.config.ts

@@ -1,3 +1,5 @@
+// noinspection JSUnusedGlobalSymbols
+
 import { defineConfig } from "cypress";
 
 export default defineConfig({

cypress/e2e/links.cy.ts

@@ -1,3 +1,5 @@
+// noinspection HttpUrlsUsage
+
 describe("Test links", () => {
   const pages = ["tournois", "qui sommes-nous", "contactez-nous"];
 

cypress/support/commands.ts

@@ -1,3 +1,5 @@
+// noinspection JSUnusedGlobalSymbols
+
 declare namespace Cypress {
   interface Chainable {
     getByData(dataTestAttribute: string): Chainable<JQuery<HTMLElement>>;

cypress/support/component-index.html

@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<!--suppress HtmlRequiredLangAttribute, HtmlUnknownTag -->
+lUnknownTag -->
 <html>
   <head>
     <meta charset="utf-8">

cypress/support/component.ts

@@ -14,12 +14,12 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/react18'
+import { mount } from "cypress/react18";
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -27,13 +27,14 @@ import { mount } from 'cypress/react18'
 // with a <reference path="./component" /> at the top of your spec.
 declare global {
   namespace Cypress {
+    // noinspection JSUnusedGlobalSymbols
     interface Chainable {
-      mount: typeof mount
+      mount: typeof mount;
     }
   }
 }
 
-Cypress.Commands.add('mount', mount)
+Cypress.Commands.add("mount", mount);
 
 // Example use:
-// cy.mount(<MyComponent />)
+// cy.mount(<MyComponent />)

lib/sendMail.ts

@@ -9,14 +9,13 @@ const sendMail = async ({
     message: message,
   };
 
-  const response = await fetch("/api/send-mail", {
+  return await fetch("/api/send-mail", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify(data),
   });
-  return response;
 };
 
 export default sendMail;