Merge branch 'main' into AboutYouTubeModal

.all-contributorsrc

@@ -279,6 +279,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "ofirc77",
+      "name": "ofirc77",
+      "avatar_url": "https://avatars.githubusercontent.com/u/170853216?v=4",
+      "profile": "https://github.com/ofirc77",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

.github/workflows/build.yml

@@ -10,6 +10,8 @@ jobs:
         with:
           node-version: 18
           cache: 'npm'
+      - name: Get Commit Hash and generate Version File
+        run: echo "$(git rev-parse --short HEAD)" >> public/hash.txt
       - name: Run install
         run: npm ci
       - name: Build

.gitignore

@@ -9,6 +9,7 @@
 
 # production
 /dist
+sitemap.xml
 
 # misc
 .DS_Store

README.md

@@ -99,6 +99,9 @@ https://github.com/hasadna/open-bus-map-search/blob/main/src/model/busStop.ts#L4
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/rivka14"><img src="https://avatars.githubusercontent.com/u/85113156?v=4?s=100" width="100px;" alt="Rivka Weiss"/><br /><sub><b>Rivka Weiss</b></sub></a><br /><a href="#code-rivka14" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/EstherKal"><img src="https://avatars.githubusercontent.com/u/160218199?v=4?s=100" width="100px;" alt="EstherKalsmith"/><br /><sub><b>EstherKalsmith</b></sub></a><br /><a href="#code-EstherKal" title="Code">💻</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ofirc77"><img src="https://avatars.githubusercontent.com/u/170853216?v=4?s=100" width="100px;" alt="ofirc77"/><br /><sub><b>ofirc77</b></sub></a><br /><a href="#code-ofirc77" title="Code">💻</a></td>
+    </tr>
   </tbody>
 </table>
 

eslint.config.js

@@ -85,6 +85,7 @@ module.exports = [
       'eslint.config.js',
       '.nx',
       'jest.config.ts',
+      'sitemap.js',
       'public',
     ],
   },

package.json

@@ -16,7 +16,7 @@
     "@tanstack/react-query": "^5.45.1",
     "@tanstack/react-query-persist-client": "^5.36.0",
     "@types/git-username": "^1.0.5",
-    "@types/leaflet.markercluster": "^1.5.2",
+    "@types/leaflet.markercluster": "^1.5.5",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "antd": "^5.22.3",
     "axios": "^1.7.5",
