Add vehicle images to variants and paintjobs

Author: Fernando-A-Rocha

web/src/pages/reference/ID_Lists/Vehicle_Paintjobs.astro

@@ -6,6 +6,9 @@ import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
 
 import { Code } from '@astrojs/starlight/components';
 
+import { Image } from 'astro:assets';
+import { getAssetImagePath } from '@src/utils/general';
+
 const paintjobsById = {
   536: { vehicleName: "Blade", paintjobs: [0,1,2] },
   575: { vehicleName: "Broadway", paintjobs: [0,1] },
@@ -41,17 +44,23 @@ luaTable += `\n}\n`;
     <table>
         <thead>
             <tr>
-                <th>Vehicle Name</th>
-                <th>Vehicle ID</th>
+                <th>Vehicle</th>
+                <th>Name</th>
+                <th>ID</th>
                 <th>Paintjobs</th>
             </tr>
         </thead>
         <tbody>
             {Object.entries(paintjobsById).map(([id, { vehicleName, paintjobs }]) => (
                 <tr>
+                    <td><a href={`/reference/ID_Lists/Vehicles#${vehicleName}`}><Image
+                        src={getAssetImagePath(`Vehicles/${id}.png`)}
+                        alt={vehicleName}
+                        class="vehicle-image"
+                    /></a></td>
                     <td>{vehicleName}</td>
                     <td>{id}</td>
-                    <td>{paintjobs.join(', ')}</td>
+                    <td><code>{paintjobs.join(', ')}</code></td>
                 </tr>
             ))}
         </tbody>
@@ -66,3 +75,10 @@ luaTable += `\n}\n`;
         'reference:ID_Lists',
     ])} currentId='' />
 </StarlightPage>
+
+<style>
+    .vehicle-image {
+        width: 80px;
+        height: auto;
+    }
+</style>

web/src/pages/reference/ID_Lists/Vehicle_Variants.astro

@@ -6,6 +6,9 @@ import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
 
 import { Code } from '@astrojs/starlight/components';
 
+import { Image } from 'astro:assets';
+import { getAssetImagePath } from '@src/utils/general';
+
 const variantsById = {
   416: { vehicleName: "Ambulance", variants: "Numbers: 0 = 37, 1 = 71" },
   424: { vehicleName: "BF Injection", variants: "Body: 0 = Side Panels" },
@@ -143,17 +146,23 @@ const luaTable = `local vehicleVariantsByModel = {
     <table>
         <thead>
             <tr>
-                <th>Vehicle Name</th>
-                <th>Vehicle ID</th>
+                <th>Vehicle</th>
+                <th>Name</th>
+                <th>ID</th>
                 <th>Variants</th>
             </tr>
         </thead>
         <tbody>
             {Object.entries(variantsById).map(([id, { vehicleName, variants }]) => (
                 <tr>
+                    <td><a href={`/reference/ID_Lists/Vehicles#${vehicleName}`}><Image
+                        src={getAssetImagePath(`Vehicles/${id}.png`)}
+                        alt={vehicleName}
+                        class="vehicle-image"
+                    /></a></td>
                     <td>{vehicleName}</td>
                     <td>{id}</td>
-                    <td>{variants}</td>
+                    <td><code>{variants}</code></td>
                 </tr>
             ))}
         </tbody>

web/src/pages/reference/ID_Lists/Vehicles.astro

@@ -324,7 +324,7 @@ const vehicles = {
                         <h4 class="vehicle-subcategory-title">{subcategory === 'Uncategorized' ? '' : subcategory}</h4>
                         <div class="vehicle-list">
                         {vehiclesList.map(vehicle => (
-                            <div class="vehicle-item">
+                            <div class="vehicle-item" id={vehicle.name}>
                                 <div class="vehicle-title">{vehicle.name} <code>{vehicle.id}</code></div>
                                 <a target="_blank" href={`http://gta.rockstarvision.com/vehicleviewer/#sa/${vehicle.id}`}>
                                     <Image