Use baseUrl so that the images work both in production and dev mode

nrkno · Feb 14, 2025 · cf263c7 · cf263c7
1 parent 9c5e470
commit cf263c7
Showing 1 changed file with 9 additions and 17 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -9,32 +9,26 @@ import Main from '../layouts/Main.astro';
   <section class="intro-section">
     <h1>Documentation on Using Tile Data from MET</h1>
     <p>
-      This documentation provides examples of how to use WebGL shaders to visualize temperature and wind data fetched from a tile server. Each example demonstrates the process of rendering the data using static images and WebGL shaders.
+      This documentation provides examples of how to use WebGL shaders to visualize temperature and wind data fetched
+      from a tile server. Each example demonstrates the process of rendering the data using static images and WebGL
+      shaders.
     </p>
   </section>
 
   <section class="examples-section">
     <div class="example">
-      <a href="wind">
+      <a href={`${import.meta.env.BASE_URL}/wind`}>
         <div class="example-content">
-          <Image
-            src={wind}
-            alt="Wind Example"
-            loading="eager"
-          />
+          <Image src={wind} alt="Wind Example" loading="eager" />
           <h2>Wind</h2>
         </div>
       </a>
     </div>
 
     <div class="example">
-      <a href="temperature">
+      <a href={`${import.meta.env.BASE_URL}/temperature`}>
         <div class="example-content">
-          <Image
-            src={temperature}
-            alt="Temperature Example"
-            loading="eager"
-          />
+          <Image src={temperature} alt="Temperature Example" loading="eager" />
           <h2>Temperature</h2>
         </div>
       </a>
@@ -80,12 +74,11 @@ import Main from '../layouts/Main.astro';
       width: 300px;
       position: relative;
 
-      &:hover{
+      &:hover {
         border-width: 2px;
         border-color: darkgrey;
         outline-color: darkgrey;
       }
-
     }
 
     .example-content img {
@@ -103,10 +96,9 @@ import Main from '../layouts/Main.astro';
       color: inherit;
     }
 
-
     .example a:hover h2 {
       color: blue;
       text-decoration: underline;
     }
   </style>
-</Main>
+</Main>