new homepage teaser

neuland · May 6, 2024 · 0a78611 · 0a78611
1 parent 4324857
commit 0a78611
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "main": "src/server.js",
   "scripts": {
     "dev": "npm run build && node --watch --es-module-specifier-resolution=node --no-warnings src/server.node.js",
+    "dev:local-images": "USE_LOCAL_IMAGES=true npm run dev",
     "watch": "node esbuild.js --watch",
     "build": "node esbuild.js",
     "lint": "eslint .",
@@ -31,4 +32,4 @@
     "prettier": "^3.2.5",
     "wrangler": "^3.34.0"
   }
-}
+}
diff --git a/public/cdn/img/scene/1000/autonomous.webp b/public/cdn/img/scene/1000/autonomous.webp
diff --git a/public/cdn/img/scene/1000/classics.webp b/public/cdn/img/scene/1000/classics.webp
diff --git a/public/cdn/img/scene/500/autonomous.webp b/public/cdn/img/scene/500/autonomous.webp
diff --git a/public/cdn/img/scene/500/classics.webp b/public/cdn/img/scene/500/classics.webp
diff --git a/public/cdn/img/scene/autonomous.jpg b/public/cdn/img/scene/autonomous.jpg
diff --git a/public/cdn/img/scene/classics.jpg b/public/cdn/img/scene/classics.jpg
diff --git a/public/cdn/img/scene/convert.sh b/public/cdn/img/scene/convert.sh
@@ -0,0 +1,28 @@
+#!/bin/bash
+
+# Directory containing the original PNG images
+input_directory="./full"
+# Array of target widths
+declare -a sizes=(500 1000)
+
+# Iterate through each file in the input directory
+for file in "$input_directory"/*.jpg; do
+    # Extract filename without extension
+    filename=$(basename -- "$file")
+    filename="${filename%.*}"
+
+    # Iterate through each size
+    for size in "${sizes[@]}"; do
+        # Create output directory if it doesn't exist
+        output_directory="./$size"
+        mkdir -p "$output_directory"
+
+        # Define output filename
+        output_file="$output_directory/${filename}.webp"
+
+        # Convert and resize the image
+        convert "$file" -resize "${size}x${size}" - | cwebp -m 6 -q 80 -o "$output_file" -- -
+    done
+done
+
+echo "Conversion completed."
diff --git a/public/cdn/img/scene/full/autonomous.jpg b/public/cdn/img/scene/full/autonomous.jpg
diff --git a/public/cdn/img/scene/full/classics.jpg b/public/cdn/img/scene/full/classics.jpg
diff --git a/src/explore/pages/HomePage.js b/src/explore/pages/HomePage.js
@@ -1,7 +1,7 @@
 import Header from "../components/Header.js";
 import Footer from "../components/Footer.js";
 import Recommendations from "../components/Recommendations.js";
-import { html, IMAGE_SERVER } from "../utils.js";
+import { html, src, srcset } from "../utils.js";
 import Meta from "../components/Meta.js";
 
 /**
@@ -11,6 +11,19 @@ import Meta from "../components/Meta.js";
  * @returns {string} The HomePage component markup.
  */
 export default ({ c }) => {
+  const teaser = [
+    {
+      title: "Classic Tractors",
+      image: "/cdn/img/scene/[size]/classics.webp",
+      url: "/products/classic",
+    },
+    {
+      title: "Autonomous Tractors",
+      image: "/cdn/img/scene/[size]/autonomous.webp",
+      url: "/products/autonomous",
+    },
+  ];
+
   return html`<!doctype html>
     <html>
       <head>
@@ -23,20 +36,20 @@ export default ({ c }) => {
       <body data-boundary="explore-page">
         ${Header({ c })}
         <main class="e_HomePage">
-          <a class="e_HomePage__categoryLink" href="/products/classic"
-            ><img
-              src="${IMAGE_SERVER}/cdn/img/scene/classics.jpg"
-              alt="Classic Tractor"
-            />
-            Classic Tractors
-          </a>
-          <a class="e_HomePage__categoryLink" href="/products/autonomous"
-            ><img
-              src="${IMAGE_SERVER}/cdn/img/scene/autonomous.jpg"
-              alt="Autonomous Tractor"
-            />
-            Autonomous Tractors</a
-          >
+          ${teaser
+            .map(
+              ({ title, image, url }) =>
+                html`<a class="e_HomePage__categoryLink" href="${url}">
+                  <img
+                    src="${src(image, 500)}"
+                    srcet="${srcset(image, [500, 1000])}"
+                    sizes="100vw, (min-width: 500px) 50vw"
+                    alt="${title}"
+                  />
+                  ${title}
+                </a>`,
+            )
+            .join("")}
           <div class="e_HomePage__recommendations">
             ${Recommendations({
               skus: ["CL-01-GY", "AU-07-MT"],