Merge branch 'develop' into test

.env.template

@@ -4,4 +4,4 @@ VITE_REMOTE_HEADER_MENU_ID=23
 VITE_REMOTE_FOOTER_MENU_ID=24
 VITE_REMOTE_SOCIAL_LINKS_ID=26
 VITE_LOCATION_API_URL=https://www.ucf.edu/wp-json/wp/v2/locations/
-
+VITE_BASEURL=/

.github/workflows/azure-static-web-apps-brave-wave-05c9ff40f.yml

@@ -21,6 +21,7 @@ jobs:
       VITE_REMOTE_FOOTER_MENU_ID: ${{ vars.VITE_REMOTE_FOOTER_MENU_ID }}
       VITE_REMOTE_SOCIAL_LINKS_ID: ${{ vars.VITE_REMOTE_SOCIAL_LINKS_ID }}
       VITE_LOCATION_API_URL: ${{ vars.VITE_LOCATION_API_URL_LIVE }}
+      VITE_BASEURL: ${{ vars.VITE_BASEURL }}
     name: Build and Deploy Job
     steps:
       - uses: actions/checkout@v3

.github/workflows/azure-static-web-apps-delightful-moss-0832eaa0f.yml

@@ -21,6 +21,7 @@ jobs:
       VITE_REMOTE_FOOTER_MENU_ID: ${{ vars.VITE_REMOTE_FOOTER_MENU_ID }}
       VITE_REMOTE_SOCIAL_LINKS_ID: ${{ vars.VITE_REMOTE_SOCIAL_LINKS_ID }}
       VITE_LOCATION_API_URL: ${{ vars.VITE_LOCATION_API_URL_DEV }}
+      VITE_BASEURL: ${{ vars.VITE_BASEURL }}
     name: Build and Deploy Job
     steps:
       - uses: actions/checkout@v3

.github/workflows/azure-static-web-apps-lively-hill-0d219190f.yml

@@ -21,6 +21,7 @@ jobs:
       VITE_REMOTE_FOOTER_MENU_ID: ${{ vars.VITE_REMOTE_FOOTER_MENU_ID }}
       VITE_REMOTE_SOCIAL_LINKS_ID: ${{ vars.VITE_REMOTE_SOCIAL_LINKS_ID }}
       VITE_LOCATION_API_URL: ${{ vars.VITE_LOCATION_API_URL_TEST }}
+      VITE_BASEURL: ${{ vars.VITE_BASEURL }}
     name: Build and Deploy Job
     steps:
       - uses: actions/checkout@v3

package.json

@@ -22,6 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.7",
+    "react-router-dom": "^6.24.0",
     "sass": "^1.76.0"
   },
   "devDependencies": {
@@ -36,5 +37,6 @@
     "togeojson": "^0.16.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
-  }
+  },
+  "homepage": "/map/"
 }

src/App.tsx

@@ -277,92 +277,92 @@ function App() {
 
   useMemo(() => {
     // Location data
-    fetch('/data/geojson/locations/buildingPoints.geojson')
+    fetch('data/geojson/locations/buildingPoints.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setBuildingPointData(response));
 
-    fetch('/data/geojson/locations/buildingShapes.geojson')
+    fetch('data/geojson/locations/buildingShapes.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setBuildingFootprintData(response));
 
-    fetch('/data/geojson/locations/dining.geojson')
+    fetch('data/geojson/locations/dining.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setDiningData(response));
 
-    fetch('/data/geojson/locations/housing.geojson')
+    fetch('data/geojson/locations/housing.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setHousingData(response));
 
-    fetch('/data/geojson/locations/labs.geojson')
+    fetch('data/geojson/locations/labs.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setLabData(response));
 
-    fetch('/data/geojson/locations/retail.geojson')
+    fetch('data/geojson/locations/retail.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setRetailData(response));
 
     // Parking Data
-    fetch('/data/geojson/parking.geojson')
+    fetch('data/geojson/parking.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setParkingData(response));
 
     // Outdoor Data
-    fetch('/data/geojson/outdoors/greenspaces.geojson')
+    fetch('data/geojson/outdoors/greenspaces.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setGreenSpaceData(response));
 
-    fetch('/data/geojson/outdoors/recreation.geojson')
+    fetch('data/geojson/outdoors/recreation.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setRecreationData(response));
 
-    fetch('/data/geojson/outdoors/well-being.geojson')
+    fetch('data/geojson/outdoors/well-being.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setWellBeingdata(response));
 
     // Accessibility Data
-    fetch('/data/geojson/accessibility/accessibleParking.geojson')
+    fetch('data/geojson/accessibility/accessibleParking.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setAccessibleParkingData(response));
 
-    fetch('/data/geojson/accessibility/buildingRamps.geojson')
+    fetch('data/geojson/accessibility/buildingRamps.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setBuildingRampData(response));
 
-    fetch('/data/geojson/accessibility/curbRamps.geojson')
+    fetch('data/geojson/accessibility/curbRamps.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setCurbRampData(response));
 
-    fetch('/data/geojson/accessibility/autoDoor.geojson')
+    fetch('data/geojson/accessibility/autoDoor.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setAutoDoorData(response));
 
     // Icon Data
-    fetch('/data/geojson/shuttles.geojson')
+    fetch('data/geojson/shuttles.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setShuttleStopData(response));
 
-    fetch('/data/geojson/emergency-phones.geojson')
+    fetch('data/geojson/emergency-phones.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setEmergencyPhoneData(response));
 
     // Other Data
-    fetch('/data/geojson/other/bikeRacks.geojson')
+    fetch('data/geojson/other/bikeRacks.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setBikeRackData(response));
 
-    fetch('/data/geojson/other/family.geojson')
+    fetch('data/geojson/other/family.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setFamilyData(response));
 
-    fetch('/data/geojson/other/pantry.geojson')
+    fetch('data/geojson/other/pantry.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setPantryData(response));
 
-    fetch('/data/geojson/other/art.geojson')
+    fetch('data/geojson/other/art.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setArtData(response));
 
-    fetch('/data/geojson/other/services.geojson')
+    fetch('data/geojson/other/services.geojson')
       .then((responseText) => responseText.json())
       .then((response) => setServiceData(response));
   }, []);

src/main.tsx

@@ -3,9 +3,21 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import 'mapbox-gl/dist/mapbox-gl.css';
 import './index.scss'
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: (
+      <App />
+    )
+  },
+], {
+  basename: import.meta.env.VITE_BASEURL
+});
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 )

src/vite-env.d.ts

@@ -6,6 +6,7 @@ interface ImportMetaEnv {
     readonly VITE_REMOTE_FOOTER_MENU_ID: number
     readonly VITE_REMOTE_SOCIAL_LINKS_ID: number
     readonly VITE_LOCATION_API_URL: string;
+    readonly VITE_BASEURL: string;
 }
 
 interface ImportMeta {

vite.config.ts

@@ -3,5 +3,6 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: '/map/',
   plugins: [react()],
 })