Setup auto deploy to pages

Author: itsmeurbi

.github/workflows/gh-pages.yml

@@ -0,0 +1,40 @@
+name: GitHub Pages Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-22.04
+    permissions:
+      contents: write
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.18'
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm-
+
+      - run: npm ci
+      - run: npm run build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v4
+        if: github.ref == 'refs/heads/main'
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+          keep_files: true

src/LanguageSelector.tsx

@@ -1,13 +1,13 @@
 import { useState } from 'react'
 import { useTranslation } from "react-i18next";
 import { LANGUAGES } from "./constants";
-import { Select, FormControl, Box, InputLabel, MenuItem} from '@mui/material';
+import { Select, FormControl, Box, InputLabel, MenuItem, SelectChangeEvent } from '@mui/material';
 
 export const LanguageSelector = () => {
   const [language, setLanguage] = useState('');
   const { i18n } = useTranslation();
 
-  const onChangeLang = (e) => {
+  const onChangeLang = (e: SelectChangeEvent) => {
     const languageCode = e.target.value;
     i18n.changeLanguage(languageCode);
     setLanguage(languageCode);

src/Sponsorship.tsx

@@ -112,8 +112,8 @@ const Sponsorship = (): ReactElement =>  {
               <TableCell>{t("sponsorship.sponsorshipGold5","Promoción de su logo durante la sesión bimestral.")}</TableCell>
             </TableRow>
             <TableRow>
-              <TableCell>{t("sponsorship.sponsorshipGold6", { level: "Gold" }, "Agradecimiento por redes sociales después del evento bimestral como patrocinador")}</TableCell>
-              <TableCell>{t("sponsorship.sponsorshipGold6",{ level: "Silver" }, "Agradecimiento por redes sociales después del evento bimestral como patrocinador")}</TableCell>
+              <TableCell>{t("sponsorship.sponsorshipGold6", "Agradecimiento por redes sociales después del evento bimestral como patrocinador", { level: "Gold" })}</TableCell>
+              <TableCell>{t("sponsorship.sponsorshipGold6", "Agradecimiento por redes sociales después del evento bimestral como patrocinador", { level: "Silver" })}</TableCell>
             </TableRow>
           </TableBody>
         </Table>
@@ -129,11 +129,11 @@ const Sponsorship = (): ReactElement =>  {
           <TableBody>
             <TableRow>
               <TableCell>Gold</TableCell>
-              <TableCell>{t("sponsorship.goldAnualCost",{ dolar: "$510 USD", peso: "$8,874 MXN" }, "$8,874 MXN por año")}</TableCell>
+              <TableCell>{t("sponsorship.goldAnualCost", "$8,874 MXN por año", { dolar: "$510 USD", peso: "$8,874 MXN" })}</TableCell>
             </TableRow>
             <TableRow>
               <TableCell>Silver</TableCell>
-              <TableCell>{t("sponsorship.silverAnualCost",{ dolar: "$340 USD", peso: "$5,916 MXN" }, "$5,916 MXN por año")}</TableCell>
+              <TableCell>{t("sponsorship.silverAnualCost", "$5,916 MXN por año", { dolar: "$340 USD", peso: "$5,916 MXN" })}</TableCell>
             </TableRow>
           </TableBody>
         </Table>
@@ -148,11 +148,11 @@ const Sponsorship = (): ReactElement =>  {
           <TableBody>
             <TableRow>
               <TableCell>Gold</TableCell>
-              <TableCell>{t("sponsorship.gold3sesionsCost",{ dolar: "$270 USD", peso: "$4,698 MXN" }, "$4,698 MXN por 3 eventos")}</TableCell>
+              <TableCell>{t("sponsorship.gold3sesionsCost", "$4,698 MXN por 3 eventos", { dolar: "$270 USD", peso: "$4,698 MXN" })}</TableCell>
             </TableRow>
             <TableRow>
               <TableCell>Silver</TableCell>
-              <TableCell>{t("sponsorship.silver3sesionsCost",{ dolar: "$180 USD", peso: "$3,132 MXN" }, "$3,132 MXN por 3 eventos")}</TableCell>
+              <TableCell>{t("sponsorship.silver3sesionsCost", "$3,132 MXN por 3 eventos", { dolar: "$180 USD", peso: "$3,132 MXN" })}</TableCell>
             </TableRow>
           </TableBody>
         </Table>
@@ -167,11 +167,11 @@ const Sponsorship = (): ReactElement =>  {
           <TableBody>
             <TableRow>
               <TableCell>Gold</TableCell>
-              <TableCell>{t("sponsorship.goldSesionCost",{ dolar: "$100 USD", peso: "$1,740 MXN" }, "$1,740 MXN por evento")}</TableCell>
+              <TableCell>{t("sponsorship.goldSesionCost", "$1,740 MXN por evento", { dolar: "$100 USD", peso: "$1,740 MXN" })}</TableCell>
             </TableRow>
             <TableRow>
               <TableCell>Silver</TableCell>
-              <TableCell>{t("sponsorship.silverSesionCost",{ dolar: "$70 USD", peso: "$1,160 MXN" }, "$1,160 MXN por evento")}</TableCell>
+              <TableCell>{t("sponsorship.silverSesionCost", "$1,160 MXN por evento", { dolar: "$70 USD", peso: "$1,160 MXN" })}</TableCell>
             </TableRow>
           </TableBody>
         </Table>

src/Survey.tsx

@@ -1,9 +1,11 @@
 import { useSurvey } from './hooks/useSurvey'
 
-const Survey = () =>  {
+const Survey = () => {
   const { navigateToSurvey } = useSurvey()
 
   navigateToSurvey()
+
+  return null
 }
 
 export default Survey

src/hooks/useSurvey.ts

@@ -5,7 +5,7 @@ export const useSurvey = () => {
   const { value: link } = useSheets(`select A where A contains 'https' limit 1`)
   const navigate = useNavigate()
 
-  const navigateToSurvey = () => { if (link) window.location = link }
+  const navigateToSurvey = () => { if (link) window.location.href = link }
 
   const openSurvey = () => {
     if (link) {

src/theme.ts

@@ -3,8 +3,7 @@ import { createTheme } from '@mui/material/styles';
 const theme = createTheme({
   palette: {
     primary: {
-      main: '#1c1c17',
-      hover: '',
+      main: '#1c1c17'
     },
     secondary: {
       main: '#3298cc',