Fix public driver thumbnail deplolyment

Author: knro

.github/workflows/deploy-astro.yml

@@ -15,11 +15,24 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: "18"
 
       - name: Install dependencies
         run: npm install
 
+      - name: Copy driver thumbnails to public directory
+        run: |
+          mkdir -p public/images/drivers
+          find src/content/docs -type f -name "*.webp" ! -path "*/images/*" | while read file; do
+            # Extract manufacturer and driver from path
+            # Path format: src/content/docs/category/manufacturer/driver/driver.webp
+            manufacturer=$(echo "$file" | cut -d'/' -f5)
+            driver=$(basename "$file" .webp)
+            mkdir -p "public/images/drivers/$manufacturer"
+            cp "$file" "public/images/drivers/$manufacturer/$driver.webp"
+            echo "Copied: $file -> public/images/drivers/$manufacturer/$driver.webp"
+          done
+
       - name: Build Astro project
         run: npm run build
 

.gitignore

@@ -2,6 +2,8 @@
 dist/
 # generated types
 .astro/
+# public driver images
+public/images/drivers/*
 
 # dependencies
 node_modules/

.vscode/tasks.json

@@ -0,0 +1,27 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Copy Thumbnails to Public",
+      "type": "shell",
+      "command": "mkdir -p public/images/drivers && find src/content/docs -type f -name '*.webp' ! -path '*/images/*' | while read file; do manufacturer=$(echo \"$file\" | cut -d'/' -f5); driver=$(basename \"$file\" .webp); mkdir -p \"public/images/drivers/$manufacturer\"; cp \"$file\" \"public/images/drivers/$manufacturer/$driver.webp\"; echo \"Copied: $file -> public/images/drivers/$manufacturer/$driver.webp\"; done",
+      "problemMatcher": [],
+      "presentation": {
+        "reveal": "always",
+        "panel": "new"
+      }
+    },
+    {
+      "label": "Build (with thumbnails)",
+      "dependsOn": ["Copy Thumbnails to Public"],
+      "dependsOrder": "sequence",
+      "type": "shell",
+      "command": "npm run build",
+      "problemMatcher": [],
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

src/pages/[category]/[manufacturer].astro

@@ -93,13 +93,12 @@ const driversByManufacturer = allDrivers.filter((driver) => {
       driversByManufacturer.map((driver) => {
         const driverPath = `/${slugify(driver.id.replace(/\.md$/, ""))}`;
 
-        // Construct path to co-located thumbnail
+        // Construct path to thumbnail in public directory
         // driver.id is like "rotators/moon-lite/night-crawler-rotator-and-focuser/night-crawler-rotator-and-focuser.md"
         const driverParts = driver.id.split("/");
-        const actualCategorySlug = driverParts[0]; // Get actual file location category
         const manufacturerSlug = driverParts[1]; // Get "moon-lite"
         const driverSlug = driverParts[2]; // Get "night-crawler-rotator-and-focuser"
-        const thumbnailPath = `/src/content/docs/${actualCategorySlug}/${manufacturerSlug}/${driverSlug}/${driverSlug}.webp`;
+        const thumbnailPath = `/images/drivers/${manufacturerSlug}/${driverSlug}.webp`;
 
         return (
           <a href={driverPath} class="driver-box">