Fix: Update navigation and asset paths to use dynamic base path

- Use {base} from $app/paths for all internal links, including "/" - Ensure dynamic base path works for local development and production - Update svelte.config.js to respect paths.base configuration
NinaHahne · Jan 25, 2025 · 706f9d0 · 706f9d0
1 parent 4d2abc7
commit 706f9d0
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from '$app/paths'; // Dynamically get the base path
     import '../app.css';
     let { children } = $props();
 </script>
@@ -9,9 +10,9 @@
     <aside class="font-amaticSC w-72 bg-sky-blue text-gray-800 fixed h-full">
         <div class="p-6 h-full">
             <!-- Logo -->
-            <a href="/" aria-label="Himmelblau Startseite" class="block mb-12">
+            <a href="{base}/" aria-label="Himmelblau Startseite" class="block mb-12">
                 <img
-                    src="/images/logo.webp"
+                    src="{base}/images/logo.webp"
                     alt="Himmelblau Logo"
                     class="logo mx-auto"
                 />
@@ -21,39 +22,39 @@
             <nav>
                 <ul class="space-y-4 text-[46px] leading-none">
                     <li>
-                        <a href="/" class="block text-stem-green hover:text-bluebell transition-colors duration-300">
+                        <a href="{base}/" class="block text-stem-green hover:text-bluebell transition-colors duration-300">
                             Blumenladen
                         </a>
                     </li>
                     <li>
-                        <a href="/himmelblau" class="block text-navy hover:text-gold transition-colors duration-300">
+                        <a href="{base}/himmelblau" class="block text-navy hover:text-gold transition-colors duration-300">
                             himmelblau
                         </a>
                     </li>
                     <li>
-                        <a href="/bluetenspuren" class="block text-navy hover:text-gold transition-colors duration-300">
+                        <a href="{base}/bluetenspuren" class="block text-navy hover:text-gold transition-colors duration-300">
                             BlütenSpuren
                         </a>
                     </li>
                     <!-- <li>
-                        <a href="/tanzspuren" class="block text-navy hover:text-gold transition-colors duration-300">
+                        <a href="{base}/tanzspuren" class="block text-navy hover:text-gold transition-colors duration-300">
                             TanzSpuren
                         </a>
                     </li> -->
                     <li>
-                        <a href="/bildergalerie" class="block text-navy hover:text-gold transition-colors duration-300">
+                        <a href="{base}/bildergalerie" class="block text-navy hover:text-gold transition-colors duration-300">
                             Bildergalerie
                         </a>
                     </li>
                 </ul>
 				<ul class="space-y-4 text-[30px] leading-none">
                     <li>
-                        <a href="/impressum" class="block text-navy hover:text-gold transition-colors duration-300">
+                        <a href="{base}/impressum" class="block text-navy hover:text-gold transition-colors duration-300">
                             Impressum
                         </a>
                     </li>
                     <li>
-                        <a href="/datenschutz" class="block text-navy hover:text-gold transition-colors duration-300">
+                        <a href="{base}/datenschutz" class="block text-navy hover:text-gold transition-colors duration-300">
                             Datenschutz
                         </a>
                     </li>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,3 +1,7 @@
+<script lang="ts">
+    import { base } from '$app/paths'; // Dynamically get the base path
+</script>
+
 <div class="flex flex-col items-center">
     <p class="text-center text-deep-moss">
         Im kleinen 
@@ -18,7 +22,7 @@
 
     <div class="door-frame m-8">
         <img 
-            src="/images/Tuer.webp" 
+            src="{base}/images/Tuer.webp" 
             alt="himmelblaue Ladentür" 
             class="door" 
         />

diff --git a/svelte.config.js b/svelte.config.js
@@ -13,7 +13,7 @@ const config = {
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
 		adapter: adapter(),
 		paths: {
-			base: '/himmelblau',
+			base: process.env.NODE_ENV === 'production' ? '/himmelblau' : '', // Use '/himmelblau' in production, '' locally
 		},
 		prerender: {
             handleHttpError: 'warn', // Suppress 404 errors for now