apply baseurl everywhere for hosting under subpath

saezlab · Jan 29, 2024 · 9eafcf1 · 9eafcf1
1 parent c19792c
commit 9eafcf1
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 16 deletions.
diff --git a/src/components/A.astro b/src/components/A.astro
@@ -0,0 +1,6 @@
+---
+const base = import.meta.env.BASE_URL;
+const { href } = Astro.props;
+---
+
+<a href=`${base}${href}`><slot /></a>
diff --git a/src/components/Intro.astro b/src/components/Intro.astro
@@ -1,8 +1,9 @@
 ---
+const baseurl = import.meta.env.BASE_URL;
 ---
 
 <div id="intro">
-    <img id="logo" src="saezlab-logo.png" />
+    <img id="logo" src=`${baseurl}/saezlab-logo.png` />
     <p>
         Our goal is to acquire a functional understanding of the
         deregulation of signalling networks in disease and to apply this

diff --git a/src/components/Map.svelte b/src/components/Map.svelte
@@ -9,9 +9,10 @@
     export let markerMarkup: string = '';
 
     const { latitude, longitude } = location;
+    const baseurl = import.meta.env.BASE_URL;
 </script>
 
-<figure use:setMap={{ latitude, longitude, zoom, markerMarkup }} />
+<figure use:setMap={{ latitude, longitude, zoom, markerMarkup, baseurl }} />
 
 <style>
     figure {

diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -1,12 +1,13 @@
 ---
+import A from "../components/A.astro";
 ---
 
 <div class="nav-links">
-  <a href="/">Home</a>
-  <a href="/research/">Research</a>
-  <a href="/papers/">Papers</a>
-  <a href="/people/">People</a>
-  <a href="/resources/">Resources</a>
-  <a href="/jobs/">Jobs</a>
-  <a href="/contact/">Contact</a>
+  <A href="/">Home</A>
+  <A href="/research/">Research</A>
+  <A href="/papers/">Papers</A>
+  <A href="/people/">People</A>
+  <A href="/resources/">Resources</A>
+  <A href="/jobs/">Jobs</A>
+  <A href="/contact/">Contact</A>
 </div>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -2,13 +2,14 @@
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import "../styles/global.css";
+const baseurl = import.meta.env.BASE_URL;
 const { title, pageTitle = title } = Astro.props;
 ---
 
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href=`${baseurl}/favicon.svg` />
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
     <title>Saez Lab - {title}</title>

diff --git a/src/pages/contact.astro b/src/pages/contact.astro
@@ -1,5 +1,6 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
+import A from "../components/A.astro";
 import Map from "../components/Map.svelte";
 import "leaflet/dist/leaflet.css";
 const location = { latitude: 49.41297, longitude: 8.67068 };
@@ -14,8 +15,8 @@ const location = { latitude: 49.41297, longitude: 8.67068 };
             <p>jobs.saez@uni-heidelberg.de</p>
         <h3>Team members</h3>
             <p>
-                You can find the email of lab members in the <a
-                href="/people/">People</a> section.
+                You can find the email of lab members in the <A
+                href="/people/">People</A> section.
             </p>
         <h3>Location</h3>
             <Map client:load {location} zoom={17} markerMarkup="We are on the 10th floor<br>\

diff --git a/src/shared/actions/map.ts b/src/shared/actions/map.ts
@@ -5,7 +5,8 @@ export function setMap(
         longitude,
         zoom,
         markerMarkup = '',
-    }: { latitude: number; longitude: number; zoom: number; markerMarkup?: string },
+        baseurl = '',
+    }: { latitude: number; longitude: number; zoom: number; markerMarkup?: string, baseurl?: string },
     ) {
     (async () => {
         const {
@@ -17,12 +18,12 @@ export function setMap(
         } = await import('leaflet');
 
         const markerIcon = leafletIcon({
-            iconUrl: '/marker-icon.png',
+            iconUrl: `${baseurl}/marker-icon.png`,
             iconSize: [25, 41],
             iconAnchor: [10, 41],
             popupAnchor: [2, -40],
-            iconRetinaUrl: '/marker-icon-2x.png',
-            shadowUrl: '/marker-shadow.png',
+            iconRetinaUrl: `${baseurl}/marker-icon-2x.png`,
+            shadowUrl: `${baseurl}/marker-shadow.png`,
         });
 
         const map = leafletMap(mapElement).setView([latitude, longitude], zoom);