feat: enhance deployment output logging and update background image handling in Home component

.github/workflows/deploy.yml

@@ -38,7 +38,13 @@ jobs:
         NODE_ENV: production
 
     - name: List build output
-      run: ls -la dist/
+      run: |
+        echo "=== Dist directory contents ==="
+        ls -la dist/
+        echo "=== Assets directory contents ==="
+        ls -la dist/assets/ || echo "No assets directory"
+        echo "=== Looking for background images ==="
+        find dist/ -name "*background*" -type f || echo "No background files found"
 
     - name: Setup Pages
       uses: actions/configure-pages@v4

src/components/Home.svelte

@@ -12,11 +12,22 @@
         ExternalLink,
     } from "lucide-svelte";
 
+    // Import background images for proper Vite processing
+    import energyBg from '/energy-background.jpg?url';
+    import retailBg from '/retail-background.jpg?url';
+    import officeBg from '/office-background.jpg?url';
+    import heroBgLight from '/hero-background.svg?url';
+    import heroBgDark from '/hero-background-dark.svg?url';
+
     let mounted = false;
 
     onMount(() => {
         mounted = true;
 
+        // Set CSS custom properties for background images
+        document.documentElement.style.setProperty('--hero-bg-light', `url('${heroBgLight}')`);
+        document.documentElement.style.setProperty('--hero-bg-dark', `url('${heroBgDark}')`);
+
         // Intersection Observer for scroll animations
         const observer = new IntersectionObserver(
             (entries) => {
@@ -46,7 +57,7 @@
             titleKey: "energy",
             descKey: "energy_desc",
             color: "#059669",
-            backgroundImage: "/energy-background.jpg",
+            backgroundImage: energyBg,
         },
         {
             icon: TreePine,
@@ -59,7 +70,7 @@
             titleKey: "retail",
             descKey: "retail_desc",
             color: "#dc2626",
-            backgroundImage: "/retail-background.jpg",
+            backgroundImage: retailBg,
         },
         {
             icon: Truck,
@@ -72,7 +83,7 @@
             titleKey: "real_estate",
             descKey: "real_estate_desc",
             color: "#d97706",
-            backgroundImage: "/office-background.jpg",
+            backgroundImage: officeBg,
         },
     ];
 
@@ -281,7 +292,7 @@
     /* Hero Section */
     .hero {
         padding: 6rem 0;
-        background-image: url("/hero-background.jpg");
+        background-image: var(--hero-bg-light);
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
@@ -293,6 +304,7 @@
     }
 
     :global([data-theme="dark"]) .hero {
+        /* background-image: var(--hero-bg-dark); */
         /* background-image: url('/hero-background-dark.svg'); */
         text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
     }

vite.config.js

@@ -10,17 +10,6 @@ export default defineConfig({
     assetsDir: 'assets',
     sourcemap: false,
     minify: 'terser',
-    rollupOptions: {
-      output: {
-        assetFileNames: (assetInfo) => {
-          // Keep SVG files and other images in the root for easier path resolution
-          if (assetInfo.name?.endsWith('.svg') || assetInfo.name?.endsWith('.jpg') || assetInfo.name?.endsWith('.png')) {
-            return '[name][extname]'
-          }
-          return 'assets/[name]-[hash][extname]'
-        }
-      }
-    }
   },
   server: {
     host: true,