Define base path for assets

Author: itsmeurbi

src/App.tsx

@@ -5,7 +5,7 @@ import theme from './theme'
 
 export default function App() {
   return(
-    <BrowserRouter>
+    <BrowserRouter basename='/website2.0'>
       <ThemeProvider theme={theme}>
         <Router/>
       </ThemeProvider>

src/Home.tsx

@@ -2,20 +2,20 @@ import { type ReactElement } from 'react'
 import { Box, Container, Avatar, IconButton, Link } from '@mui/material'
 import FacebookIcon from '@mui/icons-material/Facebook'
 import InstagramIcon from '@mui/icons-material/Instagram'
-import TwitterIcon from '@mui/icons-material/Twitter'
+import XIcon from '@mui/icons-material/X'
 import LinkedInIcon from '@mui/icons-material/LinkedIn'
 import EmailIcon from '@mui/icons-material/Email'
 import PatreonIcon from './PatreonIcon'
 import NavBar from './NavBar';
-const LOGO = 'src/assets/images/logo.png'
+import logo from './assets/images/logo.png'
 
 const Home = (): ReactElement => {
   return (
     <>
       <NavBar />
       <Container sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
         <Box sx={{ display: 'flex', justifyContent: 'center', marginTop: '100px', padding: 3 }}>
-          <Avatar src={LOGO} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '500px' }} />
+          <Avatar src={logo} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '500px' }} />
         </Box>
         <Box>
           <IconButton component={Link} href="https://www.facebook.com/ColimaWebDevTalks" target="_blank">
@@ -25,7 +25,7 @@ const Home = (): ReactElement => {
             <InstagramIcon fontSize="large" />
           </IconButton>
           <IconButton component={Link} href="https://twitter.com/webdevtalksmx" target="_blank">
-            <TwitterIcon fontSize="large" />
+            <XIcon fontSize="large" />
           </IconButton>
           <IconButton component={Link} href="https://www.linkedin.com/company/web-dev-talks" target="_blank">
             <LinkedInIcon fontSize="large" />

src/NavBar.tsx

@@ -13,7 +13,7 @@ import {
 } from '@mui/material'
 import { LanguageSelector } from './LanguageSelector';
 import { ReactElement } from 'react'
-const LOGO = 'src/assets/images/logo.png'
+import logo from './assets/images/logo.png'
 
 const NavBar = (): ReactElement => {
   const location = useLocation()
@@ -30,7 +30,7 @@ const NavBar = (): ReactElement => {
         <Container maxWidth="xl">
           <Toolbar disableGutters>
             <Link to="/" style={{ textDecoration: 'none', marginRight: '1rem' }}>
-              <Avatar src={LOGO} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '50px' }} />
+              <Avatar src={logo} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '50px' }} />
             </Link>
             <Link to="/sponsorship" style={{ textDecoration: 'none', height: '100%' }}>
               <Button sx={{ height: '100%', backgroundColor: isActive('/sponsorship') ? '#c1c1c1' : 'transparent' }}>

src/Sponsorship.tsx

@@ -15,7 +15,7 @@ import {
 } from '@mui/material'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
 import NavBar from './NavBar'
-const LOGO = 'src/assets/images/logo.png'
+import logo from './assets/images/logo.png'
 
 ChartJS.register(ArcElement, Tooltip, Legend)
 
@@ -54,7 +54,7 @@ const Sponsorship = (): ReactElement =>  {
       <NavBar/>
       <Container>
         <Box sx={{ display: 'flex', justifyContent: 'center', marginTop: '100px', padding: 3 }}>
-          <Avatar src={LOGO} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '250px' }} />
+          <Avatar src={logo} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '250px' }} />
         </Box>
         <Typography variant="body1" paragraph>
           {t("sponsorship.description1","WebDevTalks es una comunidad de desarrollo y tecnología, que inició hace más de 10 años con la finalidad de acercar desarrolladores a diversos temas dentro del área del desarrollo de software, web, móvil, IoT, manejo de proyectos, diseño y más.")}

src/routes.tsx

@@ -1,4 +1,4 @@
-import { useRoutes } from "react-router-dom";
+import { useRoutes } from 'react-router-dom'
 import { type ReactElement } from 'react'
 import Home from './Home'
 import Sponsorship from './Sponsorship'
@@ -11,6 +11,7 @@ export default function Router (): ReactElement | null {
     { path: '/about', element: <About/> },
     { path: '/sponsorship', element: <Sponsorship/> },
     { path: '/survey', element: <Survey/> },
+    { path: '*', element: <Home/> },
   ])
 
   return routes

vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  base: '/website2.0/',
+  plugins: [react()],
+});