Merge branch 'main' into 264-refactor-update-eslint

app/.env.dist

@@ -1,5 +1,5 @@
 VITE_OPEN_COLLECTIVE_API_KEY=your_key
-VITE_API_URL=http://localhost:8055/
+VITE_API_URL=http://localhost:8055
 #VITE_API_URL=https://api.utopia-lab.org/
 VITE_MAP_URL=http://local.development
 #VITE_MAP_URL=CURRENT_WINDOW_LOCATION

app/src/App.tsx

@@ -144,7 +144,7 @@ function App() {
             path: '/' + l.name, // url
             icon: l.markerIcon?.image ? (
               <SVG
-                src={`${config.apiUrl}assets/${l.markerIcon.image_outline ?? l.markerIcon.image}`}
+                src={`${config.apiUrl}/assets/${l.markerIcon.image_outline ?? l.markerIcon.image}`}
                 style={{
                   width: `${(l.markerIcon.size ?? 18) * 1.3}px`,
                   height: `${(l.markerIcon.size ?? 18) * 1.3}px`,
@@ -185,7 +185,7 @@ function App() {
         link.rel = 'icon'
         document.getElementsByTagName('head')[0].appendChild(link)
       }
-      link.href = map?.logo && config.apiUrl + 'assets/' + map.logo // Specify the path to your favicon
+      link.href = map?.logo && config.apiUrl + '/assets/' + map.logo // Specify the path to your favicon
     }
 
     // Only set loading to false when both map and layers are successfully loaded
@@ -202,7 +202,7 @@ function App() {
       <div className='App tw:overflow-x-hidden'>
         <AuthProvider userApi={userApi} inviteApi={inviteApi}>
           <AppShell
-            assetsApi={new assetsApi(config.apiUrl + 'assets/')}
+            assetsApi={new assetsApi(config.apiUrl + '/assets/')}
             appName={map.name}
             embedded={embedded}
             openCollectiveApiKey={config.openCollectiveApiKey}

app/src/ModalContent.tsx

@@ -36,7 +36,7 @@ export function Welcome1({ clickAction1, map }: ChapterProps) {
           <h3 className='tw:font-bold tw:text-lg'>Welcome to {map?.name || 'Utopia Map'}</h3>
           <img
             className='tw:float-right tw:w-32 tw:m-2'
-            src={config.apiUrl + 'assets/' + map.logo}
+            src={config.apiUrl + '/assets/' + map.logo}
           ></img>
           <p className='tw:py-3'>
             It is a tool for collaborative mapping to connect local initiatives, people and events.

app/src/config/index.ts

@@ -1,6 +1,14 @@
+const normalizeBaseUrl = (value: string) => value.replace(/\/+$/, '')
+
+const getMapUrl = () => {
+  const url = String(import.meta.env.VITE_MAP_URL ?? 'http://local.development')
+  if (url === 'CURRENT_WINDOW_LOCATION') return url
+  return normalizeBaseUrl(url)
+}
+
 export const config = {
-  apiUrl: String(import.meta.env.VITE_API_URL ?? 'http://localhost:8055/'),
-  mapUrl: String(import.meta.env.VITE_MAP_URL ?? 'http://local.development'),
+  apiUrl: normalizeBaseUrl(String(import.meta.env.VITE_API_URL ?? 'http://localhost:8055/')),
+  mapUrl: getMapUrl(),
   adminRole: String(import.meta.env.VITE_DIRECTUS_ADMIN_ROLE ?? ''),
   validateInviteFlowId: String(
     import.meta.env.VITE_VALIDATE_INVITE_FLOW_ID ?? '01d61db0-25aa-4bfa-bc24-c6a8f208a455',

app/src/pages/Landingpage.tsx

@@ -138,7 +138,7 @@ export const Landingpage = () => {
                     <li key={idx}>
                       <div className='w-24 h-24 mx-auto'>
                         <img
-                          src={`${config.apiUrl}assets/${item.image}`}
+                          src={`${config.apiUrl}/assets/${item.image}`}
                           className='w-full h-full rounded-full'
                           alt=''
                         />