Fixed vite config, improved footer visual style, added basename handling to routers

Author: BluePixelDev

src/components/footer/Footer.css

@@ -5,6 +5,7 @@
     font-size: 1rem;
     z-index: 10;
     margin-top: 10em;
+    padding-bottom: 1em;
 }
 
 .footer__bottom {

src/main.tsx

@@ -1,18 +1,18 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import { BrowserRouter, Route, Routes } from 'react-router'
+import { HashRouter, Route, Routes } from 'react-router'
 import { Layout } from './Layout.tsx'
 import Home from './routes/Home/Home.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <BrowserRouter basename={import.meta.env.BASE_URL}>
+    <HashRouter basename={import.meta.env.DEV ? '/' : '/boardify'}>
       <Routes>
         <Route path="/" element={<Layout />}>
           <Route index element={<Home />} />
         </Route>
       </Routes>
-    </BrowserRouter>
+    </HashRouter>
   </StrictMode>,
 )

vite.config.ts

@@ -2,7 +2,8 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import path from 'path'
 
-export default defineConfig({
+export default defineConfig(({ command }) => ({
+  base: command === 'build' ? '/boardify/' : '/',
   plugins: [react()],
   resolve: {
     alias: {
@@ -12,5 +13,4 @@ export default defineConfig({
       '@assets': path.resolve(__dirname, './src/assets'),
     },
   },
-  base: "https://bluepixeldev.github.io/boardify"
-})
+}))