@@ -59,7 +59,7 @@
   },
   "scripts": {
     "start": "vite",
-    "build": "nx exec -- npm run _build -- ",
+    "build": "nx exec -- npm run _build -- && node sitemap.js",
     "serve": "vite preview",
     "test": "jest && playwright test",
     "test:e2e:ui": "cross-env APPLITOOLS_BATCH_ID=`uuidgen` playwright test --ui",

public/robots.txt

@@ -1,3 +1,4 @@
-# https://www.robotstxt.org/robotstxt.html
 User-agent: *
 Disallow:
+
+Sitemap: https://open-bus-map-search.hasadna.org.il/sitemap.xml

sitemap.js

@@ -0,0 +1,32 @@
+const fs = require("fs");
+const path = require("path");
+
+const sitemap = () => {
+  const app = fs.readFileSync(path.join(__dirname, "/src/routes/index.tsx"), "utf8");
+  const routes = app.match(/'\/[a-z_-]*'/g);
+  const urls = routes.map((route) => {
+    const url = route.slice(1, -1);
+    return url;
+  });
+
+  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+        ${urls
+          .map(
+            (url) => `
+            <url>
+                <loc>https://open-bus-map-search.hasadna.org.il${url}</loc>
+                <changefreq>weekly</changefreq>
+                <priority>0.8</priority>
+                <lastmod>${new Date().toISOString()}</lastmod>
+             </url> 
+          `
+          )
+          .join("\n")}
+    </urlset>`;
+  fs.writeFileSync(path.join(__dirname, "/public/sitemap.xml"), sitemap);
+};
+
+sitemap();
+
+// credit https://blog.redsols.us/blog/how-to-create-a-dynamic-sitemap-in-react/

src/layout/ThemeContext.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, createContext, useContext } from 'react'
+import { FC, PropsWithChildren, createContext, useContext, useMemo } from 'react'
 import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles'
 import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'
 import { ConfigProvider, theme } from 'antd'
@@ -8,38 +8,44 @@ import { useLocalStorage } from 'src/locale/useLocalStorage'
 
 export interface ThemeContextInterface {
   toggleTheme: () => void
+  toggleLanguage: () => void
   isDarkTheme?: boolean
 }
 
 const ThemeContext = createContext({} as ThemeContextInterface)
 
-const darkTheme = createTheme({
-  palette: {
-    mode: 'dark',
-  },
-})
-
-const lightTheme = createTheme({
-  palette: {
-    mode: 'light',
-  },
-})
-
 const { defaultAlgorithm, darkAlgorithm } = theme
 
 export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
   const [isDarkTheme, setIsDarkTheme] = useLocalStorage<boolean>('isDarkTheme')
-
   const { i18n } = useTranslation()
+
   const toggleTheme = () => {
     setIsDarkTheme((prevTheme: boolean) => !prevTheme)
   }
 
+  const toggleLanguage = () => {
+    const newLanguage = i18n.language === 'en' ? 'he' : 'en'
+    i18n.changeLanguage(newLanguage)
+  }
+
   const contextValue = {
     isDarkTheme,
+    toggleLanguage,
     toggleTheme,
   }
 
+  // Re-create the theme when the theme changes or the language changes
+  const theme = useMemo(() => {
+    const direction = i18n.language === 'he' ? 'rtl' : 'ltr'
+    return createTheme({
+      direction,
+      palette: {
+        mode: isDarkTheme ? 'dark' : 'light',
+      },
+    })
+  }, [isDarkTheme, i18n.language])
+
   return (
     <ConfigProvider
       direction={i18n.dir()}
@@ -51,7 +57,7 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
           colorTextBase: isDarkTheme ? '#ffffff' : '#000000',
         },
       }}>
-      <MuiThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
+      <MuiThemeProvider theme={theme}>
         <ScopedCssBaseline enableColorScheme>
           <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>
         </ScopedCssBaseline>
@@ -60,6 +66,4 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
   )
 }
 
-export const useTheme = () => {
-  return useContext(ThemeContext)
-}
+export const useTheme = () => useContext(ThemeContext)

src/layout/header/Header.tsx

@@ -8,7 +8,7 @@ import './Header.css'
 import ToggleThemeButton from './ToggleThemeButton'
 import { DonationButton } from './DonationButton'
 import HeaderLinks from './HeaderLinks/HeaderLinks'
-import { LanguageToggle } from './LanguageToggle'
+import { LanguageToggleButton } from './LanguageToggleButton'
 
 const { Header } = Layout
 
@@ -19,7 +19,7 @@ const MainHeader = () => {
     <Header className={cn('main-header', { dark: isDarkTheme })}>
       <MenuOutlined onClick={() => setDrawerOpen(true)} className="hideOnDesktop" />
       <HeaderLinks>
-        <LanguageToggle />
+        <LanguageToggleButton />
         <ToggleThemeButton toggleTheme={toggleTheme} isDarkTheme={isDarkTheme} />
         <DonationButton />
       </HeaderLinks>

src/layout/header/LanguageToggleButton.tsx

@@ -0,0 +1,18 @@
+import { useTranslation } from 'react-i18next'
+import { GlobalOutlined } from '@ant-design/icons'
+import { useTheme } from '../ThemeContext'
+
+export const LanguageToggleButton = () => {
+  const { toggleLanguage } = useTheme()
+  const { t } = useTranslation()
+
+  return (
+    <button
+      className="header-link"
+      onClick={toggleLanguage}
+      aria-label={t('Change Language')}
+      title={t('Change Language')}>
+      <GlobalOutlined />
+    </button>
+  )
+}

src/locale/en.json

@@ -80,6 +80,8 @@
 
   "donation_through_bank_title": "Donation through bank transfer",
   "donation_through_bank_reccomendation": "It is recommended to donate a bank transfer to the public knowledge workshop bank account, as this fee is lower",
+  "donate_to_hasadna": "Donate to Hasadna",
+  "donation_link": "Donation link",
 
   "bank": "Bank",
   "branch": "Branch",

src/locale/he.json

@@ -79,6 +79,8 @@
 
   "donation_through_bank_title": "תרומה דרך העברה בנקאית",
   "donation_through_bank_reccomendation": "מומלץ לתרום דרך העברה בנקאית לחשבון הבנק של הסדנא לידע ציבורי, מכיוון שבאפיק זה העמלה נמוכה יותר",
+  "donate_to_hasadna": "תרומה לסדנא",
+  "donation_link": "קישור לתרומה",
 
   "bank": "בנק",
   "branch": "סניף",

src/pages/DonateModal/DonateModal.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import { Box, Grid, Modal, Typography, useMediaQuery } from '@mui/material'
+import { Box, Grid, Modal, Typography, useMediaQuery, useTheme } from '@mui/material'
 import { useTranslation } from 'react-i18next'
-import i18n from 'src/locale/allTranslations'
 interface DonateModalProps {
   isVisible: boolean
   onClose: () => void
@@ -27,23 +26,28 @@ export const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose })
    */
   const shouldImgCollapse = useMediaQuery('(max-width: 950px)')
   const { t } = useTranslation()
+  const { direction } = useTheme()
 
-  const dir = i18n.dir()
+  // Use Image with Hebrew text for RTL and English text for LTR
+  const donateNowImageUrlEN =
+    'https://www.hasadna.org.il/wp-content/uploads/2018/08/button-300x73.png'
+  const donateNowImageUrlHE =
+    'https://www.hasadna.org.il/wp-content/uploads/2018/08/button-EN-300x73.png'
 
   return (
     <Modal
-      dir={dir}
+      dir={direction}
       open={isVisible}
       onClose={onClose}
       aria-modal="true"
       role="dialog"
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
       sx={{
-        textAlign: `${dir === 'ltr' ? 'right' : 'left'}` as const,
+        textAlign: `${direction === 'ltr' ? 'right' : 'left'}` as const,
         color: 'text.primary', // Dynamically uses the theme’s text color
       }}>
-      <Box dir={i18n.dir()} sx={boxStyle}>
+      <Box dir={direction} sx={boxStyle}>
         <button onClick={onClose} className="close-modal-icon">
           X
         </button>
@@ -61,21 +65,21 @@ export const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose })
                 rel="noreferrer">
                 <img
                   src="https://www.hasadna.org.il/wp-content/uploads/2017/12/%D7%AA%D7%A8%D7%95%D7%9E%D7%95%D7%AA.jpg"
-                  alt="קישור לתרומה"
+                  alt={t('donation_link')}
                   width={'90%'}
                   style={{ maxWidth: '420px' }}
                 />
                 <img
                   width={'90%'}
-                  src="https://www.hasadna.org.il/wp-content/uploads/2018/08/button-300x73.png"
-                  alt="תרום עכשיו"
+                  src={direction === 'rtl' ? donateNowImageUrlEN : donateNowImageUrlHE}
+                  alt={t('donate_to_hasadna')}
                   // style={{ margin: shouldImgCollapse ? 'auto' : '', display: 'block' }}
                   style={{ display: 'block', maxWidth: '300px' }}
                 />
               </a>
             </Typography>
           </Grid>
-          <Grid item dir={i18n.dir()} xs={6}>
+          <Grid item dir={direction} xs={6}>
             <h2>{t('donation_through_bank_title')}</h2>
             <p>{t('donation_through_bank_reccomendation')}</p>
             <Typography id="modal-modal-description" sx={{ mt: 2 }}>